add the outside click listioner

frontend/src/conversation/ConversationTile.tsx

@@ -1,11 +1,13 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
 import Message from '../assets/message.svg';
 import CheckMark from '../assets/checkMark.svg';
+import Trash from '../assets/trash.svg';
 
 import { selectConversationId } from '../preferences/preferenceSlice';
+import { useOutsideAlerter } from '../hooks';
 
 interface ConversationTileProps {
   conversation: { name: string; id: string };
@@ -21,29 +23,47 @@ export default function ConversationTile({
   onSave,
 }: ConversationTileProps) {
   const conversationId = useSelector(selectConversationId);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const tileRef = useRef<HTMLInputElement>(null);
 
   const [isEdit, setIsEdit] = useState(false);
-  const [conversationName, setConversationsName] = useState(conversation.name);
+  const [conversationName, setConversationsName] = useState('');
+  useOutsideAlerter(
+    tileRef,
+    () =>
+      handleSaveConversation({
+        id: conversationId || conversation.id,
+        name: conversationName,
+      }),
+    [conversationName],
+  );
+
+  useEffect(() => {
+    setConversationsName(conversation.name);
+  }, [conversation.name]);
 
   function handleEditConversation() {
     setIsEdit(true);
-    // inputRef?.current?.focus();
   }
-  function handleSaveConversation(changedConversation: any) {
-    onSave(changedConversation);
-    setIsEdit(false);
-  }
-  function handleBlur() {
-    if (conversation.name !== conversationName) {
-      handleSaveConversation({
-        id: conversationId,
-        name: conversationName,
-      });
+
+  function handleSaveConversation(changedConversation: {
+    name: string;
+    id: string;
+  }) {
+    if (changedConversation.name.trim().length) {
+      onSave(changedConversation);
+      setIsEdit(false);
+    } else {
+      onClear();
     }
   }
+
+  function onClear() {
+    setConversationsName(conversation.name);
+    setIsEdit(false);
+  }
   return (
     <div
+      ref={tileRef}
       onClick={() => {
         selectConversation(conversation.id);
       }}
@@ -51,32 +71,28 @@ export default function ConversationTile({
         conversationId === conversation.id ? 'bg-gray-100' : ''
       }`}
     >
-      <div className="flex gap-4">
+      <div className="flex w-[75%] gap-4">
         <img src={Message} className="ml-2 w-5"></img>
         {isEdit ? (
           <input
-            ref={inputRef}
             autoFocus
             type="text"
-            className="h-6 w-full px-1 outline-blue-400 focus:outline-1"
+            className="h-6 w-full px-1 text-sm font-normal leading-6 outline-blue-400 focus:outline-1"
             value={conversationName}
-            onBlur={handleBlur}
             onChange={(e) => setConversationsName(e.target.value)}
           />
         ) : (
-          <p className="my-auto text-eerie-black">
-            {conversationName.length > 45
-              ? conversationName.substring(0, 45) + '...'
-              : conversationName}
+          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black">
+            {conversationName}
           </p>
         )}
       </div>
       {conversationId === conversation.id ? (
-        <>
+        <div className="flex">
           <img
             src={isEdit ? CheckMark : Edit}
             alt="Edit"
-            className="mr-px h-4 w-4 cursor-pointer hover:opacity-50"
+            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
             id={`img-${conversation.id}`}
             onClick={(event) => {
               event.stopPropagation();
@@ -89,16 +105,18 @@ export default function ConversationTile({
             }}
           />
           <img
-            src={Exit}
+            src={isEdit ? Exit : Trash}
             alt="Exit"
-            className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
+            className={`mr-4 ${
+              isEdit ? 'h-3 w-3' : 'h-4 w-4'
+            }mt-px  cursor-pointer hover:opacity-50`}
             id={`img-${conversation.id}`}
             onClick={(event) => {
               event.stopPropagation();
-              onDeleteConversation(conversation.id);
+              isEdit ? onClear() : onDeleteConversation(conversation.id);
             }}
           />
-        </>
+        </div>
       ) : null}
     </div>
   );