From 778282ae2956a0132b7ef4c01d640c5fc6686822 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Mon, 3 Oct 2022 09:39:59 +0800
Subject: [PATCH] chore: update resource dialog

---
 web/src/components/MemoEditor.tsx      | 13 ++++++-------
 web/src/components/ResourcesDialog.tsx |  7 ++++++-
 web/src/components/UserBanner.tsx      | 11 +++++++----
 web/src/less/memo-editor.less          |  6 +++---
 web/src/types/modules/resource.d.ts    |  2 ++
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 4d6992f7..a2399c72 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -1,7 +1,7 @@
 import { IEmojiData } from "emoji-picker-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { deleteMemoResource, getMemoResourceList, upsertMemoResource } from "../helpers/api";
+import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { editorStateService, locationService, memoService, resourceService } from "../services";
 import { useAppSelector } from "../store";
@@ -64,11 +64,9 @@ const MemoEditor: React.FC = () => {
     ) {
       const memo = memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID);
       if (memo) {
-        getMemoResourceList(memo.id).then(({ data: { data } }) => {
-          setState({
-            ...state,
-            resourceList: data,
-          });
+        setState({
+          ...state,
+          resourceList: memo.resourceList,
         });
         editorRef.current?.setContent(memo.content ?? "");
         editorRef.current?.focus();
@@ -341,7 +339,8 @@ const MemoEditor: React.FC = () => {
         </div>
         <div className="btns-container">
           <button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
-            {t("editor.save")} <span className="icon-text">✍️</span>
+            {t("editor.save")}
+            <img className="icon-img" src="/logo.webp" />
           </button>
         </div>
       </div>
diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx
index b90935bc..33148758 100644
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@@ -104,9 +104,14 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleDeleteResourceBtnClick = (resource: Resource) => {
+    let warningText = "Are you sure to delete this resource? THIS ACTION IS IRREVERSIABLE.❗️";
+    if (resource.linkedMemoAmount > 0) {
+      warningText = warningText + `\nLinked memo amount: ${resource.linkedMemoAmount}`;
+    }
+
     showCommonDialog({
       title: `Delete Resource`,
-      content: `Are you sure to delete this resource? THIS ACTION IS IRREVERSIABLE.❗️`,
+      content: warningText,
       style: "warning",
       onConfirm: async () => {
         await resourceService.deleteResourceById(resource.id);
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index 7632007c..7ab76f35 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -76,25 +76,28 @@ const UserBanner = () => {
               {!userService.isVisitorMode() && (
                 <>
                   <button
-                    className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
                     onClick={handleResourcesBtnClick}
                   >
                     <span className="mr-1">🌄</span> {t("sidebar.resources")}
                   </button>
                   <button
-                    className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
                     onClick={handleArchivedBtnClick}
                   >
                     <span className="mr-1">🗂</span> {t("sidebar.archived")}
                   </button>
                 </>
               )}
-              <button className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" onClick={handleAboutBtnClick}>
+              <button
+                className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                onClick={handleAboutBtnClick}
+              >
                 <span className="mr-1">🤠</span> {t("common.about")}
               </button>
               {!userService.isVisitorMode() && (
                 <button
-                  className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                  className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
                   onClick={handleSignOutBtnClick}
                 >
                   <span className="mr-1">👋</span> {t("common.sign-out")}
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 70444b0e..02f0a691 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -128,10 +128,10 @@
       }
 
       > .confirm-btn {
-        @apply shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
+        @apply flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
 
-        > .icon-text {
-          @apply text-base ml-1;
+        > .icon-img {
+          @apply ml-1 w-6 h-auto;
         }
       }
     }
diff --git a/web/src/types/modules/resource.d.ts b/web/src/types/modules/resource.d.ts
index 717ba7e1..55b2714f 100644
--- a/web/src/types/modules/resource.d.ts
+++ b/web/src/types/modules/resource.d.ts
@@ -9,4 +9,6 @@ interface Resource {
   filename: string;
   type: string;
   size: string;
+
+  linkedMemoAmount: number;
 }