searchPage improvements and reducer added

components/header/index.tsx

@@ -27,15 +27,15 @@ const Header = ({
         <Navbar
           navbarLinks={navbarLinks}
           setSideMenuOpen={setSideMenuOpen}
-          setSearchOpen={() => setSearchOpen(true)}
+          openSearch={() => setSearchOpen(true)}
           sessionToken={sessionToken}
         />
         <SideMenu open={sideMenuOpen}>
           <Navbar
             navbarLinks={navbarLinks}
             position="side"
             setSideMenuOpen={setSideMenuOpen}
-            setSearchOpen={() => setSearchOpen(true)}
+            openSearch={() => setSearchOpen(true)}
             sessionToken={sessionToken}
           />
         </SideMenu>

components/header/navbar/LoginButton.tsx

@@ -11,7 +11,6 @@ const LoginButton = ({
   className?: string
   sessionToken?: string
 }) => {
-
   return !sessionToken ? (
     <button
       onClick={(e) => {

components/header/navbar/index.tsx

@@ -16,15 +16,15 @@ type NavbarProps = {
   navbarLinks: NavbarLink[]
   position?: 'top' | 'side'
   setSideMenuOpen: (state: boolean) => void
-  setSearchOpen: () => void
+  openSearch: () => void
   sessionToken?: string
 }
 
 const Navbar = ({
   navbarLinks,
   setSideMenuOpen,
   position = 'top',
-  setSearchOpen,
+  openSearch,
   sessionToken,
 }: NavbarProps) => {
   const path = usePathname()
@@ -99,7 +99,10 @@ const Navbar = ({
         </div>
 
         <Row className={position === 'side' ? 'mt-6' : ''}>
-          <button onClick={setSearchOpen} className={position === 'side' ? 'mr-10 mt-1' : ''}>
+          <button
+            onClick={openSearch}
+            className={position === 'side' ? 'mr-10 mt-1' : ''}
+          >
             <MdSearch color="white" size={32} />
           </button>
           <LoginButton sessionToken={sessionToken} />

components/header/navbar/searchpage/SearchBar.tsx

@@ -1,67 +1,46 @@
 import ActivityIndicator from '@components/ActivityIndicator'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { MdCancel, MdSearch } from 'react-icons/md'
 
 type SearchBarProps = {
   query: string
-  handleSearch: () => void
-  setQuery: (query: string) => void
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void
   clearResults: () => void
   searching: boolean
-  setIsFetched: (isFetched: boolean) => void
 }
 
 const SearchBar = ({
   query,
   handleSearch,
-  setQuery,
   clearResults,
   searching,
-  setIsFetched,
-}: SearchBarProps) => {
-  useEffect(() => {
-    setIsFetched(false)
-    const delayDebounceFn = setTimeout(() => {
-      if (query) {
-        handleSearch()
-      }
-    }, 500) // 500ms delay
-    return () => clearTimeout(delayDebounceFn)
-  }, [query])
-
-  return (
-    <div className="flex justify-center items-end w-full content-end">
-      <div className="relative w-full items-center flex justify-center align-middle">
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="Sök..."
-          className="w-full pl-10 pr-6 py-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2"
-        />
-        <MdSearch
+}: SearchBarProps) => (
+  <div className="flex justify-center items-end w-full content-end">
+    <div className="relative w-full items-center flex justify-center align-middle">
+      <input
+        type="text"
+        value={query}
+        onChange={handleSearch}
+        placeholder="Sök..."
+        className="w-full pl-10 pr-6 py-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2"
+      />
+      <MdSearch
+        size={30}
+        className="absolute left-3 top-4 h-5 w-5 text-gray-400"
+      />
+      <button onClick={clearResults}>
+        <MdCancel
           size={30}
-          className="absolute left-3 top-4 h-5 w-5 text-gray-400"
+          className="absolute right-3 top-4 h-5 w-5 text-gray-400"
         />
-        <button
-          onClick={() => {
-            clearResults()
-            setQuery('')
-          }}
-        >
-          <MdCancel
-            size={30}
-            className="absolute right-3 top-4 h-5 w-5 text-gray-400"
-          />
-          {searching && (
-            <div className="absolute right-9 top-3.5">
-              <ActivityIndicator width={25} height={25} stroke="black" />
-            </div>
-          )}
-        </button>
-      </div>
+        {searching && (
+          <div className="absolute right-9 top-3.5">
+            <ActivityIndicator width={25} height={25} stroke="black" />
+          </div>
+        )}
+      </button>
     </div>
-  )
-}
+  </div>
+)
 
 export default SearchBar