From 032c0df745bd9fb0d4839563925c5508811b91ed Mon Sep 17 00:00:00 2001 From: Olha Zakharova Date: Tue, 30 Jan 2024 06:34:32 -0500 Subject: [PATCH] feat: add sorting icons; rename MyWallets table --- src/components/Routes/ClientRoutes.js | 4 +-- src/components/UI/components/Table/Table.js | 30 +++++++++++++++++-- .../UI/components/Table/Table.styled.js | 4 +++ .../layout/Menu/MenuItem/MenuItem.js | 2 +- .../CreateManagedWallet.js | 0 .../CreateManagedWallet.styled.js | 0 .../CreateManagedWallet.test.js | 0 .../ListWallets.js => MyWallets/MyWallets.js} | 14 ++++----- .../MyWallets.style.js} | 0 .../MyWallets.test.js} | 4 +-- src/pages/Wallet/Wallet.js | 2 +- src/store/WalletsContext.js | 2 +- 12 files changed, 46 insertions(+), 16 deletions(-) rename src/pages/{ListWallets => MyWallets}/CreateManagedWallet/CreateManagedWallet.js (100%) rename src/pages/{ListWallets => MyWallets}/CreateManagedWallet/CreateManagedWallet.styled.js (100%) rename src/pages/{ListWallets => MyWallets}/CreateManagedWallet/CreateManagedWallet.test.js (100%) rename src/pages/{ListWallets/ListWallets.js => MyWallets/MyWallets.js} (88%) rename src/pages/{ListWallets/ListWallets.style.js => MyWallets/MyWallets.style.js} (100%) rename src/pages/{ListWallets/ListWallets.test.js => MyWallets/MyWallets.test.js} (98%) diff --git a/src/components/Routes/ClientRoutes.js b/src/components/Routes/ClientRoutes.js index f3aa049..4cf9a47 100644 --- a/src/components/Routes/ClientRoutes.js +++ b/src/components/Routes/ClientRoutes.js @@ -8,7 +8,7 @@ import NotFound from '../../pages/NotFound/NotFound'; import { useContext } from 'react'; import MyTransfers from '../../pages/MyTransfers/MyTransfers'; import { TransfersProvider } from '../../store/TransfersContext'; -import ListWallets from '../../pages/ListWallets/ListWallets'; +import MyWallets from '../../pages/MyWallets/MyWallets'; import { WalletsProvider } from '../../store/WalletsContext'; const ProtectedRoute = ({ isLoggedIn, redirectPath = '/login' }) => { @@ -60,7 +60,7 @@ const ClientRoutes = () => { element={ - + } diff --git a/src/components/UI/components/Table/Table.js b/src/components/UI/components/Table/Table.js index cec49e4..44fd016 100644 --- a/src/components/UI/components/Table/Table.js +++ b/src/components/UI/components/Table/Table.js @@ -10,6 +10,8 @@ import { TableRow, Typography, } from '@mui/material'; +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import React, { useEffect, useRef, useState } from 'react'; import { TableCellStyled, TooltipStyled } from './Table.styled'; import { Loader } from '../Loader/Loader'; @@ -172,7 +174,7 @@ const Table = ({ setPagination(newPagination); }; - const mapSortBy = (columnName) => { + const getColumnNames = (columnName) => { let newSortBy = columnName; switch (columnName) { case 'wallet_name': @@ -184,6 +186,12 @@ const Table = ({ default: newSortBy = columnName; } + + return newSortBy; + }; + + const mapSortBy = (columnName) => { + let newSortBy = getColumnNames(columnName); setSortBy(newSortBy); return newSortBy; @@ -231,9 +239,27 @@ const Table = ({ sx={{ fontSize: '14px' }} align={'center'} onClick={() => column.sortable && handleSort(column)} - className={sortBy === column.name ? `sorted-${order}` : ''} + className={ + (sortBy === column.name ? `sort sorted-${order}` : '', + column.sortable ? 'sort' : '') + } > {column.description} + {column.sortable && + sortBy === getColumnNames(column.name) && ( + <> + {order === 'asc' && ( + + )} + {order === 'desc' && ( + + )} + + )} ); })} diff --git a/src/components/UI/components/Table/Table.styled.js b/src/components/UI/components/Table/Table.styled.js index 7d4e7c1..f9cd62a 100644 --- a/src/components/UI/components/Table/Table.styled.js +++ b/src/components/UI/components/Table/Table.styled.js @@ -8,6 +8,10 @@ export const TableCellStyled = styled(TableCell)({ whiteSpace: 'nowrap', width: '170px', maxWidth: '170px', + + '&.sort': { + cursor: 'pointer', + }, }); export const TooltipStyled = styled(Tooltip)({ diff --git a/src/components/layout/Menu/MenuItem/MenuItem.js b/src/components/layout/Menu/MenuItem/MenuItem.js index 47fe26d..a88a005 100644 --- a/src/components/layout/Menu/MenuItem/MenuItem.js +++ b/src/components/layout/Menu/MenuItem/MenuItem.js @@ -28,7 +28,7 @@ const MenuItem = ({ open }) => { /> } open={open} /> diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.js b/src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.js similarity index 100% rename from src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.js rename to src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.js diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js b/src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.styled.js similarity index 100% rename from src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js rename to src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.styled.js diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.test.js b/src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.test.js similarity index 100% rename from src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.test.js rename to src/pages/MyWallets/CreateManagedWallet/CreateManagedWallet.test.js diff --git a/src/pages/ListWallets/ListWallets.js b/src/pages/MyWallets/MyWallets.js similarity index 88% rename from src/pages/ListWallets/ListWallets.js rename to src/pages/MyWallets/MyWallets.js index 61efe86..ce52ac4 100644 --- a/src/pages/ListWallets/ListWallets.js +++ b/src/pages/MyWallets/MyWallets.js @@ -5,16 +5,16 @@ import { getWallets } from '../../api/wallets'; import AuthContext from '../../store/auth-context'; import { useWalletsContext } from '../../store/WalletsContext'; import Table from '../../components/UI/components/Table/Table'; -import { Container } from './ListWallets.style'; +import { Container } from './MyWallets.style'; import CreateManagedWallet from './CreateManagedWallet/CreateManagedWallet'; /**@function - * @name ListWallets - * @description Renders the List Wallets page + * @name MyWallets + * @description Renders the My Wallets page * - * @returns {JSX.Element} - List Wallets page component + * @returns {JSX.Element} - My Wallets page component * */ -const ListWallets = () => { +const MyWallets = () => { const { pagination, sorting, @@ -71,7 +71,7 @@ const ListWallets = () => { sx={{ flexGrow: '1', display: 'flex', flexDirection: 'column' }} > - Managed Wallets List + My Wallets @@ -91,4 +91,4 @@ const ListWallets = () => { ); }; -export default ListWallets; +export default MyWallets; diff --git a/src/pages/ListWallets/ListWallets.style.js b/src/pages/MyWallets/MyWallets.style.js similarity index 100% rename from src/pages/ListWallets/ListWallets.style.js rename to src/pages/MyWallets/MyWallets.style.js diff --git a/src/pages/ListWallets/ListWallets.test.js b/src/pages/MyWallets/MyWallets.test.js similarity index 98% rename from src/pages/ListWallets/ListWallets.test.js rename to src/pages/MyWallets/MyWallets.test.js index a843c0d..ca12b2b 100644 --- a/src/pages/ListWallets/ListWallets.test.js +++ b/src/pages/MyWallets/MyWallets.test.js @@ -4,7 +4,7 @@ import theme from '../../components/UI/theme'; import AuthProvider from '../../store/AuthProvider'; import { BrowserRouter as Router } from 'react-router-dom'; import { WalletsProvider } from '../../store/WalletsContext'; -import ListWallets from './ListWallets'; +import MyWallets from './MyWallets'; import { getWallets } from '../../api/wallets'; jest.mock('../../api/wallets', () => ({ @@ -157,7 +157,7 @@ describe('Wallets List page', function () { getWallets.mockResolvedValueOnce(mockWalletsData); render( - + ); expect(await screen.findByTestId('table-pagination')).toBeInTheDocument(); diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js index 29550bb..1cac687 100644 --- a/src/pages/Wallet/Wallet.js +++ b/src/pages/Wallet/Wallet.js @@ -96,7 +96,7 @@ const Wallet = () => { diff --git a/src/store/WalletsContext.js b/src/store/WalletsContext.js index a452a7e..8bee51c 100644 --- a/src/store/WalletsContext.js +++ b/src/store/WalletsContext.js @@ -33,7 +33,7 @@ const WalletsProvider = ({ children }) => { { description: 'Name', name: 'wallet_name', - sortable: false, + sortable: true, showInfoIcon: false, }, {