From a0c43a4ac0299faf599da43a7c985a936a46e4e5 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Mon, 27 Mar 2023 23:00:40 +0800
Subject: [PATCH] chat history enter to save edits

---
 src/components/Menu/ChatFolder.tsx  | 62 ++++++++++++++++++-----------
 src/components/Menu/ChatHistory.tsx | 45 ++++++++++++++-------
 2 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index e0e42ce..43bb16e 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -30,42 +30,55 @@ const ChatFolder = ({
   const [_folderName, _setFolderName] = useState<string>(folderName);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
-  // const [isExpanded, setIsExpanded] = useState<boolean>(
-  //   useStore.getState().foldersExpanded[folderIndex]
-  // );
   const [isHover, setIsHover] = useState<boolean>(false);
 
-  const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const editTitle = () => {
     const updatedChats: ChatInterface[] = JSON.parse(
       JSON.stringify(useStore.getState().chats)
     );
 
-    if (isEdit) {
-      updatedChats.forEach((chat) => {
-        if (chat.folder === folderName) chat.folder = _folderName;
-      });
-      setChats(updatedChats);
+    updatedChats.forEach((chat) => {
+      if (chat.folder === folderName) chat.folder = _folderName;
+    });
+    setChats(updatedChats);
 
-      const updatedFolderNames = [...useStore.getState().foldersName];
-      const pos = updatedFolderNames.indexOf(folderName);
-      if (pos !== -1) updatedFolderNames[pos] = _folderName;
-      setFoldersName(updatedFolderNames);
+    const updatedFolderNames = [...useStore.getState().foldersName];
+    const pos = updatedFolderNames.indexOf(folderName);
+    if (pos !== -1) updatedFolderNames[pos] = _folderName;
+    setFoldersName(updatedFolderNames);
 
-      setIsEdit(false);
-    } else if (isDelete) {
-      updatedChats.forEach((chat) => {
-        if (chat.folder === folderName) delete chat.folder;
-      });
-      setChats(updatedChats);
+    setIsEdit(false);
+  };
 
-      setFoldersName(
-        useStore.getState().foldersName.filter((name) => name !== folderName)
-      );
-      setIsDelete(false);
+  const deleteFolder = () => {
+    const updatedChats: ChatInterface[] = JSON.parse(
+      JSON.stringify(useStore.getState().chats)
+    );
+    updatedChats.forEach((chat) => {
+      if (chat.folder === folderName) delete chat.folder;
+    });
+    setChats(updatedChats);
+
+    setFoldersName(
+      useStore.getState().foldersName.filter((name) => name !== folderName)
+    );
+    setIsDelete(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      editTitle();
     }
   };
 
+  const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+
+    if (isEdit) editTitle();
+    else if (isDelete) deleteFolder();
+  };
+
   const handleCross = () => {
     setIsDelete(false);
     setIsEdit(false);
@@ -127,6 +140,7 @@ const ChatFolder = ({
                 _setFolderName(e.target.value);
               }}
               onClick={(e) => e.stopPropagation()}
+              onKeyDown={handleKeyDown}
               ref={inputRef}
             />
           ) : (
diff --git a/src/components/Menu/ChatHistory.tsx b/src/components/Menu/ChatHistory.tsx
index 42e73a2..5d585ab 100644
--- a/src/components/Menu/ChatHistory.tsx
+++ b/src/components/Menu/ChatHistory.tsx
@@ -33,25 +33,41 @@ const ChatHistory = React.memo(
     const [_title, _setTitle] = useState<string>(title);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
+    const editTitle = () => {
       const updatedChats = JSON.parse(
         JSON.stringify(useStore.getState().chats)
       );
-      if (isEdit) {
-        updatedChats[chatIndex].title = _title;
+      updatedChats[chatIndex].title = _title;
+      setChats(updatedChats);
+      setIsEdit(false);
+    };
+
+    const deleteChat = () => {
+      const updatedChats = JSON.parse(
+        JSON.stringify(useStore.getState().chats)
+      );
+      updatedChats.splice(chatIndex, 1);
+      if (updatedChats.length > 0) {
+        setCurrentChatIndex(0);
         setChats(updatedChats);
-        setIsEdit(false);
-      } else if (isDelete) {
-        updatedChats.splice(chatIndex, 1);
-        if (updatedChats.length > 0) {
-          setCurrentChatIndex(0);
-          setChats(updatedChats);
-        } else {
-          initialiseNewChat();
-        }
-        setIsDelete(false);
+      } else {
+        initialiseNewChat();
       }
+      setIsDelete(false);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        editTitle();
+      }
+    };
+
+    const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+
+      if (isEdit) editTitle();
+      else if (isDelete) deleteChat();
     };
 
     const handleCross = () => {
@@ -94,6 +110,7 @@ const ChatHistory = React.memo(
               onChange={(e) => {
                 _setTitle(e.target.value);
               }}
+              onKeyDown={handleKeyDown}
               ref={inputRef}
             />
           ) : (