From 9da0ca5cb3ad2d35bcc2ba3d37e1c494fd547251 Mon Sep 17 00:00:00 2001
From: Harry Tran <huytran.quang080199@gmail.com>
Date: Mon, 24 Jul 2023 21:09:30 +1000
Subject: [PATCH] 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 <stevenlgtm@gmail.com>
---
 web/src/pages/Archived.tsx | 16 +++++++++++++---
 web/src/pages/Explore.tsx  |  9 +++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 6fc5d98d..e9088a62 100644
--- 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
index acd1964b..1a73da5e 100644
--- 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 />