fix: keep search text (#684)

Magickbase · Nov 22, 2022 · 25ca1ed · 25ca1ed
1 parent 8b1988f
commit 25ca1ed
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git 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,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(window.location.search).get('search')
+      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)
     }
   }

diff --git 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', () => {

diff --git a/utils/handler.ts b/utils/handler.ts
@@ -36,7 +36,7 @@ export const handleSearchKeyPress = async (e: React.KeyboardEvent<HTMLInputEleme
 
   if (Number.isNaN(+search)) {
     // could be token name
-    push(`/tokens/native?name=${encodeURIComponent(search)}`)
+    push(`/tokens/native?name=${encodeURIComponent(search)}&search=${encodeURIComponent(search)}`)
     return
   }