From 1bff574d56125e0c8e106681df41d2b07ce1d1b0 Mon Sep 17 00:00:00 2001
From: Huy Bui <huy03081999@gmail.com>
Date: Sun, 21 Jul 2024 14:26:29 +0700
Subject: [PATCH 1/2] fix: update title on mounted

---
 src/components/EditorHeader/ControlPanel.jsx |  4 ----
 src/components/EditorHeader/Modal/Modal.jsx  | 19 +++++++++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 2cc81aa..fc6753e 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -76,7 +76,6 @@ export default function ControlPanel({
 }) {
   const [modal, setModal] = useState(MODAL.NONE);
   const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE);
-  const [prevTitle, setPrevTitle] = useState(title);
   const [showEditName, setShowEditName] = useState(false);
   const [importDb, setImportDb] = useState("");
   const [exportData, setExportData] = useState({
@@ -728,7 +727,6 @@ export default function ControlPanel({
       rename: {
         function: () => {
           setModal(MODAL.RENAME);
-          setPrevTitle(title);
         },
       },
       delete_diagram: {
@@ -1309,10 +1307,8 @@ export default function ControlPanel({
         setExportData={setExportData}
         title={title}
         setTitle={setTitle}
-        setPrevTitle={setPrevTitle}
         setDiagramId={setDiagramId}
         setModal={setModal}
-        prevTitle={prevTitle}
         importDb={importDb}
       />
       <Sidesheet
diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index 60a2782..c296f01 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -6,7 +6,7 @@ import {
   Modal as SemiUIModal,
 } from "@douyinfe/semi-ui";
 import { DB, MODAL, STATUS } from "../../../data/constants";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { db } from "../../../data/db";
 import {
   useAreas,
@@ -48,8 +48,6 @@ export default function Modal({
   setModal,
   title,
   setTitle,
-  prevTitle,
-  setPrevTitle,
   setDiagramId,
   exportData,
   setExportData,
@@ -65,6 +63,7 @@ export default function Modal({
   const { setTasks } = useTasks();
   const { setTransform } = useTransform();
   const { setUndoStack, setRedoStack } = useUndoRedo();
+  const [uncontrolledTitle, setUncontrolledTitle] = useState(title);
   const [importSource, setImportSource] = useState({
     src: "",
     overwrite: true,
@@ -78,6 +77,12 @@ export default function Modal({
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
 
+  useEffect(() => {
+    if (title !== uncontrolledTitle) {
+      setUncontrolledTitle(title);
+    }
+  }, [title]);
+
   const overwriteDiagram = () => {
     setTables(importData.tables);
     setRelationships(importData.relationships);
@@ -212,7 +217,7 @@ export default function Modal({
         setModal(MODAL.NONE);
         return;
       case MODAL.RENAME:
-        setPrevTitle(title);
+        setTitle(uncontrolledTitle);
         setModal(MODAL.NONE);
         return;
       case MODAL.SAVEAS:
@@ -256,7 +261,9 @@ export default function Modal({
           />
         );
       case MODAL.RENAME:
-        return <Rename title={title} setTitle={setTitle} />;
+        return (
+          <Rename title={uncontrolledTitle} setTitle={setUncontrolledTitle} />
+        );
       case MODAL.OPEN:
         return (
           <Open
@@ -339,7 +346,7 @@ export default function Modal({
         });
       }}
       onCancel={() => {
-        if (modal === MODAL.RENAME) setTitle(prevTitle);
+        if (modal === MODAL.RENAME) setUncontrolledTitle(title);
         setModal(MODAL.NONE);
       }}
       centered

From 4485bf73a797c6449f0f2253990688af99431187 Mon Sep 17 00:00:00 2001
From: Huy Bui <huy03081999@gmail.com>
Date: Sun, 21 Jul 2024 17:22:23 +0700
Subject: [PATCH 2/2] fix: change approach to use key for reconciliation

---
 src/components/EditorHeader/Modal/Modal.jsx  | 10 ++--------
 src/components/EditorHeader/Modal/Rename.jsx |  2 +-
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index c296f01..fd20b78 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -6,7 +6,7 @@ import {
   Modal as SemiUIModal,
 } from "@douyinfe/semi-ui";
 import { DB, MODAL, STATUS } from "../../../data/constants";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { db } from "../../../data/db";
 import {
   useAreas,
@@ -77,12 +77,6 @@ export default function Modal({
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
 
-  useEffect(() => {
-    if (title !== uncontrolledTitle) {
-      setUncontrolledTitle(title);
-    }
-  }, [title]);
-
   const overwriteDiagram = () => {
     setTables(importData.tables);
     setRelationships(importData.relationships);
@@ -262,7 +256,7 @@ export default function Modal({
         );
       case MODAL.RENAME:
         return (
-          <Rename title={uncontrolledTitle} setTitle={setUncontrolledTitle} />
+          <Rename key={title} title={title} setTitle={setUncontrolledTitle} />
         );
       case MODAL.OPEN:
         return (
diff --git a/src/components/EditorHeader/Modal/Rename.jsx b/src/components/EditorHeader/Modal/Rename.jsx
index d876746..522d5e6 100644
--- a/src/components/EditorHeader/Modal/Rename.jsx
+++ b/src/components/EditorHeader/Modal/Rename.jsx
@@ -7,7 +7,7 @@ export default function Rename({ title, setTitle }) {
   return (
     <Input
       placeholder={t("name")}
-      value={title}
+      defaultValue={title}
       onChange={(v) => setTitle(v)}
     />
   );