From fdd17ce849387d64b891faeeffa066b932760e89 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 1 Feb 2024 20:40:43 +0800
Subject: [PATCH] chore: update memo content key

---
 .../MemoContent/EmbeddedContent/EmbeddedMemo.tsx    |  4 ++--
 web/src/components/MemoContent/OrderedList.tsx      |  8 +++++---
 web/src/components/MemoContent/TaskList.tsx         | 13 ++++++++-----
 web/src/components/MemoContent/UnorderedList.tsx    |  8 +++++---
 web/src/components/MemoView.tsx                     |  8 +++++++-
 web/src/pages/Archived.tsx                          |  2 +-
 web/src/pages/Home.tsx                              |  2 +-
 web/src/pages/MemoDetail.tsx                        |  2 +-
 8 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
index 0746b65f..a3cc4a9a 100644
--- a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
+++ b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
@@ -42,7 +42,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
   if (inlineMode) {
     return (
       <div className="w-full">
-        <MemoContent memoId={memo.id} content={memo.content} embeddedMemos={context.embeddedMemos} />
+        <MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} embeddedMemos={context.embeddedMemos} />
         <MemoResourceListView resources={memo.resources} />
       </div>
     );
@@ -56,7 +56,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
           <Icon.ArrowUpRight className="w-5 h-auto opacity-80 text-gray-400" />
         </Link>
       </div>
-      <MemoContent memoId={memo.id} content={memo.content} embeddedMemos={context.embeddedMemos} />
+      <MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} embeddedMemos={context.embeddedMemos} />
       <MemoResourceListView resources={memo.resources} />
     </div>
   );
diff --git a/web/src/components/MemoContent/OrderedList.tsx b/web/src/components/MemoContent/OrderedList.tsx
index d2f3124e..75d5f99b 100644
--- a/web/src/components/MemoContent/OrderedList.tsx
+++ b/web/src/components/MemoContent/OrderedList.tsx
@@ -13,9 +13,11 @@ const OrderedList: React.FC<Props> = ({ number, indent, children }: Props) => {
   return (
     <ol>
       <li className="w-full flex flex-row">
-        <div className="block font-mono shrink-0">
-          <span>{repeat(" ", indent)}</span>
-        </div>
+        {indent > 0 && (
+          <div className="block font-mono shrink-0">
+            <span>{repeat(" ", indent)}</span>
+          </div>
+        )}
         <div className="w-auto grid grid-cols-[24px_1fr] gap-1">
           <div className="w-7 h-6 flex justify-center items-center">
             <span className="opacity-80">{number}.</span>
diff --git a/web/src/components/MemoContent/TaskList.tsx b/web/src/components/MemoContent/TaskList.tsx
index 5ef4a5dc..2e81e648 100644
--- a/web/src/components/MemoContent/TaskList.tsx
+++ b/web/src/components/MemoContent/TaskList.tsx
@@ -1,7 +1,7 @@
 import { Checkbox } from "@mui/joy";
 import classNames from "classnames";
 import { repeat } from "lodash-es";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useMemoStore } from "@/store/v1";
 import { Node, NodeType } from "@/types/node";
 import Renderer from "./Renderer";
@@ -18,6 +18,7 @@ interface Props {
 const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props) => {
   const context = useContext(RendererContext);
   const memoStore = useMemoStore();
+  const [checked] = useState(complete);
 
   const handleCheckboxChange = async (on: boolean) => {
     if (context.readonly || !context.memoId) {
@@ -48,12 +49,14 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
   return (
     <ul>
       <li className="w-full flex flex-row">
-        <div className="block font-mono shrink-0">
-          <span>{repeat(" ", indent)}</span>
-        </div>
+        {indent > 0 && (
+          <div className="block font-mono shrink-0">
+            <span>{repeat(" ", indent)}</span>
+          </div>
+        )}
         <div className="w-auto grid grid-cols-[24px_1fr] gap-1">
           <div className="w-7 h-6 flex justify-center items-center">
-            <Checkbox size="sm" checked={complete} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
+            <Checkbox size="sm" checked={checked} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
           </div>
           <div className={classNames(complete && "line-through opacity-80")}>
             {children.map((child, index) => (
diff --git a/web/src/components/MemoContent/UnorderedList.tsx b/web/src/components/MemoContent/UnorderedList.tsx
index 2ba44d5d..a83d8569 100644
--- a/web/src/components/MemoContent/UnorderedList.tsx
+++ b/web/src/components/MemoContent/UnorderedList.tsx
@@ -12,9 +12,11 @@ const UnorderedList: React.FC<Props> = ({ indent, children }: Props) => {
   return (
     <ul>
       <li className="w-full flex flex-row">
-        <div className="block font-mono shrink-0">
-          <span>{repeat(" ", indent)}</span>
-        </div>
+        {indent > 0 && (
+          <div className="block font-mono shrink-0">
+            <span>{repeat(" ", indent)}</span>
+          </div>
+        )}
         <div className="w-auto grid grid-cols-[24px_1fr] gap-1">
           <div className="w-7 h-6 flex justify-center items-center">
             <span className="opacity-80">•</span>
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 069eacc3..98c0e690 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -257,7 +257,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
         </div>
       </div>
-      <MemoContent memoId={memo.id} content={memo.content} readonly={readonly} onClick={handleMemoContentClick} />
+      <MemoContent
+        key={`${memo.id}-${memo.updateTime}`}
+        memoId={memo.id}
+        content={memo.content}
+        readonly={readonly}
+        onClick={handleMemoContentClick}
+      />
       <MemoResourceListView resources={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index f2c0346e..cf0dd4f4 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -125,7 +125,7 @@ const Archived = () => {
                     </Tooltip>
                   </div>
                 </div>
-                <MemoContent memoId={memo.id} content={memo.content} readonly={true} />
+                <MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} readonly={true} />
               </div>
             ))
           )}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 45751ffe..71ba6b69 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -73,7 +73,7 @@ const Home = () => {
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showVisibility showPinned />
+              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinned />
             ))}
             {isRequesting ? (
               <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 04afdf29..591503aa 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -137,7 +137,7 @@ const MemoDetail = () => {
               </Link>
             </div>
           )}
-          <MemoContent memoId={memo.id} content={memo.content} readonly={readonly} />
+          <MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} readonly={readonly} />
           <MemoResourceListView resources={memo.resources} />
           <MemoRelationListView memo={memo} relationList={referenceRelations} />
           <div className="w-full mt-3 flex flex-row justify-between items-center gap-2">