Search term in query for all questions

src/pages/_app.js

@@ -6,7 +6,7 @@ import Layout from '../components/layout'
 function MyApp({ Component, pageProps, router }) {
   return (
     <Layout route={router.route}>
-      <Component {...pageProps} />
+      <Component {...pageProps} router={router} />
     </Layout>
   )
 }

src/pages/allQuestions.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
 import fetch from 'unfetch'
 
 import LoadingIndicator from '../components/LoadingIndicator.js'
@@ -7,13 +8,13 @@ import QuestionSearchResult from '../components/QuestionSearchResult.js'
 import styles from './allQuestions.module.css'
 import constants from '../constants.json'
 
-export default function AllQuestions (props) {
+export default function AllQuestions({ router }) {
   const [data, setData] = useState(null)
   const [searchTerm, setSearchTerm] = useState('')
 
   useEffect(() => {
     fetch(`${constants.apiUrl}data.json`, {
-      credentials: 'include'
+      credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
@@ -21,6 +22,7 @@ export default function AllQuestions (props) {
       .then((data) => {
         setData(data)
       })
+    setSearchTerm(router.query.q ? decodeURIComponent(router.query.q) : '')
   }, [])
 
   if (data) {
@@ -28,11 +30,19 @@ export default function AllQuestions (props) {
       <div>
         <div className={styles.searchContainer}>
           <input
-            placeholder='Keresés...'
+            placeholder="Keresés..."
             className={styles.searchBar}
-            type='text'
+            type="text"
             value={searchTerm}
-            onChange={(e) => { setSearchTerm(e.target.value) }}
+            onChange={(e) => {
+              setSearchTerm(e.target.value)
+              router.replace(
+                `${router.pathname}${e.target.value &&
+                  '?q='}${encodeURIComponent(e.target.value)}`,
+                undefined,
+                { shallow: true }
+              )
+            }}
           />
           <button
             onClick={() => {
@@ -45,16 +55,11 @@ export default function AllQuestions (props) {
         </div>
         <hr />
         <div>
-          <QuestionSearchResult
-            data={data}
-            searchTerm={searchTerm}
-          />
+          <QuestionSearchResult data={data} searchTerm={searchTerm} />
         </div>
       </div>
     )
   } else {
-    return (
-      <LoadingIndicator />
-    )
+    return <LoadingIndicator />
   }
 }