refactor(frontend): use auth service

web/src/App.tsx

@@ -6,7 +6,6 @@ import storage from "./helpers/storage";
 import { getSystemColorScheme } from "./helpers/utils";
 import useNavigateTo from "./hooks/useNavigateTo";
 import Loading from "./pages/Loading";
-import store from "./store";
 import { useGlobalStore } from "./store/module";
 import { useUserV1Store } from "./store/v1";
 
@@ -28,9 +27,11 @@ const App = () => {
 
   useEffect(() => {
     const initialState = async () => {
-      const { user } = store.getState().user;
-      if (user) {
-        await userV1Store.getOrFetchUserByUsername(user.username);
+      try {
+        await userV1Store.fetchCurrentUser();
+        console.log("here");
+      } catch (error) {
+        // Skip.
       }
       setLoading(false);
     };

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -12,7 +12,7 @@ interface Props extends DialogProps {
 const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
   const { user, destroy } = props;
   const t = useTranslate();
-  const userStore = useUserV1Store();
+  const userV1Store = useUserV1Store();
   const [newPassword, setNewPassword] = useState("");
   const [newPasswordAgain, setNewPasswordAgain] = useState("");
 
@@ -47,7 +47,7 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
     }
 
     try {
-      await userStore.updateUser(
+      await userV1Store.updateUser(
         {
           name: `${UserNamePrefix}${user.username}`,
           password: newPassword,

web/src/components/ChangePasswordDialog.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useGlobalStore, useUserStore } from "@/store/module";
-import { useUserV1Store, UserNamePrefix } from "@/store/v1";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { useGlobalStore } from "@/store/module";
+import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
@@ -10,7 +11,7 @@ type Props = DialogProps;
 
 const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
   const t = useTranslate();
-  const userStore = useUserStore();
+  const currentUser = useCurrentUser();
   const userV1Store = useUserV1Store();
   const globalStore = useGlobalStore();
   const profile = globalStore.state.systemStatus.profile;
@@ -18,7 +19,7 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
   const [newPasswordAgain, setNewPasswordAgain] = useState("");
 
   useEffect(() => {
-    if (profile.mode === "demo" && userStore.state.user?.id === userStore.state.host?.id) {
+    if (profile.mode === "demo") {
       toast.error("Demo mode does not support this operation.");
       destroy();
     }
@@ -51,10 +52,9 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
     }
 
     try {
-      const user = userStore.getState().user as User;
       await userV1Store.updateUser(
         {
-          name: `${UserNamePrefix}${user.username}`,
+          name: currentUser.name,
           password: newPassword,
         },
         ["password"]

web/src/components/Memo.tsx

@@ -7,7 +7,7 @@ import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
+import { useFilterStore, useMemoStore } from "@/store/module";
 import { useUserV1Store, extractUsernameFromName } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
@@ -36,7 +36,6 @@ const Memo: React.FC<Props> = (props: Props) => {
   const navigateTo = useNavigateTo();
   const { i18n } = useTranslation();
   const filterStore = useFilterStore();
-  const userStore = useUserStore();
   const memoStore = useMemoStore();
   const userV1Store = useUserV1Store();
   const user = useCurrentUser();
@@ -211,11 +210,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     if (readonly) {
       return;
     }
-
-    const loginUser = userStore.state.user;
-    if (loginUser && !loginUser.localSetting.enableDoubleClickEditing) {
-      return;
-    }
     const targetEl = e.target as HTMLElement;
 
     if (targetEl.className === "tag-span") {

web/src/components/MemoEditor/index.tsx

@@ -8,9 +8,10 @@ import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helper
 import { clearContentQueryParam } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { getMatchedNodes } from "@/labs/marked";
-import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
+import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore } from "@/store/module";
+import { useUserV1Store } from "@/store/v1";
 import { Resource } from "@/types/proto/api/v2/resource_service";
-import { User_Role } from "@/types/proto/api/v2/user_service";
+import { UserSetting, User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
 import showCreateResourceDialog from "../CreateResourceDialog";
@@ -50,7 +51,7 @@ const MemoEditor = (props: Props) => {
   const {
     state: { systemStatus },
   } = useGlobalStore();
-  const userStore = useUserStore();
+  const userV1Store = useUserV1Store();
   const filterStore = useFilterStore();
   const memoStore = useMemoStore();
   const tagStore = useTagStore();
@@ -66,8 +67,7 @@ const MemoEditor = (props: Props) => {
   const [hasContent, setHasContent] = useState<boolean>(false);
   const [isInIME, setIsInIME] = useState(false);
   const editorRef = useRef<EditorRefActions>(null);
-  const user = userStore.state.user as User;
-  const setting = user.setting;
+  const userSetting = userV1Store.userSetting as UserSetting;
   const referenceRelations = memoId
     ? state.relationList.filter(
         (relation) => relation.memoId === memoId && relation.relatedMemoId !== memoId && relation.type === "REFERENCE"
@@ -80,15 +80,15 @@ const MemoEditor = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    let visibility = setting.memoVisibility;
+    let visibility = userSetting.memoVisibility;
     if (systemStatus.disablePublicMemos && visibility === "PUBLIC") {
       visibility = "PRIVATE";
     }
     setState((prevState) => ({
       ...prevState,
-      memoVisibility: visibility,
+      memoVisibility: visibility as Visibility,
     }));
-  }, [setting.memoVisibility, systemStatus.disablePublicMemos]);
+  }, [userSetting.memoVisibility, systemStatus.disablePublicMemos]);
 
   useEffect(() => {
     if (memoId) {

web/src/components/Settings/MemberSection.tsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { userServiceClient } from "@/grpcweb";
 import * as api from "@/helpers/api";
-import { useUserStore } from "@/store/module";
-import { UserNamePrefix } from "@/store/v1";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { UserNamePrefix, useUserV1Store } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v2/common";
 import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
@@ -19,8 +19,8 @@ interface State {
 
 const MemberSection = () => {
   const t = useTranslate();
-  const userStore = useUserStore();
-  const currentUser = userStore.state.user;
+  const currentUser = useCurrentUser();
+  const userV1Store = useUserV1Store();
   const [state, setState] = useState<State>({
     createUserUsername: "",
     createUserPassword: "",
@@ -115,7 +115,7 @@ const MemberSection = () => {
       style: "danger",
       dialogName: "delete-user-dialog",
       onConfirm: async () => {
-        await userStore.deleteUser(`${UserNamePrefix}${user.username}`);
+        await userV1Store.deleteUser(`${UserNamePrefix}${user.username}`);
         fetchUserList();
       },
     });

web/src/components/Settings/PreferencesSection.tsx

-import { Button, Divider, Input, Option, Select, Switch } from "@mui/joy";
-import React, { useState } from "react";
+import { Button, Divider, Input, Option, Select } from "@mui/joy";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useGlobalStore } from "@/store/module";
+import { useUserV1Store } from "@/store/v1";
+import { UserSetting } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import AppearanceSelect from "../AppearanceSelect";
 import LearnMore from "../LearnMore";
@@ -14,32 +16,48 @@ import "@/less/settings/preferences-section.less";
 const PreferencesSection = () => {
   const t = useTranslate();
   const globalStore = useGlobalStore();
-  const userStore = useUserStore();
+  const userV1Store = useUserV1Store();
   const { appearance, locale } = globalStore.state;
-  const { setting, localSetting } = userStore.state.user as User;
+  const setting = userV1Store.userSetting as UserSetting;
   const [telegramUserId, setTelegramUserId] = useState<string>(setting.telegramUserId);
 
   const handleLocaleSelectChange = async (locale: Locale) => {
-    await userStore.upsertUserSetting("locale", locale);
+    await userV1Store.updateUserSetting(
+      {
+        locale,
+      },
+      ["locale"]
+    );
     globalStore.setLocale(locale);
   };
 
   const handleAppearanceSelectChange = async (appearance: Appearance) => {
-    await userStore.upsertUserSetting("appearance", appearance);
+    await userV1Store.updateUserSetting(
+      {
+        appearance,
+      },
+      ["appearance"]
+    );
     globalStore.setAppearance(appearance);
   };
 
   const handleDefaultMemoVisibilityChanged = async (value: string) => {
-    await userStore.upsertUserSetting("memo-visibility", value);
-  };
-
-  const handleDoubleClickEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    userStore.upsertLocalSetting({ ...localSetting, enableDoubleClickEditing: event.target.checked });
+    await userV1Store.updateUserSetting(
+      {
+        memoVisibility: value,
+      },
+      ["memo_visibility"]
+    );
   };
 
   const handleSaveTelegramUserId = async () => {
     try {
-      await userStore.upsertUserSetting("telegram-user-id", telegramUserId);
+      await userV1Store.updateUserSetting(
+        {
+          telegramUserId: telegramUserId,
+        },
+        ["telegram_user_id"]
+      );
       toast.success(t("message.update-succeed"));
     } catch (error: any) {
       console.error(error);
@@ -68,7 +86,7 @@ const PreferencesSection = () => {
         <Select
           className="!min-w-fit"
           value={setting.memoVisibility}
-          startDecorator={<VisibilityIcon visibility={setting.memoVisibility} />}
+          startDecorator={<VisibilityIcon visibility={setting.memoVisibility as Visibility} />}
           onChange={(_, visibility) => {
             if (visibility) {
               handleDefaultMemoVisibilityChanged(visibility);
@@ -83,11 +101,6 @@ const PreferencesSection = () => {
         </Select>
       </div>
 
-      <label className="form-label selector">
-        <span className="text-sm break-keep">{t("setting.preference-section.enable-double-click")}</span>
-        <Switch className="ml-2" checked={localSetting.enableDoubleClickEditing} onChange={handleDoubleClickEnabledChanged} />
-      </label>
-
       <Divider className="!mt-3 !my-4" />
 
       <div className="mb-2 w-full flex flex-row justify-between items-center">

web/src/components/UpdateAccountDialog.tsx

@@ -2,8 +2,8 @@ import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { convertFileToBase64 } from "@/helpers/utils";
-import { useUserStore } from "@/store/module";
-import { UserNamePrefix } from "@/store/v1";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { UserNamePrefix, useUserV1Store } from "@/store/v1";
 import { User as UserPb } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
@@ -21,13 +21,13 @@ interface State {
 
 const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
   const t = useTranslate();
-  const userStore = useUserStore();
-  const user = userStore.state.user as User;
+  const currentUser = useCurrentUser();
+  const userV1Store = useUserV1Store();
   const [state, setState] = useState<State>({
-    avatarUrl: user.avatarUrl,
-    username: user.username,
-    nickname: user.nickname,
-    email: user.email,
+    avatarUrl: currentUser.avatarUrl,
+    username: currentUser.name.replace(UserNamePrefix, ""),
+    nickname: currentUser.nickname,
+    email: currentUser.email,
   });
 
   useEffect(() => {
@@ -95,24 +95,23 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
     }
 
     try {
-      const user = userStore.getState().user as User;
       const updateMask = [];
-      if (!isEqual(user.avatarUrl, state.avatarUrl)) {
+      if (!isEqual(currentUser.avatarUrl, state.avatarUrl)) {
         updateMask.push("avatar_url");
       }
-      if (!isEqual(user.nickname, state.nickname)) {
+      if (!isEqual(currentUser.nickname, state.nickname)) {
         updateMask.push("nickname");
       }
-      if (!isEqual(user.username, state.username)) {
+      if (!isEqual(currentUser.name.replace(UserNamePrefix, ""), state.username)) {
         updateMask.push("username");
       }
-      if (!isEqual(user.email, state.email)) {
+      if (!isEqual(currentUser.email, state.email)) {
         updateMask.push("email");
       }
-      await userStore.patchUser(
+      await userV1Store.updateUser(
         UserPb.fromPartial({
           name: `${UserNamePrefix}${state.username}`,
-          id: user.id,
+          id: currentUser.id,
           nickname: state.nickname,
           email: state.email,
           avatarUrl: state.avatarUrl,

web/src/components/UserBanner.tsx

+import * as api from "@/helpers/api";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useGlobalStore } from "@/store/module";
 import { extractUsernameFromName } from "@/store/v1";
 import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
@@ -13,7 +14,6 @@ const UserBanner = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const globalStore = useGlobalStore();
-  const userStore = useUserStore();
   const { systemStatus } = globalStore.state;
   const user = useCurrentUser();
   const title = user ? user.nickname : systemStatus.customizedProfile.name || "memos";
@@ -27,7 +27,8 @@ const UserBanner = () => {
   };
 
   const handleSignOutBtnClick = async () => {
-    await userStore.doSignOut();
+    await api.signout();
+    localStorage.removeItem("userId");
     window.location.href = "/auth";
   };
 

web/src/hooks/useCurrentUser.ts

-import { useEffect } from "react";
-import { useUserStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
+import { User } from "@/types/proto/api/v2/user_service";
 
 const useCurrentUser = () => {
-  const userStore = useUserStore();
   const userV1Store = useUserV1Store();
-  const currentUsername = userStore.state.user?.username;
-
-  useEffect(() => {
-    if (currentUsername) {
-      userV1Store.getOrFetchUserByUsername(currentUsername);
-    }
-  }, [currentUsername]);
-
-  return userV1Store.getUserByUsername(currentUsername || "");
+  return userV1Store.currentUser as User;
 };
 
 export default useCurrentUser;

web/src/pages/AuthCallback.tsx

@@ -6,7 +6,6 @@ import Icon from "@/components/Icon";
 import * as api from "@/helpers/api";
 import { absolutifyLink } from "@/helpers/utils";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useUserStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 
@@ -19,7 +18,6 @@ const AuthCallback = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const [searchParams] = useSearchParams();
-  const userStore = useUserStore();
   const userV1Store = useUserV1Store();
   const [state, setState] = useState<State>({
     loading: true,
@@ -42,9 +40,7 @@ const AuthCallback = () => {
               errorMessage: "",
             });
             if (user) {
-              userStore.setCurrentUser(user);
-              await userStore.fetchCurrentUser();
-              await userV1Store.getOrFetchUserByUsername(user.username);
+              await userV1Store.fetchCurrentUser();
               navigateTo("/");
             } else {
               toast.error(t("message.login-failed"));

web/src/pages/SignIn.tsx

@@ -8,7 +8,7 @@ import * as api from "@/helpers/api";
 import { absolutifyLink } from "@/helpers/utils";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useGlobalStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 
@@ -16,7 +16,6 @@ const SignIn = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const globalStore = useGlobalStore();
-  const userStore = useUserStore();
   const userV1Store = useUserV1Store();
   const actionBtnLoadingState = useLoading(false);
   const { appearance, locale, systemStatus } = globalStore.state;
@@ -78,9 +77,7 @@ const SignIn = () => {
       actionBtnLoadingState.setLoading();
       const { data: user } = await api.signin(username, password, remember);
       if (user) {
-        userStore.setCurrentUser(user);
-        await userStore.fetchCurrentUser();
-        await userV1Store.getOrFetchUserByUsername(user.username);
+        await userV1Store.fetchCurrentUser();
         navigateTo("/");
       } else {
         toast.error(t("message.login-failed"));

web/src/pages/SignUp.tsx

@@ -7,7 +7,7 @@ import LocaleSelect from "@/components/LocaleSelect";
 import * as api from "@/helpers/api";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useGlobalStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 
@@ -15,7 +15,6 @@ const SignUp = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const globalStore = useGlobalStore();
-  const userStore = useUserStore();
   const userV1Store = useUserV1Store();
   const actionBtnLoadingState = useLoading(false);
   const { appearance, locale, systemStatus } = globalStore.state;
@@ -58,9 +57,7 @@ const SignUp = () => {
       actionBtnLoadingState.setLoading();
       const { data: user } = await api.signup(username, password);
       if (user) {
-        userStore.setCurrentUser(user);
-        await userStore.fetchCurrentUser();
-        await userV1Store.getOrFetchUserByUsername(user.username);
+        await userV1Store.fetchCurrentUser();
         navigateTo("/");
       } else {
         toast.error(t("message.signup-failed"));

web/src/router/index.tsx

 import { lazy } from "react";
-import { createBrowserRouter, redirect } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
-import { initialGlobalState, initialUserState } from "@/store/module";
+import { initialGlobalState } from "@/store/module";
 
 const Root = lazy(() => import("@/layouts/Root"));
 const SignIn = lazy(() => import("@/pages/SignIn"));
@@ -28,20 +28,6 @@ const initialGlobalStateLoader = async () => {
   return null;
 };
 
-const initialUserStateLoader = async (redirectWhenNotFound = true) => {
-  let user = undefined;
-  try {
-    user = await initialUserState();
-  } catch (error) {
-    // do nothing.
-  }
-
-  if (!user && redirectWhenNotFound) {
-    return redirect("/explore");
-  }
-  return null;
-};
-
 const router = createBrowserRouter([
   {
     path: "/",
@@ -67,54 +53,44 @@ const router = createBrowserRouter([
           {
             path: "",
             element: <Home />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "review",
             element: <DailyReview />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "resources",
             element: <Resources />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "inbox",
             element: <Inboxes />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "archived",
             element: <Archived />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "setting",
             element: <Setting />,
-            loader: () => initialUserStateLoader(),
           },
           {
             path: "explore",
             element: <Explore />,
-            loader: () => initialUserStateLoader(false),
           },
         ],
       },
       {
         path: "/m/:memoId",
         element: <MemoDetail />,
-        loader: () => initialUserStateLoader(false),
       },
       {
         path: "/m/:memoId/embed",
         element: <EmbedMemo />,
-        loader: () => initialUserStateLoader(false),
       },
       {
         path: "/u/:username",
         element: <UserProfile />,
-        loader: () => initialUserStateLoader(false),
       },
       {
         path: "*",

web/src/store/index.ts

@@ -6,12 +6,10 @@ import globalReducer from "./reducer/global";
 import memoReducer from "./reducer/memo";
 import resourceReducer from "./reducer/resource";
 import tagReducer from "./reducer/tag";
-import userReducer from "./reducer/user";
 
 const store = configureStore({
   reducer: {
     global: globalReducer,
-    user: userReducer,
     memo: memoReducer,
     tag: tagReducer,
     filter: filterReducer,

web/src/store/module/index.ts

@@ -3,5 +3,4 @@ export * from "./filter";
 export * from "./memo";
 export * from "./tag";
 export * from "./resource";
-export * from "./user";
 export * from "./dialog";

web/src/store/module/user.ts

-import { camelCase } from "lodash-es";
-import { authServiceClient, userServiceClient } from "@/grpcweb";
-import * as api from "@/helpers/api";
-import storage from "@/helpers/storage";
-import { getSystemColorScheme } from "@/helpers/utils";
-import { User as UserPb } from "@/types/proto/api/v2/user_service";
-import store, { useAppSelector } from "..";
-import { setAppearance, setLocale } from "../reducer/global";
-import { patchUser, setHost, setUser } from "../reducer/user";
-
-const defaultSetting: Setting = {
-  locale: "en",
-  appearance: getSystemColorScheme(),
-  memoVisibility: "PRIVATE",
-  telegramUserId: "",
-};
-
-const defaultLocalSetting: LocalSetting = {
-  enableDoubleClickEditing: false,
-};
-
-export const convertResponseModelUser = (user: User): User => {
-  // user default 'Basic Setting' should follow server's setting
-  // 'Basic Setting' fields: locale, appearance
-  const { systemStatus } = store.getState().global;
-  const { locale, appearance } = systemStatus.customizedProfile;
-  const systemSetting = { locale, appearance };
-
-  const setting: Setting = {
-    ...defaultSetting,
-    ...systemSetting,
-  };
-  const { localSetting: storageLocalSetting } = storage.get(["localSetting"]);
-  const localSetting: LocalSetting = {
-    ...defaultLocalSetting,
-    ...storageLocalSetting,
-  };
-
-  if (user.userSettingList) {
-    for (const userSetting of user.userSettingList) {
-      (setting as any)[camelCase(userSetting.key)] = JSON.parse(userSetting.value);
-    }
-  }
-
-  return {
-    ...user,
-    setting,
-    localSetting,
-    createdTs: user.createdTs * 1000,
-    updatedTs: user.updatedTs * 1000,
-  };
-};
-
-export const initialUserState = async () => {
-  const { systemStatus } = store.getState().global;
-
-  if (systemStatus.host) {
-    store.dispatch(setHost(convertResponseModelUser(systemStatus.host)));
-  }
-
-  const user = await fetchCurrentUser();
-  if (user) {
-    if (user.setting.locale) {
-      store.dispatch(setLocale(user.setting.locale));
-    }
-    if (user.setting.appearance) {
-      store.dispatch(setAppearance(user.setting.appearance));
-    }
-    return user;
-  }
-};
-
-const doSignOut = async () => {
-  await api.signout();
-  localStorage.removeItem("userId");
-};
-
-const fetchCurrentUser = async () => {
-  const userId = localStorage.getItem("userId");
-  if (userId) {
-    const { user } = await authServiceClient.getAuthStatus({});
-    if (!user) {
-      localStorage.removeItem("userId");
-      return;
-    }
-    const { data } = await api.getUserById(Number(userId));
-    const userMessage = convertResponseModelUser(data);
-    if (userMessage) {
-      store.dispatch(setUser(userMessage));
-      return userMessage;
-    }
-  }
-};
-
-export const useUserStore = () => {
-  const state = useAppSelector((state) => state.user);
-
-  return {
-    state,
-    getState: () => {
-      return store.getState().user;
-    },
-    doSignOut,
-    fetchCurrentUser,
-    setCurrentUser: async (user: User) => {
-      localStorage.setItem("userId", String(user.id));
-    },
-    upsertUserSetting: async (key: string, value: any) => {
-      await api.upsertUserSetting({
-        key: key as any,
-        value: JSON.stringify(value),
-      });
-      await fetchCurrentUser();
-    },
-    upsertLocalSetting: async (localSetting: LocalSetting) => {
-      storage.set({ localSetting });
-      store.dispatch(patchUser({ localSetting }));
-    },
-    patchUser: async (user: UserPb, updateMask: string[]): Promise<void> => {
-      await userServiceClient.updateUser({ user, updateMask });
-      // If the user is the current user and the username is changed, reload the page.
-      if (user.id === store.getState().user.user?.id) {
-        window.location.reload();
-      }
-    },
-    deleteUser: async (name: string) => {
-      await userServiceClient.deleteUser({
-        name,
-      });
-    },
-  };
-};

web/src/store/reducer/user.ts

-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-interface State {
-  // host is the user who hist the system
-  host?: User;
-  // user is the user who is currently logged in
-  user?: User;
-}
-
-const userSlice = createSlice({
-  name: "user",
-  initialState: {} as State,
-  reducers: {
-    setHost: (state, action: PayloadAction<User | undefined>) => {
-      return {
-        ...state,
-        host: action.payload,
-      };
-    },
-    setUser: (state, action: PayloadAction<User | undefined>) => {
-      return {
-        ...state,
-        user: action.payload,
-      };
-    },
-    patchUser: (state, action: PayloadAction<Partial<User>>) => {
-      return {
-        ...state,
-        user: {
-          ...state.user,
-          ...action.payload,
-        } as User,
-      };
-    },
-  },
-});
-
-export const { setHost, setUser, patchUser } = userSlice.actions;
-
-export default userSlice.reducer;

web/src/store/v1/user.ts

 import { create } from "zustand";
-import { userServiceClient } from "@/grpcweb";
-import { User } from "@/types/proto/api/v2/user_service";
+import { authServiceClient, userServiceClient } from "@/grpcweb";
+import { User, UserSetting } from "@/types/proto/api/v2/user_service";
 import { UserNamePrefix, extractUsernameFromName } from "./resourceName";
 
 interface UserV1Store {
   userMapByUsername: Record<string, User>;
+  currentUser?: User;
+  userSetting?: UserSetting;
   getOrFetchUserByUsername: (username: string) => Promise<User>;
   getUserByUsername: (username: string) => User;
   updateUser: (user: Partial<User>, updateMask: string[]) => Promise<User>;
+  deleteUser: (name: string) => Promise<void>;
+  fetchCurrentUser: () => Promise<User>;
+  setCurrentUser: (user: User) => void;
+  updateUserSetting: (userSetting: Partial<UserSetting>, updateMark: string[]) => Promise<UserSetting>;
 }
 
+const getDefaultUserSetting = () => {
+  return UserSetting.fromPartial({
+    locale: "en",
+    appearance: "auto",
+    memoVisibility: "PRIVATE",
+  });
+};
+
 // Request cache is used to prevent multiple requests.
 const requestCache = new Map<string, Promise<any>>();
 
@@ -57,4 +71,38 @@ export const useUserV1Store = create<UserV1Store>()((set, get) => ({
     set(userMap);
     return updatedUser;
   },
+  deleteUser: async (name: string) => {
+    await userServiceClient.deleteUser({
+      name,
+    });
+  },
+  fetchCurrentUser: async () => {
+    const { user } = await authServiceClient.getAuthStatus({});
+    if (!user) {
+      throw new Error("User not found");
+    }
+    set({ currentUser: user });
+    const { setting } = await userServiceClient.getUserSetting({});
+    set({
+      userSetting: UserSetting.fromPartial({
+        ...getDefaultUserSetting(),
+        ...setting,
+      }),
+    });
+    return user;
+  },
+  setCurrentUser: (user: User) => {
+    set({ currentUser: user });
+  },
+  updateUserSetting: async (userSetting: Partial<UserSetting>, updateMask: string[]) => {
+    const { setting: updatedUserSetting } = await userServiceClient.updateUserSetting({
+      setting: userSetting,
+      updateMask: updateMask,
+    });
+    if (!updatedUserSetting) {
+      throw new Error("User setting not found");
+    }
+    set({ userSetting: updatedUserSetting });
+    return updatedUserSetting;
+  },
 }));