chore: return username in user response

2025-06-05 22:09:59 +02:00 · 2023-12-23 19:23:39 +08:00
parent b8eaf1d57e
commit 8e325f9986
18 changed files with 333 additions and 348 deletions
--- a/web/src/components/ChangePasswordDialog.tsx
+++ b/web/src/components/ChangePasswordDialog.tsx
@ -1,3 +1,4 @@
+import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import useCurrentUser from "@/hooks/useCurrentUser";
@ -30,13 +31,11 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
  };

  const handleNewPasswordChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value as string;
-    setNewPassword(text);
+    setNewPassword(e.target.value);
  };

  const handleNewPasswordAgainChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value as string;
-    setNewPasswordAgain(text);
+    setNewPasswordAgain(e.target.value);
  };

  const handleSaveBtnClick = async () => {
@ -77,30 +76,28 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
      </div>
      <div className="dialog-content-container">
        <p className="text-sm mb-1">{t("auth.new-password")}</p>
-        <input
+        <Input
+          className="w-full"
          type="password"
-          autoComplete="new-password"
-          className="input-text"
          placeholder={t("auth.new-password")}
          value={newPassword}
          onChange={handleNewPasswordChanged}
        />
        <p className="text-sm mb-1 mt-2">{t("auth.repeat-new-password")}</p>
-        <input
+        <Input
+          className="w-full"
          type="password"
-          autoComplete="new-password"
-          className="input-text"
          placeholder={t("auth.repeat-new-password")}
          value={newPasswordAgain}
          onChange={handleNewPasswordAgainChanged}
        />
-        <div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
-          <span className="btn-text" onClick={handleCloseBtnClick}>
+        <div className="w-full flex flex-row justify-end items-center pt-4 space-x-2">
+          <Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
            {t("common.cancel")}
-          </span>
-          <span className="btn-primary" onClick={handleSaveBtnClick}>
+          </Button>
+          <Button color="primary" onClick={handleSaveBtnClick}>
            {t("common.save")}
-          </span>
+          </Button>
        </div>
      </div>
    </>
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@ -33,11 +33,10 @@ interface Props {
  showParent?: boolean;
  showVisibility?: boolean;
  showPinnedStyle?: boolean;
-  lazyRendering?: boolean;
 }

 const MemoView: React.FC<Props> = (props: Props) => {
-  const { memo, lazyRendering } = props;
+  const { memo } = props;
  const t = useTranslate();
  const navigateTo = useNavigateTo();
  const { i18n } = useTranslation();
@ -45,7 +44,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
  const memoStore = useMemoStore();
  const userStore = useUserStore();
  const user = useCurrentUser();
-  const [shouldRender, setShouldRender] = useState<boolean>(lazyRendering ? false : true);
  const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
  const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
  const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
@ -53,15 +51,21 @@ const MemoView: React.FC<Props> = (props: Props) => {
  const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
  const readonly = memo.creator !== user?.name;

-  // Prepare memo creator.
  useEffect(() => {
-    if (creator) return;
-
    (async () => {
      const user = await userStore.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
      setCreator(user);
    })();
-  }, [memo.creator]);
+
+    const parentMemoId = memo.relations.find(
+      (relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
+    )?.relatedMemoId;
+    if (parentMemoId) {
+      memoStore.getOrFetchMemoById(parentMemoId, { skipStore: true }).then((memo: Memo) => {
+        setParentMemo(memo);
+      });
+    }
+  }, []);

  // Update display time string.
  useEffect(() => {
@ -77,42 +81,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
    };
  }, [i18n.language]);

-  // Lazy rendering.
-  useEffect(() => {
-    if (shouldRender) return;
-    if (!memoContainerRef.current) return;
-
-    const observer = new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting) return;
-      observer.disconnect();
-
-      setShouldRender(true);
-    });
-    observer.observe(memoContainerRef.current);
-
-    return () => observer.disconnect();
-  }, [lazyRendering, filterStore.state]);
-
-  useEffect(() => {
-    if (!shouldRender) {
-      return;
-    }
-
-    const parentMemoId = memo.relations.find(
-      (relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
-    )?.relatedMemoId;
-    if (parentMemoId) {
-      memoStore.getOrFetchMemoById(parentMemoId, { skipStore: true }).then((memo: Memo) => {
-        setParentMemo(memo);
-      });
-    }
-  }, [shouldRender]);
-
-  if (!shouldRender) {
-    // Render a placeholder to occupy the space.
-    return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef} />;
-  }
-
  const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
    if (event.altKey) {
      showChangeMemoCreatedTsDialog(memo.id);
@ -223,7 +191,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
                  <span className="flex flex-row justify-start items-center">
                    <UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator.avatarUrl} />
                    <span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
-                      {creator.nickname || extractUsernameFromName(creator.name)}
+                      {creator.nickname || creator.username}
                    </span>
                  </span>
                </Tooltip>
--- a/web/src/components/Settings/AccessTokenSection.tsx
+++ b/web/src/components/Settings/AccessTokenSection.tsx
@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { userServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { UserNamePrefix, extractUsernameFromName } from "@/store/v1";
 import { UserAccessToken } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateAccessTokenDialog from "../CreateAccessTokenDialog";
@ -12,8 +11,8 @@ import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 import LearnMore from "../LearnMore";

-const listAccessTokens = async (username: string) => {
-  const { accessTokens } = await userServiceClient.listUserAccessTokens({ name: `${UserNamePrefix}${username}` });
+const listAccessTokens = async (name: string) => {
+  const { accessTokens } = await userServiceClient.listUserAccessTokens({ name });
  return accessTokens;
 };

@ -23,13 +22,13 @@ const AccessTokenSection = () => {
  const [userAccessTokens, setUserAccessTokens] = useState<UserAccessToken[]>([]);

  useEffect(() => {
-    listAccessTokens(extractUsernameFromName(currentUser.name)).then((accessTokens) => {
+    listAccessTokens(currentUser.name).then((accessTokens) => {
      setUserAccessTokens(accessTokens);
    });
  }, []);

  const handleCreateAccessTokenDialogConfirm = async () => {
-    const accessTokens = await listAccessTokens(extractUsernameFromName(currentUser.name));
+    const accessTokens = await listAccessTokens(currentUser.name);
    setUserAccessTokens(accessTokens);
  };

--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { userServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { UserNamePrefix, extractUsernameFromName, useUserStore } from "@/store/v1";
+import { UserNamePrefix, useUserStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v2/common";
 import { User, User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
@ -164,7 +164,7 @@ const MemberSection = () => {
                <tr key={user.id}>
                  <td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-300">{user.id}</td>
                  <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-300">
-                    {extractUsernameFromName(user.name)}
+                    {user.username}
                    <span className="ml-1 italic">{user.rowStatus === RowStatus.ARCHIVED && "(Archived)"}</span>
                  </td>
                  <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-300">{user.nickname}</td>
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/web/src/components/Settings/MyAccountSection.tsx
@ -1,6 +1,5 @@
 import { Button } from "@mui/joy";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { extractUsernameFromName } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import showChangePasswordDialog from "../ChangePasswordDialog";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
@ -19,7 +18,7 @@ const MyAccountSection = () => {
          <UserAvatar className="mr-2 w-14 h-14" avatarUrl={user.avatarUrl} />
          <div className="flex flex-col justify-center items-start">
            <span className="text-2xl font-medium">{user.nickname}</span>
-            <span className="-mt-2 text-base text-gray-500 dark:text-gray-400">({extractUsernameFromName(user.name)})</span>
+            <span className="-mt-2 text-base text-gray-500 dark:text-gray-400">({user.username})</span>
          </div>
        </div>
        <div className="w-full flex flex-row justify-start items-center mt-4 space-x-2">
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@ -108,7 +108,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
                <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
                <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
                  <span className="w-full text truncate font-medium text-gray-600 dark:text-gray-300">
-                    {user.nickname || extractUsernameFromName(user.name)}
+                    {user.nickname || user.username}
                  </span>
                </div>
              </div>
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@ -1,3 +1,4 @@
+import { Button } from "@mui/joy";
 import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@ -110,8 +111,8 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
      }
      await userStore.updateUser(
        UserPb.fromPartial({
-          name: `${UserNamePrefix}${state.username}`,
-          id: currentUser.id,
+          name: currentUser.name,
+          username: state.username,
          nickname: state.nickname,
          email: state.email,
          avatarUrl: state.avatarUrl,
@ -167,13 +168,13 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
          <span className="text-sm text-gray-400 ml-1">{t("setting.account-section.email-note")}</span>
        </p>
        <input type="text" className="input-text" value={state.email} onChange={handleEmailChanged} />
-        <div className="pt-2 w-full flex flex-row justify-end items-center space-x-2">
-          <span className="btn-text" onClick={handleCloseBtnClick}>
+        <div className="w-full flex flex-row justify-end items-center pt-4 space-x-2">
+          <Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
            {t("common.cancel")}
-          </span>
-          <span className="btn-primary" onClick={handleSaveBtnClick}>
+          </Button>
+          <Button color="primary" onClick={handleSaveBtnClick}>
            {t("common.save")}
-          </span>
+          </Button>
        </div>
      </div>
    </>
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@ -2,7 +2,6 @@ import * as api from "@/helpers/api";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 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";
 import showAboutSiteDialog from "./AboutSiteDialog";
@ -16,10 +15,10 @@ const UserBanner = () => {
  const globalStore = useGlobalStore();
  const { systemStatus } = globalStore.state;
  const user = useCurrentUser();
-  const title = user ? user.nickname || extractUsernameFromName(user.name) : systemStatus.customizedProfile.name || "memos";
+  const title = user ? user.nickname || user.username : systemStatus.customizedProfile.name || "memos";

  const handleMyAccountClick = () => {
-    navigateTo(`/u/${encodeURIComponent(extractUsernameFromName(user.name))}`);
+    navigateTo(`/u/${encodeURIComponent(user.username)}`);
  };

  const handleAboutBtnClick = () => {