All questions query fix, question search highlight fix

src/components/Question.js

@@ -1,6 +1,9 @@
 import React from 'react'
 
 function highlightText(text, toHighlight) {
+  if (!text) {
+    return ''
+  }
   const re = new RegExp(toHighlight, 'gi')
   return text.replace(re, `<mark>${toHighlight}</mark>`)
 }

src/pages/allQuestions.js

@@ -83,21 +83,40 @@ export default function AllQuestions({ router }) {
   const questionCount = data ? data.reduce(countReducer, 0) : 0
 
   useEffect(() => {
-    router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
-      shallow: true,
-    })
-    // TODO: fix dis
-    const querySearch = router.query.question
-      ? decodeURIComponent(router.query.question)
-      : ''
-
-    console.log(querySearch)
-
     fetchDbs().then((res) => {
       setDbs(res)
     })
   }, [])
 
+  useEffect(() => {
+    router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
+      shallow: true,
+    })
+    const querySearch = router.query.question
+      ? decodeURIComponent(router.query.question)
+      : ''
+    const db = router.query.question ? decodeURIComponent(router.query.db) : ''
+
+    setSearchTerm(querySearch)
+    setSelectedDb(db)
+  }, [router.query.question])
+
+  useEffect(() => {
+    if (dbs) {
+      if (selectedDb === 'all') {
+        fetchAllData(dbs).then((res) => {
+          setData(mergeData(res))
+          setFetchingData(false)
+        })
+      } else {
+        fetchData(dbs[selectedDb]).then((res) => {
+          setData(res.data)
+          setFetchingData(false)
+        })
+      }
+    }
+  }, [selectedDb, dbs])
+
   const renderDbSelector = () => {
     if (dbs) {
       return (
@@ -127,23 +146,20 @@ export default function AllQuestions({ router }) {
           <div className={'selectContainer'}>
             <select
               defaultValue={-1}
+              value={selectedDb}
               onChange={(event) => {
                 const key = event.target.value
                 setData(null)
                 setFetchingData(true)
-                if (key === 'all') {
+
-                  setSelectedDb(key)
+                router.replace(
-                  fetchAllData(dbs).then((res) => {
+                  `${router.pathname}${event.target.value &&
-                    setData(mergeData(res))
+                    '?question='}${encodeURIComponent(searchTerm)}&db=${key}`,
-                    setFetchingData(false)
+                  undefined,
-                  })
+                  { shallow: true }
-                } else {
+                )
-                  setSelectedDb(dbs[key].name)
+
-                  fetchData(dbs[key]).then((res) => {
+                setSelectedDb(key)
-                    setData(res.data)
-                    setFetchingData(false)
-                  })
-                }
               }}
             >
               <option disabled value={-1}>
@@ -233,7 +249,9 @@ export default function AllQuestions({ router }) {
                   setSearchTerm(event.target.value)
                   router.replace(
                     `${router.pathname}${event.target.value &&
-                      '?question='}${encodeURIComponent(event.target.value)}`,
+                      '?question='}${encodeURIComponent(
+                      event.target.value
+                    )}&db=${selectedDb}`,
                     undefined,
                     { shallow: true }
                   )