fix: invalid username checks

web/src/components/CreateAccessTokenDialog.tsx

@@ -1,7 +1,7 @@
 import { Button, Input, Radio, RadioGroup } from "@mui/joy";
-import axios from "axios";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
+import { userServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useTranslate } from "@/utils/i18n";
@@ -68,9 +68,12 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
     }
 
     try {
-      await axios.post(`/api/v2/users/${currentUser.id}/access_tokens`, {
-        description: state.description,
-        expiresAt: new Date(Date.now() + state.expiration * 1000),
+      await userServiceClient.createUserAccessToken({
+        username: currentUser.username,
+        userAccessToken: {
+          description: state.description,
+          expiresAt: new Date(Date.now() + state.expiration * 1000),
+        },
       });
 
       onConfirm();

web/src/components/Header.tsx

@@ -1,7 +1,8 @@
 import classNames from "classnames";
 import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { useLayoutStore, useUserStore } from "@/store/module";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { useLayoutStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
@@ -17,10 +18,9 @@ interface NavLinkItem {
 const Header = () => {
   const t = useTranslate();
   const location = useLocation();
-  const userStore = useUserStore();
   const layoutStore = useLayoutStore();
   const showHeader = layoutStore.state.showHeader;
-  const isVisitorMode = userStore.isVisitorMode() && !userStore.state.user;
+  const user = useCurrentUser();
 
   useEffect(() => {
     const handleWindowResize = () => {
@@ -77,7 +77,7 @@ const Header = () => {
     icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
   };
 
-  const navLinks: NavLinkItem[] = !isVisitorMode
+  const navLinks: NavLinkItem[] = user
     ? [homeNavLink, dailyReviewNavLink, resourcesNavLink, exploreNavLink, archivedNavLink, settingNavLink]
     : [exploreNavLink, authNavLink];
 

web/src/components/HomeSidebar.tsx

@@ -1,11 +1,10 @@
-import { useLayoutStore, useUserStore } from "../store/module";
+import { useLayoutStore } from "../store/module";
 import SearchBar from "./SearchBar";
 import TagList from "./TagList";
 import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {
   const layoutStore = useLayoutStore();
-  const userStore = useUserStore();
   const showHomeSidebar = layoutStore.state.showHomeSidebar;
 
   return (
@@ -29,11 +28,7 @@ const HomeSidebar = () => {
           <SearchBar />
         </div>
         <UsageHeatMap />
-        {!userStore.isVisitorMode() && (
-          <>
-            <TagList />
-          </>
-        )}
+        <TagList />
       </aside>
     </div>
   );

web/src/components/Memo.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString } from "@/helpers/datetime";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
@@ -28,16 +29,17 @@ interface Props {
 
 const Memo: React.FC<Props> = (props: Props) => {
   const { memo, lazyRendering } = props;
-  const { i18n } = useTranslation();
   const t = useTranslate();
+  const { i18n } = useTranslation();
   const filterStore = useFilterStore();
   const userStore = useUserStore();
   const memoStore = useMemoStore();
   const userV1Store = useUserV1Store();
+  const user = useCurrentUser();
   const [shouldRender, setShouldRender] = useState<boolean>(lazyRendering ? false : true);
   const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(memo.displayTs));
   const memoContainerRef = useRef<HTMLDivElement>(null);
-  const readonly = userStore.isVisitorMode() || userStore.getCurrentUsername() !== memo.creatorUsername;
+  const readonly = memo.creatorUsername !== user?.username;
   const creator = userV1Store.getUserByUsername(memo.creatorUsername);
 
   // Prepare memo creator.
@@ -227,7 +229,7 @@ const Memo: React.FC<Props> = (props: Props) => {
           <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
             {creator && (
               <>
-                <Link className="flex flex-row justify-start items-center" to={`/u/${memo.creatorUsername}`}>
+                <Link className="flex flex-row justify-start items-center" to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
                   <UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
                   <span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator.nickname}</span>
                 </Link>

web/src/components/MemoList.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { useParams } from "react-router-dom";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { getTimeStampByDate } from "@/helpers/datetime";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { TAG_REG } from "@/labs/marked/parser";
-import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
+import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Empty from "./Empty";
 import Memo from "./Memo";
@@ -11,17 +13,17 @@ import "@/less/memo-list.less";
 
 const MemoList: React.FC = () => {
   const t = useTranslate();
+  const params = useParams();
   const memoStore = useMemoStore();
-  const userStore = useUserStore();
   const filterStore = useFilterStore();
   const filter = filterStore.state;
   const { memos } = memoStore.state;
   const [isFetching, setIsFetching] = useState<boolean>(true);
   const [isComplete, setIsComplete] = useState<boolean>(false);
-
-  const currentUsername = userStore.getCurrentUsername();
+  const user = useCurrentUser();
   const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
   const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
+  const username = params.username || user?.username || "";
 
   const shownMemos = (
     showMemoFilter
@@ -61,7 +63,7 @@ const MemoList: React.FC = () => {
           return shouldShow;
         })
       : memos
-  ).filter((memo) => memo.creatorUsername === currentUsername && memo.rowStatus === "NORMAL");
+  ).filter((memo) => memo.creatorUsername === username && memo.rowStatus === "NORMAL");
 
   const pinnedMemos = shownMemos.filter((m) => m.pinned);
   const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
@@ -72,11 +74,9 @@ const MemoList: React.FC = () => {
   unpinnedMemos.sort(memoSort);
   const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
 
-  const statusRef = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
     memoStore
-      .fetchMemos()
+      .fetchMemos(username)
       .then((fetchedMemos) => {
         if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
           setIsComplete(true);
@@ -89,7 +89,7 @@ const MemoList: React.FC = () => {
         console.error(error);
         toast.error(error.response.data.message);
       });
-  }, [currentUsername]);
+  }, [user?.username]);
 
   useEffect(() => {
     const pageWrapper = document.body.querySelector(".page-wrapper");
@@ -112,20 +112,12 @@ const MemoList: React.FC = () => {
         observer.unobserve(entry.target);
       }
     });
-    if (statusRef?.current) {
-      observer.observe(statusRef.current);
-    }
-    return () => {
-      if (statusRef?.current) {
-        observer.unobserve(statusRef.current);
-      }
-    };
-  }, [isFetching, isComplete, filter, sortedMemos.length, statusRef]);
+  }, [isFetching, isComplete, filter, sortedMemos.length]);
 
   const handleFetchMoreClick = async () => {
     try {
       setIsFetching(true);
-      const fetchedMemos = await memoStore.fetchMemos(DEFAULT_MEMO_LIMIT, memos.length);
+      const fetchedMemos = await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
       if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
         setIsComplete(true);
       } else {
@@ -148,8 +140,8 @@ const MemoList: React.FC = () => {
           <p className="status-text">{t("memo.fetching-data")}</p>
         </div>
       ) : (
-        <div ref={statusRef} className="status-text-container">
-          <p className="status-text">
+        <div className="status-text-container">
+          <div className="status-text">
             {isComplete ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
@@ -164,7 +156,7 @@ const MemoList: React.FC = () => {
                 </span>
               </>
             )}
-          </p>
+          </div>
         </div>
       )}
     </div>

web/src/components/Settings/AccessTokenSection.tsx

@@ -1,10 +1,10 @@
 import { Button, IconButton } from "@mui/joy";
-import axios from "axios";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { userServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { ListUserAccessTokensResponse, UserAccessToken } from "@/types/proto/api/v2/user_service";
+import { UserAccessToken } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateAccessTokenDialog from "../CreateAccessTokenDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
@@ -12,8 +12,8 @@ import Icon from "../Icon";
 import LearnMore from "../LearnMore";
 
 const listAccessTokens = async (username: string) => {
-  const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${username}/access_tokens`);
-  return data.accessTokens;
+  const { accessTokens } = await userServiceClient.listUserAccessTokens({ username: username });
+  return accessTokens;
 };
 
 const AccessTokenSection = () => {
@@ -44,7 +44,7 @@ const AccessTokenSection = () => {
       style: "danger",
       dialogName: "delete-access-token-dialog",
       onConfirm: async () => {
-        await axios.delete(`/api/v2/users/${currentUser.id}/access_tokens/${accessToken}`);
+        await userServiceClient.deleteUserAccessToken({ username: currentUser.username, accessToken: accessToken });
         setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
       },
     });

web/src/components/UsageHeatMap.tsx

@@ -3,9 +3,10 @@ import { getMemoStats } from "@/helpers/api";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
 import * as utils from "@/helpers/utils";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
-import { useFilterStore, useMemoStore, useUserStore } from "../store/module";
+import { useFilterStore, useMemoStore } from "../store/module";
 import "@/less/usage-heat-map.less";
 
 const tableConfig = {
@@ -32,8 +33,8 @@ interface DailyUsageStat {
 const UsageHeatMap = () => {
   const t = useTranslate();
   const filterStore = useFilterStore();
-  const userStore = useUserStore();
   const userV1Store = useUserV1Store();
+  const user = useCurrentUser();
   const memoStore = useMemoStore();
   const todayTimeStamp = getDateStampByDate(Date.now());
   const todayDay = new Date(todayTimeStamp).getDay() + 1;
@@ -46,23 +47,22 @@ const UsageHeatMap = () => {
   const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
-  const currentUsername = userStore.getCurrentUsername();
 
   useEffect(() => {
-    userV1Store.getOrFetchUserByUsername(currentUsername).then((user) => {
+    userV1Store.getOrFetchUserByUsername(user.username).then((user) => {
       if (!user) {
         return;
       }
       setCreatedDays(Math.ceil((Date.now() - getTimeStampByDate(user.createTime)) / 1000 / 3600 / 24));
     });
-  }, [currentUsername]);
+  }, [user.username]);
 
   useEffect(() => {
     if (memos.length === 0) {
       return;
     }
 
-    getMemoStats(currentUsername)
+    getMemoStats(user.username)
       .then(({ data }) => {
         setMemoAmount(data.length);
         const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestamp);
@@ -81,7 +81,7 @@ const UsageHeatMap = () => {
       .catch((error) => {
         console.error(error);
       });
-  }, [memos.length, currentUsername]);
+  }, [memos.length, user.username]);
 
   const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => {
     const tempDiv = document.createElement("div");

web/src/components/UserBanner.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useGlobalStore, useUserStore } from "@/store/module";
+import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import Icon from "./Icon";
@@ -13,17 +14,11 @@ const UserBanner = () => {
   const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const { systemStatus } = globalStore.state;
-  const { user } = userStore.state;
-  const [username, setUsername] = useState("Memos");
-
-  useEffect(() => {
-    if (user) {
-      setUsername(user.nickname || user.username);
-    }
-  }, [user]);
+  const user = useCurrentUser();
+  const title = user ? user.nickname : systemStatus.customizedProfile.name || "memos";
 
   const handleMyAccountClick = () => {
-    navigate(`/u/${user?.username}`);
+    navigate(`/u/${encodeURIComponent(user.username)}`);
   };
 
   const handleAboutBtnClick = () => {
@@ -42,10 +37,8 @@ const UserBanner = () => {
         trigger={
           <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
             <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
-            <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">
-              {user != undefined ? username : systemStatus.customizedProfile.name}
-            </span>
-            {user?.role === "HOST" ? (
+            <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
+            {user?.role === User_Role.HOST ? (
               <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>
             ) : null}
           </div>

web/src/components/kit/DatePicker.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { getMemoStats } from "@/helpers/api";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
-import { useUserStore } from "@/store/module";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import "@/less/common/date-picker.less";
@@ -21,14 +21,14 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   const { className, isFutureDateDisabled, datestamp, handleDateStampChange } = props;
   const [currentDateStamp, setCurrentDateStamp] = useState<number>(getMonthFirstDayDateStamp(datestamp));
   const [countByDate, setCountByDate] = useState(new Map());
-  const currentUsername = useUserStore().getCurrentUsername();
+  const user = useCurrentUser();
 
   useEffect(() => {
     setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
   }, [datestamp]);
 
   useEffect(() => {
-    getMemoStats(currentUsername).then(({ data }) => {
+    getMemoStats(user.username).then(({ data }) => {
       const m = new Map();
       for (const record of data) {
         const date = getDateStampByDate(record * 1000);
@@ -36,7 +36,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
       }
       setCountByDate(m);
     });
-  }, [currentUsername]);
+  }, [user.username]);
 
   const firstDate = new Date(currentDateStamp);
   const firstDateDay = firstDate.getDay() === 0 ? 7 : firstDate.getDay();