feat: Add sorting in trust relationships table

Greenstand · Mar 25, 2024 · 0ce04d5 · 0ce04d5
1 parent 35bf05f
commit 0ce04d5
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 13 deletions.
diff --git a/src/pages/TrustRelationship/TrustRelationshipTable.js b/src/pages/TrustRelationship/TrustRelationshipTable.js
@@ -16,6 +16,8 @@ import {
   SearchTextField,
   FilterButton,
 } from './TrustRelationship.styled';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import SearchIcon from '@mui/icons-material/Search';
 import { Loader } from '../../components/UI/components/Loader/Loader';
@@ -345,7 +347,7 @@ const TrustRelationshipTableBody = ({
 };
 
 function TrustRelationshipTable({ tableTitle, tableRows, totalRowCount }) {
-  const { pagination, setPagination, tableColumns } =
+  const { pagination, setPagination, tableColumns, setSorting } =
     useTrustRelationshipsContext();
 
   // State to track the index of the selected row
@@ -372,6 +374,59 @@ function TrustRelationshipTable({ tableTitle, tableRows, totalRowCount }) {
     setPagination(newPagination);
   };
 
+  //sorting
+  const [sortBy, setSortBy] = useState('created_at');
+  const [order, setOrder] = useState('desc');
+
+  const getColumnNames = (columnName) => {
+    let newSortBy = columnName;
+    switch (columnName) {
+      case 'state':
+        newSortBy = 'State';
+        break;
+      case 'created_at':
+        newSortBy = 'Created_At';
+        break;
+        case 'updated_at':
+          newSortBy = 'Updated_At';
+          break;
+      default:
+        newSortBy = columnName;
+    }
+
+    return newSortBy;
+  };
+
+  const mapSortBy = (columnName) => {
+    let newSortBy = getColumnNames(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'}>
     <Grid
@@ -397,8 +452,24 @@ function TrustRelationshipTable({ tableTitle, tableRows, totalRowCount }) {
                     key={`${id}-${column.description}`}
                     sx={{ fontSize: '14px' }}
                     align={'center'}
+                    onClick={() => column.sortable && handleSort(column)}
                   >
                     {column.description}
+                    {column.sortable &&
+                      sortBy === getColumnNames(column.name) && (
+                        <>
+                          {order === 'asc' && (
+                            <ArrowUpwardIcon
+                              style={{ verticalAlign: 'middle' }}
+                            />
+                          )}
+                          {order === 'desc' && (
+                            <ArrowDownwardIcon
+                              style={{ verticalAlign: 'middle' }}
+                            />
+                          )}
+                        </>
+                      )}
                   </TableCellStyled>
                 );
               })}

diff --git a/src/store/TrustRelationshipsContext.js b/src/store/TrustRelationshipsContext.js
@@ -6,7 +6,7 @@ import TrustRelationshipsFilter from '../models/TrustRelationShipFilter';
 
 const TrustRelationshipsContext = createContext();
 
-// transfers context provider
+// TrustRelationships context provider
 const TrustRelationshipsProvider = ({ children }) => {
   // pagination
   const defaultPagination = {
@@ -20,6 +20,13 @@ const TrustRelationshipsProvider = ({ children }) => {
     requestType: ''
   });
 
+  // sorting
+  const defaultSorting = {
+    sortBy: 'created_at',
+    order: 'desc',
+  };
+
+  const [sorting, setSorting] = useState(defaultSorting);
 
   const [filter, setFilter] = useState(defaultFilter);
 
@@ -38,13 +45,13 @@ const TrustRelationshipsProvider = ({ children }) => {
     {
       description: 'Id',
       name: 'id',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
       description: 'Type',
       name: 'type',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
@@ -56,7 +63,7 @@ const TrustRelationshipsProvider = ({ children }) => {
     {
       description: 'Request Type',
       name: 'request_type',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
@@ -76,24 +83,23 @@ const TrustRelationshipsProvider = ({ children }) => {
     {
       description: 'Originating Wallet',
       name: 'originating_wallet',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
       description: 'Source Wallet',
       name: 'actor_wallet',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     },
     {
       description: 'Target Wallet',
       name: 'target_wallet',
-      sortable: true,
+      sortable: false,
       showInfoIcon: false,
     }
   ];
 
-  // const randomStates = ['trusted', 'requested'];
 
   // transform API returned data into rows compatible with the trust relationship table
   const prepareRows = (returnedRows) => {
@@ -102,7 +108,6 @@ const TrustRelationshipsProvider = ({ children }) => {
         id: row.id,
         type: row.type,
         state: row.state,
-        // state: randomStates[(Math.floor(Math.random() * randomStates.length))],
         request_type: row.request_type,
         created_at: row.created_at,
         updated_at: row.updated_at,
@@ -199,7 +204,7 @@ const TrustRelationshipsProvider = ({ children }) => {
        try {
          setIsLoading(true);
 
-         const data = await getTrustRelationships(authContext.token, {pagination, filter});
+         const data = await getTrustRelationships(authContext.token, {pagination, filter, sorting});
 
          const preparedRows = prepareRows(await data.trust_relationships);
          setTableRows(preparedRows);
@@ -214,7 +219,7 @@ const TrustRelationshipsProvider = ({ children }) => {
         }
      };
      loadData();
-   }, [pagination, filter, refetch]);
+   }, [pagination, filter,sorting, refetch]);
 
 
 
@@ -236,7 +241,9 @@ const TrustRelationshipsProvider = ({ children }) => {
     defaultFilter,
     searchString,
     setSearchString,
-    setRefetch
+    setRefetch,
+    sorting,
+    setSorting,
   };
 
   return (