chore: update MemoResources props (#432)

web/src/components/ArchivedMemo.tsx

@@ -67,7 +67,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
         </div>
       </div>
       <MemoContent content={memo.content} />
-      <MemoResources memo={memo} />
+      <MemoResources resourceList={memo.resourceList} />
     </div>
   );
 };

web/src/components/DailyMemo.tsx

@@ -21,7 +21,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
       </div>
       <div className="memo-container">
         <MemoContent content={memo.content} displayConfig={displayConfig} />
-        <MemoResources memo={memo} />
+        <MemoResources resourceList={memo.resourceList} />
       </div>
       <div className="split-line"></div>
     </div>

web/src/components/Memo.tsx

@@ -243,7 +243,7 @@ const Memo: React.FC<Props> = (props: Props) => {
         onMemoContentClick={handleMemoContentClick}
         onMemoContentDoubleClick={handleMemoContentDoubleClick}
       />
-      <MemoResources memo={memo} />
+      <MemoResources resourceList={memo.resourceList} />
     </div>
   );
 };

web/src/components/MemoCardDialog.tsx

@@ -195,7 +195,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="memo-container">
           <MemoContent displayConfig={{ enableExpand: false }} content={memo.content} onMemoContentClick={handleMemoContentClick} />
-          <MemoResources memo={memo} />
+          <MemoResources resourceList={memo.resourceList} />
         </div>
         <div className="layer-container"></div>
         {linkMemos.map((_, idx) => {

web/src/components/MemoResources.tsx

@@ -3,13 +3,14 @@ import Icon from "./Icon";
 import "../less/memo-resources.less";
 
 interface Props {
-  memo: Memo;
+  className?: string;
+  resourceList: Resource[];
 }
 
 const MemoResources: React.FC<Props> = (props: Props) => {
-  const { memo } = props;
+  const { className, resourceList } = props;
-  const imageList = memo.resourceList.filter((resource) => resource.type.includes("image"));
+  const imageList = resourceList.filter((resource) => resource.type.includes("image"));
-  const otherResourceList = memo.resourceList.filter((resource) => !resource.type.includes("image"));
+  const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
 
   const handlPreviewBtnClick = (resource: Resource) => {
     const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
@@ -21,7 +22,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   });
 
   return (
-    <div className="resource-wrapper">
+    <div className={`resource-wrapper  ${className || ""}`}>
       {imageList.length > 0 && (
         <div className="images-wrapper">
           {imageList.map((resource, index) => (

web/src/pages/Explore.tsx

@@ -88,7 +88,7 @@ const Explore = () => {
                     </a>
                   </div>
                   <MemoContent className="memo-content" content={memo.content} onMemoContentClick={() => undefined} />
-                  <MemoResources memo={memo} />
+                  <MemoResources resourceList={memo.resourceList} />
                 </div>
               );
             })}

web/src/pages/MemoDetail.tsx

@@ -148,7 +148,7 @@ const MemoDetail = () => {
                 />
               </div>
               <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
-              <MemoResources memo={state.memo} />
+              <MemoResources resourceList={state.memo.resourceList} />
             </div>
           </main>
         )}