refactory getting 'query' with a hook (#22879)

Author: Peter Bengtsson

components/Search.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'components/hooks/useTranslation'
 import { sendEvent, EventType } from 'components/lib/events'
 import { useMainContext } from './context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
+import { useQuery } from 'components/hooks/useQuery'
 import { useLanguages } from './context/LanguagesContext'
 
 import styles from './Search.module.scss'
@@ -36,10 +37,7 @@ export function Search({
   children,
 }: Props) {
   const router = useRouter()
-  const query =
-    router.query.query && Array.isArray(router.query.query)
-      ? router.query.query[0]
-      : router.query.query || ''
+  const { query, debug } = useQuery()
   const [localQuery, setLocalQuery] = useState(query)
   const [debouncedQuery, setDebouncedQuery] = useDebounce<string>(localQuery, 300)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -185,7 +183,7 @@ export function Search({
           isLoading={isLoading}
           results={previousResults}
           closeSearch={closeSearch}
-          debug={'debug' in router.query}
+          debug={debug}
           query={query}
         />
       </div>

components/hooks/useQuery.ts

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+
+type QueryInfo = {
+  query: string
+  debug: boolean
+}
+export const useQuery = (): QueryInfo => {
+  const router = useRouter()
+  const query =
+    router.query.query && Array.isArray(router.query.query)
+      ? router.query.query[0]
+      : router.query.query || ''
+
+  let debug = false
+  if (router.query.debug) {
+    // Now `router.query.debug` is either string or any array of strings
+    debug = Boolean(
+      JSON.parse(Array.isArray(router.query.debug) ? router.query.debug[0] : router.query.debug)
+    )
+  } else if (router.query.debug === '') {
+    // E.g. `?query=foo&debug` should be treated as truthy
+    debug = true
+  }
+
+  return {
+    query,
+    debug,
+  }
+}