From 70d1301dc30d062b3d417317cbefbb1770207f10 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 25 Jan 2024 20:05:47 +0800
Subject: [PATCH] chore: use filter in url params

---
 web/src/pages/Explore.tsx     | 28 ++++++++++++++++++++++++++++
 web/src/pages/Home.tsx        | 28 ++++++++++++++++++++++++++++
 web/src/pages/UserProfile.tsx | 29 ++++++++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 7518e7a7..e16a811e 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,5 +1,6 @@
 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";
@@ -14,6 +15,7 @@ import { useTranslate } from "@/utils/i18n";
 
 const Explore = () => {
   const t = useTranslate();
+  const location = useLocation();
   const user = useCurrentUser();
   const filterStore = useFilterStore();
   const memoStore = useMemoStore();
@@ -24,6 +26,32 @@ const Explore = () => {
   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 3e872566..05a21dba 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 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";
@@ -20,6 +21,7 @@ import { useTranslate } from "@/utils/i18n";
 
 const Home = () => {
   const t = useTranslate();
+  const location = useLocation();
   const { md } = useResponsiveWidth();
   const user = useCurrentUser();
   const filterStore = useFilterStore();
@@ -34,6 +36,32 @@ const Home = () => {
     .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/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 396f5930..54fad03a 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 { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import MemoFilter from "@/components/MemoFilter";
@@ -18,6 +18,7 @@ import { useTranslate } from "@/utils/i18n";
 
 const UserProfile = () => {
   const t = useTranslate();
+  const location = useLocation();
   const params = useParams();
   const userStore = useUserStore();
   const loadingState = useLoading();
@@ -32,6 +33,18 @@ const UserProfile = () => {
     .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) {
@@ -55,6 +68,20 @@ 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]);