starting table

src/bin/BinTransactions.tsx

@@ -1,8 +1,10 @@
 import { Box } from "@mui/material";
+import ResponsiveTable from "common/ResponsiveTable";
 import { Bin } from "models";
+import { Transaction } from "models/Transaction";
 import { pond } from "protobuf-ts/pond";
 import { useTransactionAPI } from "providers";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 interface Props {
   bin: Bin
@@ -12,17 +14,30 @@ export default function BinTransactions(props: Props){
   const { bin } = props
   const [state, setState] = useState<pond.TransactionState>(pond.TransactionState.TRANSACTION_STATE_PENDING)
   const transactionAPI = useTransactionAPI()
+  const [transactions, setTransactions] = useState<Transaction[]>([])
 
-  useEffect(()=>{
+  const load = useCallback(()=>{
     // load transactions for bin with matching state (pending is default)
-    transactionAPI.listTransactionsFor(10, 0, "asc", bin.key()).then(resp => {
+    transactionAPI.listTransactionsFor(10, 0, "asc", bin.key(), state).then(resp => {
       console.log(resp)
     })
   },[state, bin])
   
+  useEffect(()=>{
+    load()
+  },[state, bin, load])
+
+  // dialog for approving a transaction
+
   return (
     <Box>
-      {/*  */}
+      {/* dropdown for transaction state */}
+
+      {/* table to display transactions */}
+      {/* <ResponsiveTable<Transaction>
+
+        rows={transactions}
+      /> */}
     </Box>
   )
 }

src/bin/graphs/BinGraphs.tsx

@@ -285,7 +285,9 @@ export default function BinGraphs(props: Props) {
         <Box>
           <BinWaterLevel
             bin={bin}
-            range={{ start: startDate, end: endDate }}
+            // range={{ start: startDate, end: endDate }}
+            start={startDate.toISOString()}
+            end={endDate.toISOString()}
             plenumKey={componentDevices.get(plenums[0].key()) + ":" + plenums[0].key()}
             cableKey={componentDevices.get(moistureCables[0].key()) + ":" + moistureCables[0].key()}
             pressureKey={componentDevices.get(pressures[0].key()) + ":" + pressures[0].key()}

src/bin/graphs/BinWaterLevel.tsx

@@ -9,7 +9,9 @@ import React, { useEffect, useState } from "react";
 
 interface Props {
   bin: Bin;
-  range: DateRange;
+  // range: DateRange;
+  start: string,
+  end: string,
   plenumKey: string;
   cableKey: string;
   pressureKey: string;
@@ -23,7 +25,9 @@ interface Props {
 export default function BinWaterLevel(props: Props) {
   const {
     bin,
-    range,
+    //range,
+    start,
+    end,
     plenumKey,
     cableKey,
     pressureKey,
@@ -63,8 +67,8 @@ export default function BinWaterLevel(props: Props) {
         binAPI
           .listBinLiters(
             bin.key(),
-            range.start.toISOString(),
+            start,
-            range.end.toISOString(),
+            end,
             grainMoisture,
             //(note: the variable needs to be the device the component belongs to and then the component key ie. "10:LTe7Q1sT5g65")
             plenumKey,
@@ -94,7 +98,7 @@ export default function BinWaterLevel(props: Props) {
           });
       }
     }
-  }, [binAPI, range, bin, grainMoisture, plenumKey, cableKey, pressureKey, as]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [binAPI, start, end, bin, grainMoisture, plenumKey, cableKey, pressureKey, as]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <React.Fragment>