update sort logic

Magickbase · Mar 5, 2023 · 135c993 · 135c993
1 parent 87d85a7
commit 135c993
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 35 deletions.
diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import type { GetStaticProps } from 'next'
 import { useRouter } from 'next/router'
 import NextLink from 'next/link'
@@ -18,7 +19,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, handleSorterArrayAfterClick, handleSorterArrayFromUrl } from 'utils'
+import { client, GraphQLSchema, handleSorterArrayAboutPath, handleSorterArrayToMap } from 'utils'
 import styles from './styles.module.scss'
 
 interface Variables {
@@ -109,22 +110,35 @@ const NftCollectionList = () => {
   const [t] = useTranslation(['nft', 'common', 'list'])
   const title = t(`nft-collections`)
 
-  const handleSorterValues = (url, sorters) => {
-    const paramArr = url.slice(url.indexOf('?') + 1).split('&')
-    const sorterParams = []
+  const sorters = ['holder_count_sort', 'name_sort', 'minted_count_sort']
+  const DEFAULT_SORTERS = [
+    { type: 'name_sort', order: 'ASC' },
+    { type: 'holder_count_sort', order: 'ASC' },
+    { type: 'minted_count_sort', order: 'ASC' },
+  ]
 
-    paramArr.map(param => {
-      const [key, val] = param.split('=')
-      const decodeVal = decodeURIComponent(val)
+  const sorterArrayFromPath = handleSorterArrayAboutPath(asPath, sorters)
 
-      sorters.includes(key) && sorterParams.push({ sort_type: decodeVal, sort_value: UdtsSorterValueEnum[key] })
-    })
-    return sorterParams
+  // get a sorter array to query listdata from server
+  const sorterArrayForQuery = handleSorterArrayAboutPath(asPath, sorters, UdtsSorterValueEnum)
+
+  const handleUrlForPush = (clickedSorter = null) => {
+    return `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({
+      ...restQuery,
+      name: name ? (name as string) : '',
+      page_size: page_size as string,
+      ...handleSorterArrayToMap(clickedSorter ? sorterArrayFromPath : DEFAULT_SORTERS, clickedSorter),
+    })}`
   }
 
-  const sorters = ['holder_count_sort', 'name_sort', 'minted_count_sort']
-  const pathSorterArray = handleSorterArrayFromUrl(asPath, sorters)
-  const sorterArray = handleSorterValues(asPath, sorters)
+  useEffect(() => {
+    if (!sorterArrayFromPath.length) {
+      push(handleUrlForPush())
+    }
+  }, [sorterArrayFromPath])
+
+  // 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 +148,7 @@ const NftCollectionList = () => {
         after: after as string,
         name: name ? `${name}%` : null,
         limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size,
-        sorter: sorterArray || [],
+        sorter: sorterArrayForQuery,
       }),
     { refetchInterval: 10000 },
   )
@@ -143,14 +157,7 @@ const NftCollectionList = () => {
     const {
       dataset: { order },
     } = e.currentTarget
-    push(
-      `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({
-        ...restQuery,
-        name: name ? (name as string) : '',
-        page_size: page_size as string,
-        ...handleSorterArrayAfterClick(pathSorterArray, { type, order: order === 'DESC' ? 'ASC' : 'DESC' }),
-      })}`,
-    )
+    push(handleUrlForPush({ type, order: order === 'DESC' ? 'ASC' : 'DESC' }))
   }
 
   const headers = ['token', 'address', 'holder_count', 'minted_count']

diff --git a/utils/handler.ts b/utils/handler.ts
@@ -74,24 +74,41 @@ export const handleNftImageLoadError = (e: React.SyntheticEvent<HTMLImageElement
   e.currentTarget.src = '/images/nft-placeholder.svg'
 }
 
-export const handleSorterArrayFromUrl = (url, sorters) => {
-  const paramArr = url.slice(url.indexOf('?') + 1).split('&')
-  const sorterParams = []
+// return a sorter array
+export const handleSorterArrayAboutPath = (url, sorters, sorterValueEnum = null) => {
+  const params = url.slice(url.indexOf('?') + 1)
+  const sorterParamsArray = []
 
-  paramArr.map(param => {
-    const [key, val] = param.split('=')
-    const decodeVal = decodeURIComponent(val)
+  const searchParams = new URLSearchParams(params)
+  Array(...searchParams.keys()).forEach((item, index) => {
+    if (sorters.includes(item)) {
+      // return sort array which used for query, like: [{sort_type: ASC , sort_value: xxx}]
+      if (sorterValueEnum) {
+        sorterParamsArray.push({
+          sort_type: decodeURIComponent([...searchParams.values()][index]),
+          sort_value: sorterValueEnum[item],
+        })
 
-    sorters.includes(key) && sorterParams.push({ type: key, order: decodeVal })
+        // return sort array which from url, like: [{type: xxx , order: ASC}]
+      } else {
+        sorterParamsArray.push({ type: item, order: decodeURIComponent([...searchParams.values()][index]) })
+      }
+    }
   })
-  return sorterParams
+
+  return sorterParamsArray
 }
 
-export const handleSorterArrayAfterClick = (pathSorterArray, onClickedSorter) => {
-  const { type } = onClickedSorter
+export const handleSorterArrayToMap = (pathSorterArray, onClickedSorter = null) => {
+  if (onClickedSorter) {
+    const { type } = onClickedSorter
+    const arrayExcludeClickedSorter = pathSorterArray.filter(item => item.type !== type)
 
-  const arrayExcludeClickedSorter = pathSorterArray.filter(item => item.type !== type)
-  arrayExcludeClickedSorter.unshift(onClickedSorter)
+    arrayExcludeClickedSorter.unshift(onClickedSorter)
 
-  return arrayExcludeClickedSorter.reduce((pre, cur) => ({ ...pre, [cur.type]: cur.order }), {})
+    // return a sorter map with the clicked one is on the first position
+    return arrayExcludeClickedSorter.reduce((pre, cur) => ({ ...pre, [cur.type]: cur.order }), {})
+  } else {
+    return pathSorterArray.reduce((pre, cur) => ({ ...pre, [cur.type]: cur.order }), {})
+  }
 }