update logic

Magickbase · Feb 4, 2023 · a6d8ef5 · a6d8ef5
1 parent 3913bf0
commit a6d8ef5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/pages/contracts.tsx b/pages/contracts.tsx
@@ -15,7 +15,7 @@ import Table from 'components/Table'
 import Amount from 'components/Amount'
 import SortIcon from 'assets/icons/sort.svg'
 import { SIZES } from 'components/PageSize'
-import { PCKB_UDT_INFO, client, GraphQLSchema, handleDeleteInvalid } from 'utils'
+import { PCKB_UDT_INFO, client, GraphQLSchema, handleSorterArrayFromUrl, handleSorterArrayAfterClick } from 'utils'
 import styles from './index.module.scss'
 
 interface Variables {
@@ -105,31 +105,32 @@ const ContractList = () => {
     query: { before = null, after = null, page_size = SIZES[1], tx_count_sort, balance_sort, ...restQuery },
   } = useRouter()
 
-  const handleSorterValues = () => {
-    let originalSorter = {
-      tx_count_sort,
-      balance_sort,
-    }
+  const handleSorterValues = (url, sorters) => {
+    const paramArr = url.slice(url.indexOf('?') + 1).split('&')
+    const sorterParams = []
 
-    // delete the invalid properties
-    const validSorter = handleDeleteInvalid(originalSorter)
+    paramArr.map(param => {
+      const [key, val] = param.split('=')
+      const decodeVal = decodeURIComponent(val)
 
-    return Object.keys(validSorter)?.[0]
-      ? {
-          sort_type: Object.values(validSorter)[0],
-          sort_value: SmartContractsSorterValueEnum[Object.keys(validSorter)[0]],
-        }
-      : null
+      sorters.includes(key) &&
+        sorterParams.push({ sort_type: decodeVal, sort_value: SmartContractsSorterValueEnum[key] })
+    })
+    return sorterParams
   }
 
+  const sorters = ['tx_count_sort', 'balance_sort']
+  const pathSorterArray = handleSorterArrayFromUrl(asPath, sorters)
+  const sorterArray = handleSorterValues(asPath, sorters)
+
   const { isLoading, data } = useQuery(
     ['contract-list', before, after, page_size, tx_count_sort, balance_sort],
     () =>
       fetchList({
         before: before as string,
         after: after as string,
         limit: Number.isNaN(+page_size) ? +SIZES[1] : +page_size,
-        sorter: handleSorterValues() ? [handleSorterValues()] : [],
+        sorter: sorterArray ? sorterArray : [],
       }),
     {
       refetchInterval: 10000,
@@ -144,7 +145,7 @@ const ContractList = () => {
       `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({
         ...restQuery,
         page_size: page_size as string,
-        [type]: order === 'DESC' ? 'ASC' : 'DESC',
+        ...handleSorterArrayAfterClick(pathSorterArray, { type, order: order === 'DESC' ? 'ASC' : 'DESC' }),
       })}`,
     )
   }

diff --git a/utils/handler.ts b/utils/handler.ts
@@ -74,11 +74,24 @@ export const handleNftImageLoadError = (e: React.SyntheticEvent<HTMLImageElement
   e.currentTarget.src = '/images/nft-placeholder.svg'
 }
 
-export const handleDeleteInvalid = (obj: Record<string, any>) => {
-  Object.keys(obj).forEach(item => {
-    if (!obj[item] && obj[item] != 0) {
-      delete obj[item]
-    }
+export const handleSorterArrayFromUrl = (url, sorters) => {
+  const paramArr = url.slice(url.indexOf('?') + 1).split('&')
+  const sorterParams = []
+
+  paramArr.map(param => {
+    const [key, val] = param.split('=')
+    const decodeVal = decodeURIComponent(val)
+
+    sorters.includes(key) && sorterParams.push({ type: key, order: decodeVal })
   })
-  return obj
+  return sorterParams
+}
+
+export const handleSorterArrayAfterClick = (pathSorterArray, onClickedSorter) => {
+  const { type } = onClickedSorter
+
+  const arrayExcludeClickedSorter = pathSorterArray.filter(item => item.type !== type)
+  arrayExcludeClickedSorter.unshift(onClickedSorter)
+
+  return arrayExcludeClickedSorter.reduce((pre, cur) => ({ ...pre, [cur.type]: cur.order }), {})
 }