From 541fd9c044ad7850419d1b923c3d8f50fa229943 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Sun, 16 Apr 2023 10:00:49 +0800
Subject: [PATCH] chore: update window resize listener (#1535)

---
 web/src/components/HomeSidebar.tsx | 27 +++++++++++++++++++--------
 web/src/pages/Home.tsx             |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index cd803c19..21b3e8f4 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -1,27 +1,34 @@
 import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import { resolution } from "../utils/layout";
-import { useLayoutStore } from "../store/module";
+import { useLayoutStore, useUserStore } from "../store/module";
 import ShortcutList from "./ShortcutList";
 import TagList from "./TagList";
 import SearchBar from "./SearchBar";
 import UsageHeatMap from "./UsageHeatMap";
-import { useLocation } from "react-router-dom";
 
 const HomeSidebar = () => {
   const location = useLocation();
   const layoutStore = useLayoutStore();
+  const userStore = useUserStore();
   const showHomeSidebar = layoutStore.state.showHomeSidebar;
 
   useEffect(() => {
+    let lastStatus = layoutStore.state.showHomeSidebar;
     const handleWindowResize = () => {
-      if (window.innerWidth < resolution.md) {
-        layoutStore.setHomeSidebarStatus(false);
-      } else {
-        layoutStore.setHomeSidebarStatus(true);
+      const nextStatus = window.innerWidth < resolution.md;
+      if (lastStatus !== nextStatus) {
+        layoutStore.setHomeSidebarStatus(nextStatus);
+        lastStatus = nextStatus;
       }
     };
+
     window.addEventListener("resize", handleWindowResize);
     handleWindowResize();
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
   }, [location]);
 
   return (
@@ -45,8 +52,12 @@ const HomeSidebar = () => {
           <SearchBar />
         </div>
         <UsageHeatMap />
-        <ShortcutList />
-        <TagList />
+        {!userStore.isVisitorMode() && (
+          <>
+            <ShortcutList />
+            <TagList />
+          </>
+        )}
       </aside>
     </div>
   );
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 782400a9..c96bb336 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -40,7 +40,7 @@ function Home() {
         </div>
         <MemoList />
       </div>
-      {!userStore.isVisitorMode() && <HomeSidebar />}
+      <HomeSidebar />
     </div>
   );
 }