adding the transaction page

src/transactions/transactionDataDisplay.tsx

@@ -0,0 +1,42 @@
+import { Box, Typography } from "@mui/material";
+import GrainDescriber from "grain/GrainDescriber";
+import { Transaction } from "models/Transaction";
+import { pond } from "protobuf-ts/pond";
+import React from "react";
+import { getGrainUnit } from "utils";
+
+interface Props {
+  transaction: Transaction;
+}
+
+export default function TransactionDataDisplay(props: Props) {
+  const { transaction } = props;
+
+  const display = () => {
+    let transactionData = transaction.transaction.transaction;
+    if (transactionData) {
+      if (transactionData.grainTransaction) {
+        let gt = transactionData.grainTransaction;
+        return (
+          <Box>
+            <Typography>
+              Grain:{" "}
+              {gt.grainType === pond.Grain.GRAIN_CUSTOM
+                ? gt.customGrain
+                : GrainDescriber(gt.grainType).name}
+            </Typography>
+            <Typography>Variant: {gt.subtype}</Typography>
+            <Typography>
+              {getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT && gt.bushelsPerTonne > 1
+                ? "Weight: " + gt.bushels / gt.bushelsPerTonne + " mT"
+                : "Bushels: " + gt.bushels}
+            </Typography>
+            <Typography>Message: {gt.message}</Typography>
+          </Box>
+        );
+      }
+    }
+  };
+
+  return <React.Fragment>{display()}</React.Fragment>;
+}

src/transactions/transactionViewer.tsx

@@ -0,0 +1,124 @@
+import { Box, Typography } from "@mui/material";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
+import { cloneDeep } from "lodash";
+//import { getTableIcons } from "common/ResponsiveTable";
+//import MaterialTable, { Column, MTableToolbar } from "material-table";
+import { Transaction } from "models/Transaction";
+import moment from "moment";
+import ObjectDescriber from "objects/ObjectDescriber";
+import React, { useEffect, useState } from "react";
+import TransactionDataDisplay from "./transactionDataDisplay";
+
+interface Props {
+  transactions: Transaction[];
+  loading?: boolean;
+  objectNames?: Map<string, string>;
+}
+
+export default function TransactionViewer(props: Props) {
+  const { transactions, loading, objectNames } = props;
+  const [displayedRows, setDisplayedRows] = useState<Transaction[]>([])
+  const [tablePage, setTablePage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+
+  useEffect(()=>{
+    // let rows: Transaction[] = []
+    // transactions.forEach((transaction, index) => {
+    //   if (index >= tablePage * pageSize && index < (tablePage + 1) * pageSize){
+    //     rows.push(transaction)
+    //   }
+    // })
+    let clone: Transaction[] = cloneDeep(transactions)
+    let rows = clone.splice(tablePage * pageSize, pageSize)
+    console.log(transactions)
+    console.log(rows)
+    setDisplayedRows(rows)
+  },[transactions, tablePage, pageSize])
+
+  const columns: Column<Transaction>[] = [
+    {
+      title: "Date",
+      render: row => {
+        return <Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>;
+      }
+    },
+    {
+      title: "From",
+      render: row => {
+        return (
+          <React.Fragment>
+            <Typography>{ObjectDescriber(row.transaction.fromObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.fromKey) : row.transaction.fromKey}
+            </Typography>
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: "To",
+      render: row => {
+        return (
+          <React.Fragment>
+            <Typography>{ObjectDescriber(row.transaction.toObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.toKey) : row.transaction.toKey}
+            </Typography>
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: "Transaction",
+      render: row => {
+        return <TransactionDataDisplay transaction={row} />;
+      }
+    }
+  ];
+
+  const myTable = () => {
+    return (
+      <ResponsiveTable<Transaction>
+        page={tablePage}
+        pageSize={pageSize}
+        rows={displayedRows}
+        total={transactions.length}
+        setPage={page => setTablePage(page)}
+        handleRowsPerPageChange={() => {}}
+      />
+    )
+    // return (
+    //   <MaterialTable
+    //     isLoading={loading}
+    //     key="devicesList"
+    //     icons={getTableIcons()}
+    //     columns={columns}
+    //     data={transactions}
+    //     options={{
+    //       paging: true,
+    //       pageSize: 10,
+    //       pageSizeOptions: [5, 10, 20],
+    //       padding: "dense",
+    //       showTitle: true,
+    //       toolbar: true,
+    //       sorting: true,
+    //       columnsButton: true,
+    //       search: false
+    //     }}
+    //     localization={{
+    //       body: { emptyDataSourceMessage: loading ? "" : "No Transactions found" }
+    //     }}
+    //     components={{
+    //       Toolbar: props => (
+    //         <React.Fragment>
+    //           <MTableToolbar {...props} />
+    //         </React.Fragment>
+    //       )
+    //     }}
+    //     title="Inventory Transactions"
+    //   />
+    // );
+  };
+
+  return <Box>{myTable()}</Box>;
+}