Improved Home

packages/react-app/package.json

@@ -92,6 +92,7 @@
     "react-qr-reader": "^2.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-table": "^7.7.0",
     "searchico": "^1.2.1",
     "uint8arrays": "^3.0.0",
     "walletlink": "^2.1.5",

packages/react-app/src/App.jsx

@@ -204,7 +204,7 @@ function App(props) {
   let provider;
   useEffect(async () => {
     const onboard = Onboard({
-      networkId: 5,
+      networkId: Number(process.env.REACT_APP_CHAINID),
       dappId: BLOCKNATIVE_DAPPID,
       walletSelect: {
         wallets: [

packages/react-app/src/routes/home/Home.jsx

@@ -5,7 +5,7 @@ import { useColorModeValue } from "@chakra-ui/color-mode";
 import { Wrap, WrapItem, Stack, Center } from "@chakra-ui/react";
 import React, { useEffect, useState, useMemo } from "react";
 import { useHistory, Link } from "react-router-dom";
-import { PartyCard, EmptyCard } from "./components";
+import { PartyCard, EmptyCard, PartyTable } from "./components";
 
 function Home({ address, mainnetProvider, tx, readContracts, writeContracts, targetNetwork }) {
   /***** Load Data from db *****/
@@ -55,7 +55,8 @@ function Home({ address, mainnetProvider, tx, readContracts, writeContracts, tar
         </Button>
       </HStack>
       <Center>
-        <Stack>{cards && cards.length > 0 ? cards : <EmptyCard />}</Stack>
+        {/* <Stack>{cards && cards.length > 0 ? cards : <EmptyCard />}</Stack> */}
+      <PartyTable parties={data} />
       </Center>
     </Box>
   );

packages/react-app/src/routes/home/components/PartyTable.jsx

@@ -0,0 +1,122 @@
+import { Table, Thead, Tbody, Tr, Th, Td, chakra, Spinner, Box, Button, Text } from "@chakra-ui/react";
+import { TriangleDownIcon, TriangleUpIcon } from "@chakra-ui/icons";
+import { useTable, useSortBy, usePagination } from "react-table";
+import React, { useEffect, useState, useMemo } from "react";
+import { useHistory, Link } from "react-router-dom";
+
+export const PartyTable = ({ parties }) => {
+  const routeHistory = useHistory();
+  const [isLoading, setIsLoading] = useState(true);
+  const data = useMemo(() => {
+    console.log(parties);
+    if (parties) {
+      setIsLoading(false);
+
+      return parties;
+    } else {
+      setIsLoading(true);
+      return [];
+    }
+  }, [parties]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: "Name",
+        accessor: ({ name }) => (
+          <Text fontSize="lg" fontWeight="semibold" isTruncated minW="10vw" maxW="28vw">
+            {name}
+          </Text>
+        ),
+      },
+      {
+        Header: "Description",
+        accessor: ({ description }) => (
+          <Text isTruncated minW="10vw" maxW="20vw">
+            {description}
+          </Text>
+        ),
+      },
+      {
+        Header: " ",
+        accessor: ({ id }) => {
+          return (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                routeHistory.push(`/party/${id}`);
+              }}
+            >
+              View
+            </Button>
+          );
+        },
+      },
+    ],
+    [isLoading],
+  );
+
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      columns,
+      data,
+      initialState: {
+        sortBy: [
+          {
+            desc: false,
+          },
+        ],
+      },
+    },
+    useSortBy,
+    usePagination,
+  );
+
+  return !isLoading ? (
+    <Box borderWidth="1px" borderRadius={24} p={6} shadow="xl">
+      <Box borderWidth="1px">
+        <Table {...getTableProps()} maxW="calc(100%)">
+          <Thead>
+            {headerGroups.map(headerGroup => (
+              <Tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map(column => (
+                  <Th {...column.getHeaderProps(column.getSortByToggleProps())} isNumeric={column.isNumeric}>
+                    {column.render("Header")}
+                    <chakra.span pl="4">
+                      {column.isSorted ? (
+                        column.isSortedDesc ? (
+                          <TriangleDownIcon aria-label="sorted descending" />
+                        ) : (
+                          <TriangleUpIcon aria-label="sorted ascending" />
+                        )
+                      ) : null}
+                    </chakra.span>
+                  </Th>
+                ))}
+              </Tr>
+            ))}
+          </Thead>
+          <Tbody {...getTableBodyProps()}>
+            {rows.map(row => {
+              prepareRow(row);
+              return (
+                <Tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <Td {...cell.getCellProps()} isNumeric={cell.column.isNumeric}>
+                        {cell.render("Cell")}
+                      </Td>
+                    );
+                  })}
+                </Tr>
+              );
+            })}
+          </Tbody>
+        </Table>
+      </Box>
+    </Box>
+  ) : (
+    <Spinner />
+  );
+};

packages/react-app/src/routes/home/components/index.js

@@ -1,2 +1,3 @@
 export { EmptyCard } from "./EmptyCard";
 export { PartyCard } from "./PartyCard";
+export { PartyTable } from "./PartyTable";

yarn.lock

@@ -21944,6 +21944,11 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
+react-table@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
+
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz"