Improve new modal logic (#463)

* chore(meshconfig): change modal API * chore(meshconfig): implement stopPropagation * chore(meshconfig): implement new modal logic * chore(meshconfig): refactor to use new modal logic * chore(meshconfig): show modal over all * chore(meshconfig): refactor rest of modal api
libremesh · Oct 24, 2024 · ecf7b04 · ecf7b04
1 parent 5f97a09
commit ecf7b04
Show file tree

Hide file tree

Showing 15 changed files with 810 additions and 746 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx
@@ -53,9 +53,21 @@ export const EditOrDelete = ({
 }: {
     onEdit: (e) => void;
     onDelete: (e) => void;
-}) => (
-    <div className={"flex flex-row gap-3"}>
-        <EditIcon className={"cursor-pointer"} onClick={onEdit} />
-        <BinIcon className={"cursor-pointer"} onClick={onDelete} />
-    </div>
-);
+}) => {
+    const runCb = (e, cb) => {
+        e.stopPropagation();
+        cb();
+    };
+    return (
+        <div className={"flex flex-row gap-3"}>
+            <EditIcon
+                className={"cursor-pointer"}
+                onClick={(e) => runCb(e, onEdit)}
+            />
+            <BinIcon
+                className={"cursor-pointer"}
+                onClick={(e) => runCb(e, onDelete)}
+            />
+        </div>
+    );
+};
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -1,17 +1,19 @@
 import { Trans } from "@lingui/macro";
 
+import { useDisclosure } from "components/Modal/useDisclosure";
 import { Button } from "components/buttons/button";
 import { Collapsible } from "components/collapsible";
 import { useToast } from "components/toast/toastProvider";
 
+import { EditOrDelete } from "plugins/lime-plugin-mesh-wide-config/src/components/Components";
 import { OptionContainer } from "plugins/lime-plugin-mesh-wide-config/src/components/OptionForm";
 import {
-    useAddNewSectionModal,
-    useDeletePropModal,
-    useEditPropModal,
+    AddNewSectionFormProps,
+    AddNewSectionModal,
+    DeletePropModal,
+    EditPropModal,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
 import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
-import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 
 export const ConfigSection = ({ dropdown }: { dropdown: IMeshWideSection }) => {
     return (
@@ -28,77 +30,92 @@ export const ConfigSection = ({ dropdown }: { dropdown: IMeshWideSection }) => {
 };
 
 export const SectionEditOrDelete = ({ name }) => {
-    const { toggleModal: toggleDeleteModal, actionModal: deletePropModal } =
-        useDeletePropModal();
-    const { toggleModal: toggleEditModal, actionModal: editPropertyModal } =
-        useEditPropModal();
-
+    const {
+        open: isEditOpen,
+        onOpen: openEdit,
+        onClose: onCloseEdit,
+    } = useDisclosure();
+    const {
+        open: isDeleteModalOpen,
+        onOpen: openDeleteModal,
+        onClose: onCloseDeleteModal,
+    } = useDisclosure();
     const { showToast } = useToast();
 
+    const onEdit = async () => {
+        console.log("edit stuff");
+        onCloseEdit();
+        showToast({
+            text: (
+                <Trans>
+                    Edited {name} - {new Date().toDateString()}
+                </Trans>
+            ),
+            onAction: () => {
+                console.log("Undo action");
+            },
+        });
+    };
+
+    const onDelete = async () => {
+        console.log("delete stuff");
+        onCloseDeleteModal();
+        showToast({
+            text: (
+                <Trans>
+                    Deleted {name} - {new Date().toDateString()}
+                </Trans>
+            ),
+            onAction: () => {
+                console.log("Undo action");
+            },
+        });
+    };
+
     return (
-        <EditOrDelete
-            onEdit={(e) => {
-                e.stopPropagation();
-                editPropertyModal(name, () => {
-                    console.log("edit stuff");
-                    toggleEditModal();
-                    showToast({
-                        text: (
-                            <Trans>
-                                Edited {name} - {new Date().toDateString()}
-                            </Trans>
-                        ),
-                        onAction: () => {
-                            console.log("Undo action");
-                        },
-                    });
-                });
-            }}
-            onDelete={(e) => {
-                e.stopPropagation();
-                deletePropModal(name, () => {
-                    console.log("delete stuff");
-                    toggleDeleteModal();
-                    showToast({
-                        text: (
-                            <Trans>
-                                Deleted {name} - {new Date().toDateString()}
-                            </Trans>
-                        ),
-                        onAction: () => {
-                            console.log("Undo action");
-                        },
-                    });
-                });
-            }}
-        />
+        <>
+            <EditOrDelete onEdit={openEdit} onDelete={openDeleteModal} />
+            <EditPropModal
+                prop={name}
+                isOpen={isEditOpen}
+                onSuccess={onEdit}
+                onClose={onCloseEdit}
+            />
+            <DeletePropModal
+                prop={name}
+                isOpen={isDeleteModalOpen}
+                onDelete={onDelete}
+                onClose={onCloseDeleteModal}
+            />
+        </>
     );
 };
 
 export const AddNewSectionBtn = () => {
-    const { toggleModal: toggleNewSectionModal, actionModal: addSectionModal } =
-        useAddNewSectionModal();
-
+    const { open, onOpen, onClose } = useDisclosure();
     const { showToast } = useToast();
+
+    const onSuccess = (data: AddNewSectionFormProps) => {
+        console.log(`Added`, data);
+        onClose();
+        showToast({
+            text: (
+                <Trans>
+                    Added section {data.name} - {new Date().toDateString()}
+                </Trans>
+            ),
+        });
+    };
     return (
-        <Button
-            color={"info"}
-            onClick={() => {
-                addSectionModal((data) => {
-                    console.log(`Added`, data);
-                    toggleNewSectionModal();
-                    showToast({
-                        text: (
-                            <Trans>
-                                Added section {data.name} -{" "}
-                                {new Date().toDateString()}
-                            </Trans>
-                        ),
-                    });
-                });
-            }}
-        >
-            <Trans>Add new section</Trans>
-        </Button>
+        <>
+            <Button color={"info"} onClick={onOpen}>
+                <Trans>Add new section</Trans>
+            </Button>
+            <AddNewSectionModal
+                isOpen={open}
+                onSuccess={onSuccess}
+                onClose={onClose}
+            />
+        </>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -2,16 +2,17 @@ import { Trans } from "@lingui/macro";
 import { useState } from "preact/hooks";
 import { SubmitHandler, useForm } from "react-hook-form";
 
+import { useDisclosure } from "components/Modal/useDisclosure";
 import { Button } from "components/buttons/button";
 import Divider from "components/divider";
 import InputField from "components/inputs/InputField";
 import { useToast } from "components/toast/toastProvider";
 
+import { EditOrDelete } from "plugins/lime-plugin-mesh-wide-config/src/components/Components";
 import {
-    useDeletePropModal,
-    useEditPropModal,
+    DeletePropModal,
+    EditPropModal,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
-import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 
 const EditOptionForm = ({
     keyString,
@@ -63,16 +64,31 @@ export const OptionContainer = ({
     keyString: string;
     value: string;
 }) => {
+    const {
+        open: isDeleteModalOpen,
+        onOpen: openDeleteModal,
+        onClose: onCloseDeleteModal,
+    } = useDisclosure();
+    const { showToast } = useToast();
+
+    const onDelete = async () => {
+        console.log("delete stuff");
+        onCloseDeleteModal();
+        showToast({
+            text: (
+                <Trans>
+                    Deleted {keyString} - {new Date().toDateString()}
+                </Trans>
+            ),
+            onAction: () => {
+                console.log("Undo action");
+            },
+        });
+    };
     const [isEditing, setIsEditing] = useState(false);
 
     const toggleIsEditing = () => setIsEditing(!isEditing);
 
-    const { toggleModal: toggleDeleteModal, actionModal: deletePropModal } =
-        useDeletePropModal();
-    const { toggleModal: toggleEditModal, actionModal: editPropertyModal } =
-        useEditPropModal();
-    const { showToast } = useToast();
-
     return (
         <div class={"px-4"}>
             <div className={"flex justify-center"}>
@@ -89,23 +105,7 @@ export const OptionContainer = ({
                             <div>{keyString}</div>
                             <EditOrDelete
                                 onEdit={toggleIsEditing}
-                                onDelete={(e) => {
-                                    e.stopPropagation();
-                                    deletePropModal(keyString, () => {
-                                        console.log("delete stuff");
-                                        toggleDeleteModal();
-                                        showToast({
-                                            text: (
-                                                <Trans>
-                                                    Deleted {keyString}
-                                                </Trans>
-                                            ),
-                                            onAction: () => {
-                                                console.log("Undo action");
-                                            },
-                                        });
-                                    });
-                                }}
+                                onDelete={openDeleteModal}
                             />
                         </div>
                         <div>{value}</div>
@@ -115,18 +115,21 @@ export const OptionContainer = ({
                         keyString={keyString}
                         value={value}
                         onSubmit={(data) => {
-                            editPropertyModal(keyString, () => {
-                                console.log("edited stuff");
-                                toggleEditModal();
-                                toggleIsEditing();
-                                showToast({
-                                    text: <Trans>Edited {keyString}</Trans>,
-                                });
+                            console.log("edited stuff", data);
+                            toggleIsEditing();
+                            showToast({
+                                text: <Trans>Edited {data.key}</Trans>,
                             });
                         }}
                     />
                 )}
             </div>
+            <DeletePropModal
+                prop={keyString}
+                isOpen={isDeleteModalOpen}
+                onDelete={onDelete}
+                onClose={onCloseDeleteModal}
+            />
         </div>
     );
 };