From d7889d9903f0035bd983a97335e0d9f0337e9e2c Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 26 Jan 2024 08:39:53 +0800 Subject: [PATCH] chore: tweak url filters --- web/src/hooks/useFilterWithUrlParams.ts | 44 +++++++++++++++++++++++++ web/src/pages/Archived.tsx | 5 ++- web/src/pages/Explore.tsx | 33 ++----------------- web/src/pages/Home.tsx | 33 ++----------------- web/src/pages/Timeline.tsx | 5 ++- web/src/pages/UserProfile.tsx | 34 ++----------------- 6 files changed, 55 insertions(+), 99 deletions(-) create mode 100644 web/src/hooks/useFilterWithUrlParams.ts diff --git a/web/src/hooks/useFilterWithUrlParams.ts b/web/src/hooks/useFilterWithUrlParams.ts new file mode 100644 index 00000000..57be7ccf --- /dev/null +++ b/web/src/hooks/useFilterWithUrlParams.ts @@ -0,0 +1,44 @@ +import { useEffect } from "react"; +import { useLocation } from "react-router-dom"; +import { useFilterStore } from "@/store/module"; + +const useFilterWithUrlParams = () => { + const location = useLocation(); + const filterStore = useFilterStore(); + const { tag, text } = filterStore.state; + + useEffect(() => { + const urlParams = new URLSearchParams(location.search); + const tag = urlParams.get("tag"); + const text = urlParams.get("text"); + if (tag) { + filterStore.setTagFilter(tag); + } + if (text) { + filterStore.setTextFilter(text); + } + }, []); + + useEffect(() => { + const urlParams = new URLSearchParams(location.search); + if (tag) { + urlParams.set("tag", tag); + } else { + urlParams.delete("tag"); + } + if (text) { + urlParams.set("text", text); + } else { + urlParams.delete("text"); + } + const params = urlParams.toString(); + window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`); + }, [tag, text]); + + return { + tag, + text, + }; +}; + +export default useFilterWithUrlParams; diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index 8625a49c..20bd0571 100644 --- a/web/src/pages/Archived.tsx +++ b/web/src/pages/Archived.tsx @@ -12,8 +12,8 @@ import SearchBar from "@/components/SearchBar"; import { memoServiceClient } from "@/grpcweb"; import { getDateTimeString } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; +import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams"; import useLoading from "@/hooks/useLoading"; -import { useFilterStore } from "@/store/module"; import { useMemoStore } from "@/store/v1"; import { RowStatus } from "@/types/proto/api/v2/common"; import { Memo } from "@/types/proto/api/v2/memo_service"; @@ -23,10 +23,9 @@ const Archived = () => { const t = useTranslate(); const loadingState = useLoading(); const user = useCurrentUser(); - const filterStore = useFilterStore(); const memoStore = useMemoStore(); const [archivedMemos, setArchivedMemos] = useState([]); - const { tag: tagQuery, text: textQuery } = filterStore.state; + const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); useEffect(() => { (async () => { diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index e16a811e..9186b74e 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -1,6 +1,5 @@ import { Button } from "@mui/joy"; import { useEffect, useState } from "react"; -import { useLocation } from "react-router-dom"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; import MemoFilter from "@/components/MemoFilter"; @@ -9,49 +8,21 @@ import MobileHeader from "@/components/MobileHeader"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { getTimeStampByDate } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; -import { useFilterStore } from "@/store/module"; +import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams"; import { useMemoList, useMemoStore } from "@/store/v1"; import { useTranslate } from "@/utils/i18n"; const Explore = () => { const t = useTranslate(); - const location = useLocation(); const user = useCurrentUser(); - const filterStore = useFilterStore(); const memoStore = useMemoStore(); const memoList = useMemoList(); const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const { tag: tagQuery, text: textQuery } = filterStore.state; + const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)); useEffect(() => { - const urlParams = new URLSearchParams(location.search); - const tag = urlParams.get("tag"); - const text = urlParams.get("text"); - if (tag) { - filterStore.setTagFilter(tag); - } - if (text) { - filterStore.setTextFilter(text); - } - }, []); - - useEffect(() => { - const urlParams = new URLSearchParams(location.search); - if (tagQuery) { - urlParams.set("tag", tagQuery); - } else { - urlParams.delete("tag"); - } - if (textQuery) { - urlParams.set("text", textQuery); - } else { - urlParams.delete("text"); - } - const params = urlParams.toString(); - window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`); - memoList.reset(); fetchMemos(); }, [tagQuery, textQuery]); diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 05a21dba..752fefea 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -1,7 +1,6 @@ import { Button } from "@mui/joy"; import classNames from "classnames"; import { useEffect, useState } from "react"; -import { useLocation } from "react-router-dom"; import Empty from "@/components/Empty"; import HomeSidebar from "@/components/HomeSidebar"; import HomeSidebarDrawer from "@/components/HomeSidebarDrawer"; @@ -13,55 +12,27 @@ import MobileHeader from "@/components/MobileHeader"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { getTimeStampByDate } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; +import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams"; import useResponsiveWidth from "@/hooks/useResponsiveWidth"; -import { useFilterStore } from "@/store/module"; import { useMemoList, useMemoStore } from "@/store/v1"; import { RowStatus } from "@/types/proto/api/v2/common"; import { useTranslate } from "@/utils/i18n"; const Home = () => { const t = useTranslate(); - const location = useLocation(); const { md } = useResponsiveWidth(); const user = useCurrentUser(); - const filterStore = useFilterStore(); const memoStore = useMemoStore(); const memoList = useMemoList(); const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const { tag: tagQuery, text: textQuery } = filterStore.state; + const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const sortedMemos = memoList.value .filter((memo) => memo.rowStatus === RowStatus.ACTIVE) .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) .sort((a, b) => Number(b.pinned) - Number(a.pinned)); useEffect(() => { - const urlParams = new URLSearchParams(location.search); - const tag = urlParams.get("tag"); - const text = urlParams.get("text"); - if (tag) { - filterStore.setTagFilter(tag); - } - if (text) { - filterStore.setTextFilter(text); - } - }, []); - - useEffect(() => { - const urlParams = new URLSearchParams(location.search); - if (tagQuery) { - urlParams.set("tag", tagQuery); - } else { - urlParams.delete("tag"); - } - if (textQuery) { - urlParams.set("text", textQuery); - } else { - urlParams.delete("text"); - } - const params = urlParams.toString(); - window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`); - memoList.reset(); fetchMemos(); }, [tagQuery, textQuery]); diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx index ffec52e1..71897806 100644 --- a/web/src/pages/Timeline.tsx +++ b/web/src/pages/Timeline.tsx @@ -13,9 +13,9 @@ import { memoServiceClient } from "@/grpcweb"; import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { getNormalizedTimeString, getTimeStampByDate } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; +import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams"; import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import i18n from "@/i18n"; -import { useFilterStore } from "@/store/module"; import { useMemoList, useMemoStore } from "@/store/v1"; import { Memo } from "@/types/proto/api/v2/memo_service"; import { useTranslate } from "@/utils/i18n"; @@ -50,12 +50,11 @@ const Timeline = () => { const user = useCurrentUser(); const memoStore = useMemoStore(); const memoList = useMemoList(); - const filterStore = useFilterStore(); const [activityStats, setActivityStats] = useState>({}); const [selectedDay, setSelectedDay] = useState(); const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const { tag: tagQuery, text: textQuery } = filterStore.state; + const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)); const groupedByMonth = groupByMonth(activityStats, sortedMemos); diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx index 54fad03a..59dcd598 100644 --- a/web/src/pages/UserProfile.tsx +++ b/web/src/pages/UserProfile.tsx @@ -1,7 +1,7 @@ import { Button } from "@mui/joy"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; -import { useLocation, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; import MemoFilter from "@/components/MemoFilter"; @@ -10,41 +10,27 @@ import MobileHeader from "@/components/MobileHeader"; import UserAvatar from "@/components/UserAvatar"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { getTimeStampByDate } from "@/helpers/datetime"; +import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams"; import useLoading from "@/hooks/useLoading"; -import { useFilterStore } from "@/store/module"; import { useMemoList, useMemoStore, useUserStore } from "@/store/v1"; import { User } from "@/types/proto/api/v2/user_service"; import { useTranslate } from "@/utils/i18n"; const UserProfile = () => { const t = useTranslate(); - const location = useLocation(); const params = useParams(); const userStore = useUserStore(); const loadingState = useLoading(); - const filterStore = useFilterStore(); const [user, setUser] = useState(); const memoStore = useMemoStore(); const memoList = useMemoList(); const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const { tag: tagQuery, text: textQuery } = filterStore.state; + const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const sortedMemos = memoList.value .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) .sort((a, b) => Number(b.pinned) - Number(a.pinned)); - useEffect(() => { - const urlParams = new URLSearchParams(location.search); - const tag = urlParams.get("tag"); - const text = urlParams.get("text"); - if (tag) { - filterStore.setTagFilter(tag); - } - if (text) { - filterStore.setTextFilter(text); - } - }, []); - useEffect(() => { const username = params.username; if (!username) { @@ -68,20 +54,6 @@ const UserProfile = () => { return; } - const urlParams = new URLSearchParams(location.search); - if (tagQuery) { - urlParams.set("tag", tagQuery); - } else { - urlParams.delete("tag"); - } - if (textQuery) { - urlParams.set("text", textQuery); - } else { - urlParams.delete("text"); - } - const params = urlParams.toString(); - window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`); - memoList.reset(); fetchMemos(); }, [user, tagQuery, textQuery]);