sort integration

src/screens/Stats/extra/InfoTable.tsx

@@ -6,20 +6,40 @@ import {
   useTickSocket,
   useTractionForce,
 } from '@hooks'
-import React from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 import { View, StyleSheet } from 'react-native'
 
+enum SortTypes {
+  ASC = 'asc',
+  DESC = 'desc',
+  MODE_ASC = 'm-asc',
+  MODE_DESC = 'm-desc',
+}
+
 export default function InfoTable() {
   const { colors } = useTheme()
   const { status, loading, updatedAt } = useTickSocket()
+  const [sort, setSort] = useState<SortTypes>(SortTypes.MODE_ASC)
   const res = useTractionForce({
     interval: '4h',
     first: 7,
     second: 25,
-  }).sort((a, b) => {
-    return Math.abs(a.force || 0) - Math.abs(b.force || 0)
   })
 
+  const sortedResult = useMemo(() => {
+    return res.sort((a, b) => {
+      switch (sort) {
+        case SortTypes.ASC:
+          return (a.force || 0) - (b.force || 0)
+        case SortTypes.DESC:
+          return (b.force || 0) - (a.force || 0)
+        case SortTypes.MODE_ASC:
+          return Math.abs(a.force || 0) - Math.abs(b.force || 0)
+        case SortTypes.MODE_DESC:
+          return Math.abs(b.force || 0) - Math.abs(a.force || 0)
+      }
+    })
+  }, [res, sort])
   const trends = useForceTrends(res)
 
   const forceColor = (force: number | null) => {
@@ -29,6 +49,13 @@ export default function InfoTable() {
     return 'orange'
   }
 
+  const sortChangeHandler = useCallback(() => {
+    const values = Object.values(SortTypes)
+    const index = values.indexOf(sort)
+    const value = index === values.length - 1 ? values[0] : values[index + 1]
+    setSort(value as SortTypes)
+  }, [sort])
+
   if (!res.length) return null
 
   return (
@@ -69,10 +96,20 @@ export default function InfoTable() {
         <DataTable>
           <DataTable.Header>
             <DataTable.Title>Валютная пара</DataTable.Title>
-            <DataTable.Title numeric>Сила тяги</DataTable.Title>
+            <DataTable.Title
+              numeric
+              onPress={sortChangeHandler}
+              sortDirection={
+                sort === SortTypes.ASC || sort === SortTypes.MODE_ASC
+                  ? 'ascending'
+                  : 'descending'
+              }
+            >
+              Сила тяги ({sort})
+            </DataTable.Title>
           </DataTable.Header>
 
-          {res.map((v) => {
+          {sortedResult.map((v) => {
             return (
               <DataTable.Row key={v.pair.symbol}>
                 <DataTable.Cell>{v.pair.symbol}</DataTable.Cell>