chore(meshconfig): WIP fixing form

libremesh · Oct 29, 2024 · 65a08c9 · 65a08c9
1 parent 3ddf980
commit 65a08c9
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 59 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/FormEdit.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/FormEdit.tsx
@@ -1,6 +1,6 @@
 import { Trans, t } from "@lingui/macro";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, useForm, useFormContext } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
 import { useDisclosure } from "components/Modal/useDisclosure";
@@ -18,16 +18,13 @@ import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshCo
 export const EditableField = ({
     isList,
     name,
-    setIsEditing,
 }: {
     isList: boolean;
     name: string;
-    setIsEditing?: StateUpdater<boolean>;
 }) => {
     const { control, setValue, watch, getValues } = useFormContext();
 
     const value = watch(name);
-    const [initialState] = useState(value);
     // Hack to force re-render when the list changes
     const [uniqueKeys, setUniqueKeys] = useState(
         isList ? value.map(() => uuidv4()) : ""
@@ -67,10 +64,7 @@ export const EditableField = ({
                             },
                             required: t`This field cannot be empty`,
                         }}
-                        render={({
-                            field: { value, ...rest },
-                            fieldState: { error },
-                        }) => {
+                        render={({ field, fieldState: { error } }) => {
                             return (
                                 <div
                                     className={
@@ -80,9 +74,8 @@ export const EditableField = ({
                                     <InputField
                                         id={`${name}[${index}]`}
                                         className="w-100"
-                                        value={value}
                                         error={error?.message}
-                                        {...rest}
+                                        {...field}
                                     />
                                     <EditOrDelete
                                         onDelete={() => removeListItem(index)}
@@ -126,15 +119,23 @@ export const AddNewConfigSection = ({
 }: {
     sectionName?: string;
 }) => {
-    const { open, onOpen, onClose } = useDisclosure();
+    const { watch, setValue, reset } = useFormContext<IMeshWideConfig>();
+
+    const { open, onOpen, onClose } = useDisclosure({
+        onClose() {
+            reset();
+        },
+    });
     const { showToast } = useToast();
 
-    const { watch, setValue } = useFormContext<IMeshWideConfig>();
     const section = watch(sectionName);
 
+    const uuausu = watch();
+    console.log(uuausu);
+
     const onSuccess = (data: AddNewSectionFormProps) => {
         if (!sectionName) {
-            setValue(data.name, {});
+            setValue("wifi[holaa]", {});
         } else {
             let value: string | string[] = data.value;
             if (data.isList) {

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/FormOption.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/FormOption.tsx
@@ -83,11 +83,7 @@ export const OptionContainer = ({
                 {isEditing && (
                     <FormProvider {...fmethods}>
                         <form>
-                            <EditableField
-                                isList={isList}
-                                name={name}
-                                setIsEditing={setIsEditing}
-                            />
+                            <EditableField isList={isList} name={name} />
                             <div className={"flex flex-row gap-4"}>
                                 <Button
                                     onClick={(e) => {

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/FormSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/FormSection.tsx
@@ -6,14 +6,9 @@ import { Collapsible } from "components/collapsible";
 import { useToast } from "components/toast/toastProvider";
 
 import { EditOrDelete } from "plugins/lime-plugin-mesh-wide-config/src/components/Components";
-import {
-    AddElementButton,
-    AddNewConfigSection,
-} from "plugins/lime-plugin-mesh-wide-config/src/components/FormEdit";
+import { AddNewConfigSection } from "plugins/lime-plugin-mesh-wide-config/src/components/FormEdit";
 import { OptionContainer } from "plugins/lime-plugin-mesh-wide-config/src/components/FormOption";
 import {
-    AddNewSectionFormProps,
-    AddNewSectionModal,
     DeletePropModal,
     EditPropModal,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";

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,6 +1,6 @@
 import { Trans, t } from "@lingui/macro";
 import { Label } from "@tanstack/react-query-devtools/build/lib/Explorer";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 
 import { Modal, ModalProps } from "components/Modal/Modal";
 import InputField from "components/inputs/InputField";
@@ -71,6 +71,7 @@ export const AddNewSectionModal = ({
         formState: { errors },
         watch,
         reset,
+        control,
     } = fmethods;
 
     let title = <Trans>Add new section</Trans>;
@@ -87,39 +88,45 @@ export const AddNewSectionModal = ({
             {...rest}
             onSuccess={handleSubmit(handleSuccess)}
         >
-            <FormProvider {...fmethods}>
-                <InputField
-                    id={"name"}
-                    label={<Trans>Name</Trans>}
-                    {...register("name", {
-                        required: t`This field cannot be empty`,
-                        minLength: {
-                            value: 1,
-                            message: t`Minimum length is 1`,
-                        },
-                    })}
-                    error={errors.name?.message}
-                />
-                {sectionName && (
-                    <>
-                        <div className={switchStyle.toggles}>
-                            <input
-                                type="checkbox"
-                                id="enabled"
-                                {...register("isList")}
-                            />
-                            <label htmlFor="enabled">
-                                <Trans>Is a list</Trans>
-                            </label>
-                        </div>
-                        <Label>Value</Label>
-                        <EditableField
-                            name={isList ? "values" : "value"}
-                            isList={isList}
-                        />
-                    </>
+            <Controller
+                name={"name"}
+                control={control}
+                rules={{
+                    minLength: {
+                        value: 1,
+                        message: t`Minimum length is 1`,
+                    },
+                    required: t`This field cannot be empty`,
+                }}
+                render={({ field, fieldState: { error } }) => (
+                    <InputField
+                        id={"name"}
+                        label={<Trans>Value</Trans>}
+                        className="w-100"
+                        error={error?.message}
+                        {...field}
+                    />
                 )}
-            </FormProvider>
+            />
+            {sectionName && (
+                <>
+                    <div className={switchStyle.toggles}>
+                        <input
+                            type="checkbox"
+                            id="enabled"
+                            {...register("isList")}
+                        />
+                        <label htmlFor="enabled">
+                            <Trans>Is a list</Trans>
+                        </label>
+                    </div>
+                    <Label>Value</Label>
+                    <EditableField
+                        name={isList ? "values" : "value"}
+                        isList={isList}
+                    />
+                </>
+            )}
         </Modal>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx
@@ -40,6 +40,8 @@ const EditConfigForm = ({
 
     const formData = fMethods.watch();
 
+    console.log("formData", formData);
+
     const onSubmit = (data) => {
         console.log("Form Data:", data);
     };

diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx
@@ -6,7 +6,6 @@ const InputField = <TFieldValues extends FieldValues>({
     id,
     label,
     error,
-    value,
     ...inputProps
 }: {
     id: Path<TFieldValues>;
@@ -25,7 +24,6 @@ const InputField = <TFieldValues extends FieldValues>({
                 id={id}
                 data-testid="password-input"
                 className="w-100"
-                value={value}
                 {...inputProps}
             />
             {error && <p class="text-red-500 text-md mt-1">{error}</p>}