From b28dbb6702d6e779ea5eec4f5e9b671780252702 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Mon, 12 Feb 2024 21:41:06 -0800
Subject: [PATCH] change to React.useState and encode/decode URI

---
 src/app/components/SearchBar.tsx | 22 +++++-----------------
 src/app/search/page.tsx          |  2 +-
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index 8218bbd..3bec13a 100644
--- a/src/app/components/SearchBar.tsx
+++ b/src/app/components/SearchBar.tsx
@@ -1,32 +1,21 @@
 'use client'
-import { create } from 'zustand'
 import { navigate } from '@/app/actions'
-
-interface SearchBarState {
-  searchInput: string
-  setSearchInput: (newInput: string) => void
-}
-
-const useSearchBarStore = create<SearchBarState>((set) => ({
-  searchInput: '',
-  setSearchInput: (newInput) => set({ searchInput: newInput }),
-}))
+import { useState } from 'react'
 
 export default function SearchBar() {
-  const searchBarStore = useSearchBarStore((state) => state.searchInput)
-  const setSearchBarStore = useSearchBarStore((state) => state.setSearchInput)
+  const [searchInput, setSearchInput] = useState('')
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    navigate(`/search?q=${searchBarStore.split(' ').join('+')}`)
+    navigate(`/search?q=${searchInput.split(' ').join('+')}`)
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchBarStore(e.target.value)
+    setSearchInput(e.target.value)
   }
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      navigate(`/search?q=${searchBarStore.split(' ').join('+')}`)
+      navigate(`/search?q=${encodeURIComponent(searchInput)}`)
     }
   }
 
@@ -38,7 +27,6 @@ export default function SearchBar() {
         name='q'
         placeholder='Search...'
         onChange={handleInputChange}
-        value={searchBarStore}
         onKeyDown={handleKeyPress}
       />
       <button
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 15f9b7d..c4d61b6 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -53,7 +53,7 @@ const SearchResult = ({ result }: { result: CustomSearchResult }) => {
 
 export default function Page() {
   const searchParams = useSearchParams()
-  const search = searchParams.get('q') as string
+  const search = decodeURIComponent(searchParams.get('q') as string)
 
   const { data, error } = useSuspenseQuery({
     queryKey: [search],