chore: update url of memo detail page

web/src/components/Inbox/MemoCommentMessage.tsx

@@ -11,7 +11,6 @@ import { Memo } from "@/types/proto/api/v1/memo_service";
 import { User } from "@/types/proto/api/v1/user_service";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
-import { memoLink } from "@/utils/memo";
 
 interface Props {
   inbox: Inbox;
@@ -52,7 +51,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
       return;
     }
 
-    navigateTo(memoLink(relatedMemo.name));
+    navigateTo(`/${relatedMemo.name}`);
     if (inbox.status === Inbox_Status.UNREAD) {
       handleArchiveMessage(true);
     }

web/src/components/MemoActionMenu.tsx

@@ -21,7 +21,6 @@ import { NodeType } from "@/types/proto/api/v1/markdown_service";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
-import { memoLink } from "@/utils/memo";
 
 interface Props {
   memo: Memo;
@@ -52,7 +51,7 @@ const MemoActionMenu = (props: Props) => {
   const userStatsStore = useUserStatsStore();
   const isArchived = memo.state === State.ARCHIVED;
   const hasCompletedTaskList = checkHasCompletedTaskList(memo);
-  const isInMemoDetailPage = location.pathname.startsWith(memoLink(memo.name));
+  const isInMemoDetailPage = location.pathname.startsWith(`/${memo.name}`);
 
   const memoUpdatedCallback = () => {
     // Refresh user stats.
@@ -115,7 +114,7 @@ const MemoActionMenu = (props: Props) => {
   };
 
   const handleCopyLink = () => {
-    copy(`${window.location.origin}${memoLink(memo.name)}`);
+    copy(`${window.location.origin}/${memo.name}`);
     toast.success(t("message.succeed-copy-link"));
   };
 

web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx

@@ -7,7 +7,6 @@ import MemoResourceListView from "@/components/MemoResourceListView";
 import useLoading from "@/hooks/useLoading";
 import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
 import { cn } from "@/utils";
-import { memoLink } from "@/utils/memo";
 import MemoContent from "..";
 import { RendererContext } from "../types";
 import Error from "./Error";
@@ -79,7 +78,7 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
           >
             {extractMemoIdFromName(memo.name).slice(0, 6)}
           </span>
-          <Link className="opacity-60 hover:opacity-80" to={memoLink(memo.name)} state={{ from: context.parentPage }} viewTransition>
+          <Link className="opacity-60 hover:opacity-80" to={`/${memo.name}`} state={{ from: context.parentPage }} viewTransition>
             <ArrowUpRightIcon className="w-5 h-auto" />
           </Link>
         </div>

web/src/components/MemoContent/ReferencedContent/ReferencedMemo.tsx

@@ -2,7 +2,6 @@ import { useContext, useEffect } from "react";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { memoNamePrefix, useMemoStore } from "@/store/v1";
-import { memoLink } from "@/utils/memo";
 import { RendererContext } from "../types";
 import Error from "./Error";
 
@@ -35,7 +34,7 @@ const ReferencedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
   const displayContent = paramsText || (memo.snippet.length > 12 ? `${memo.snippet.slice(0, 12)}...` : memo.snippet);
 
   const handleGotoMemoDetailPage = () => {
-    navigateTo(memoLink(memo.name), {
+    navigateTo(`/${memo.name}`, {
       state: {
         from: context.parentPage,
       },

web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx

@@ -5,7 +5,6 @@ import useNavigateTo from "@/hooks/useNavigateTo";
 import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { cn } from "@/utils";
-import { memoLink } from "@/utils/memo";
 import { LinkType, NodeType } from "./types";
 import { convertMemoRelationsToGraphData } from "./utils";
 
@@ -32,7 +31,7 @@ const MemoRelationForceGraph = ({ className, memo, parentPage }: Props) => {
 
   const onNodeClick = (node: NodeObject<NodeType>) => {
     if (node.memo.name === memo.name) return;
-    navigateTo(memoLink(memo.name), {
+    navigateTo(`/${memo.name}`, {
       state: {
         from: parentPage,
       },

web/src/components/MemoView.tsx

@@ -13,7 +13,7 @@ import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_sett
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
-import { convertVisibilityToString, memoLink } from "@/utils/memo";
+import { convertVisibilityToString } from "@/utils/memo";
 import { isSuperUser } from "@/utils/user";
 import MemoActionMenu from "./MemoActionMenu";
 import MemoContent from "./MemoContent";
@@ -61,7 +61,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const relativeTimeFormat = Date.now() - memo.displayTime!.getTime() > 1000 * 60 * 60 * 24 ? "datetime" : "auto";
   const isArchived = memo.state === State.ARCHIVED;
   const readonly = memo.creator !== user?.name && !isSuperUser(user);
-  const isInMemoDetailPage = location.pathname.startsWith(memoLink(memo.name));
+  const isInMemoDetailPage = location.pathname.startsWith(`/${memo.name}`);
   const parentPage = props.parentPage || location.pathname;
 
   // Initial related data: creator.
@@ -71,7 +71,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   }, []);
 
   const handleGotoMemoDetailPage = useCallback(() => {
-    navigateTo(memoLink(memo.name), {
+    navigateTo(`/${memo.name}`, {
       state: {
         from: parentPage,
       },
@@ -192,7 +192,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
                     "flex flex-row justify-start items-center hover:opacity-70",
                     commentAmount === 0 && "invisible group-hover:visible",
                   )}
-                  to={`${memoLink(memo.name)}#comments`}
+                  to={`/${memo.name}#comments`}
                   viewTransition
                   state={{
                     from: parentPage,

web/src/pages/MemoDetail.tsx

@@ -17,7 +17,6 @@ import { Memo } from "@/types/proto/api/v1/memo_service";
 import { WorkspaceMemoRelatedSetting, WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
-import { memoLink } from "@/utils/memo";
 
 const MemoDetail = () => {
   const t = useTranslate();
@@ -98,7 +97,7 @@ const MemoDetail = () => {
             <div className="w-auto inline-block mb-2">
               <Link
                 className="px-3 py-1 border rounded-lg max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
-                to={memoLink(parentMemo.name)}
+                to={`/${parentMemo.name}`}
                 state={locationState}
                 viewTransition
               >

web/src/router/MemoDetailRedirect.tsx

@@ -0,0 +1,8 @@
+import { Navigate, useParams } from "react-router-dom";
+
+const MemoDetailRedirect = () => {
+  const { uid } = useParams();
+  return <Navigate to={`/memos/${uid}`} replace />;
+};
+
+export default MemoDetailRedirect;

web/src/router/index.tsx

@@ -17,6 +17,7 @@ import Setting from "@/pages/Setting";
 import SignIn from "@/pages/SignIn";
 import SignUp from "@/pages/SignUp";
 import UserProfile from "@/pages/UserProfile";
+import MemoDetailRedirect from "./MemoDetailRedirect";
 
 export enum Routes {
   ROOT = "/",
@@ -85,7 +86,7 @@ const router = createBrowserRouter([
             element: <Explore />,
           },
           {
-            path: "m/:uid",
+            path: "memos/:uid",
             element: <MemoDetail />,
           },
           {
@@ -96,6 +97,11 @@ const router = createBrowserRouter([
             path: Routes.ABOUT,
             element: <About />,
           },
+          // Redirect old path to new path.
+          {
+            path: "m/:uid",
+            element: <MemoDetailRedirect />,
+          },
           {
             path: "403",
             element: <PermissionDenied />,

web/src/utils/memo.ts

@@ -1,4 +1,3 @@
-import { extractMemoIdFromName } from "@/store/v1";
 import { Visibility } from "@/types/proto/api/v1/memo_service";
 
 export const convertVisibilityFromString = (visibility: string) => {
@@ -26,5 +25,3 @@ export const convertVisibilityToString = (visibility: Visibility) => {
       return "PRIVATE";
   }
 };
-
-export const memoLink = (memo: string) => `/m/${extractMemoIdFromName(memo)}`;