chore(mesh-upgrade): WIP implementing add new section modal

libremesh · Oct 16, 2024 · 783a3b9 · 783a3b9
1 parent d08f262
commit 783a3b9
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 88 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -91,28 +91,30 @@ export const SectionEditOrDelete = ({ name }) => {
 };
 
 export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
-    const { toggleModal: toggleNewSectionModal, actionModal: addSectionModal } =
-        useAddNewSectionModal();
     const { watch, setValue } = useFormContext<IMeshWideConfig>();
     const section = watch(sectionName);
-
     const { showToast } = useToast();
 
+    const sectionAdded = (data) => {
+        if (!sectionName) {
+            setValue(data.name, {});
+        } else {
+            const kaka = { ...section, [data.name]: "" };
+            setValue(sectionName, kaka);
+        }
+        toggleNewSectionModal();
+        showToast({
+            text: <Trans>Added section {data.name}</Trans>,
+        });
+    };
+
+    const { toggleModal: toggleNewSectionModal, actionModal: addSectionModal } =
+        useAddNewSectionModal(sectionAdded, sectionName);
+
     return (
         <AddElementButton
             onClick={() => {
-                addSectionModal((data) => {
-                    if (!sectionName) {
-                        setValue(data.name, {});
-                    } else {
-                        const kaka = { ...section, [data.name]: "" };
-                        setValue(sectionName, kaka);
-                    }
-                    toggleNewSectionModal();
-                    showToast({
-                        text: <Trans>Added section {data.name}</Trans>,
-                    });
-                }, sectionName);
+                addSectionModal();
             }}
         />
     );

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -90,21 +90,21 @@ export const OptionContainer = ({
     );
 };
 
-const EditableField = ({
+export const EditableField = ({
     isList,
     name,
     keyString,
     setIsEditing,
 }: {
     isList: boolean;
     name: string;
-    setIsEditing: StateUpdater<boolean>;
-} & Omit<OptionContainerProps, "sectionName">) => {
+    keyString?: string;
+    setIsEditing?: StateUpdater<boolean>;
+}) => {
     const { control, setValue, watch, getValues } = useFormContext();
-    const { showToast } = useToast();
+    // const { showToast } = useToast();
     const value = watch(name);
     const [initialState] = useState(value);
-    // const currentValues = getValues(listName);
 
     const removeListItem = (index) => {
         const updatedValues = value.filter((_, i) => i !== index);
@@ -162,32 +162,34 @@ const EditableField = ({
                     />
                 </>
             )}
-            <div className={"flex flex-row gap-4"}>
-                <Button
-                    onClick={() => {
-                        setIsEditing(false);
-                        showToast({
-                            text: <Trans>Edited {keyString}</Trans>,
-                            onAction: () => {
-                                setValue(name, initialState);
-                            },
-                        });
-                    }}
-                    outline={true}
-                >
-                    <Trans>Done</Trans>
-                </Button>
-                <Button
-                    color={"danger"}
-                    onClick={() => {
-                        setValue(name, initialState);
-                        setIsEditing(false);
-                    }}
-                    outline={true}
-                >
-                    <Trans>Cancel</Trans>
-                </Button>
-            </div>
+            {setIsEditing && (
+                <div className={"flex flex-row gap-4"}>
+                    <Button
+                        onClick={() => {
+                            setIsEditing(false);
+                            // showToast({
+                            //     text: <Trans>Edited {keyString}</Trans>,
+                            //     onAction: () => {
+                            //         setValue(name, initialState);
+                            //     },
+                            // });
+                        }}
+                        outline={true}
+                    >
+                        <Trans>Done</Trans>
+                    </Button>
+                    <Button
+                        color={"danger"}
+                        onClick={() => {
+                            setValue(name, initialState);
+                            setIsEditing(false);
+                        }}
+                        outline={true}
+                    >
+                        <Trans>Cancel</Trans>
+                    </Button>
+                </div>
+            )}
         </>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
@@ -1,11 +1,15 @@
 import { Trans } from "@lingui/macro";
+import { Label } from "@tanstack/react-query-devtools/build/lib/Explorer";
 import { ComponentChildren } from "preact";
 import { useCallback } from "preact/compat";
-import { useForm } from "react-hook-form";
+import { useEffect } from "preact/hooks";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { ModalActions, useModal } from "components/Modal/Modal";
 import InputField from "components/inputs/InputField";
+import switchStyle from "components/switch";
 
+import { EditableField } from "plugins/lime-plugin-mesh-wide-config/src/components/OptionForm";
 import { dataTypeNameMapping } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { MeshWideMapDataTypeKeys } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
@@ -52,40 +56,67 @@ export const useEditPropModal = () =>
         "success"
     );
 
-export const useAddNewSectionModal = () => {
-    const { toggleModal, setModalState } = useModal();
+export const useAddNewSectionModal = (
+    actionCb: (data) => void,
+    sectionName?: string
+) => {
+    const { toggleModal, setModalState, isModalOpen, openModalKey } =
+        useModal();
+    const modalKey = `addnewSectionModal${sectionName}`;
+
+    const fmethods = useForm({
+        defaultValues: { name: "", value: [""] },
+    });
 
     const {
         register,
         handleSubmit,
+        setValue,
         formState: { errors },
-    } = useForm({
-        defaultValues: { name: "" },
-    });
+        watch,
+    } = fmethods;
+
+    const value = watch("value");
+    console.log("values! ", value);
+
+    const updateState = useCallback(() => {
+        let title = <Trans>Add new section</Trans>;
+        if (sectionName) {
+            title = <Trans>Add new section for {sectionName}</Trans>;
+        }
+        setModalState({
+            content: (
+                <FormProvider {...fmethods}>
+                    <InputField
+                        id={"name"}
+                        label={<Trans>Name</Trans>}
+                        register={register}
+                    />
+                    {sectionName && (
+                        <>
+                            <Label>Value</Label>
+                            <EditableField name={"value"} isList={true} />
+                        </>
+                    )}
+                </FormProvider>
+            ),
+            title,
+            successCb: handleSubmit(actionCb),
+            successBtnText: <Trans>Add</Trans>,
+        });
+    }, [handleSubmit, register, setModalState, toggleModal]);
+
+    const actionModal = useCallback(() => {
+        updateState();
+        toggleModal(modalKey);
+    }, [toggleModal, updateState]);
+
+    // Update modal state with mutation result
+    useEffect(() => {
+        if (isModalOpen && openModalKey === modalKey) {
+            updateState();
+        }
+    }, [value, isModalOpen, actionModal, openModalKey]);
 
-    const actionModal = useCallback(
-        (actionCb: (data) => void, sectionName?: string) => {
-            let title = <Trans>Add new section</Trans>;
-            if (sectionName) {
-                title = <Trans>Add new section for {sectionName}</Trans>;
-            }
-            setModalState({
-                content: (
-                    <div>
-                        <InputField
-                            id={"name"}
-                            label={<Trans>Name</Trans>}
-                            register={register}
-                        />
-                    </div>
-                ),
-                title,
-                successCb: handleSubmit(actionCb),
-                successBtnText: <Trans>Add</Trans>,
-            });
-            toggleModal();
-        },
-        [handleSubmit, register, setModalState, toggleModal]
-    );
     return { actionModal, toggleModal };
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
@@ -1,6 +1,7 @@
 import { useState } from "preact/hooks";
 import React from "react";
 
+import { Button } from "components/buttons/button";
 import WizardWrapper from "components/mesh-wide-wizard/WizardWrapper";
 
 import EditConfiguration from "plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration";
@@ -14,18 +15,18 @@ const MeshConfigPage = () => {
         return <EditConfiguration onClose={() => setShowEditConfig(false)} />;
     }
 
-    // return <Button onClick={() => setShowEditConfig(true)}>Show modal</Button>;
-    return (
-        <WizardWrapper
-            // error={error}
-            // isError={isError}
-            isLoading={false}
-            // banner={BannerNotification}
-            statusPage={StatusPage}
-            nodesList={NodesListPage}
-            // footer={NextStepFooter}
-        />
-    );
+    return <Button onClick={() => setShowEditConfig(true)}>Show modal</Button>;
+    // return (
+    //     <WizardWrapper
+    //         // error={error}
+    //         // isError={isError}
+    //         isLoading={false}
+    //         // banner={BannerNotification}
+    //         statusPage={StatusPage}
+    //         nodesList={NodesListPage}
+    //         // footer={NextStepFooter}
+    //     />
+    // );
 };
 
 export default MeshConfigPage;