feat(validators): add sorting to validators table when clicking on he…

…aders
chain4travel · Aug 15, 2024 · ef72dbd · ef72dbd
1 parent aa24d1b
commit ef72dbd
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/src/app/components/Table/TableView.tsx b/src/app/components/Table/TableView.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import { Field } from '../DetailsField'
 import { ColumnType } from 'app/pages/Validators'
+import { useAppDispatch } from 'store/configureStore'
+import { sortValidators } from 'store/validatorsSlice'
 
 export default function TableView({
     children,
@@ -10,16 +12,22 @@ export default function TableView({
     columns: ColumnType[]
     children: React.ReactNode
 }) {
+    const dispatch = useAppDispatch()
     return (
         <>
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
                         {columns.map(column => (
                             <TableCell
-                                sx={{ backgroundColor: 'primary.dark', wrap: 'nowrap' }}
+                                sx={{
+                                    backgroundColor: 'primary.dark',
+                                    wrap: 'nowrap',
+                                    cursor: 'pointer',
+                                }}
                                 key={column.name}
                                 align={column.align}
+                                onClick={() => dispatch(sortValidators(column.name))}
                             >
                                 <Field
                                     type="string"

diff --git a/src/store/validatorsSlice/index.ts b/src/store/validatorsSlice/index.ts
@@ -11,6 +11,7 @@ import {
     ValidatorReponse,
 } from '../../types/locationNode'
 import sortBy from 'lodash/sortBy'
+import { orderBy } from 'lodash'
 
 let initialState: initialValidatorsStateType = {
     percentageOfActiveValidators: 0,
@@ -91,6 +92,50 @@ const validatorsSlice = createSlice({
     initialState,
     reducers: {
         resetValidatorsReducer: () => initialState,
+        sortValidators: (state, { payload }) => {
+            if (state.validators.length <= 1) return
+            if (payload === 'UpTime') {
+                state.validators = sortBy(state.validators, e => {
+                    if (state.validators[0].uptime > state.validators[1].uptime) return -e.uptime
+                    else return e.uptime
+                })
+            } else if (payload === 'EndTime')
+                state.validators = sortBy(state.validators, e => {
+                    if (
+                        new Date(state.validators[0].endTime) -
+                            new Date(state.validators[1].endTime) <=
+                        0
+                    )
+                        return -new Date(e.endTime)
+                    return new Date(e.endTime)
+                })
+            else if (payload === 'StartTime')
+                state.validators = sortBy(state.validators, e => {
+                    if (
+                        new Date(state.validators[0].startTime) -
+                            new Date(state.validators[1].startTime) <=
+                        0
+                    )
+                        return -new Date(e.startTime)
+                    return new Date(e.startTime)
+                })
+            else if (payload === 'NodeID') {
+                let order = state.validators[0].nodeID > state.validators[1].nodeID ? 'desc' : 'asc'
+                state.validators = orderBy(state.validators, ['nodeID'], [order as 'asc' | 'desc'])
+            } else if (payload === 'Status')
+                state.validators = sortBy(state.validators, e => {
+                    if (state.validators[0].status === 'Connected') return e.status === 'Connected'
+                    else return e.status !== 'Connected'
+                })
+            else if (payload === 'txID') {
+                let order =
+                    state.validators[0].txID.toLocaleLowerCase() >
+                    state.validators[1].txID.toLocaleLowerCase()
+                        ? 'asc'
+                        : 'desc'
+                state.validators = orderBy(state.validators, ['txID'], [order as 'asc' | 'desc'])
+            }
+        },
     },
     extraReducers(builder) {
         builder.addCase(loadValidators.pending, state => {
@@ -151,6 +196,6 @@ export const getSumNodesPerCountry = (state: RootState) => state.validators.node
 
 export const getSumNodesPerCity = (state: RootState) => state.validators.nodesPerCity
 
-export const { resetValidatorsReducer } = validatorsSlice.actions
+export const { resetValidatorsReducer, sortValidators } = validatorsSlice.actions
 
 export default validatorsSlice.reducer