From 7eceb2c57da767cbb11e8dcbde5e017ab865af0b Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 21 Nov 2022 01:01:01 +0800 Subject: [PATCH 01/11] add sorter --- pages/nft-collections/index.tsx | 100 +++++++++++++++++++---- pages/nft-collections/styles.module.scss | 3 + 2 files changed, 86 insertions(+), 17 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index 16bc728f8..a6b46d7f8 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -13,22 +13,55 @@ import Pagination from 'components/SimplePagination' import TokenLogo from 'components/TokenLogo' import HashLink from 'components/HashLink' import Address from 'components/TruncatedAddress' +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 } from 'utils' import styles from './styles.module.scss' -import FilterMenu from 'components/FilterMenu' +// TODO: minted count sort +interface Variables { + name: string | null + before: string | null + after: string | null + limit: number + holder_count_sort: string + name_sort: string +} interface NftCollectionListProps { erc721_udts: { entries: Array metadata: GraphQLSchema.PageMetadata } } +enum SortTypesEnum { + holder_count_sort = 'holder_count_sort', + name_sort = 'name_sort', +} const erc721ListQuery = gql` - query ($limit: Int, $name: String, $before: String, $after: String) { - erc721_udts(input: { limit: $limit, fuzzy_name: $name, before: $before, after: $after }) { + query ( + $limit: Int + $name: String + $before: String + $after: String + $holder_count_sort: SortType + $name_sort: SortType + ) { + erc721_udts( + input: { + limit: $limit + fuzzy_name: $name + before: $before + after: $after + sorter: [ + { sort_type: $holder_count_sort, sort_value: EX_HOLDERS_COUNT } + { sort_type: $name_sort, sort_value: NAME } + ] + } + ) { entries { id name @@ -50,13 +83,6 @@ const erc721ListQuery = gql` } ` -interface Variables { - name: string | null - before: string | null - after: string | null - limit: number -} - const fetchErc721List = (variables: Variables): Promise => client .request(erc721ListQuery, variables) @@ -72,27 +98,55 @@ const fetchErc721List = (variables: Variables): Promise { - const [t] = useTranslation(['nft', 'common', 'list']) const { - query: { before = null, after = null, name = null, page_size = SIZES[1] }, + push, + asPath, + query: { + before = null, + after = null, + name = null, + page_size = SIZES[1], + holder_count_sort = 'DESC', + name_sort = 'DESC', + ...restQuery + }, } = useRouter() - + const [t] = useTranslation(['nft', 'common', 'list']) const title = t(`nft-collections`) + const { isLoading, data: list } = useQuery( - ['erc721-list', page_size, before, after, name], + ['erc721-list', page_size, before, after, name, holder_count_sort, name_sort], () => fetchErc721List({ before: before as string, after: after as string, name: name ? `${name}%` : null, limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size, + holder_count_sort: holder_count_sort as string, + name_sort: name_sort as string, }), { refetchInterval: 10000 }, ) + const handleSorterClick = (e: React.MouseEvent, type) => { + const { + dataset: { order }, + } = e.currentTarget + push( + `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({ + ...restQuery, + name: name ? (name as string) : '', + page_size: page_size as string, + holder_count_sort: holder_count_sort as string, + name_sort: name_sort as string, + [type]: order === 'ASC' ? 'DESC' : 'ASC', + })}`, + ) + } + return ( <> @@ -113,12 +167,24 @@ const NftCollectionList = () => { {t('token')} - + + handleSorterClick(e, SortTypesEnum.name_sort)} + data-order={name_sort} + className={styles.sorter} + /> {t('address')} - {t('holder_count')} + + {t('holder_count')} + handleSorterClick(e, SortTypesEnum.holder_count_sort)} + data-order={holder_count_sort} + className={styles.sorter} + /> + {t('minted_count')} diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index fa187fd4a..735342520 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -95,3 +95,6 @@ .noRecords { @include empty-list; } +.pr-6 { + padding-right: 6px; +} From 235e60daf5ee450c8d5e58e0d3bbd95d352aab70 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 21 Nov 2022 23:58:39 +0800 Subject: [PATCH 02/11] update --- pages/nft-collections/index.tsx | 47 +++++++++++++----------- pages/nft-collections/styles.module.scss | 5 +++ 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index a6b46d7f8..dcd101728 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -147,6 +147,8 @@ const NftCollectionList = () => { ) } + const headers = ['token', 'address', 'holder_count', 'minted_count'] + return ( <> @@ -165,27 +167,30 @@ const NftCollectionList = () => { - - - - + {headers.map(item => ( + + ))} diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index 735342520..f6ed7d298 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -95,6 +95,11 @@ .noRecords { @include empty-list; } + .pr-6 { padding-right: 6px; } + +.pr-8 { + padding-right: 8px; +} From b036b51469a02efd07181526d4a46d92a929cb7b Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Tue, 22 Nov 2022 00:33:40 +0800 Subject: [PATCH 03/11] update --- pages/nft-collections/index.tsx | 2 +- pages/nft-collections/styles.module.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index dcd101728..b8a8fc1f7 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -169,7 +169,7 @@ const NftCollectionList = () => { {headers.map(item => ( {headers.map(item => ( - ))} diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index 28848a471..6483d1334 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -96,10 +96,10 @@ @include empty-list; } -.pr-4 { +.header-name { padding-right: 4px; } -.pr-8 { +.token-sorter { padding-right: 8px; } From 7993e4ca0bec5e422d9598f0705f0371103e2f2d Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Wed, 1 Feb 2023 00:11:18 +0800 Subject: [PATCH 05/11] update --- pages/nft-collections/index.tsx | 84 +++++++++++++++++---------------- utils/handler.ts | 9 ++++ 2 files changed, 53 insertions(+), 40 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index 14a12ae6b..dc17dcdd4 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 } from 'utils' +import { client, GraphQLSchema, handleDeleteInvalid } from 'utils' import styles from './styles.module.scss' // TODO: minted count sort @@ -27,9 +27,15 @@ interface Variables { before: string | null after: string | null limit: number - holder_count_sort: string - name_sort: string - minted_count_sort: string + // holder_count_sort: string + // name_sort: string + // minted_count_sort: string + sorter: UdtsSorterInput[] | [] +} + +type UdtsSorterInput = { + sort_type: 'ASC' | 'DESC' + sort_value: 'EX_HOLDERS_COUNT' | 'ID' | 'NAME' | 'SUPPLY' | 'MINTED_COUNT' } interface NftCollectionListProps { erc721_udts: { @@ -42,30 +48,19 @@ enum SortTypesEnum { name_sort = 'name_sort', minted_count_sort = 'minted_count_sort', } +enum UdtsSorterValueEnum { + holder_count_sort = 'EX_HOLDERS_COUNT', + name_sort = 'NAME', + minted_count_sort = 'MINTED_COUNT', +} + +// $holder_count_sort: SortType +// $name_sort: SortType +// $minted_count_sort: SortType const erc721ListQuery = gql` - query ( - $limit: Int - $name: String - $before: String - $after: String - $holder_count_sort: SortType - $name_sort: SortType - $minted_count_sort: SortType - ) { - erc721_udts( - input: { - limit: $limit - fuzzy_name: $name - before: $before - after: $after - sorter: [ - { sort_type: $holder_count_sort, sort_value: EX_HOLDERS_COUNT } - { sort_type: $name_sort, sort_value: NAME } - { sort_type: $minted_count_sort, sort_value: MINTED_COUNT } - ] - } - ) { + query ($limit: Int, $name: String, $before: String, $after: String, $sorter: UdtsSorterInput) { + erc721_udts(input: { limit: $limit, fuzzy_name: $name, before: $before, after: $after, sorter: $sorter }) { entries { id name @@ -103,11 +98,6 @@ const fetchErc721List = (variables: Variables): Promise { const { @@ -118,26 +108,41 @@ const NftCollectionList = () => { after = null, name = null, page_size = SIZES[1], - holder_count_sort = 'DESC', - name_sort = 'DESC', - minted_count_sort = 'DESC', + holder_count_sort, + name_sort, + minted_count_sort, ...restQuery }, } = 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) + + return Object.keys(validSorter)?.[0] + ? { + sort_type: Object.values(validSorter)[0], + sort_value: UdtsSorterValueEnum[Object.keys(validSorter)[0]], + } + : null + } const { isLoading, data: list } = useQuery( - ['erc721-list', page_size, before, after, name, holder_count_sort, name_sort], + ['erc721-list', page_size, before, after, name, holder_count_sort, name_sort, minted_count_sort], () => fetchErc721List({ before: before as string, after: after as string, name: name ? `${name}%` : null, limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size, - holder_count_sort: holder_count_sort as string, - name_sort: name_sort as string, - minted_count_sort: minted_count_sort as string, + sorter: handleSorter() ? [handleSorter()] : [], }), { refetchInterval: 10000 }, ) @@ -149,10 +154,9 @@ const NftCollectionList = () => { push( `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({ ...restQuery, - ...defaultSortValues, name: name ? (name as string) : '', page_size: page_size as string, - [type]: order === 'ASC' ? 'DESC' : 'ASC', + [type]: order === 'DESC' ? 'ASC' : 'DESC', })}`, ) } diff --git a/utils/handler.ts b/utils/handler.ts index c13bff5f0..3a9843464 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -124,3 +124,12 @@ export const handleSorterArrayInOrder = (pathSorterArray: sorterType[], onClicke } return pathSorterArray } + +export const handleDeleteInvalid = (obj: Record) => { + Object.keys(obj).forEach(item => { + if (!obj[item] && obj[item] != 0) { + delete obj[item] + } + }) + return obj +} From f4e2b6ca43bad3da08fa8f298b4cc2d15cc2ec32 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Wed, 1 Feb 2023 09:45:28 +0800 Subject: [PATCH 06/11] delete comments --- pages/nft-collections/index.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index dc17dcdd4..4ec18ba57 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -21,15 +21,11 @@ import SortIcon from 'assets/icons/sort.svg' import { client, GraphQLSchema, handleDeleteInvalid } from 'utils' import styles from './styles.module.scss' -// TODO: minted count sort interface Variables { name: string | null before: string | null after: string | null limit: number - // holder_count_sort: string - // name_sort: string - // minted_count_sort: string sorter: UdtsSorterInput[] | [] } @@ -54,10 +50,6 @@ enum UdtsSorterValueEnum { minted_count_sort = 'MINTED_COUNT', } -// $holder_count_sort: SortType -// $name_sort: SortType -// $minted_count_sort: SortType - const erc721ListQuery = gql` query ($limit: Int, $name: String, $before: String, $after: String, $sorter: UdtsSorterInput) { erc721_udts(input: { limit: $limit, fuzzy_name: $name, before: $before, after: $after, sorter: $sorter }) { From 030b64ea8e79441e8459604ad26c75af3ec0ed78 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Sun, 5 Feb 2023 23:11:36 +0800 Subject: [PATCH 07/11] update logic --- pages/nft-collections/index.tsx | 34 +++++++++--------- utils/handler.ts | 63 +++++++-------------------------- 2 files changed, 30 insertions(+), 67 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 3a9843464..779e25147 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -75,61 +75,24 @@ export const handleNftImageLoadError = (e: React.SyntheticEvent { - const params = url.slice(url.indexOf('?') + 1) - const sorterParamsArray = [] +export const handleSorterArrayFromUrl = (url, sorters) => { + const paramArr = url.slice(url.indexOf('?') + 1).split('&') + const sorterParams = [] - const searchParams = new URLSearchParams(params) - const keys = [...searchParams.keys()] + paramArr.map(param => { + const [key, val] = param.split('=') + const decodeVal = decodeURIComponent(val) - keys?.map((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], - }) - - // return sort array which from url, like: [{type: xxx , order: ASC}] - } else { - sorterParamsArray.push({ type: item, order: decodeURIComponent([...searchParams.values()][index]) }) - } - } + sorters.includes(key) && sorterParams.push({ type: key, order: decodeVal }) }) - - return sorterParamsArray -} -export type sorterType = { - type: string - order: 'ASC' | 'DESC' + return sorterParams } -export const handleSorterArrayInOrder = (pathSorterArray: sorterType[], onClickedSorter: sorterType = null) => { - if (onClickedSorter) { - const { type } = onClickedSorter +export const handleSorterArrayAfterClick = (pathSorterArray, onClickedSorter) => { + const { type } = onClickedSorter - // return a sorter array with the clicked one is on the first position - pathSorterArray.sort((preSorter, curSorter) => { - if (preSorter.type === type) { - return -1 - } else if (curSorter.type === type) { - return 1 - } else { - return 0 - } - }) - pathSorterArray[0] = onClickedSorter - } - return pathSorterArray -} + const arrayExcludeClickedSorter = pathSorterArray.filter(item => item.type !== type) + arrayExcludeClickedSorter.unshift(onClickedSorter) -export const handleDeleteInvalid = (obj: Record) => { - Object.keys(obj).forEach(item => { - if (!obj[item] && obj[item] != 0) { - delete obj[item] - } - }) - return obj + return arrayExcludeClickedSorter.reduce((pre, cur) => ({ ...pre, [cur.type]: cur.order }), {}) } From eba2e880a1f9682c3a1f9769ee8c7e99dd19c593 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 6 Mar 2023 01:59:04 +0800 Subject: [PATCH 08/11] update sort logic --- pages/nft-collections/index.tsx | 51 +++++++++++++++++++-------------- utils/handler.ts | 43 ++++++++++++++++++--------- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index 7a188796e..a044fa3ec 100644 --- 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 index 779e25147..8b4af474e 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -75,24 +75,41 @@ export const handleNftImageLoadError = (e: React.SyntheticEvent { - 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 }), {}) + } } From a564d2d07e8ea4c292159d774971d5f0e3bdbdb1 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 6 Mar 2023 02:03:30 +0800 Subject: [PATCH 09/11] delete comments --- pages/nft-collections/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index a044fa3ec..20dd909fe 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -137,9 +137,6 @@ const NftCollectionList = () => { } }, [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], () => From 13aff7aa6f6a913221b88976bbf7c5125ea1174d Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Wed, 8 Mar 2023 00:42:22 +0800 Subject: [PATCH 10/11] optimize logic --- pages/nft-collections/index.tsx | 22 +++++++++++++--------- utils/handler.ts | 31 +++++++++++++++++++++---------- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index 20dd909fe..dcc4746b5 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -1,5 +1,5 @@ -import { useEffect } from 'react' import type { GetStaticProps } from 'next' +import { useEffect } from 'react' import { useRouter } from 'next/router' import NextLink from 'next/link' import { useTranslation } from 'next-i18next' @@ -19,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, handleSorterArrayAboutPath, handleSorterArrayToMap } from 'utils' +import { client, GraphQLSchema, handleSorterArrayAboutPath, handleSorterArrayInOrder, sorterType } from 'utils' import styles from './styles.module.scss' interface Variables { @@ -111,7 +111,7 @@ const NftCollectionList = () => { const title = t(`nft-collections`) const sorters = ['holder_count_sort', 'name_sort', 'minted_count_sort'] - const DEFAULT_SORTERS = [ + const DEFAULT_SORTERS: sorterType[] = [ { type: 'name_sort', order: 'ASC' }, { type: 'holder_count_sort', order: 'ASC' }, { type: 'minted_count_sort', order: 'ASC' }, @@ -122,15 +122,19 @@ const NftCollectionList = () => { // 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({ + const handleUrlForPush = (clickedSorter: sorterType = null) => { + const searchParams = new URLSearchParams({ ...restQuery, - name: name ? (name as string) : '', page_size: page_size as string, - ...handleSorterArrayToMap(clickedSorter ? sorterArrayFromPath : DEFAULT_SORTERS, clickedSorter), - })}` - } + }) + const orderedSorter = handleSorterArrayInOrder(clickedSorter ? sorterArrayFromPath : DEFAULT_SORTERS, clickedSorter) + for (const item of orderedSorter) { + searchParams.append(item.type, item.order) + } + + return `${asPath.split('?')[0] ?? ''}?${searchParams}` + } useEffect(() => { if (!sorterArrayFromPath.length) { push(handleUrlForPush()) diff --git a/utils/handler.ts b/utils/handler.ts index 8b4af474e..c13bff5f0 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -76,12 +76,14 @@ export const handleNftImageLoadError = (e: React.SyntheticEvent { +export const handleSorterArrayAboutPath = (url: string, sorters: string[], sorterValueEnum = null) => { const params = url.slice(url.indexOf('?') + 1) const sorterParamsArray = [] const searchParams = new URLSearchParams(params) - Array(...searchParams.keys()).forEach((item, index) => { + const keys = [...searchParams.keys()] + + keys?.map((item, index) => { if (sorters.includes(item)) { // return sort array which used for query, like: [{sort_type: ASC , sort_value: xxx}] if (sorterValueEnum) { @@ -99,17 +101,26 @@ export const handleSorterArrayAboutPath = (url, sorters, sorterValueEnum = null) return sorterParamsArray } +export type sorterType = { + type: string + order: 'ASC' | 'DESC' +} -export const handleSorterArrayToMap = (pathSorterArray, onClickedSorter = null) => { +export const handleSorterArrayInOrder = (pathSorterArray: sorterType[], onClickedSorter: sorterType = null) => { if (onClickedSorter) { const { type } = onClickedSorter - const arrayExcludeClickedSorter = pathSorterArray.filter(item => item.type !== type) - - arrayExcludeClickedSorter.unshift(onClickedSorter) - // 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 }), {}) + // return a sorter array with the clicked one is on the first position + pathSorterArray.sort((preSorter, curSorter) => { + if (preSorter.type === type) { + return -1 + } else if (curSorter.type === type) { + return 1 + } else { + return 0 + } + }) + pathSorterArray[0] = onClickedSorter } + return pathSorterArray } From e33e1bbbb4151bdb15666217937e3705b8b51689 Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Thu, 23 Mar 2023 12:47:31 +0800 Subject: [PATCH 11/11] update test cases --- cypress/integration/tokens/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/tokens/index.spec.ts b/cypress/integration/tokens/index.spec.ts index abf30517d..5c5f8435b 100644 --- a/cypress/integration/tokens/index.spec.ts +++ b/cypress/integration/tokens/index.spec.ts @@ -202,7 +202,7 @@ context('Tokens List Pages Tests', () => { .first() .find('td') .first() - .should('contain.text', 'YokaiswapNFT') + .should('contain.text', '57us test Collection(57u)') .next() .should(field => { expect(field.text()).to.match(FULL_ADDRESS_REGEX)
- {t('token')} - - - - handleSorterClick(e, SortTypesEnum.name_sort)} - data-order={name_sort} - className={styles.sorter} - /> - {t('address')} - {t('holder_count')} - handleSorterClick(e, SortTypesEnum.holder_count_sort)} - data-order={holder_count_sort} - className={styles.sorter} - /> - {t('minted_count')} + {t(item)} + {item === 'token' ? ( + <> + + handleSorterClick(e, SortTypesEnum.name_sort)} + data-order={name_sort} + className={styles.sorter} + /> + + + + ) : null} + {item === 'holder_count' ? ( + handleSorterClick(e, SortTypesEnum.holder_count_sort)} + data-order={holder_count_sort} + className={styles.sorter} + /> + ) : null} +
- {t(item)} + {t(item)} {item === 'token' ? ( <> diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index f6ed7d298..28848a471 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -96,8 +96,8 @@ @include empty-list; } -.pr-6 { - padding-right: 6px; +.pr-4 { + padding-right: 4px; } .pr-8 { From 2cbd023754b8c85f01fa9db2e7bc0a288e14e42e Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Tue, 31 Jan 2023 14:39:51 +0800 Subject: [PATCH 04/11] update sorter --- pages/nft-collections/index.tsx | 27 +++++++++++++++++++----- pages/nft-collections/styles.module.scss | 4 ++-- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index b8a8fc1f7..14a12ae6b 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -29,6 +29,7 @@ interface Variables { limit: number holder_count_sort: string name_sort: string + minted_count_sort: string } interface NftCollectionListProps { erc721_udts: { @@ -39,6 +40,7 @@ interface NftCollectionListProps { enum SortTypesEnum { holder_count_sort = 'holder_count_sort', name_sort = 'name_sort', + minted_count_sort = 'minted_count_sort', } const erc721ListQuery = gql` @@ -49,6 +51,7 @@ const erc721ListQuery = gql` $after: String $holder_count_sort: SortType $name_sort: SortType + $minted_count_sort: SortType ) { erc721_udts( input: { @@ -59,6 +62,7 @@ const erc721ListQuery = gql` sorter: [ { sort_type: $holder_count_sort, sort_value: EX_HOLDERS_COUNT } { sort_type: $name_sort, sort_value: NAME } + { sort_type: $minted_count_sort, sort_value: MINTED_COUNT } ] } ) { @@ -99,6 +103,11 @@ const fetchErc721List = (variables: Variables): Promise { const { @@ -111,6 +120,7 @@ const NftCollectionList = () => { page_size = SIZES[1], holder_count_sort = 'DESC', name_sort = 'DESC', + minted_count_sort = 'DESC', ...restQuery }, } = useRouter() @@ -127,6 +137,7 @@ const NftCollectionList = () => { limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size, holder_count_sort: holder_count_sort as string, name_sort: name_sort as string, + minted_count_sort: minted_count_sort as string, }), { refetchInterval: 10000 }, ) @@ -138,10 +149,9 @@ const NftCollectionList = () => { push( `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({ ...restQuery, + ...defaultSortValues, name: name ? (name as string) : '', page_size: page_size as string, - holder_count_sort: holder_count_sort as string, - name_sort: name_sort as string, [type]: order === 'ASC' ? 'DESC' : 'ASC', })}`, ) @@ -168,11 +178,11 @@ const NftCollectionList = () => {
- {t(item)} + + {t(item)} {item === 'token' ? ( <> - + handleSorterClick(e, SortTypesEnum.name_sort)} data-order={name_sort} @@ -189,6 +199,13 @@ const NftCollectionList = () => { className={styles.sorter} /> ) : null} + {item === 'minted_count' ? ( + handleSorterClick(e, SortTypesEnum.minted_count_sort)} + data-order={minted_count_sort} + className={styles.sorter} + /> + ) : null}