Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: keep search text #684

Merged
merged 15 commits into from
Nov 22, 2022
Merged

fix: keep search text #684

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
66baa71
fix: keep search text
qiweiii Oct 26, 2022
2a4d4be
fix: 404 first render no search text
qiweiii Oct 26, 2022
5d284c1
fix: 404 page search text
qiweiii Oct 26, 2022
bbff1c0
fix: case for no search in query
qiweiii Oct 26, 2022
5dfac49
fix: test
qiweiii Oct 26, 2022
c17ae2e
Merge branch 'develop' into fix/search
qiweiii Nov 12, 2022
98a7f2d
fix: show search clear btn
qiweiii Nov 12, 2022
9109966
Merge branch 'develop' into fix/search
qiweiii Nov 17, 2022
0408cf7
fix: recover token name search
qiweiii Nov 17, 2022
200c1d8
fix: tests
qiweiii Nov 17, 2022
c7870aa
refactor: use URLSearchParams
qiweiii Nov 19, 2022
3ce5ef4
Merge branch 'develop' into fix/search
qiweiii Nov 19, 2022
3d1df65
Merge branch 'develop' into fix/search
qiweiii Nov 19, 2022
3bfdf3b
fix: test
qiweiii Nov 19, 2022
d2b9686
refactor: use window.loaction instead of next asPath
qiweiii Nov 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions components/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -33,17 +33,32 @@ const StyledInputBase = styled((props: InputBaseProps) => <OutlinedInput {...pro
}))

const Search = () => {
const { push, asPath } = useRouter()
const { push, asPath, query } = useRouter()
const searchRef = useRef<HTMLInputElement | null>(null)
const [showClearBtn, setShowClearBtn] = useState(false)
const isHome = asPath === '/' || asPath === '/zh-CN'
const theme = useTheme()

useEffect(() => {
if (!searchRef.current) return
if (query.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')
Keith-CY marked this conversation as resolved.
Show resolved Hide resolved
if (queryValue) {
searchRef.current.value = queryValue || ''
}
}
if (searchRef.current.value) {
setShowClearBtn(true)
}
}, [query, asPath])

const handleSearch = async (e: React.KeyboardEvent<HTMLInputElement>) => {
await handleSearchKeyPress(e, push)
if (e.key === 'Enter') {
searchRef.current?.blur()
searchRef.current.value = ''
setShowClearBtn(false)
}
}
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/search/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion utils/handler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const handleSearchKeyPress = async (e: React.KeyboardEvent<HTMLInputEleme

if (Number.isNaN(+search)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not check if the search is a hash or block number before the request?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've got it

fix redirect to tokens list logic, if token name is matched, go to token details page directly

But the solution is improper because there could be many tokens having a same token name while the API only returns the first one, which is misleading

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zmcNotafraid we'd better remove the function of searching by token name, or return a list instead of the first record

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The API will be updated along with Magickbase/godwoken_explorer#1159 and a new page of matched token list will be added in the future.

Now just let's just recover the checking of token name before sending the request @qiweiii

// could be token name
push(`/tokens/native?name=${encodeURIComponent(search)}`)
push(`/tokens/native?name=${encodeURIComponent(search)}&search=${encodeURIComponent(search)}`)
return
}

Expand Down