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()
-  
-  useEffect(()=>{
+  const [transactions, setTransactions] = useState<Transaction[]>([])
+
+  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>
   )
 }