From 957e8a65f63cd90e0f471936978b0a6c512e8a8b Mon Sep 17 00:00:00 2001 From: OlhaD Date: Tue, 23 Jan 2024 23:16:52 -0500 Subject: [PATCH] feat: add sorting in wallets table --- src/api/wallets.js | 5 +- src/components/UI/components/Table/Table.js | 49 ++++++++++++++++++- .../CreateManagedWallet.styled.js | 1 + src/pages/ListWallets/ListWallets.js | 17 +++++-- .../SendTokens/SendTokensForm/SelectWallet.js | 4 -- src/store/WalletsContext.js | 15 ++++-- 6 files changed, 77 insertions(+), 14 deletions(-) diff --git a/src/api/wallets.js b/src/api/wallets.js index d67c3b8..6a15689 100644 --- 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 index e911c2b..cec49e4 100644 --- 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 (
@@ -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} @@ -200,7 +246,6 @@ const Table = ({ /> - { 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 ( @@ -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 index 3e9a2b3..9e3c0c6 100644 --- 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 index bdbcae9..a452a7e 100644 --- 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,