From 66baa71bf516d9c0258dae0a1184e2d8270b3d68 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Wed, 26 Oct 2022 21:40:22 +0800 Subject: [PATCH 01/12] fix: keep search text --- components/Search.tsx | 11 ++++++++--- utils/api/search.ts | 9 ++++++++- utils/handler.ts | 6 ------ 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/components/Search.tsx b/components/Search.tsx index 1f5097c0d..5fe2a6422 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { useRouter } from 'next/router' import Image from 'next/image' import { OutlinedInput, InputAdornment, styled, InputBaseProps } from '@mui/material' @@ -33,17 +33,22 @@ const StyledInputBase = styled((props: InputBaseProps) => { - const { push, asPath } = useRouter() + const { push, asPath, query, isReady } = useRouter() const searchRef = useRef(null) const [showClearBtn, setShowClearBtn] = useState(false) const isHome = asPath === '/' || asPath === '/zh-CN' const theme = useTheme() + useEffect(() => { + if (isReady && searchRef.current) { + searchRef.current.value = (query.search as string) || '' + } + }, [query, isReady]) + const handleSearch = async (e: React.KeyboardEvent) => { await handleSearchKeyPress(e, push) if (e.key === 'Enter') { searchRef.current?.blur() - searchRef.current.value = '' setShowClearBtn(false) } } diff --git a/utils/api/search.ts b/utils/api/search.ts index f93c08ad0..7ccba1f07 100644 --- a/utils/api/search.ts +++ b/utils/api/search.ts @@ -39,5 +39,12 @@ export const fetchSearch = (search: string) => { } } }) - .then(url => `${url}?search=${search}`) + .then(url => { + if (url.startsWith('/404') && Number.isNaN(+query)) { + // could be a native token name, go to tokens list + return `/tokens/native?name=${encodeURIComponent(query)}&search=${query}` + } else { + return `${url}?search=${search}` + } + }) } diff --git a/utils/handler.ts b/utils/handler.ts index bfbc5bb8c..ab85a7679 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -34,12 +34,6 @@ export const handleSearchKeyPress = async (e: React.KeyboardEvent Date: Wed, 26 Oct 2022 21:59:40 +0800 Subject: [PATCH 02/12] fix: 404 first render no search text --- components/Search.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/Search.tsx b/components/Search.tsx index 5fe2a6422..ed3fca633 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -40,8 +40,13 @@ const Search = () => { const theme = useTheme() useEffect(() => { + let s = query.search + if (!s) { + const q = new URLSearchParams(window.location.search) + s = q.get('search') + } if (isReady && searchRef.current) { - searchRef.current.value = (query.search as string) || '' + searchRef.current.value = (s as string) || '' } }, [query, isReady]) From 5d284c1961d09d4fca7670e8078f39c93766c7f6 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Wed, 26 Oct 2022 22:46:57 +0800 Subject: [PATCH 03/12] fix: 404 page search text --- components/Search.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/components/Search.tsx b/components/Search.tsx index ed3fca633..652e3fa2b 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -33,22 +33,19 @@ const StyledInputBase = styled((props: InputBaseProps) => { - const { push, asPath, query, isReady } = useRouter() + const { push, asPath, query } = useRouter() const searchRef = useRef(null) const [showClearBtn, setShowClearBtn] = useState(false) const isHome = asPath === '/' || asPath === '/zh-CN' const theme = useTheme() useEffect(() => { - let s = query.search - if (!s) { - const q = new URLSearchParams(window.location.search) - s = q.get('search') + if (searchRef.current) { + const queryKey = 'search' + const queryValue = query[queryKey] || asPath.match(new RegExp(`[&?]${queryKey}=(.*)(&|$)`)) + searchRef.current.value = queryValue[1] || '' } - if (isReady && searchRef.current) { - searchRef.current.value = (s as string) || '' - } - }, [query, isReady]) + }, [query, asPath]) const handleSearch = async (e: React.KeyboardEvent) => { await handleSearchKeyPress(e, push) From bbff1c0dca414f9fc1bc96892f3136fa4cb29919 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Wed, 26 Oct 2022 23:09:51 +0800 Subject: [PATCH 04/12] fix: case for no search in query --- components/Search.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/Search.tsx b/components/Search.tsx index 652e3fa2b..2d87e1562 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -40,10 +40,15 @@ const Search = () => { const theme = useTheme() useEffect(() => { - if (searchRef.current) { + if (!searchRef.current) return + if (query.search) { + searchRef.current.value = (query.search as string) || '' + } else { const queryKey = 'search' const queryValue = query[queryKey] || asPath.match(new RegExp(`[&?]${queryKey}=(.*)(&|$)`)) - searchRef.current.value = queryValue[1] || '' + if (queryValue) { + searchRef.current.value = queryValue[1] || '' + } } }, [query, asPath]) From 5dfac498e5baeee6005f215fce90c9cb63047246 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Wed, 26 Oct 2022 23:24:38 +0800 Subject: [PATCH 05/12] fix: test --- cypress/integration/search/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/search/index.spec.ts b/cypress/integration/search/index.spec.ts index d6347a623..d147dd54c 100644 --- a/cypress/integration/search/index.spec.ts +++ b/cypress/integration/search/index.spec.ts @@ -128,7 +128,7 @@ context('Search', () => { cy.get(`${ROOT_SELECTOR} input`).type(UNKNOWN_STRING) cy.get(ROOT_SELECTOR).type('{enter}') cy.url({ timeout: REDIRECT_TIMEOUT }).should('contain', `/tokens/native`) - cy.location('search').should('eq', `?name=${UNKNOWN_STRING}`) + cy.location('search').should('eq', `?name=${UNKNOWN_STRING}&search=${UNKNOWN_STRING}`) }) it('404', () => { From 98a7f2d9ea62b7a047fbc1cd09c819871ab15739 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Sat, 12 Nov 2022 10:34:29 +0800 Subject: [PATCH 06/12] fix: show search clear btn --- components/Search.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/Search.tsx b/components/Search.tsx index 2d87e1562..f6cc5b760 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -50,6 +50,9 @@ const Search = () => { searchRef.current.value = queryValue[1] || '' } } + if (searchRef.current.value) { + setShowClearBtn(true) + } }, [query, asPath]) const handleSearch = async (e: React.KeyboardEvent) => { From 0408cf7dedc56efb9030649d47fbe0563a491a12 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Thu, 17 Nov 2022 19:18:08 +0800 Subject: [PATCH 07/12] fix: recover token name search --- utils/api/search.ts | 9 +-------- utils/handler.ts | 6 ++++++ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/utils/api/search.ts b/utils/api/search.ts index 7ccba1f07..f93c08ad0 100644 --- a/utils/api/search.ts +++ b/utils/api/search.ts @@ -39,12 +39,5 @@ export const fetchSearch = (search: string) => { } } }) - .then(url => { - if (url.startsWith('/404') && Number.isNaN(+query)) { - // could be a native token name, go to tokens list - return `/tokens/native?name=${encodeURIComponent(query)}&search=${query}` - } else { - return `${url}?search=${search}` - } - }) + .then(url => `${url}?search=${search}`) } diff --git a/utils/handler.ts b/utils/handler.ts index ab85a7679..bfbc5bb8c 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -34,6 +34,12 @@ export const handleSearchKeyPress = async (e: React.KeyboardEvent Date: Thu, 17 Nov 2022 19:33:21 +0800 Subject: [PATCH 08/12] fix: tests --- cypress/integration/search/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/search/index.spec.ts b/cypress/integration/search/index.spec.ts index d147dd54c..d6347a623 100644 --- a/cypress/integration/search/index.spec.ts +++ b/cypress/integration/search/index.spec.ts @@ -128,7 +128,7 @@ context('Search', () => { cy.get(`${ROOT_SELECTOR} input`).type(UNKNOWN_STRING) cy.get(ROOT_SELECTOR).type('{enter}') cy.url({ timeout: REDIRECT_TIMEOUT }).should('contain', `/tokens/native`) - cy.location('search').should('eq', `?name=${UNKNOWN_STRING}&search=${UNKNOWN_STRING}`) + cy.location('search').should('eq', `?name=${UNKNOWN_STRING}`) }) it('404', () => { From c7870aa1ec9f48a20a64a4c9e40621e9b953dcb1 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Sat, 19 Nov 2022 17:11:07 +0800 Subject: [PATCH 09/12] refactor: use URLSearchParams --- components/Search.tsx | 6 +++--- utils/handler.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Search.tsx b/components/Search.tsx index f6cc5b760..6b59e4cf4 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -44,10 +44,10 @@ const Search = () => { if (query.search) { searchRef.current.value = (query.search as string) || '' } else { - const queryKey = 'search' - const queryValue = query[queryKey] || asPath.match(new RegExp(`[&?]${queryKey}=(.*)(&|$)`)) + // on page refresh, next.js's query.search will always be null, so need this fallback + const queryValue = new URLSearchParams(asPath.split('?')[1]).get('search') if (queryValue) { - searchRef.current.value = queryValue[1] || '' + searchRef.current.value = queryValue || '' } } if (searchRef.current.value) { diff --git a/utils/handler.ts b/utils/handler.ts index bfbc5bb8c..45894ead9 100644 --- a/utils/handler.ts +++ b/utils/handler.ts @@ -36,7 +36,7 @@ export const handleSearchKeyPress = async (e: React.KeyboardEvent Date: Sat, 19 Nov 2022 17:12:54 +0800 Subject: [PATCH 10/12] Merge branch 'develop' into fix/search From 3bfdf3b29dff270de1e2e5e47af7222ed6894cce Mon Sep 17 00:00:00 2001 From: qiweiii Date: Sat, 19 Nov 2022 17:44:42 +0800 Subject: [PATCH 11/12] fix: test --- cypress/integration/search/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/search/index.spec.ts b/cypress/integration/search/index.spec.ts index d6347a623..d147dd54c 100644 --- a/cypress/integration/search/index.spec.ts +++ b/cypress/integration/search/index.spec.ts @@ -128,7 +128,7 @@ context('Search', () => { cy.get(`${ROOT_SELECTOR} input`).type(UNKNOWN_STRING) cy.get(ROOT_SELECTOR).type('{enter}') cy.url({ timeout: REDIRECT_TIMEOUT }).should('contain', `/tokens/native`) - cy.location('search').should('eq', `?name=${UNKNOWN_STRING}`) + cy.location('search').should('eq', `?name=${UNKNOWN_STRING}&search=${UNKNOWN_STRING}`) }) it('404', () => { From d2b9686cb8634b427245040a0599fc35ea5728b4 Mon Sep 17 00:00:00 2001 From: qiweiii Date: Sat, 19 Nov 2022 18:42:51 +0800 Subject: [PATCH 12/12] refactor: use window.loaction instead of next asPath --- components/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Search.tsx b/components/Search.tsx index 6b59e4cf4..ea1581a81 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -45,7 +45,7 @@ const Search = () => { searchRef.current.value = (query.search as string) || '' } else { // on page refresh, next.js's query.search will always be null, so need this fallback - const queryValue = new URLSearchParams(asPath.split('?')[1]).get('search') + const queryValue = new URLSearchParams(window.location.search).get('search') if (queryValue) { searchRef.current.value = queryValue || '' }