From c7cf35c7decce5a83d652f129b1f4b978cf7dc4c Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Sat, 1 Oct 2022 10:02:16 +0800
Subject: [PATCH] feat: update memo resource component

---
 web/src/components/DailyMemo.tsx     |  6 +++++-
 web/src/components/MemoEditor.tsx    |  8 ++-----
 web/src/components/MemoResources.tsx | 31 +++++++++++++++++++++-------
 web/src/less/daily-memo.less         |  8 +++++--
 web/src/less/memo-resources.less     | 16 ++++++++++++++
 web/src/types/modules/memo.d.ts      |  4 +++-
 6 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx
index 84085a48..576ea249 100644
--- a/web/src/components/DailyMemo.tsx
+++ b/web/src/components/DailyMemo.tsx
@@ -1,5 +1,6 @@
 import * as utils from "../helpers/utils";
 import MemoContent, { DisplayConfig } from "./MemoContent";
+import MemoResources from "./MemoResources";
 import "../less/daily-memo.less";
 
 interface DailyMemo extends Memo {
@@ -28,7 +29,10 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
       <div className="time-wrapper">
         <span className="normal-text">{memo.timeStr}</span>
       </div>
-      <MemoContent content={memo.content} displayConfig={displayConfig} />
+      <div className="memo-container">
+        <MemoContent content={memo.content} displayConfig={displayConfig} />
+        <MemoResources memo={memo} />
+      </div>
       <div className="split-line"></div>
     </div>
   );
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 50860dcd..0d36ced9 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -126,7 +126,7 @@ const MemoEditor: React.FC = () => {
       if (editMemoId && editMemoId !== UNKNOWN_ID) {
         const prevMemo = memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
 
-        if (prevMemo && prevMemo.content !== content) {
+        if (prevMemo) {
           await memoService.patchMemo({
             id: prevMemo.id,
             content,
@@ -347,11 +347,7 @@ const MemoEditor: React.FC = () => {
           {state.resourceList.map((resource) => {
             return (
               <div key={resource.id} className="resource-container">
-                {resource.type.includes("image") ? (
-                  <Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
-                ) : (
-                  <Icon.FileText className="icon-img" onClick={handleUploadFileBtnClick} />
-                )}
+                {resource.type.includes("image") ? <Icon.Image className="icon-img" /> : <Icon.FileText className="icon-img" />}
                 <span className="name-text">{resource.filename}</span>
                 <Icon.X className="close-icon" onClick={() => handleDeleteResource(resource.id)} />
               </div>
diff --git a/web/src/components/MemoResources.tsx b/web/src/components/MemoResources.tsx
index a94027a1..160b8dd3 100644
--- a/web/src/components/MemoResources.tsx
+++ b/web/src/components/MemoResources.tsx
@@ -1,25 +1,40 @@
-import { IMAGE_URL_REG } from "../helpers/marked";
 import Image from "./Image";
+import Icon from "./Icon";
 import "../less/memo-resources.less";
 
 interface Props {
-  className?: string;
   memo: Memo;
 }
 
 const MemoResources: React.FC<Props> = (props: Props) => {
-  const { className, memo } = props;
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
+  const { memo } = props;
+  const imageList = memo.resourceList.filter((resource) => resource.type.includes("image"));
+  const otherResourceList = memo.resourceList.filter((resource) => !resource.type.includes("image"));
+
+  const handlPreviewBtnClick = (resource: Resource) => {
+    const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+    window.open(resourceUrl);
+  };
 
   return (
     <div className="resource-wrapper">
-      {imageUrls.length > 0 && (
-        <div className={`images-wrapper ${className ?? ""}`}>
-          {imageUrls.map((imgUrl, idx) => (
-            <Image className="memo-img" key={idx} imgUrl={imgUrl} />
+      {imageList.length > 0 && (
+        <div className="images-wrapper">
+          {imageList.map((resource) => (
+            <Image className="memo-img" key={resource.id} imgUrl={`/o/r/${resource.id}/${resource.filename}`} />
           ))}
         </div>
       )}
+      <div className="other-resource-wrapper">
+        {otherResourceList.map((resource) => {
+          return (
+            <div className="other-resource-container" key={resource.id} onClick={() => handlPreviewBtnClick(resource)}>
+              <Icon.FileText className="icon-img" />
+              <span className="name-text">{resource.filename}</span>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/web/src/less/daily-memo.less b/web/src/less/daily-memo.less
index 3dd123eb..54eacf4d 100644
--- a/web/src/less/daily-memo.less
+++ b/web/src/less/daily-memo.less
@@ -17,7 +17,11 @@
     @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 border-2 border-white text-gray-600 z-10;
   }
 
-  > .memo-content-container {
-    @apply flex flex-col justify-start items-start w-full overflow-x-hidden p-0 text-base;
+  > .memo-container {
+    @apply w-full overflow-x-hidden flex flex-col justify-start items-start;
+
+    > .memo-content-container {
+      @apply flex flex-col justify-start items-start w-full overflow-x-hidden p-0 text-base;
+    }
   }
 }
diff --git a/web/src/less/memo-resources.less b/web/src/less/memo-resources.less
index 14783c54..48db9cfb 100644
--- a/web/src/less/memo-resources.less
+++ b/web/src/less/memo-resources.less
@@ -16,4 +16,20 @@
       }
     }
   }
+
+  > .other-resource-wrapper {
+    @apply w-full flex flex-row justify-start flex-wrap;
+
+    > .other-resource-container {
+      @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;
+
+      > .icon-img {
+        @apply w-4 h-auto mr-1 text-gray-500;
+      }
+
+      > .name-text {
+        @apply text-gray-500 text-sm max-w-xs truncate font-mono;
+      }
+    }
+  }
 }
diff --git a/web/src/types/modules/memo.d.ts b/web/src/types/modules/memo.d.ts
index ad15490c..021753af 100644
--- a/web/src/types/modules/memo.d.ts
+++ b/web/src/types/modules/memo.d.ts
@@ -6,7 +6,6 @@ interface Memo {
   id: MemoId;
 
   creatorId: UserId;
-  creator: User;
   createdTs: TimeStamp;
   updatedTs: TimeStamp;
   rowStatus: RowStatus;
@@ -14,6 +13,9 @@ interface Memo {
   content: string;
   visibility: Visibility;
   pinned: boolean;
+
+  creator: User;
+  resourceList: Resource[];
 }
 
 interface MemoCreate {