working paths

rwat17 · Feb 15, 2024 · f9af0a9 · f9af0a9
1 parent 1694401
commit f9af0a9
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 1,206 deletions.
diff --git a/packages/cacti-ledger-browser-react/src/components/CardWrapper/CardWrapper.tsx b/packages/cacti-ledger-browser-react/src/components/CardWrapper/CardWrapper.tsx
@@ -7,12 +7,15 @@ import Pagination from "../Pagination/Pagination";
 import EmptyTablePlaceholder from "../UI/CustomTable/EmptyTablePlaceholder/EmptyTablePlaceholder";
 import styles from "./CardWrapper.module.css";
 
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 
 const pageSize: number = 6;
 
 function CardWrapper(props) {
+  const location = useLocation();
+  const path = location.pathname.split("/");
+
   const navigate = useNavigate();
   const [searchKey, setSearchKey] = useState("");
   const [filteredData, setFilteredData] = useState<any[]>([]);
@@ -63,7 +66,7 @@ function CardWrapper(props) {
 
   useEffect(() => {
     setFilteredData(props.data);
-  });
+  }, [filterData, props.data]);
 
   useEffect(() => {
     const screenResized = () =>
@@ -73,7 +76,7 @@ function CardWrapper(props) {
     return () => {
       window.removeEventListener("resize", screenResized, true);
     };
-  });
+  }, [paginatedData]);
 
   useEffect(() => {
     if (filteredData.length <= pageSize) {
@@ -82,12 +85,12 @@ function CardWrapper(props) {
       const firstEl = currentPage * pageSize - pageSize;
       setPaginatedData(filteredData.slice(firstEl, firstEl + pageSize));
     }
-  });
+  }, [currentPage, filteredData, filteredData.length, paginatedData]);
 
   useEffect(() => {
     const pageNum = Math.ceil(filteredData.length / pageSize);
     setTotalPages(pageNum);
-  });
+  }, [totalPages, filteredData.length]);
 
   return (
     <section
@@ -102,7 +105,7 @@ function CardWrapper(props) {
         {props.trimmed && viewport === "small" && (
           <Button
             type={"primary"}
-            onClick={() => navigate(`/eth/${props.title.toLowerCase()}`)}
+            onClick={() => navigate(`/${path[1]}/${props.title.toLowerCase()}`)}
           >
             View all
           </Button>
@@ -129,7 +132,7 @@ function CardWrapper(props) {
         {props.trimmed && viewport === "wide" && (
           <Button
             type={"primary"}
-            onClick={() => navigate(`/eth/${props.title.toLowerCase()}`)}
+            onClick={() => navigate(`/${path[1]}/${props.title.toLowerCase()}`)}
           >
             View all
           </Button>

diff --git a/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.tsx b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.tsx
@@ -4,8 +4,11 @@ import EmptyTablePlaceholder from "./EmptyTablePlaceholder/EmptyTablePlaceholder
 // @ts-expect-error
 import styles from "./CustomTable.module.css";
 import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 
 function CustomTable(props) {
+
+
   const [viewport, setViewport] = useState("");
 
   useEffect(() => {
@@ -16,7 +19,7 @@ function CustomTable(props) {
     return () => {
       window.removeEventListener("resize", screenResized, true);
     };
-  });
+  }, [viewport]);
 
   const getObjPropVal = (objProp: string[], row: any) => {
     if (objProp.length === 1) return row[objProp[0]];
@@ -70,14 +73,14 @@ function CustomTable(props) {
               {props.data.map((row) => {
                 return (
                   <table
-                    class={styles["table-rwd"]}
+                    className={styles["table-rwd"]}
                     onClick={() => handleRowClick(row)}
                   >
                     <tbody>
                       {props.cols.schema.map((heading, idx) => {
                         return (
                           <tr>
-                            <td class={styles["table-rwd-heading"]}>
+                            <td className={styles["table-rwd-heading"]}>
                               {heading.display}
                             </td>
                             <td>

diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.tsx b/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.tsx
@@ -13,11 +13,11 @@ import Button from "../Button/Button";
 
 const ledgersPaths = {
   eth: [
-    { title: "DASHBOARD", path: "/eth/dashboard" },
+    { title: "DASHBOARD", path: "/eth/dashboard", },
     { title: "ERC20", path: "/eth/accounts/erc20" },
     { title: "NFT ERC721", path: "/eth/accounts/erc721" },
   ],
-  fabric: [{ title: "DASHBOARD", path: "/fabric/dashboard" }],
+  fabric: [{ title: "DASHBOARD", path: "/fabric/dashboard", basePath: "/eth" }],
 };
 
 function Menu() {
@@ -60,7 +60,6 @@ function Menu() {
       <Select
         value={activeLedger}
         onSelect={(val: string) => {
-          // console.log("xddd");
           handleSelect(val);
         }}
       />

diff --git a/packages/cacti-ledger-browser-react/src/main.tsx b/packages/cacti-ledger-browser-react/src/main.tsx
@@ -63,7 +63,6 @@ const router = createBrowserRouter([
                 path: ":standard",
                 element: (
                   <div>
-                    eth/accounts/:standard path
                     <Accounts></Accounts>
                   </div>
                 ),
@@ -79,7 +78,6 @@ const router = createBrowserRouter([
                 path: ":number",
                 element: (
                   <div>
-                    eth/block-detail/:number path
                     <BlockDetails></BlockDetails>
                   </div>
                 ),
@@ -100,7 +98,6 @@ const router = createBrowserRouter([
                 path: ":standard/:address",
                 element: (
                   <div>
-                    eth/token-txn-details/:standard/:address path
                     <TokenTransactionDetails></TokenTransactionDetails>
                   </div>
                 ),
@@ -121,7 +118,6 @@ const router = createBrowserRouter([
                 path: ":standard/:address",
                 element: (
                   <div>
-                    eth/token-detail/:standard/:address path
                     <TokenDetails></TokenDetails>
                   </div>
                 ),
@@ -133,7 +129,6 @@ const router = createBrowserRouter([
             path: "txn-details",
             element: (
               <div>
-                txn-detail
                 <Outlet></Outlet>
               </div>
             ),
@@ -142,7 +137,6 @@ const router = createBrowserRouter([
                 path: ":id",
                 element: (
                   <div>
-                    eth/txn-detail/:id path
                     <TransactionDetails></TransactionDetails>
                   </div>
                 ),
@@ -154,15 +148,14 @@ const router = createBrowserRouter([
             path: "erc20",
             element: (
               <div>
-                eth/erc20 path <Outlet></Outlet>
+                <Outlet></Outlet>
               </div>
             ),
             children: [
               {
                 path: ":account",
                 element: (
                   <div>
-                    eth/erc20/:account path
                     <ERC20></ERC20>
                   </div>
                 ),
@@ -171,7 +164,6 @@ const router = createBrowserRouter([
                 path: "trend/:account/:address",
                 element: (
                   <div>
-                    trend/:account/:address path
                     <SingleTokenHistory></SingleTokenHistory>
                   </div>
                 ),
@@ -182,15 +174,14 @@ const router = createBrowserRouter([
             path: "erc721",
             element: (
               <div>
-                eth/erc721 path <Outlet></Outlet>
+                <Outlet></Outlet>
               </div>
             ),
             children: [
               {
                 path: ":account",
                 element: (
                   <div>
-                    eth/erc721/:account path
                     <ERC721></ERC721>
                   </div>
                 ),
@@ -208,7 +199,6 @@ const router = createBrowserRouter([
             path: "dashboard",
             element: (
               <div>
-                <p>/dashboard</p>
                 <DashFabric></DashFabric>
               </div>
             ),
@@ -217,7 +207,6 @@ const router = createBrowserRouter([
             path: "transactions",
             element: (
               <div>
-                transactions
                 <TransactionsFabric></TransactionsFabric>
               </div>
             ),
@@ -226,7 +215,6 @@ const router = createBrowserRouter([
             path: "blocks",
             element: (
               <div>
-                blocks
                 <BlocksFabric></BlocksFabric>
               </div>
             ),
@@ -243,7 +231,7 @@ const router = createBrowserRouter([
                 path: ":id",
                 element: (
                   <div>
-                    txn-details/:id
+
                     <FabricTransaction></FabricTransaction>
                   </div>
                 ),

diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.tsx
@@ -51,7 +51,7 @@ const ERC20 = () => {
   useEffect(() => {
     fetchERC20();
   }, []);
-  console.log("token_erc20", token_erc20);
+
   return (
     <div className={styles["erc-content"]}>
       <div className={styles["erc-wrap"]}>