added bintransactions component and function for the transaction api to get transaction involving a given object

package-lock.json

@@ -10864,7 +10864,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#ed840d3bdb39b1d1bfeb0edbc4404354709f0dfa",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#786abf5b2b15501ee3afb7c3d60c638dc4cc9851",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/bin/BinTransactions.tsx

@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+import { Bin } from "models";
+import { pond } from "protobuf-ts/pond";
+import { useEffect, useState } from "react";
+
+interface Props {
+  bin: Bin
+}
+
+export default function BinTransactions(props: Props){
+  const { bin } = props
+  const [state, setState] = useState<pond.TransactionState>(pond.TransactionState.TRANSACTION_STATE_PENDING)
+  
+  useEffect(()=>{
+    // load transactions for bin with matching state (pending is default)
+    
+  },[state, bin])
+
+  return (
+    <Box>
+      {/*  */}
+    </Box>
+  )
+}

src/pages/Bin.tsx

@@ -67,6 +67,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Controller } from "models/Controller";
 import TaskViewer from "tasks/TaskViewer";
 import ButtonGroup from "common/ButtonGroup";
+import BinTransactions from "bin/BinTransactions";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -195,7 +196,7 @@ export default function Bin(props: Props) {
   const [heaters, setHeaters] = useState<Controller[]>([]);
   const [fans, setFans] = useState<Controller[]>([]);
   const [detail, setDetail] = useState<
-    "inventory" | "sensors" | "analytics" | "presets" | "alerts"
+    "inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions"
   >("inventory");
   const [mobileTab, setMobileTab] = useState(0);
   const componentAPI = useComponentAPI();
@@ -886,6 +887,10 @@ export default function Bin(props: Props) {
                   {
                     title: "Presets",
                     function: () => setDetail("presets")
+                  },
+                  {
+                    title: "Transactions",
+                    function: () => setDetail("transactions")
                   }
                 ]}
               />
@@ -963,6 +968,9 @@ export default function Bin(props: Props) {
                 compositionNameMap={compositionNameMap}
               />
             )}
+            {detail === "transactions" &&
+              <BinTransactions bin={bin}/>
+            }
           </Grid>
         </Grid>
       </Card>

src/providers/pond/transactionAPI.tsx

@@ -4,6 +4,7 @@ import { pond } from "protobuf-ts/pond";
 import { pondURL } from "./pond";
 import { AxiosResponse } from "axios";
 import { useGlobalState } from "providers";
+import { or } from "utils";
 
 export interface ITransactionAPIContext {
   addTransaction: (
@@ -25,6 +26,14 @@ export interface ITransactionAPIContext {
     toKey?: string,
     otherTeam?: string
   ) => Promise<AxiosResponse<pond.ListTransactionsResponse>>;
+  listTransactionsFor: (
+    limit: number,
+    offset: number,
+    order: "asc" | "desc",
+    objectKey: string,
+    state?: pond.TransactionState,
+    otherTeam?: string
+  ) => Promise<AxiosResponse<pond.ListTransactionsForResponse>>
   revokeTransaction: (key: string, otherTeam?: string) => Promise<AxiosResponse<pond.RevokeTransactionResponse>>;
   updateTransaction: (
     key: string,
@@ -88,6 +97,35 @@ export default function TransactionProvider(props: PropsWithChildren<Props>) {
     );
   };
 
+  const listTransactionsFor = (
+    limit: number,
+    offset: number,
+    order: "asc" | "desc",
+    objectKey: string,
+    state?: pond.TransactionState,
+    otherTeam?: string
+  ) => {
+    const view = otherTeam ? otherTeam : as
+    const url = "/transactionsFor" +
+    "?limit=" +
+    limit +
+    "&offset=" +
+    offset +
+    ("&order=" + or(order, "asc")) +
+    "&object=" + objectKey +
+    (state ? "&state=" + state : "") +
+    (view ? "&as=" + view : "")
+
+    return new Promise<AxiosResponse<pond.ListTransactionsForResponse>>((resolve, reject)=>{
+      get<pond.ListTransactionsForResponse>(pondURL(url)).then(resp => {
+        resp.data = pond.ListTransactionsForResponse.fromObject(resp.data)
+        return resolve(resp)
+      }).catch(err => {
+        return reject(err)
+      })
+    })
+  }
+
   const updateTransaction = (key: string, data: pond.TransactionData, otherTeam?: string) => {
     const view = otherTeam ? otherTeam : as
     if (view)
@@ -125,6 +163,7 @@ export default function TransactionProvider(props: PropsWithChildren<Props>) {
       value={{
         addTransaction,
         listTransactions,
+        listTransactionsFor,
         updateTransaction,
         transactionPageData,
         revokeTransaction