fix: sort table items + pagination

aleph-im · Mar 5, 2024 · d2ff82c · d2ff82c
1 parent 4cc790e
commit d2ff82c
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/core": "^1.15.67",
+    "@aleph-front/core": "^1.15.70",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@helia/unixfs": "^1.4.1",
     "@hookform/resolvers": "^3.1.1",

diff --git a/src/components/common/ComputeResourceNodesTable/cmp.tsx b/src/components/common/ComputeResourceNodesTable/cmp.tsx
@@ -16,6 +16,7 @@ import LinkCRNButton from '../LinkCRNButton'
 import ButtonLink from '../ButtonLink'
 import Image from 'next/image'
 import { apiServer } from '@/helpers/constants'
+import { UseSortedListReturn } from '@/hooks/common/useSortedList'
 
 export type ComputeResourceNodesTableProps = {
   filteredNodes?: CRN[]
@@ -25,6 +26,7 @@ export type ComputeResourceNodesTableProps = {
   nodesIssues?: Record<string, string>
   loadItemsDisabled?: boolean
   handleLoadItems?: () => Promise<void>
+  handleSortItems?: UseSortedListReturn<CRN>['handleSortItems']
   handleLink: (nodeHash: string) => void
   handleUnlink: (nodeHash: string) => void
 }
@@ -37,6 +39,7 @@ export const ComputeResourceNodesTable = ({
   nodesIssues,
   loadItemsDisabled,
   handleLoadItems,
+  handleSortItems,
   handleLink: onLink,
   handleUnlink: onUnlink,
 }: ComputeResourceNodesTableProps) => {
@@ -155,6 +158,7 @@ export const ComputeResourceNodesTable = ({
         data: filteredNodes,
         infiniteScroll: !loadItemsDisabled,
         onLoadMore: handleLoadItems,
+        onSort: handleSortItems,
       }}
     />
   )

diff --git a/src/components/common/CoreChannelNodesTable/cmp.tsx b/src/components/common/CoreChannelNodesTable/cmp.tsx
@@ -15,6 +15,7 @@ import NodeStaked from '@/components/common/NodeStaked'
 import ButtonLink from '../ButtonLink'
 import { apiServer } from '@/helpers/constants'
 import Image from 'next/image'
+import { UseSortedListReturn } from '@/hooks/common/useSortedList'
 
 export type CoreChannelNodesTableProps = {
   nodes: CCN[]
@@ -23,6 +24,7 @@ export type CoreChannelNodesTableProps = {
   nodesIssues?: Record<string, string>
   loadItemsDisabled?: boolean
   handleLoadItems?: () => Promise<void>
+  handleSortItems?: UseSortedListReturn<CCN>['handleSortItems']
 }
 
 export const CoreChannelNodesTable = ({
@@ -32,6 +34,7 @@ export const CoreChannelNodesTable = ({
   nodesIssues,
   loadItemsDisabled,
   handleLoadItems,
+  handleSortItems,
 }: CoreChannelNodesTableProps) => {
   const columns = useMemo(() => {
     return [
@@ -127,6 +130,7 @@ export const CoreChannelNodesTable = ({
         data: filteredNodes,
         infiniteScroll: !loadItemsDisabled,
         onLoadMore: handleLoadItems,
+        onSort: handleSortItems,
       }}
     />
   )

diff --git a/src/components/common/StakingNodesTable/cmp.tsx b/src/components/common/StakingNodesTable/cmp.tsx
@@ -17,6 +17,7 @@ import tw from 'twin.macro'
 import ButtonLink from '../ButtonLink'
 import { apiServer } from '@/helpers/constants'
 import Image from 'next/image'
+import { UseSortedListReturn } from '@/hooks/common/useSortedList'
 
 export type StakingNodesTableProps = {
   nodes: CCN[]
@@ -27,6 +28,7 @@ export type StakingNodesTableProps = {
   nodesIssues?: Record<string, string>
   loadItemsDisabled?: boolean
   handleLoadItems?: () => Promise<void>
+  handleSortItems?: UseSortedListReturn<CCN>['handleSortItems']
   handleStake: (nodeHash: string) => void
   handleUnstake: (nodeHash: string) => void
 }
@@ -40,6 +42,7 @@ export const StakingNodesTable = ({
   nodesIssues,
   loadItemsDisabled,
   handleLoadItems,
+  handleSortItems,
   handleStake: onStake,
   handleUnstake: onUnstake,
 }: StakingNodesTableProps) => {
@@ -156,6 +159,7 @@ export const StakingNodesTable = ({
         data: filteredNodes,
         infiniteScroll: !loadItemsDisabled,
         onLoadMore: handleLoadItems,
+        onSort: handleSortItems,
       }}
     />
   )

diff --git a/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx b/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
@@ -21,7 +21,7 @@ export const ComputeResourceNodesPage = (
   const {
     account,
     nodes,
-    paginatedFilteredNodes,
+    paginatedSortedFilteredNodes,
     userNodes,
     filteredUserNodes,
     userNodesIssues,
@@ -35,6 +35,7 @@ export const ComputeResourceNodesPage = (
     totalResources,
     loadItemsDisabled,
     handleLoadItems,
+    handleSortItems,
     handleLink,
     handleUnlink,
     handleTabChange,
@@ -181,9 +182,10 @@ export const ComputeResourceNodesPage = (
                     <ComputeResourceNodesTable
                       {...{
                         nodes,
-                        filteredNodes: paginatedFilteredNodes,
+                        filteredNodes: paginatedSortedFilteredNodes,
                         loadItemsDisabled,
                         handleLoadItems,
+                        handleSortItems,
                         userNode,
                         account,
                         lastVersion,

diff --git a/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx b/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
@@ -22,14 +22,15 @@ export const CoreChannelNodesPage = (props: UseCoreChannelNodesPageProps) => {
     nodes,
     userNodes,
     filteredUserNodes,
-    paginatedFilteredNodes,
+    paginatedSortedFilteredNodes,
     userNodesIssues,
     tabs,
     selectedTab,
     filter,
     lastVersion,
     loadItemsDisabled,
     handleLoadItems,
+    handleSortItems,
     handleTabChange,
     handleFilterChange,
   } = useCoreChannelNodesPage(props)
@@ -160,10 +161,11 @@ export const CoreChannelNodesPage = (props: UseCoreChannelNodesPageProps) => {
                     <CoreChannelNodesTable
                       {...{
                         nodes,
-                        filteredNodes: paginatedFilteredNodes,
+                        filteredNodes: paginatedSortedFilteredNodes,
                         lastVersion,
                         loadItemsDisabled,
                         handleLoadItems,
+                        handleSortItems,
                       }}
                     />
                   )}

diff --git a/src/components/pages/earn/StakingPage/cmp.tsx b/src/components/pages/earn/StakingPage/cmp.tsx
@@ -17,7 +17,7 @@ export const StakingPage = (props: UseStakingPageProps) => {
     account,
     accountBalance,
     nodes,
-    paginatedFilteredNodes,
+    paginatedSortedFilteredNodes,
     stakeNodes,
     filteredStakeNodes,
     tabs,
@@ -28,6 +28,7 @@ export const StakingPage = (props: UseStakingPageProps) => {
     nodesIssues,
     loadItemsDisabled,
     handleLoadItems,
+    handleSortItems,
     handleTabChange,
     handleFilterChange,
     handleStake,
@@ -148,14 +149,15 @@ export const StakingPage = (props: UseStakingPageProps) => {
                     <StakingNodesTable
                       {...{
                         nodes,
-                        filteredNodes: paginatedFilteredNodes,
+                        filteredNodes: paginatedSortedFilteredNodes,
                         accountBalance,
                         account,
                         handleStake,
                         handleUnstake,
                         nodesIssues,
                         loadItemsDisabled,
                         handleLoadItems,
+                        handleSortItems,
                       }}
                     />
                   )}

diff --git a/src/hooks/common/useComputeResourceNodes.ts b/src/hooks/common/useComputeResourceNodes.ts
@@ -3,6 +3,7 @@ import { CRN, NodeLastVersions } from '@/domain/node'
 import { useDebounceState, usePaginatedList } from '@aleph-front/core'
 import { Account } from 'aleph-sdk-ts/dist/accounts/account'
 import { ChangeEvent, useCallback, useMemo, useState } from 'react'
+import { UseSortedListReturn, useSortedList } from './useSortedList'
 
 export type UseComputeResourceNodesProps = {
   nodes?: CRN[]
@@ -13,10 +14,11 @@ export type UseComputeResourceNodesReturn = {
   accountBalance?: number
   nodes?: CRN[]
   filteredNodes?: CRN[]
-  paginatedFilteredNodes?: CRN[]
+  paginatedSortedFilteredNodes?: CRN[]
   filter: string
   lastVersion?: NodeLastVersions
   loadItemsDisabled: boolean
+  handleSortItems: UseSortedListReturn<CRN>['handleSortItems']
   handleFilterChange: (e: ChangeEvent<HTMLInputElement>) => void
   handleLoadItems: () => Promise<void>
 }
@@ -72,12 +74,16 @@ export function useComputeResourceNodes({
 
   // -----------------------------
 
+  const { list: sortedFilteredNodes, handleSortItems } = useSortedList({
+    list: filteredNodes,
+  })
+
   const {
-    list: paginatedFilteredNodes,
+    list: paginatedSortedFilteredNodes,
     loadItemsDisabled,
     handleLoadItems,
   } = usePaginatedList({
-    list: filteredNodes,
+    list: sortedFilteredNodes,
   })
 
   // -----------------------------
@@ -87,10 +93,11 @@ export function useComputeResourceNodes({
     accountBalance,
     nodes,
     filteredNodes,
-    paginatedFilteredNodes,
+    paginatedSortedFilteredNodes,
     filter,
     lastVersion,
     loadItemsDisabled,
+    handleSortItems,
     handleFilterChange,
     handleLoadItems,
   }

diff --git a/src/hooks/common/useCoreChannelNodes.ts b/src/hooks/common/useCoreChannelNodes.ts
@@ -3,6 +3,7 @@ import { CCN, NodeLastVersions } from '@/domain/node'
 import { useDebounceState, usePaginatedList } from '@aleph-front/core'
 import { Account } from 'aleph-sdk-ts/dist/accounts/account'
 import { ChangeEvent, useCallback, useMemo, useState } from 'react'
+import { UseSortedListReturn, useSortedList } from './useSortedList'
 
 export type UseCoreChannelNodesProps = {
   nodes?: CCN[]
@@ -13,10 +14,11 @@ export type UseCoreChannelNodesReturn = {
   accountBalance?: number
   nodes?: CCN[]
   filteredNodes?: CCN[]
-  paginatedFilteredNodes?: CCN[]
+  paginatedSortedFilteredNodes?: CCN[]
   filter: string
   lastVersion?: NodeLastVersions
   loadItemsDisabled: boolean
+  handleSortItems: UseSortedListReturn<CCN>['handleSortItems']
   handleFilterChange: (e: ChangeEvent<HTMLInputElement>) => void
   handleLoadItems: () => Promise<void>
 }
@@ -68,12 +70,16 @@ export function useCoreChannelNodes({
 
   // -----------------------------
 
+  const { list: sortedFilteredNodes, handleSortItems } = useSortedList({
+    list: filteredNodes,
+  })
+
   const {
-    list: paginatedFilteredNodes,
+    list: paginatedSortedFilteredNodes,
     loadItemsDisabled,
     handleLoadItems,
   } = usePaginatedList({
-    list: filteredNodes,
+    list: sortedFilteredNodes,
   })
 
   // -----------------------------
@@ -83,10 +89,11 @@ export function useCoreChannelNodes({
     accountBalance,
     nodes,
     filteredNodes,
-    paginatedFilteredNodes,
+    paginatedSortedFilteredNodes,
     filter,
     lastVersion,
     loadItemsDisabled,
+    handleSortItems,
     handleFilterChange,
     handleLoadItems,
   }

diff --git a/src/hooks/common/useSortedList.ts b/src/hooks/common/useSortedList.ts
@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from 'react'
+
+export type UseSortedListProps<T> = {
+  list?: T[]
+}
+
+export type UseSortedListReturn<T> = {
+  list?: T[]
+  handleSortItems: (sortFn: SortFn<T>) => void
+}
+
+export type SortFn<T> = (list: T[] | undefined) => T[] | undefined
+
+export function useSortedList<T>({
+  list,
+}: UseSortedListProps<T>): UseSortedListReturn<T> {
+  const [sortFn, setSortFn] = useState<SortFn<T>>()
+
+  const output = useMemo(() => {
+    if (!list) return list
+    if (!sortFn) return list
+    return sortFn(list)
+  }, [list, sortFn])
+
+  const handleSortItems = useCallback(
+    (sortFn: SortFn<T>) => setSortFn(() => sortFn),
+    [],
+  )
+
+  return {
+    list: output,
+    handleSortItems,
+  }
+}