From b73b4570e14e7a72a439af7cde556fbccd2e910d Mon Sep 17 00:00:00 2001
From: Jun Ma <ma82180597@163.com>
Date: Sun, 5 Feb 2023 23:11:36 +0800
Subject: [PATCH] update logic

---
 pages/nft-collections/index.tsx | 34 ++++++++++++++++-----------------
 utils/handler.ts                | 25 ++++++++++++++++++------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx
index 4ec18ba57..7a188796e 100644
--- a/pages/nft-collections/index.tsx
+++ b/pages/nft-collections/index.tsx
@@ -18,7 +18,7 @@ import FilterMenu from 'components/FilterMenu'
 import { SIZES } from 'components/PageSize'
 import NoDataIcon from 'assets/icons/no-data.svg'
 import SortIcon from 'assets/icons/sort.svg'
-import { client, GraphQLSchema, handleDeleteInvalid } from 'utils'
+import { client, GraphQLSchema, handleSorterArrayAfterClick, handleSorterArrayFromUrl } from 'utils'
 import styles from './styles.module.scss'
 
 interface Variables {
@@ -108,24 +108,24 @@ const NftCollectionList = () => {
   } = useRouter()
   const [t] = useTranslation(['nft', 'common', 'list'])
   const title = t(`nft-collections`)
-  const handleSorter = () => {
-    let originalSorter = {
-      holder_count_sort,
-      name_sort,
-      minted_count_sort,
-    }
 
-    // delete the invalid properties
-    const validSorter = handleDeleteInvalid(originalSorter)
+  const handleSorterValues = (url, sorters) => {
+    const paramArr = url.slice(url.indexOf('?') + 1).split('&')
+    const sorterParams = []
 
-    return Object.keys(validSorter)?.[0]
-      ? {
-          sort_type: Object.values(validSorter)[0],
-          sort_value: UdtsSorterValueEnum[Object.keys(validSorter)[0]],
-        }
-      : null
+    paramArr.map(param => {
+      const [key, val] = param.split('=')
+      const decodeVal = decodeURIComponent(val)
+
+      sorters.includes(key) && sorterParams.push({ sort_type: decodeVal, sort_value: UdtsSorterValueEnum[key] })
+    })
+    return sorterParams
   }
 
+  const sorters = ['holder_count_sort', 'name_sort', 'minted_count_sort']
+  const pathSorterArray = handleSorterArrayFromUrl(asPath, sorters)
+  const sorterArray = handleSorterValues(asPath, sorters)
+
   const { isLoading, data: list } = useQuery(
     ['erc721-list', page_size, before, after, name, holder_count_sort, name_sort, minted_count_sort],
     () =>
@@ -134,7 +134,7 @@ const NftCollectionList = () => {
         after: after as string,
         name: name ? `${name}%` : null,
         limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size,
-        sorter: handleSorter() ? [handleSorter()] : [],
+        sorter: sorterArray || [],
       }),
     { refetchInterval: 10000 },
   )
@@ -148,7 +148,7 @@ const NftCollectionList = () => {
         ...restQuery,
         name: name ? (name as string) : '',
         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
index 167058593..3d7c5e036 100644
--- 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 }), {})
 }