feat: reafactoring, api work

src/pages/MyTransfers/MyTransfers.js

@@ -1,69 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { capitalize, Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import TransfersTable from './TransfersTable';
 // import mockData from '../../mock_data.json';
 import ErrorMessage from '../../components/UI/components/ErrorMessage/ErrorMessage';
 import { getTransfers } from '../../api/transfers';
 import { useTransfersContext } from '../../store/TransfersContext';
-import { formatWithCommas, getDateText } from '../../utils/formatting';
-
-// columns of the transfers table
-const transferColumns = [
- {
- description: 'Transfer ID',
- name: 'id',
- sortable: true,
- showInfoIcon: false,
- },
- {
- description: 'Sender Wallet',
- name: 'source_wallet',
- sortable: true,
- showInfoIcon: false,
- },
- {
- description: 'Token Amount',
- name: 'token_amount',
- sortable: true,
- showInfoIcon: false,
- renderer: (val) => formatWithCommas(val),
- },
- {
- description: 'Receiver Wallet',
- name: 'destination_wallet',
- sortable: true,
- showInfoIcon: false,
- },
- {
- description: 'Created Date',
- name: 'created_at',
- sortable: true,
- showInfoIcon: false,
- renderer: (val) => getDateText(val, 'MM/DD/YYYY'),
- },
- {
- description: 'Initiated By',
- name: 'originating_wallet',
- sortable: true,
- showInfoIcon: false,
- },
- {
- description: 'Closed Date',
- name: 'closed_at',
- sortable: true,
- showInfoIcon: false,
- renderer: (val) => getDateText(val, 'MM/DD/YYYY'),
- },
- {
- description: 'Status',
- name: 'state',
- sortable: true,
- showInfoIcon: false,
- renderer: (val) => capitalize(val),
- },
-
-];
-
+// import { formatWithCommas, getDateText } from '../../utils/formatting';
 
 // const statuses = ['Completed', 'Pending', 'Failed'];
 
@@ -81,12 +23,14 @@ const transferColumns = [
  * @returns {JSX.Element} - My Transfers page component
  * */
 const MyTransfers = () => {
- // get pagination, filter, and loader from context
- const { pagination, filter, setIsLoading } = useTransfersContext();
+ // get data from context
+ const { pagination, filter, setIsLoading, prepareRows } = useTransfersContext();
  // error
  const [errorMessage, setErrorMessage] = useState('');
  // data to be displayed in the table
  const [tableRows, setTableRows] = useState([]);
+ // total rows count for pagination
+ const [totalRowCount, setTotalRowCount] = useState(null);
 
 
  // load data
@@ -95,7 +39,11 @@ const MyTransfers = () => {
  try {
  setIsLoading(true);
  const data = await getTransfers({ pagination, filter });
- setTableRows(await data.transfers ? data.transfers : data);
+ const preparedRows = prepareRows(await data.transfers);
+
+ setTableRows(preparedRows);
+ setTotalRowCount(data.count);
+
  setIsLoading(false);
  } catch (error) {
  console.error(error);
@@ -118,8 +66,8 @@ const MyTransfers = () => {
 
  <TransfersTable
  tableTitle={'My Transfers'}
- tableColumns={transferColumns}
  tableRows={tableRows}
+ totalRowCount={totalRowCount}
  />
  </Grid>
  </div>);

src/pages/MyTransfers/TransfersTable.js

@@ -80,7 +80,7 @@ const TransfersTableBody = ({ tableColumns, tableRows, getStatusColor }) => {
  return (
  <TableCellStyled key={`${rowIndex}-${colIndex}-${column.description}`}
  sx={{
- color: column.name === 'state'
+ color: column.name === 'status'
  ? getStatusColor(row[column.name])
  : '',
  }}
@@ -114,12 +114,12 @@ const TransfersTableBody = ({ tableColumns, tableRows, getStatusColor }) => {
  */
 const TransfersTable = ({
  tableTitle,
- tableColumns,
  tableRows,
+ totalRowCount,
  }) => {
 
- // get pagination object from context
- const { pagination, setPagination, statusList } = useTransfersContext();
+ // get data from context
+ const { pagination, setPagination, statusList, tableColumns } = useTransfersContext();
 
  // pagination
  const [page, setPage] = useState(0);
@@ -178,7 +178,7 @@ const TransfersTable = ({
  <TablePagination
  rowsPerPageOptions={[10, 50]}
  component={'div'}
- count={tableRows.length}
+ count={totalRowCount}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleRowsPerPageChange}
  page={page}

src/store/TransfersContext.js

@@ -1,5 +1,7 @@
 import { createContext, useContext, useState } from 'react';
 import TransferFilter from '../models/TransferFilter';
+import { formatWithCommas, getDateText } from '../utils/formatting';
+import { capitalize } from '@mui/material';
 
 const TransfersContext = createContext();
 
@@ -54,6 +56,79 @@ const TransfersProvider = ({ children }) => {
  },
  ];
 
+ // transfers table columns
+ const transferColumns = [
+ {
+ description: 'Transfer ID',
+ name: 'transfer_id',
+ sortable: true,
+ showInfoIcon: false,
+ },
+ {
+ description: 'Sender Wallet',
+ name: 'sender_wallet',
+ sortable: true,
+ showInfoIcon: false,
+ },
+ {
+ description: 'Token Amount',
+ name: 'token_amount',
+ sortable: true,
+ showInfoIcon: false,
+ renderer: (val) => formatWithCommas(val),
+ },
+ {
+ description: 'Receiver Wallet',
+ name: 'receiver_wallet',
+ sortable: true,
+ showInfoIcon: false,
+ },
+ {
+ description: 'Created Date',
+ name: 'created_date',
+ sortable: true,
+ showInfoIcon: false,
+ renderer: (val) => getDateText(val, 'MM/DD/YYYY'),
+ },
+ {
+ description: 'Initiated By',
+ name: 'initiated_by',
+ sortable: true,
+ showInfoIcon: false,
+ },
+ {
+ description: 'Closed Date',
+ name: 'closed_date',
+ sortable: true,
+ showInfoIcon: false,
+ renderer: (val) => getDateText(val, 'MM/DD/YYYY'),
+ },
+ {
+ description: 'Status',
+ name: 'status',
+ sortable: true,
+ showInfoIcon: false,
+ renderer: (val) => capitalize(val),
+ },
+
+ ];
+
+ // transform API returned data into rows compatible with the transfers table
+ const prepareRows = (returnedRows) => {
+ return returnedRows.map(row => {
+ return {
+ transfer_id: row.id,
+ sender_wallet: row.source_wallet,
+ token_amount: row.parameters.bundle.bundleSize,
+ receiver_wallet: row.destination_wallet,
+ created_date: row.created_at,
+ initiated_by: row.originating_wallet,
+ closed_date: row.cloased_at,
+ status: row.state,
+ };
+ });
+ };
+
 
  const value = {
  pagination,
@@ -63,6 +138,8 @@ const TransfersProvider = ({ children }) => {
  statusList,
  isLoading,
  setIsLoading,
+ transferColumns,
+ prepareRows,
  };
 
  return (