From 70602b8c6c695232d1c7df3f64e78ce94d4fef11 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 25 Apr 2024 21:43:17 +0800
Subject: [PATCH] feat: add last visited path

---
 frontend/web/src/components/Header.tsx        |  6 +-
 .../web/src/pages/CollectionDashboard.tsx     |  3 +
 frontend/web/src/pages/Home.tsx               | 94 +++---------------
 frontend/web/src/pages/ShortcutDashboard.tsx  | 95 +++++++++++++++++++
 frontend/web/src/routers/index.tsx            |  5 +
 5 files changed, 117 insertions(+), 86 deletions(-)
 create mode 100644 frontend/web/src/pages/ShortcutDashboard.tsx

diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index 992db08..7978468 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -18,8 +18,8 @@ const Header: React.FC = () => {
   const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
   const profile = workspaceStore.profile;
   const isAdmin = currentUser.role === Role.ADMIN;
-  const shouldShowRouterSwitch = location.pathname === "/" || location.pathname === "/collections";
-  const selectedSection = location.pathname === "/" ? "Shortcuts" : location.pathname === "/collections" ? "Collections" : "Memos";
+  const shouldShowRouterSwitch = location.pathname === "/shortcuts" || location.pathname === "/collections";
+  const selectedSection = location.pathname === "/shortcuts" ? "Shortcuts" : location.pathname === "/collections" ? "Collections" : "";
 
   const handleSignOutButtonClick = async () => {
     await authServiceClient.signOut({});
@@ -55,7 +55,7 @@ const Header: React.FC = () => {
                     <>
                       <Link
                         className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                        to="/"
+                        to="/shortcuts"
                         unstable_viewTransition
                       >
                         <Icon.SquareSlash className="w-5 h-auto mr-2 opacity-70" /> Shortcuts
diff --git a/frontend/web/src/pages/CollectionDashboard.tsx b/frontend/web/src/pages/CollectionDashboard.tsx
index 253459d..1bc9542 100644
--- a/frontend/web/src/pages/CollectionDashboard.tsx
+++ b/frontend/web/src/pages/CollectionDashboard.tsx
@@ -1,6 +1,7 @@
 import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import useLocalStorage from "react-use/lib/useLocalStorage";
 import CollectionView from "@/components/CollectionView";
 import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
 import FilterView from "@/components/FilterView";
@@ -14,6 +15,7 @@ interface State {
 
 const CollectionDashboard: React.FC = () => {
   const { t } = useTranslation();
+  const [, setLastVisited] = useLocalStorage<string>("lastVisited", "/shortcuts");
   const loadingState = useLoading();
   const shortcutStore = useShortcutStore();
   const collectionStore = useCollectionStore();
@@ -30,6 +32,7 @@ const CollectionDashboard: React.FC = () => {
   });
 
   useEffect(() => {
+    setLastVisited("/collections");
     Promise.all([shortcutStore.fetchShortcutList(), collectionStore.fetchCollectionList()]).finally(() => {
       loadingState.setFinish();
     });
diff --git a/frontend/web/src/pages/Home.tsx b/frontend/web/src/pages/Home.tsx
index 9fd61df..06b67b3 100644
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@@ -1,92 +1,20 @@
-import { Button, Input } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import CreateShortcutDrawer from "@/components/CreateShortcutDrawer";
-import FilterView from "@/components/FilterView";
-import Icon from "@/components/Icon";
-import ShortcutsContainer from "@/components/ShortcutsContainer";
-import ShortcutsNavigator from "@/components/ShortcutsNavigator";
-import ViewSetting from "@/components/ViewSetting";
-import useLoading from "@/hooks/useLoading";
-import { useShortcutStore, useUserStore, useViewStore } from "@/stores";
-import { getFilteredShortcutList, getOrderedShortcutList } from "@/stores/view";
-
-interface State {
-  showCreateShortcutDrawer: boolean;
-}
+import { useEffect } from "react";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import useNavigateTo from "@/hooks/useNavigateTo";
 
 const Home: React.FC = () => {
-  const { t } = useTranslation();
-  const loadingState = useLoading();
-  const currentUser = useUserStore().getCurrentUser();
-  const shortcutStore = useShortcutStore();
-  const viewStore = useViewStore();
-  const shortcutList = shortcutStore.getShortcutList();
-  const [state, setState] = useState<State>({
-    showCreateShortcutDrawer: false,
-  });
-  const filter = viewStore.filter;
-  const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
-  const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
+  const [lastVisited] = useLocalStorage<string>("lastVisited", "/shortcuts");
+  const navigateTo = useNavigateTo();
 
   useEffect(() => {
-    Promise.all([shortcutStore.fetchShortcutList()]).finally(() => {
-      loadingState.setFinish();
-    });
+    if (lastVisited === "/shortcuts" || lastVisited === "/collections") {
+      navigateTo(lastVisited);
+    } else {
+      navigateTo("/shortcuts");
+    }
   }, []);
 
-  const setShowCreateShortcutDrawer = (show: boolean) => {
-    setState({
-      ...state,
-      showCreateShortcutDrawer: show,
-    });
-  };
-
-  return (
-    <>
-      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
-        <ShortcutsNavigator />
-        <div className="w-full flex flex-row justify-between items-center mb-4">
-          <div className="flex flex-row justify-start items-center">
-            <Input
-              className="w-32 mr-2"
-              type="text"
-              size="sm"
-              placeholder={t("common.search")}
-              startDecorator={<Icon.Search className="w-4 h-auto" />}
-              endDecorator={<ViewSetting />}
-              value={filter.search}
-              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
-            />
-          </div>
-          <div className="flex flex-row justify-end items-center">
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
-              <Icon.Plus className="w-5 h-auto" />
-              <span className="ml-0.5">{t("common.create")}</span>
-            </Button>
-          </div>
-        </div>
-        <FilterView />
-        {loadingState.isLoading ? (
-          <div className="py-12 w-full flex flex-row justify-center items-center opacity-80 dark:text-gray-500">
-            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-            {t("common.loading")}
-          </div>
-        ) : orderedShortcutList.length === 0 ? (
-          <div className="py-16 w-full flex flex-col justify-center items-center text-gray-400">
-            <Icon.PackageOpen className="w-16 h-auto" strokeWidth="1" />
-            <p className="mt-4">No shortcuts found.</p>
-          </div>
-        ) : (
-          <ShortcutsContainer shortcutList={orderedShortcutList} />
-        )}
-      </div>
-
-      {state.showCreateShortcutDrawer && (
-        <CreateShortcutDrawer onClose={() => setShowCreateShortcutDrawer(false)} onConfirm={() => setShowCreateShortcutDrawer(false)} />
-      )}
-    </>
-  );
+  return <></>;
 };
 
 export default Home;
diff --git a/frontend/web/src/pages/ShortcutDashboard.tsx b/frontend/web/src/pages/ShortcutDashboard.tsx
new file mode 100644
index 0000000..6bdf777
--- /dev/null
+++ b/frontend/web/src/pages/ShortcutDashboard.tsx
@@ -0,0 +1,95 @@
+import { Button, Input } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import CreateShortcutDrawer from "@/components/CreateShortcutDrawer";
+import FilterView from "@/components/FilterView";
+import Icon from "@/components/Icon";
+import ShortcutsContainer from "@/components/ShortcutsContainer";
+import ShortcutsNavigator from "@/components/ShortcutsNavigator";
+import ViewSetting from "@/components/ViewSetting";
+import useLoading from "@/hooks/useLoading";
+import { useShortcutStore, useUserStore, useViewStore } from "@/stores";
+import { getFilteredShortcutList, getOrderedShortcutList } from "@/stores/view";
+
+interface State {
+  showCreateShortcutDrawer: boolean;
+}
+
+const ShortcutDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [, setLastVisited] = useLocalStorage<string>("lastVisited", "/shortcuts");
+  const loadingState = useLoading();
+  const currentUser = useUserStore().getCurrentUser();
+  const shortcutStore = useShortcutStore();
+  const viewStore = useViewStore();
+  const shortcutList = shortcutStore.getShortcutList();
+  const [state, setState] = useState<State>({
+    showCreateShortcutDrawer: false,
+  });
+  const filter = viewStore.filter;
+  const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
+  const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
+
+  useEffect(() => {
+    setLastVisited("/shortcuts");
+    Promise.all([shortcutStore.fetchShortcutList()]).finally(() => {
+      loadingState.setFinish();
+    });
+  }, []);
+
+  const setShowCreateShortcutDrawer = (show: boolean) => {
+    setState({
+      ...state,
+      showCreateShortcutDrawer: show,
+    });
+  };
+
+  return (
+    <>
+      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+        <ShortcutsNavigator />
+        <div className="w-full flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-row justify-start items-center">
+            <Input
+              className="w-32 mr-2"
+              type="text"
+              size="sm"
+              placeholder={t("common.search")}
+              startDecorator={<Icon.Search className="w-4 h-auto" />}
+              endDecorator={<ViewSetting />}
+              value={filter.search}
+              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
+            />
+          </div>
+          <div className="flex flex-row justify-end items-center">
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
+              <Icon.Plus className="w-5 h-auto" />
+              <span className="ml-0.5">{t("common.create")}</span>
+            </Button>
+          </div>
+        </div>
+        <FilterView />
+        {loadingState.isLoading ? (
+          <div className="py-12 w-full flex flex-row justify-center items-center opacity-80 dark:text-gray-500">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            {t("common.loading")}
+          </div>
+        ) : orderedShortcutList.length === 0 ? (
+          <div className="py-16 w-full flex flex-col justify-center items-center text-gray-400">
+            <Icon.PackageOpen className="w-16 h-auto" strokeWidth="1" />
+            <p className="mt-4">No shortcuts found.</p>
+          </div>
+        ) : (
+          <ShortcutsContainer shortcutList={orderedShortcutList} />
+        )}
+      </div>
+
+      {state.showCreateShortcutDrawer && (
+        <CreateShortcutDrawer onClose={() => setShowCreateShortcutDrawer(false)} onConfirm={() => setShowCreateShortcutDrawer(false)} />
+      )}
+    </>
+  );
+};
+
+export default ShortcutDashboard;
diff --git a/frontend/web/src/routers/index.tsx b/frontend/web/src/routers/index.tsx
index 10198d2..31c52e8 100644
--- a/frontend/web/src/routers/index.tsx
+++ b/frontend/web/src/routers/index.tsx
@@ -5,6 +5,7 @@ import CollectionDashboard from "@/pages/CollectionDashboard";
 import CollectionSpace from "@/pages/CollectionSpace";
 import Home from "@/pages/Home";
 import NotFound from "@/pages/NotFound";
+import ShortcutDashboard from "@/pages/ShortcutDashboard";
 import ShortcutDetail from "@/pages/ShortcutDetail";
 import ShortcutSpace from "@/pages/ShortcutSpace";
 import SignIn from "@/pages/SignIn";
@@ -34,6 +35,10 @@ const router = createBrowserRouter([
             path: "/",
             element: <Home />,
           },
+          {
+            path: "/shortcuts",
+            element: <ShortcutDashboard />,
+          },
           {
             path: "/collections",
             element: <CollectionDashboard />,