fix(Next > useSeach): Move searchBox to hook

danactive · Dec 12, 2021 · eaea8da · eaea8da
1 parent e2da9be
commit eaea8da
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 28 deletions.
diff --git a/app/pages/[gallery]/[album].jsx b/app/pages/[gallery]/[album].jsx
@@ -39,22 +39,16 @@ export async function getStaticPaths() {
 const AlbumPage = ({ items = [] }) => {
   const {
     filtered,
-    keyword,
-    setKeyword,
-    shareUrlStem,
+    searchBox,
   } = useSearch(items)
-  const keywordResultLabel = keyword === '' ? null : (<> for &quot;{keyword}&quot;</>)
 
   return (
     <div>
       <Head>
         <title>History App - Album</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <h3>Search results {filtered?.length} of {items?.length}{keywordResultLabel}</h3>
-      <nav>{shareUrlStem}</nav>
-      <input type="text" onChange={(event) => setKeyword(event.target.value)} value={keyword} />
+      {searchBox}
       <ul>
         {filtered.map((item) => (
           <li key={item.filename} id={`select${item.id}`}>

diff --git a/app/pages/[gallery]/all.jsx b/app/pages/[gallery]/all.jsx
@@ -50,22 +50,17 @@ const AllPage = ({ items = [] }) => {
   const {
     filtered,
     keyword,
-    setKeyword,
-    shareUrlStem,
+    searchBox,
   } = useSearch(items)
   const showThumbnail = (kw = '') => kw.length > 2
-  const keywordResultLabel = keyword === '' ? null : (<> for &quot;{keyword}&quot;</>)
 
   return (
     <div>
       <Head>
         <title>History App - All</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <h3>Search results {filtered?.length} of {items?.length}{keywordResultLabel}</h3>
-      <nav>{shareUrlStem}</nav>
-      <input type="text" onChange={(event) => setKeyword(event.target.value)} value={keyword} />
+      {searchBox}
       <ul>
         {filtered.map((item) => (
           <li key={item.filename}>

diff --git a/app/src/hooks/useSearch.jsx b/app/src/hooks/useSearch.jsx
@@ -24,25 +24,31 @@ const useSearch = (items) => {
     return `${router.asPath}?keyword=${keyword}`
   }
 
+  const keywordResultLabel = keyword === '' ? null : (<> for &quot;{keyword}&quot;</>)
+  const getSearchBox = (filtered) => (
+    <>
+      <h3>Search results {filtered?.length} of {items?.length}{keywordResultLabel}</h3>
+      <nav>{getShareUrlStem()}</nav>
+      <input type="text" onChange={(event) => setKeyword(event.target.value)} value={keyword} />
+    </>
+  )
+
+  const defaultReturn = {
+    filtered: items,
+    keyword: '',
+    setKeyword,
+    searchBox: getSearchBox(items),
+  }
+
   useEffect(() => {
     if (router.isReady && router.query.keyword) {
       setKeyword(router.query.keyword)
     }
-    return {
-      filtered: items,
-      keyword: '',
-      setKeyword,
-      shareUrlStem: getShareUrlStem(),
-    }
+    return defaultReturn
   }, [router.isReady])
 
   if (!router.isReady) {
-    return {
-      filtered: items,
-      keyword: '',
-      setKeyword,
-      shareUrlStem: getShareUrlStem(),
-    }
+    return defaultReturn
   }
 
   const filtered = items.filter((item) => {
@@ -56,7 +62,7 @@ const useSearch = (items) => {
     filtered,
     keyword,
     setKeyword,
-    shareUrlStem: getShareUrlStem(),
+    searchBox: getSearchBox(filtered),
   }
 }