feat: add search bar in archived and explore pages (#2025)

* feat: add search bar in archived and explore pages * Update web/src/pages/Archived.tsx --------- Co-authored-by: boojack <[email protected]>
usememos · Jul 24, 2023 · 9da0ca5 · 9da0ca5
1 parent dc5f82a
commit 9da0ca5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { useTranslate } from "@/utils/i18n";
 import toast from "react-hot-toast";
-import { useMemoStore } from "@/store/module";
+import { useFilterStore, useMemoStore } from "@/store/module";
 import useLoading from "@/hooks/useLoading";
 import ArchivedMemo from "@/components/ArchivedMemo";
 import MobileHeader from "@/components/MobileHeader";
 import Empty from "@/components/Empty";
+import SearchBar from "@/components/SearchBar";
+import MemoFilter from "@/components/MemoFilter";
 import "@/less/archived.less";
 
 const Archived = () => {
@@ -14,12 +16,16 @@ const Archived = () => {
   const loadingState = useLoading();
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
   const memos = memoStore.state.memos;
+  const filterStore = useFilterStore();
+  const filter = filterStore.state;
+  const { text: textQuery } = filter;
 
   useEffect(() => {
     memoStore
       .fetchArchivedMemos()
       .then((result) => {
-        setArchivedMemos(result);
+        const filteredMemos = textQuery ? result.filter((memo) => memo.content.toLowerCase().includes(textQuery.toLowerCase())) : result;
+        setArchivedMemos(filteredMemos);
       })
       .catch((error) => {
         console.error(error);
@@ -28,12 +34,16 @@ const Archived = () => {
       .finally(() => {
         loadingState.setFinish();
       });
-  }, [memos]);
+  }, [memos, textQuery]);
 
   return (
     <section className="w-full min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="archived-memo-page">
+        <div className="mb-4 mt-2 w-full">
+          <SearchBar />
+        </div>
+        <MemoFilter />
         {loadingState.isLoading ? (
           <div className="tip-text-container">
             <p className="tip-text">{t("memo.fetching-data")}</p>

diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
@@ -10,6 +10,7 @@ import MemoFilter from "@/components/MemoFilter";
 import Memo from "@/components/Memo";
 import MobileHeader from "@/components/MobileHeader";
 import Empty from "@/components/Empty";
+import SearchBar from "@/components/SearchBar";
 
 const Explore = () => {
   const t = useTranslate();
@@ -45,6 +46,11 @@ const Explore = () => {
             shouldShow = false;
           }
         }
+
+        if (textQuery && !memo.content.toLowerCase().includes(textQuery.toLowerCase())) {
+          shouldShow = false;
+        }
+
         return shouldShow;
       })
     : memos;
@@ -92,6 +98,9 @@ const Explore = () => {
   return (
     <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
+      <div className="mb-4 mt-2 w-full">
+        <SearchBar />
+      </div>
       {!loadingState.isLoading && (
         <main className="relative w-full h-auto flex flex-col justify-start items-start">
           <MemoFilter />