Merge pull request #166 from rayanfer32/fix/account-txns

rayanfer32 · Apr 24, 2022 · 39b987b · 39b987b
2 parents 72b47cd + 421c7ab
commit 39b987b
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 110 deletions.
diff --git a/src/components/Table/DynamicPagination.jsx b/src/components/Table/DynamicPagination.jsx
@@ -120,4 +120,4 @@ export default function DynamicPagination({ controls }) {
       </div>
     </>
   );
-}
+}
diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
@@ -1,12 +1,23 @@
 import Table from 'components/Table/Table';
 import styles from './TransactionDetails.module.scss';
 import Loader from 'components/atoms/NE_Loader';
+import { useNetwork } from 'hooks/useNetwork/useNetwork';
+import CopyText from 'components/atoms/NE_CopyText/CopyText';
+import { useQuery } from 'react-query';
+import TYPES from 'types';
+import { useEffect, useState } from 'react';
+import DynamicPagination from 'components/Table/DynamicPagination';
+import ErrorMessage from 'components/atoms/ErrorMessage';
+
+export const TransactionDetails = ({ type, data }) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [pageCount, setPageCount] = useState(Infinity);
+
+  const [tableData, setTableData] = useState([]);
+  const { network, getAccountTransactions, getTrustTransactions } =
+    useNetwork();
 
-export const TransactionDetails = ({
-  isLoading = false,
-  columns,
-  data = [],
-}) => {
   const LoaderDiv = () => (
     <div
       style={{
@@ -18,7 +29,120 @@ export const TransactionDetails = ({
       <Loader type="circle" size="5rem" />
     </div>
   );
+
+  const accountTransactionsRQ = useQuery(
+    [
+      'accountTransactions',
+      type,
+      data.address,
+      pageIndex,
+      pageSize,
+      network.name,
+    ],
+    () =>
+      type == 'user'
+        ? getAccountTransactions(data.address, pageIndex, pageSize)
+        : getTrustTransactions(data.address, pageIndex, pageSize),
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      enable: false,
+    }
+  );
+
+  // * columns for the txns table
+  const columns = [
+    {
+      Header: 'Time',
+      accessor: 'timestamp',
+      Cell: (props) => {
+        return <div>{new Date(props.value * 1000).toLocaleString()}</div>;
+      },
+    },
+    {
+      Header: 'TXID',
+      accessor: 'txid',
+      Cell: (props) => {
+        return <CopyText value={props.value} />;
+      },
+    },
+    {
+      Header: 'Operation',
+      accessor: 'operation',
+    },
+    {
+      Header: 'Amount',
+      accessor: 'amount',
+      Cell: (props) => {
+        let cellColor = 'var(--theme-page-text)';
+        let sign = '+';
+        if (
+          ['CREDIT', 'CREATE', 'TRUST'].includes(props.row.values.operation)
+        ) {
+          cellColor = TYPES.COLORS.MARKET_GREEN;
+          sign = '+';
+        } else if (['DEBIT', 'FEE'].includes(props.row.values.operation)) {
+          cellColor = TYPES.COLORS.MARKET_RED;
+          sign = '-';
+        }
+        return (
+          <div className={styles.amount} style={{ background: cellColor }}>
+            {sign} {props.value}
+          </div>
+        );
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (accountTransactionsRQ.data) {
+      let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
+        return {
+          txid: txn.txid,
+          timestamp: txn.timestamp,
+          operation: txn.contracts[0].OP,
+          amount: `${txn.contracts[0].amount || 0} ${
+            txn.contracts[0].ticker || ''
+          }`,
+        };
+      });
+
+      setTableData(_tableData);
+    }
+  }, [accountTransactionsRQ.data]);
+
+  const dynamicPageControls = {
+    canPreviousPage: pageIndex > 0,
+    canNextPage: pageIndex < pageCount - 1,
+    pageCount: pageCount,
+    pageIndex: pageIndex,
+    pageSize: pageSize,
+    gotoPage: (pageIndex) => {
+      setPageIndex(pageIndex);
+    },
+    setPageSize: (pageSize) => {
+      setPageIndex(0);
+      setPageSize(pageSize);
+    },
+  };
+
+  if (accountTransactionsRQ.isLoading) {
+    return <LoaderDiv />;
+  }
+
   return (
-    <>{isLoading ? <LoaderDiv /> : <Table columns={columns} data={data} />}</>
+    <div className={styles.page} style={{ marginBottom: '1rem' }}>
+      <Table
+        columns={columns}
+        data={accountTransactionsRQ.data?.error ? [] : tableData}
+        paginate={false}
+      />
+      <div style={{ marginBottom: '1rem' }}>
+        <DynamicPagination controls={dynamicPageControls} />
+      </div>
+      {accountTransactionsRQ.data?.error && (
+        <ErrorMessage error={accountTransactionsRQ.data.error} />
+      )}
+    </div>
   );
 };
diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss b/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss
@@ -0,0 +1,10 @@
+.page {
+  color: var(--theme-page-text);
+}
+
+.amount {
+  color: var(--white);
+  font-weight: 'bold';
+  border-radius: var(--space-xxxs);
+  padding: var(--space-xxxs) var(--space-xxs);
+}
diff --git a/src/components/UserAccount/UserAccount.jsx b/src/components/UserAccount/UserAccount.jsx
@@ -12,104 +12,62 @@ import { toTitleCase } from 'utils/converter';
 import { isDev } from 'utils/middleware';
 
 export default function UserAccount({ type, data }) {
-  const [showRawTxns, setShowRawTxns] = useState(false);
-  const [tableData, setTableData] = useState([]);
+  // const [showRawTxns, setShowRawTxns] = useState(false);
+  // const [tableData, setTableData] = useState([]);
 
-  const { network, getAccountTransactions, getTrustTransactions } =
-    useNetwork();
-  const accountTransactionsRQ = useQuery(
-    ['accountTransactions', network.name, type],
-    () =>
-      type == 'user'
-        ? getAccountTransactions(data)
-        : getTrustTransactions(data),
-    {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      enable: false,
-    }
-  );
-
-  useEffect(() => {
-    // temp fix for the issue where the query is not re-run when the component is re-rendered
-    setTimeout(() => accountTransactionsRQ.refetch(), 2000);
-  }, []);
+  // const { network, getAccountTransactions, getTrustTransactions } =
+  //   useNetwork();
+  // const accountTransactionsRQ = useQuery(
+  //   ['accountTransactions', network.name, type],
+  //   () =>
+  //     type == 'user'
+  //       ? getAccountTransactions(data)
+  //       : getTrustTransactions(data),
+  //   {
+  //     refetchOnMount: false,
+  //     refetchOnWindowFocus: false,
+  //     enable: false,
+  //   }
+  // );
 
-  useEffect(() => {
-    // temp fix for the issue where the query is not re-run when the component is re-rendered
-    accountTransactionsRQ.refetch();
-  }, [data.address]);
+  // useEffect(() => {
+  //   // ! temp fix for the issue where the query is not re-run when the component is re-rendered
+  //   setTimeout(() => accountTransactionsRQ.refetch(), 2000);
+  // }, []);
 
-  // columns for the txns table
-  const columns = [
-    {
-      Header: 'Time',
-      accessor: 'timestamp',
-      Cell: (props) => {
-        return <div>{new Date(props.value * 1000).toLocaleString()}</div>;
-      },
-    },
-    {
-      Header: 'TXID',
-      accessor: 'txid',
-      Cell: (props) => {
-        return <CopyText value={props.value} />;
-      },
-    },
-    {
-      Header: 'Operation',
-      accessor: 'operation',
-    },
-    {
-      Header: 'Amount',
-      accessor: 'amount',
-      Cell: (props) => {
-        let fontColor = 'var(--theme-page-text)';
-        let sign = '+';
-        if (['CREDIT', 'CREATE', 'TRUST'].includes(props.row.values.operation)) {
-          fontColor = TYPES.COLORS.MARKET_GREEN;
-          sign = '+';
-        } else if (['DEBIT', 'FEE'].includes(props.row.values.operation)) {
-          fontColor = 'red';
-          sign = '-';
-        }
-        return (
-          <div className={styles.amount} style={{ background: fontColor }}>
-            {sign} {props.value}
-          </div>
-        );
-      },
-    },
-  ];
+  // useEffect(() => {
+  //   // ! temp fix for the issue where the query is not re-run when the component is re-rendered
+  //   accountTransactionsRQ.refetch();
+  // }, [data.address]);
 
-  useEffect(() => {
-    if (accountTransactionsRQ.data) {
-      let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
-        return {
-          txid: txn.txid,
-          timestamp: txn.timestamp,
-          operation: txn.contracts[0].OP,
-          amount: `${txn.contracts[0].amount || 0} NXS`,
-        };
-      });
+  // useEffect(() => {
+  //   if (accountTransactionsRQ.data) {
+  //     let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
+  //       return {
+  //         txid: txn.txid,
+  //         timestamp: txn.timestamp,
+  //         operation: txn.contracts[0].OP,
+  //         amount: `${txn.contracts[0].amount || 0} NXS`,
+  //       };
+  //     });
 
-      setTableData(_tableData);
-    }
-  }, [accountTransactionsRQ.data]);
+  //     setTableData(_tableData);
+  //   }
+  // }, [accountTransactionsRQ.data]);
 
-  const rawInfo = () => (
-    <>
-      <Button type="tertiary" onClick={() => setShowRawTxns((prev) => !prev)}>
-        Show RAW Transactions
-      </Button>
+  // const rawInfo = () => (
+  //   <>
+  //     <Button type="tertiary" onClick={() => setShowRawTxns((prev) => !prev)}>
+  //       Show RAW Transactions
+  //     </Button>
 
-      {showRawTxns && (
-        <pre style={{ height: '10rem', overflow: 'scroll' }}>
-          {JSON.stringify(accountTransactionsRQ.data, null, 2)}
-        </pre>
-      )}
-    </>
-  );
+  //     {showRawTxns && (
+  //       <pre style={{ height: '10rem', overflow: 'scroll' }}>
+  //         {JSON.stringify(accountTransactionsRQ.data, null, 2)}
+  //       </pre>
+  //     )}
+  //   </>
+  // );
 
   return (
     <div className={styles.page}>
@@ -123,13 +81,9 @@ export default function UserAccount({ type, data }) {
 
       {/* Transection detail table */}
       <h3>Transaction Details</h3>
-      <TransactionDetails
-        isLoading={accountTransactionsRQ.isLoading}
-        columns={columns}
-        data={tableData || []}
-      />
+      <TransactionDetails type={type} data={data} />
 
-      {isDev && rawInfo}
+      {/* {isDev && rawInfo} */}
     </div>
   );
 }
diff --git a/src/hooks/useNetwork/useNetwork.jsx b/src/hooks/useNetwork/useNetwork.jsx
@@ -115,21 +115,23 @@ export function useNetwork() {
     return res.data;
   };
 
-  const getTrustTransactions = async (data) => {
+  const getTrustTransactions = async (address, page, limit) => {
     const res = await axios.get(`${url}/finance/transactions/trust`, {
       params: {
-        address: data?.address,
-        limit: 20,
+        address: address,
+        page: page,
+        limit: limit,
       },
     });
     return res.data;
   };
 
-  const getAccountTransactions = async (data) => {
+  const getAccountTransactions = async (address, page, limit) => {
     const res = await axios.get(`${url}/finance/transactions/account`, {
       params: {
-        address: data?.address,
-        limit: 20,
+        address: address,
+        page: page,
+        limit: limit,
       },
     });
     return res.data;
-Original file line number
+Diff line change
@@ Expand Up / @@ -120,4 +120,4 @@ export default function DynamicPagination({ controls }) { @@
           </div>
         </>
       );
-    }
+    }