chore: return username in user response

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>
     </>

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>

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);
   };
 

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>

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">

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>

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>
     </>

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 = () => {

web/src/hooks/useCurrentUser.ts

@@ -1,9 +1,8 @@
 import { useUserStore } from "@/store/v1";
-import { User } from "@/types/proto/api/v2/user_service";
 
 const useCurrentUser = () => {
   const userStore = useUserStore();
-  return userStore.currentUser as User;
+  return userStore.getUserByUsername(userStore.currentUser?.username || "");
 };
 
 export default useCurrentUser;

web/src/pages/Explore.tsx

@@ -54,7 +54,7 @@ const Explore = () => {
       <div className="relative w-full h-auto flex flex-col justify-start items-start px-4 sm:px-6">
         <MemoFilter />
         {sortedMemos.map((memo) => (
-          <MemoView key={memo.id} memo={memo} lazyRendering showCreator showParent />
+          <MemoView key={memo.id} memo={memo} showCreator showParent />
         ))}
 
         {isRequesting ? (

web/src/pages/Home.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import HomeSidebar from "@/components/HomeSidebar";
@@ -57,14 +58,14 @@ const Home = () => {
 
   return (
     <div className="w-full max-w-5xl flex flex-row justify-center items-start">
-      <div className="w-full sm:pt-3 md:pt-6">
+      <div className={classNames("w-full sm:pt-3 md:pt-6", md && "max-w-[calc(100%-14rem)]")}>
         <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
         <div className="w-full px-4 sm:px-6 md:pr-2">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
             <MemoFilter />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
+              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinnedStyle showParent />
             ))}
             {isRequesting ? (
               <div className="flex flex-col justify-start items-center w-full my-8">
@@ -88,7 +89,7 @@ const Home = () => {
         </div>
       </div>
       {md && (
-        <div className="hidden md:block sticky top-0 left-0 shrink-0 w-56">
+        <div className="sticky top-0 left-0 shrink-0 w-56 h-full">
           <HomeSidebar />
         </div>
       )}

web/src/pages/Timeline.tsx

@@ -107,18 +107,18 @@ const Timeline = () => {
                   </div>
                 </div>
               ))}
+              {!isRequesting && sortedMemos.length === 0 && (
+                <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
+                  <Empty />
+                  <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+                </div>
+              )}
               {selectedDateStamp === currentDateStamp && (
                 <div className="w-full pl-0 sm:pl-12 sm:mt-4">
                   <MemoEditor cacheKey="timeline-editor" />
                 </div>
               )}
             </div>
-            {!isRequesting && sortedMemos.length === 0 && (
-              <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
-                <Empty />
-                <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-              </div>
-            )}
           </div>
         </div>
       </div>

web/src/pages/UserProfile.tsx

@@ -57,7 +57,11 @@ const UserProfile = () => {
   }, [user, tagQuery, textQuery]);
 
   const fetchMemos = async () => {
-    const filters = [`creator == "${user!.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
+    if (!user) {
+      return;
+    }
+
+    const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
     const contentSearch: string[] = [];
     if (tagQuery) {
       contentSearch.push(`"#${tagQuery}"`);
@@ -90,7 +94,7 @@ const UserProfile = () => {
                 <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
               </div>
               {sortedMemos.map((memo) => (
-                <MemoView key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
+                <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle showParent />
               ))}
               {isRequesting ? (
                 <div className="flex flex-col justify-start items-center w-full my-8">

web/src/store/v1/user.ts

@@ -33,8 +33,7 @@ export const useUserStore = create(
       const { users } = await userServiceClient.listUsers({});
       const userMap = get().userMapByUsername;
       for (const user of users) {
-        const username = extractUsernameFromName(user.name);
-        userMap[username] = user;
+        userMap[user.username] = user;
       }
       set({ userMapByUsername: userMap });
       return users;
@@ -75,9 +74,8 @@ export const useUserStore = create(
       if (!updatedUser) {
         throw new Error("User not found");
       }
-      const username = extractUsernameFromName(updatedUser.name);
       const userMap = get().userMapByUsername;
-      userMap[username] = updatedUser;
+      userMap[updatedUser.username] = updatedUser;
       set({ userMapByUsername: userMap });
       return updatedUser;
     },
@@ -85,13 +83,19 @@ export const useUserStore = create(
       await userServiceClient.deleteUser({
         name,
       });
+      const username = extractUsernameFromName(name);
+      const userMap = get().userMapByUsername;
+      delete userMap[username];
+      set({ userMapByUsername: userMap });
     },
     fetchCurrentUser: async () => {
       const { user } = await authServiceClient.getAuthStatus({});
       if (!user) {
         throw new Error("User not found");
       }
-      set({ currentUser: user });
+      const userMap = get().userMapByUsername;
+      userMap[user.username] = user;
+      set({ currentUser: user, userMapByUsername: userMap });
       const { setting } = await userServiceClient.getUserSetting({});
       set({
         userSetting: UserSetting.fromPartial({