chore: tweak url filters

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;

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<Memo[]>([]);
-  const { tag: tagQuery, text: textQuery } = filterStore.state;
+  const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
 
   useEffect(() => {
     (async () => {

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]);

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]);

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<Record<string, number>>({});
   const [selectedDay, setSelectedDay] = useState<string | undefined>();
   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);
 

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<User>();
   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]);