From 076aa2f8aa11acf0fb8768129f793388600f1307 Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 5 Jun 2024 23:18:14 +0800 Subject: [PATCH] chore: remove memo filter --- .../components/HomeSidebar/TagsSection.tsx | 117 ++++++++---------- web/src/components/MemoFilter.tsx | 75 ----------- web/src/pages/Archived.tsx | 2 - web/src/pages/Explore.tsx | 2 - web/src/pages/Home.tsx | 2 - web/src/pages/Timeline.tsx | 3 - web/src/pages/UserProfile.tsx | 2 - 7 files changed, 54 insertions(+), 149 deletions(-) delete mode 100644 web/src/components/MemoFilter.tsx diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx index 9dca43d3..f6961429 100644 --- a/web/src/components/HomeSidebar/TagsSection.tsx +++ b/web/src/components/HomeSidebar/TagsSection.tsx @@ -1,4 +1,5 @@ import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy"; +import clsx from "clsx"; import toast from "react-hot-toast"; import { useLocation } from "react-router-dom"; import useDebounce from "react-use/lib/useDebounce"; @@ -19,6 +20,7 @@ const TagsSection = (props: Props) => { const t = useTranslate(); const location = useLocation(); const user = useCurrentUser(); + const filterStore = useFilterStore(); const tagStore = useTagStore(); const memoList = useMemoList(); const tagAmounts = Object.entries(tagStore.getState().tagAmounts) @@ -31,44 +33,7 @@ const TagsSection = (props: Props) => { await tagStore.fetchTags({ user, location }); }; - return ( -
-
- {t("common.tags")} - {tagAmounts.length > 0 && ({tagAmounts.length})} -
- {tagAmounts.length > 0 ? ( -
- {tagAmounts.map(([tag, amount]) => ( - - ))} -
- ) : ( - !props.readonly && ( -
- -

{t("tag.create-tags-guide")}

-
- ) - )} -
- ); -}; - -interface TagContainerProps { - tag: string; - amount: number; -} - -const TagContainer: React.FC = (props: TagContainerProps) => { - const t = useTranslate(); - const filterStore = useFilterStore(); - const tagStore = useTagStore(); - const { tag, amount } = props; - const user = useCurrentUser(); - const location = useLocation(); - - const handleTagClick = () => { + const handleTagClick = (tag: string) => { if (filterStore.getState().tag === tag) { filterStore.setTagFilter(undefined); } else { @@ -76,7 +41,7 @@ const TagContainer: React.FC = (props: TagContainerProps) => } }; - const handleDeleteTag = async () => { + const handleDeleteTag = async (tag: string) => { showCommonDialog({ title: t("tag.delete-tag"), content: t("tag.delete-confirm"), @@ -94,31 +59,57 @@ const TagContainer: React.FC = (props: TagContainerProps) => }; return ( -
- - -
- - -
-
- - showRenameTagDialog({ tag: tag })}> - - {t("common.rename")} - - - - {t("common.delete")} - - -
-
- {tag} - {amount > 1 && ({amount})} +
+
+ {t("common.tags")} + {tagAmounts.length > 0 && ({tagAmounts.length})}
+ {tagAmounts.length > 0 ? ( +
+ {tagAmounts.map(([tag, amount]) => ( +
+ + +
+ + +
+
+ + showRenameTagDialog({ tag: tag })}> + + {t("common.rename")} + + handleDeleteTag(tag)}> + + {t("common.delete")} + + +
+
handleTagClick(tag)} + > + {tag} + {amount > 1 && ({amount})} +
+
+ ))} +
+ ) : ( + !props.readonly && ( +
+ +

{t("tag.create-tags-guide")}

+
+ ) + )}
); }; diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx deleted file mode 100644 index bcbf2f50..00000000 --- a/web/src/components/MemoFilter.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import clsx from "clsx"; -import { useEffect } from "react"; -import { useLocation } from "react-router-dom"; -import { useFilterStore } from "@/store/module"; -import { useTranslate } from "@/utils/i18n"; -import Icon from "./Icon"; - -interface Props { - className?: string; -} - -const MemoFilter = (props: Props) => { - const t = useTranslate(); - const location = useLocation(); - const filterStore = useFilterStore(); - const filter = filterStore.state; - const showFilter = Boolean(filter.tag || filter.text || filter.visibility); - - useEffect(() => { - filterStore.clearFilter(); - }, [location]); - - if (!showFilter) { - return null; - } - - return ( -
-
- - {t("common.filter")}: -
- {filter.tag && ( -
{ - filterStore.setTagFilter(undefined); - }} - > - {filter.tag} - -
- )} - {filter.visibility && ( -
{ - filterStore.setMemoVisibilityFilter(undefined); - }} - > - {filter.visibility} - -
- )} - {filter.text && ( -
{ - filterStore.setTextFilter(undefined); - }} - > - {filter.text} - -
- )} -
- ); -}; - -export default MemoFilter; diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index ef9f76c4..1477b43b 100644 --- a/web/src/pages/Archived.tsx +++ b/web/src/pages/Archived.tsx @@ -6,7 +6,6 @@ import { showCommonDialog } from "@/components/Dialog/CommonDialog"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; import MemoContent from "@/components/MemoContent"; -import MemoFilter from "@/components/MemoFilter"; import MobileHeader from "@/components/MobileHeader"; import SearchBar from "@/components/SearchBar"; import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts"; @@ -99,7 +98,6 @@ const Archived = () => {
- {sortedMemos.map((memo) => (
{
- {sortedMemos.map((memo) => ( ))} diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index e11f9e52..497f1d30 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -6,7 +6,6 @@ import Empty from "@/components/Empty"; import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar"; import Icon from "@/components/Icon"; import MemoEditor from "@/components/MemoEditor"; -import MemoFilter from "@/components/MemoFilter"; import MemoView from "@/components/MemoView"; import MobileHeader from "@/components/MobileHeader"; import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts"; @@ -87,7 +86,6 @@ const Home = () => {
- {sortedMemos.map((memo) => ( ))} diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx index 1bfaaed5..45fc949c 100644 --- a/web/src/pages/Timeline.tsx +++ b/web/src/pages/Timeline.tsx @@ -7,7 +7,6 @@ import ActivityCalendar from "@/components/ActivityCalendar"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog"; -import MemoFilter from "@/components/MemoFilter"; import MemoView from "@/components/MemoView"; import MobileHeader from "@/components/MobileHeader"; import { TimelineSidebar, TimelineSidebarDrawer } from "@/components/TimelineSidebar"; @@ -141,8 +140,6 @@ const Timeline = () => {
- -
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx index 22fac6dc..1ff0c035 100644 --- a/web/src/pages/UserProfile.tsx +++ b/web/src/pages/UserProfile.tsx @@ -5,7 +5,6 @@ import { toast } from "react-hot-toast"; import { useParams } from "react-router-dom"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; -import MemoFilter from "@/components/MemoFilter"; import MemoView from "@/components/MemoView"; import MobileHeader from "@/components/MobileHeader"; import UserAvatar from "@/components/UserAvatar"; @@ -131,7 +130,6 @@ const UserProfile = () => {

- {sortedMemos.map((memo) => ( ))}