chore: update signin button in visitor mode

web/src/App.tsx

@@ -1,10 +1,21 @@
+import { useEffect, useState } from "react";
 import { appRouterSwitch } from "./routers";
+import { locationService } from "./services";
 import { useAppSelector } from "./store";
 
 function App() {
   const pathname = useAppSelector((state) => state.location.pathname);
+  const [isLoading, setLoading] = useState(true);
 
-  return <>{appRouterSwitch(pathname)}</>;
+  useEffect(() => {
+    locationService.updateStateWithLocation();
+    window.onpopstate = () => {
+      locationService.updateStateWithLocation();
+    };
+    setLoading(false);
+  }, []);
+
+  return <>{isLoading ? null : appRouterSwitch(pathname)}</>;
 }
 
 export default App;

web/src/components/MemoList.tsx

@@ -83,7 +83,6 @@ const MemoList: React.FC<Props> = () => {
       .fetchAllMemos()
       .then(() => {
         setFetchStatus(false);
-        memoService.updateTagsState();
       })
       .catch(() => {
         toastHelper.error("😭 Fetching failed, please try again later.");

web/src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { userService } from "../services";
-import { useAppSelector } from "../store";
 import Only from "./common/OnlyWhen";
 import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
@@ -13,8 +12,6 @@ import "../less/siderbar.less";
 interface Props {}
 
 const Sidebar: React.FC<Props> = () => {
-  const user = useAppSelector((state) => state.user.user);
-
   const handleMyAccountBtnClick = () => {
     showSettingDialog();
   };
@@ -44,17 +41,6 @@ const Sidebar: React.FC<Props> = () => {
         <button className="btn action-btn" onClick={handleArchivedBtnClick}>
           <span className="icon">🗂</span> Archived
         </button>
-        <Only when={userService.isVisitorMode()}>
-          {user ? (
-            <button className="btn action-btn" onClick={() => (window.location.href = "/")}>
-              <span className="icon">🏠</span> Back to Home
-            </button>
-          ) : (
-            <button className="btn action-btn" onClick={() => (window.location.href = "/signin")}>
-              <span className="icon">👉</span> Sign in
-            </button>
-          )}
-        </Only>
       </div>
       <Only when={!userService.isVisitorMode()}>
         <ShortcutList />

web/src/components/TagList.tsx

@@ -20,7 +20,9 @@ const TagList: React.FC<Props> = () => {
   const [tags, setTags] = useState<Tag[]>([]);
 
   useEffect(() => {
+    if (memos.length > 0) {
       memoService.updateTagsState();
+    }
   }, [memos]);
 
   useEffect(() => {

web/src/less/home.less

@@ -18,6 +18,18 @@
         @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10;
         background-color: #f6f5f4;
       }
+
+      > .addtion-btn-container {
+        @apply fixed bottom-12 left-1/2 -translate-x-1/2;
+
+        > .btn {
+          @apply bg-blue-600 text-white px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;
+
+          > .icon {
+            @apply text-lg mr-1;
+          }
+        }
+      }
     }
   }
 }

web/src/main.tsx

@@ -1,10 +1,9 @@
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
-import { updateStateWithLocation } from "./store/modules/location";
 import App from "./App";
-import "./less/global.less";
 import "./helpers/polyfill";
+import "./less/global.less";
 import "./css/index.css";
 
 const container = document.getElementById("root");
@@ -14,10 +13,3 @@ root.render(
     <App />
   </Provider>
 );
-
-window.onload = () => {
-  store.dispatch(updateStateWithLocation());
-  window.onpopstate = () => {
-    store.dispatch(updateStateWithLocation());
-  };
-};

web/src/pages/Home.tsx

@@ -12,6 +12,7 @@ import toastHelper from "../components/Toast";
 import "../less/home.less";
 
 function Home() {
+  const user = useAppSelector((state) => state.user.user);
   const location = useAppSelector((state) => state.location);
   const loadingState = useLoading();
 
@@ -53,6 +54,19 @@ function Home() {
               <MemoFilter />
             </div>
             <MemoList />
+            <Only when={userService.isVisitorMode()}>
+              <div className="addtion-btn-container">
+                {user ? (
+                  <button className="btn" onClick={() => (window.location.href = "/")}>
+                    <span className="icon">🏠</span> Back to Home
+                  </button>
+                ) : (
+                  <button className="btn" onClick={() => (window.location.href = "/signin")}>
+                    <span className="icon">👉</span> Sign in
+                  </button>
+                )}
+              </div>
+            </Only>
           </main>
         </div>
       )}

web/src/services/locationService.ts

@@ -1,6 +1,6 @@
 import { stringify } from "qs";
 import store from "../store";
-import { setQuery, setPathname, Query } from "../store/modules/location";
+import { setQuery, setPathname, Query, updateStateWithLocation } from "../store/modules/location";
 
 const updateLocationUrl = (method: "replace" | "push" = "replace") => {
   const { query, pathname, hash } = store.getState().location;
@@ -23,6 +23,10 @@ const locationService = {
     return store.getState().location;
   },
 
+  updateStateWithLocation: () => {
+    store.dispatch(updateStateWithLocation());
+  },
+
   setPathname: (pathname: string) => {
     store.dispatch(setPathname(pathname));
     updateLocationUrl();

web/src/store/modules/location.ts

@@ -64,12 +64,20 @@ const locationSlice = createSlice({
       return getStateFromLocation();
     },
     setPathname: (state, action: PayloadAction<string>) => {
+      if (state.pathname === action.payload) {
+        return state;
+      }
+
       return {
         ...state,
         pathname: action.payload,
       };
     },
     setQuery: (state, action: PayloadAction<Partial<Query>>) => {
+      if (JSON.stringify(action.payload) === state.query) {
+        return state;
+      }
+
       return {
         ...state,
         query: {