usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-01-03 03:38:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: add search bar in archived and explore pages

* Update web/src/pages/Archived.tsx

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
Harry Tran 2023-07-24 21:09:30 +10:00 committed by GitHub
parent dc5f82ac9c
commit 9da0ca5cb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/pages/Archived.tsx
View File

@ -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>

9
web/src/pages/Explore.tsx
View File

@ -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 />