Merge pull request #112 from OlhaD/451-wallets-list-sort

feat: add sorting in wallets table
Greenstand · Jan 24, 2024 · eb7763d · eb7763d
2 parents cd89446 + 957e8a6
commit eb7763d
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 14 deletions.
diff --git a/src/api/wallets.js b/src/api/wallets.js
@@ -16,7 +16,8 @@ const mapWallet = (walletData, nameProp) => {
 export const getWallets = async (
   token,
   name = '',
-  { pagination } = { pagination: { offset: 0, limit: 10 } }
+  { pagination } = { pagination: { offset: 0, limit: 10 } },
+  { sorting } = { sorting: { sortBy: 'created_at', order: 'desc' } }
 ) => {
   const { total, wallets } = await apiClient
     .setAuthHeader(token)
@@ -25,6 +26,8 @@ export const getWallets = async (
         name: name || undefined, // Pass 'name' if it exists, or pass 'undefined' to exclude it
         offset: pagination.offset,
         limit: pagination.limit,
+        sort_by: sorting.sortBy,
+        order: sorting.order,
       },
     })
     .then((response) => {

diff --git a/src/components/UI/components/Table/Table.js b/src/components/UI/components/Table/Table.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import {
   Grid,
   Paper,
@@ -144,12 +143,17 @@ const Table = ({
   totalRowCount,
   pagination,
   setPagination,
+  //sorting,
+  setSorting,
   tableColumns,
   isLoading,
 }) => {
   // pagination
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [sortBy, setSortBy] = useState('created_at');
+  const [order, setOrder] = useState('desc');
+
   const handleRowsPerPageChange = (e) => {
     const newRowsPerPage = parseInt(e.target.value, 10);
     setRowsPerPage(newRowsPerPage);
@@ -168,6 +172,46 @@ const Table = ({
     setPagination(newPagination);
   };
 
+  const mapSortBy = (columnName) => {
+    let newSortBy = columnName;
+    switch (columnName) {
+      case 'wallet_name':
+        newSortBy = 'name';
+        break;
+      case 'created_date':
+        newSortBy = 'created_at';
+        break;
+      default:
+        newSortBy = columnName;
+    }
+    setSortBy(newSortBy);
+
+    return newSortBy;
+  };
+
+  const handleSort = (column) => {
+    let newOrder = 'asc';
+
+    if (
+      (sortBy === column.name ||
+        (column.name === 'wallet_name' && sortBy === 'name') ||
+        (column.name === 'created_date' && sortBy === 'created_at')) &&
+      order === 'asc'
+    ) {
+      newOrder = 'desc';
+    }
+
+    setOrder(newOrder);
+
+    let newSortBy = mapSortBy(column.name);
+    setSortBy(newSortBy);
+
+    setSorting({
+      sortBy: newSortBy,
+      order: newOrder,
+    });
+  };
+
   return (
     <Grid container direction={'column'} sx={{ height: '100%' }}>
       <Header tableTitle={tableTitle} />
@@ -186,6 +230,8 @@ const Table = ({
                     key={`${id}-${column.description}`}
                     sx={{ fontSize: '14px' }}
                     align={'center'}
+                    onClick={() => column.sortable && handleSort(column)}
+                    className={sortBy === column.name ? `sorted-${order}` : ''}
                   >
                     {column.description}
                   </TableCellStyled>
@@ -200,7 +246,6 @@ const Table = ({
           />
         </MuiTable>
       </TableContainer>
-
       <TablePagination
         rowsPerPageOptions={[10, 50]}
         component={'div'}

diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js b/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js
@@ -7,6 +7,7 @@ export const CreateNewWallet = styled(Button)({
   height: '2.5rem',
   boxShadow: 'none',
   padding: '0.5rem 0.5rem 0.5rem 0.625rem',
+  margin: '1rem 0rem',
 });
 
 export const CreateButton = styled(Button)({

diff --git a/src/pages/ListWallets/ListWallets.js b/src/pages/ListWallets/ListWallets.js
@@ -17,9 +17,11 @@ import CreateManagedWallet from './CreateManagedWallet/CreateManagedWallet';
 const ListWallets = () => {
   const {
     pagination,
+    sorting,
     setIsLoading,
     prepareRows,
     setPagination,
+    setSorting,
     tableColumns,
     isLoading,
   } = useWalletsContext();
@@ -35,9 +37,14 @@ const ListWallets = () => {
   const loadData = async () => {
     try {
       setIsLoading(true);
-      const data = await getWallets(authContext.token, '', {
-        pagination,
-      });
+      const data = await getWallets(
+        authContext.token,
+        '',
+        {
+          pagination,
+        },
+        { sorting }
+      );
       const preparedRows = prepareRows(await data.wallets);
 
       setTableRows(preparedRows);
@@ -53,7 +60,7 @@ const ListWallets = () => {
   // load data
   useEffect(() => {
     loadData();
-  }, [pagination]);
+  }, [pagination, sorting]);
 
   return (
     <Container>
@@ -73,6 +80,8 @@ const ListWallets = () => {
             totalRowCount={totalRowCount}
             pagination={pagination}
             setPagination={setPagination}
+            sorting={sorting}
+            setSorting={setSorting}
             tableColumns={tableColumns}
             isLoading={isLoading}
           />

diff --git a/src/pages/SendTokens/SendTokensForm/SelectWallet.js b/src/pages/SendTokens/SendTokensForm/SelectWallet.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-debugger */
 import React, { useContext, useEffect, useState } from 'react';
 import { Autocomplete, Button, TextField } from '@mui/material';
 import { getWallets } from '../../../api/wallets';
@@ -18,12 +17,9 @@ function SelectWallet({ wallet, onChangeWallet, label, createdWalletName }) {
   // Is called when page loads and when user starts to type in a 'Wallet' filter
   useEffect(() => {
     const getWalletsData = async () => {
-      debugger;
       setWalletPage(0);
       try {
         let response = await getWallets(authContext.token, walletSearchString);
-        // eslint-disable-next-line no-debugger
-        debugger;
         if (!response) {
           console.log('No response from getWallets');
           return;

diff --git a/src/store/WalletsContext.js b/src/store/WalletsContext.js
@@ -12,6 +12,13 @@ const WalletsProvider = ({ children }) => {
   };
   const [pagination, setPagination] = useState(defaultPagination);
 
+  // sorting
+  const defaultSorting = {
+    sortBy: 'created_at',
+    order: 'desc',
+  };
+  const [sorting, setSorting] = useState(defaultSorting);
+
   // Loader
   const [isLoading, setIsLoading] = useState(false);
 
@@ -26,20 +33,20 @@ const WalletsProvider = ({ children }) => {
     {
       description: 'Name',
       name: 'wallet_name',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
       description: 'Number of tokens in wallet',
       name: 'token_amount',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
       renderer: (val) => formatWithCommas(val),
     },
     {
       description: 'Created at date',
       name: 'created_date',
-      sortable: false,
+      sortable: true,
       showInfoIcon: false,
       renderer: (val) => getDateText(val, 'MM/DD/YYYY'),
     },
@@ -60,6 +67,8 @@ const WalletsProvider = ({ children }) => {
   const value = {
     pagination,
     setPagination,
+    sorting,
+    setSorting,
     isLoading,
     setIsLoading,
     tableColumns,