From 7722c416806ac0a09353d8c4520db1f32712df90 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 26 Sep 2023 23:46:58 +0800
Subject: [PATCH] chore: add edit button to memo detail page

---
 web/src/components/MemoResourceListView.tsx |  2 +-
 web/src/pages/MemoDetail.tsx                | 15 ++++++++++++
 web/src/router/index.tsx                    | 26 +++++++++------------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/web/src/components/MemoResourceListView.tsx b/web/src/components/MemoResourceListView.tsx
index e6e861344..42f2bb130 100644
--- a/web/src/components/MemoResourceListView.tsx
+++ b/web/src/components/MemoResourceListView.tsx
@@ -43,7 +43,7 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
     <>
       {imageResourceList.length > 0 &&
         (imageResourceList.length === 1 ? (
-          <div className="mt-2 max-w-[90%] max-h-64 flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
+          <div className="mt-2 max-w-full max-h-72 flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
             <img
               className="cursor-pointer min-h-full w-auto min-w-full object-cover"
               src={getResourceUrl(imageResourceList[0])}
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 6675834b6..4982a5bfd 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -7,12 +7,14 @@ import { useParams } from "react-router-dom";
 import FloatingNavButton from "@/components/FloatingNavButton";
 import Icon from "@/components/Icon";
 import MemoContent from "@/components/MemoContent";
+import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
 import MemoRelationListView from "@/components/MemoRelationListView";
 import MemoResourceListView from "@/components/MemoResourceListView";
 import showShareMemoDialog from "@/components/ShareMemoDialog";
 import UserAvatar from "@/components/UserAvatar";
 import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { getDateTimeString } from "@/helpers/datetime";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useMemoStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
@@ -25,9 +27,11 @@ const MemoDetail = () => {
   const t = useTranslate();
   const memoStore = useMemoStore();
   const userV1Store = useUserV1Store();
+  const currentUser = useCurrentUser();
   const [user, setUser] = useState<User>();
   const memoId = Number(params.memoId);
   const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
+  const allowEdit = memo?.creatorUsername === currentUser?.username;
 
   useEffect(() => {
     if (memoId && !isNaN(memoId)) {
@@ -65,6 +69,12 @@ const MemoDetail = () => {
     });
   };
 
+  const handleEditMemoClick = () => {
+    showMemoEditorDialog({
+      memoId: memo.id,
+    });
+  };
+
   const handleCopyLinkBtnClick = () => {
     copy(`${window.location.origin}/m/${memo.id}`);
     toast.success(t("message.succeed-copy-link"));
@@ -113,6 +123,11 @@ const MemoDetail = () => {
                 </Tooltip>
               </div>
               <div className="flex flex-row sm:justify-end items-center">
+                {allowEdit && (
+                  <IconButton size="sm" onClick={handleEditMemoClick}>
+                    <Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />
+                  </IconButton>
+                )}
                 <IconButton size="sm" onClick={handleCopyLinkBtnClick}>
                   <Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
                 </IconButton>
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index 10b2abf5e..e5114cb38 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -33,7 +33,7 @@ const initialGlobalStateLoader = (() => {
   };
 })();
 
-const userStateLoader = async () => {
+const initialUserStateLoader = async (redirectWhenNotFound = true) => {
   let user = undefined;
   try {
     user = await initialUserState();
@@ -41,7 +41,7 @@ const userStateLoader = async () => {
     // do nothing.
   }
 
-  if (!user) {
+  if (!user && redirectWhenNotFound) {
     return redirect("/explore");
   }
   return null;
@@ -71,53 +71,49 @@ const router = createBrowserRouter([
           {
             path: "",
             element: <Home />,
-            loader: userStateLoader,
+            loader: () => initialUserStateLoader(),
           },
           {
             path: "explore",
             element: <Explore />,
-            loader: async () => {
-              try {
-                await initialUserState();
-              } catch (error) {
-                // do nothing.
-              }
-              return null;
-            },
+            loader: () => initialUserStateLoader(false),
           },
           {
             path: "review",
             element: <DailyReview />,
-            loader: userStateLoader,
+            loader: () => initialUserStateLoader(),
           },
           {
             path: "resources",
             element: <Resources />,
-            loader: userStateLoader,
+            loader: () => initialUserStateLoader(),
           },
           {
             path: "archived",
             element: <Archived />,
-            loader: userStateLoader,
+            loader: () => initialUserStateLoader(),
           },
           {
             path: "setting",
             element: <Setting />,
-            loader: userStateLoader,
+            loader: () => initialUserStateLoader(),
           },
         ],
       },
       {
         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: "*",