From 05bc21b660fbcc99b6009be4e6da2480571c0a0b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 10 Jul 2023 21:34:13 +0800
Subject: [PATCH] chore: update view store

---
 web/src/components/FilterView.tsx   |  8 ++++----
 web/src/components/ShortcutView.tsx |  6 +++---
 web/src/locales/en.json             |  6 +++---
 web/src/pages/Home.tsx              | 13 +++++++++----
 web/src/stores/v1/filter.ts         | 24 ++++++++++++++++--------
 5 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/web/src/components/FilterView.tsx b/web/src/components/FilterView.tsx
index 0ef2e5f..914b1c8 100644
--- a/web/src/components/FilterView.tsx
+++ b/web/src/components/FilterView.tsx
@@ -1,9 +1,9 @@
-import useFilterStore from "../stores/v1/filter";
+import useViewStore from "../stores/v1/filter";
 import Icon from "./Icon";
 
 const FilterView = () => {
-  const filterStore = useFilterStore();
-  const filter = filterStore.filter;
+  const viewStore = useViewStore();
+  const filter = viewStore.filter;
   const shouldShowFilters = filter.tag !== undefined;
 
   if (!shouldShowFilters) {
@@ -16,7 +16,7 @@ const FilterView = () => {
       {filter.tag && (
         <button
           className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-200 rounded-full text-gray-500 text-sm hover:line-through"
-          onClick={() => filterStore.setFilter({ tag: undefined })}
+          onClick={() => viewStore.setFilter({ tag: undefined })}
         >
           <Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
         </button>
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index f19ce91..e8fb11d 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import useFaviconStore from "../stores/v1/favicon";
-import useFilterStore from "../stores/v1/filter";
+import useViewStore from "../stores/v1/filter";
 import useUserStore from "../stores/v1/user";
 import { absolutifyLink } from "../helpers/utils";
 import { showCommonDialog } from "./Alert";
@@ -23,7 +23,7 @@ const ShortcutView = (props: Props) => {
   const { shortcut, handleEdit } = props;
   const { t } = useTranslation();
   const currentUser = useUserStore().getCurrentUser();
-  const filterStore = useFilterStore();
+  const viewStore = useViewStore();
   const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
@@ -125,7 +125,7 @@ const ShortcutView = (props: Props) => {
                 <span
                   key={tag}
                   className="text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
-                  onClick={() => filterStore.setFilter({ tag: tag })}
+                  onClick={() => viewStore.setFilter({ tag: tag })}
                 >
                   #{tag}
                 </span>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index a9c5264..5ed8678 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -3,15 +3,15 @@
     "visibility": {
       "private": {
         "self": "Private",
-        "description": "Only you can see this"
+        "description": "Only you can view this shortcut"
       },
       "workspace": {
         "self": "Workspace",
-        "description": "Only people in your workspace can see this"
+        "description": "Visible to Workspace Members"
       },
       "public": {
         "self": "Public",
-        "description": "Anyone can see this"
+        "description": "Visible to Everyone on the Internet"
       }
     }
   }
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 00d9cde..386f4ff 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -2,7 +2,7 @@ import { Button, Tab, TabList, Tabs } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
-import useFilterStore, { Filter } from "../stores/v1/filter";
+import useViewStore, { Filter } from "../stores/v1/filter";
 import useUserStore from "../stores/v1/user";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -35,12 +35,13 @@ const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, curre
 const Home: React.FC = () => {
   const loadingState = useLoading();
   const currentUser = useUserStore().getCurrentUser();
-  const filterStore = useFilterStore();
+  const viewStore = useViewStore();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
-  const filteredShortcutList = getFilteredShortcutList(shortcutList, filterStore.filter, currentUser);
+  const filter = viewStore.filter;
+  const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
 
   useEffect(() => {
     Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {
@@ -63,7 +64,11 @@ const Home: React.FC = () => {
         </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
-            <Tabs defaultValue={"ALL"} size="sm" onChange={(_, value) => filterStore.setFilter({ mineOnly: value !== "ALL" })}>
+            <Tabs
+              value={filter.mineOnly ? "PRIVATE" : "ALL"}
+              size="sm"
+              onChange={(_, value) => viewStore.setFilter({ mineOnly: value !== "ALL" })}
+            >
               <TabList>
                 <Tab value={"ALL"}>All</Tab>
                 <Tab value={"PRIVATE"}>Mine</Tab>
diff --git a/web/src/stores/v1/filter.ts b/web/src/stores/v1/filter.ts
index cc6b967..36dbd86 100644
--- a/web/src/stores/v1/filter.ts
+++ b/web/src/stores/v1/filter.ts
@@ -1,20 +1,28 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 export interface Filter {
   tag?: string;
   mineOnly?: boolean;
 }
 
-interface FilterState {
+interface ViewState {
   filter: Filter;
   setFilter: (filter: Partial<Filter>) => void;
 }
 
-const useFilterStore = create<FilterState>()((set, get) => ({
-  filter: {},
-  setFilter: (filter: Partial<Filter>) => {
-    set({ filter: { ...get().filter, ...filter } });
-  },
-}));
+const useViewStore = create<ViewState>()(
+  persist(
+    (set, get) => ({
+      filter: {},
+      setFilter: (filter: Partial<Filter>) => {
+        set({ filter: { ...get().filter, ...filter } });
+      },
+    }),
+    {
+      name: "view",
+    }
+  )
+);
 
-export default useFilterStore;
+export default useViewStore;