modal states

packages/fakeyou.com/src/components/common/Modal/Modal.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import Button from "../Button";
-import { faTrash, faTrashAlt } from "@fortawesome/pro-solid-svg-icons";
+import { faTrashAlt } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useSpring, a } from "@react-spring/web";
 
 interface ModalProps {
   show: boolean;
@@ -13,6 +14,14 @@ interface ModalProps {
 const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
   const modalRef = useRef<HTMLDivElement>(null);
 
+  const fadeIn = useSpring({
+    opacity: show ? 1 : 0,
+    config: { duration: 80, easing: (t) => t },
+    onRest: () => {
+      if (!show) handleClose();
+    },
+  });
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -23,11 +32,9 @@ const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
       }
     };
 
-    // Attach the event listener to the document
     document.addEventListener("mousedown", handleClickOutside);
 
     return () => {
-      // Clean up the event listener
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [handleClose]);
@@ -37,7 +44,7 @@ const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
   }
 
   return (
-    <div className="modal-backdrop">
+    <a.div style={fadeIn} className="modal-backdrop">
       <div
         ref={modalRef}
         className="modal"
@@ -70,7 +77,7 @@ const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
           </div>
         </div>
       </div>
-    </div>
+    </a.div>
   );
 };
 

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx

@@ -11,14 +11,24 @@ import Modal from "components/common/Modal";
 function VoiceDesignerMainPage() {
   usePrefixedDocumentTitle("Voice Designer");
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false);
+  const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] =
+    useState(false);
 
-  const openModal = () => {
-    setIsModalOpen(true);
+  const openDeleteVoiceModal = () => {
+    setIsDeleteVoiceModalOpen(true);
   };
 
-  const closeModal = () => {
-    setIsModalOpen(false);
+  const closeDeleteVoiceModal = () => {
+    setIsDeleteVoiceModalOpen(false);
+  };
+
+  const openDeleteDatasetModal = () => {
+    setIsDeleteDatasetModalOpen(true);
+  };
+
+  const closeDeleteDatasetModal = () => {
+    setIsDeleteDatasetModalOpen(false);
   };
 
   const voicesList = [
@@ -38,11 +48,15 @@ function VoiceDesignerMainPage() {
       modelToken: "dummyToken",
     },
   ];
-  const emptyList = [] as any[];
+  // const emptyList = [] as any[];
 
   function MyVoices() {
     return (
-      <ListItems type="voice" data={voicesList} handleDeleteVoice={openModal} />
+      <ListItems
+        type="voice"
+        data={voicesList}
+        handleDeleteVoice={openDeleteVoiceModal}
+      />
     );
   }
 
@@ -51,7 +65,7 @@ function VoiceDesignerMainPage() {
       <ListItems
         type="dataset"
         data={datasetList}
-        handleDeleteDataset={openModal}
+        handleDeleteDataset={openDeleteDatasetModal}
       />
     );
   }
@@ -112,9 +126,10 @@ function VoiceDesignerMainPage() {
         </Panel>
       </Container>
 
+      {/* Delete Voice Modal */}
       <Modal
-        show={isModalOpen}
-        handleClose={closeModal}
+        show={isDeleteVoiceModalOpen}
+        handleClose={closeDeleteVoiceModal}
         title="Delete Voice"
         content={
           <p>
@@ -124,6 +139,19 @@ function VoiceDesignerMainPage() {
           </p>
         }
       />
+      {/* Delete Dataset Modal */}
+      <Modal
+        show={isDeleteDatasetModalOpen}
+        handleClose={closeDeleteDatasetModal}
+        title="Delete Dataset"
+        content={
+          <p>
+            Are you sure you want to delete "[Dataset Name]"?
+            <br />
+            This cannot be undone.
+          </p>
+        }
+      />
     </>
   );
 }