conversation tile: add menu, add share modal

frontend/src/conversation/ConversationTile.tsx

@@ -5,11 +5,14 @@ import Exit from '../assets/exit.svg';
 import Message from '../assets/message.svg';
 import MessageDark from '../assets/message-dark.svg';
 import { useDarkTheme } from '../hooks';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import CheckMark2 from '../assets/checkMark2.svg';
-import Trash from '../assets/trash.svg';
-
+import Trash from '../assets/red-trash.svg';
+import Share from '../assets/share.svg';
+import threeDots from '../assets/three-dots.svg';
 import { selectConversationId } from '../preferences/preferenceSlice';
-
+import { ActiveState } from '../models/misc';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
 interface ConversationProps {
   name: string;
   id: string;
@@ -32,13 +35,18 @@ export default function ConversationTile({
   const [isDarkTheme] = useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
-
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  const [deleteModalState, setDeleteModalState] =
+    useState<ActiveState>('INACTIVE');
+  const menuRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     setConversationsName(conversation.name);
   }, [conversation.name]);
 
   function handleEditConversation() {
     setIsEdit(true);
+    setOpen(false);
   }
 
   function handleSaveConversation(changedConversation: ConversationProps) {
@@ -50,6 +58,18 @@ export default function ConversationTile({
     }
   }
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   function onClear() {
     setConversationsName(conversation.name);
     setIsEdit(false);
@@ -79,7 +99,7 @@ export default function ConversationTile({
           <input
             autoFocus
             type="text"
-            className="h-6 w-full px-1 text-sm font-normal leading-6 outline-[#0075FF] focus:outline-1"
+            className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
             value={conversationName}
             onChange={(e) => setConversationsName(e.target.value)}
           />
@@ -90,36 +110,108 @@ export default function ConversationTile({
         )}
       </div>
       {conversationId === conversation.id && (
-        <div className="flex text-white dark:text-[#949494]">
-          <img
-            src={isEdit ? CheckMark2 : Edit}
-            alt="Edit"
-            className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
-            id={`img-${conversation.id}`}
-            onClick={(event) => {
-              event.stopPropagation();
-              isEdit
-                ? handleSaveConversation({
+        <div className="flex text-white dark:text-[#949494]" ref={menuRef}>
+          {isEdit ? (
+            <div className="flex gap-1">
+              <img
+                src={CheckMark2}
+                alt="Edit"
+                className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
+                id={`img-${conversation.id}`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleSaveConversation({
                     id: conversationId,
                     name: conversationName,
-                  })
-                : handleEditConversation();
-            }}
-          />
-          <img
-            src={isEdit ? Exit : Trash}
-            alt="Exit"
-            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();
-              isEdit ? onClear() : onDeleteConversation(conversation.id);
-            }}
-          />
+                  });
+                }}
+              />
+              <img
+                src={isEdit ? Exit : Trash}
+                alt="Exit"
+                className={`mr-4 mt-px h-3 w-3 cursor-pointer hover:opacity-50`}
+                id={`img-${conversation.id}`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onClear();
+                }}
+              />
+            </div>
+          ) : (
+            <button onClick={() => setOpen(!isOpen)}>
+              <img src={threeDots} className="mr-4 w-2" />
+            </button>
+          )}
+          {isOpen && (
+            <div className="flex-start absolute flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
+              <button
+                onClick={() => {
+                  setShareModalState(true);
+                  setOpen(false);
+                }}
+                className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+              >
+                <img
+                  src={Share}
+                  alt="Share"
+                  width={14}
+                  height={14}
+                  className="cursor-pointer hover:opacity-50"
+                  id={`img-${conversation.id}`}
+                />
+                <span>Share</span>
+              </button>
+              <button
+                onClick={(event) => {
+                  handleEditConversation();
+                }}
+                className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+              >
+                <img
+                  src={Edit}
+                  alt="Edit"
+                  width={16}
+                  height={16}
+                  className="cursor-pointer hover:opacity-50"
+                  id={`img-${conversation.id}`}
+                />
+                <span>Rename</span>
+              </button>
+              <button
+                onClick={(event) => {
+                  setDeleteModalState('ACTIVE');
+                  setOpen(false);
+                }}
+                className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+              >
+                <img
+                  src={Trash}
+                  alt="Edit"
+                  width={24}
+                  height={24}
+                  className="cursor-pointer hover:opacity-50"
+                />
+                <span>Delete</span>
+              </button>
+            </div>
+          )}
         </div>
       )}
+      <ConfirmationModal
+        message={`Are you sure you want to delete this conversation?`}
+        modalState={deleteModalState}
+        setModalState={setDeleteModalState}
+        handleSubmit={() => onDeleteConversation(conversation.id)}
+        submitLabel="Delete"
+      />
+      {isShareModalOpen && conversationId && (
+        <ShareConversationModal
+          close={() => {
+            setShareModalState(false);
+          }}
+          conversationId={conversationId}
+        />
+      )}
     </div>
   );
 }