chore(meshconfig): WIP fixing form

libremesh · Oct 30, 2024 · d807ba8 · d807ba8
1 parent 3ddf980
commit d807ba8
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 70 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,5 +1,5 @@
 import { Trans, t } from "@lingui/macro";
-import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
@@ -18,37 +18,46 @@ 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()) : ""
+        isList && value?.length ? value.map(() => uuidv4()) : []
     );
 
+    const syncKeysWithValues = () => {
+        // Ensure uniqueKeys matches the length of value array
+        setUniqueKeys((keys) => [
+            ...keys,
+            ...Array(value.length - keys.length)
+                .fill(null)
+                .map(() => uuidv4()),
+        ]);
+    };
+
     const removeListItem = (index) => {
         const updatedValues = value.filter((_, i) => i !== index);
-        setValue(name, updatedValues); // Update form values
-        setUniqueKeys((keys) => keys.filter((_, i) => i !== index)); // Update keys to match the new array
+        setValue(name, updatedValues);
+        setUniqueKeys((keys) => keys.filter((_, i) => i !== index));
     };
 
     const addListItem = () => {
-        setValue(name, [...value, ""]); // Update form values
-        setUniqueKeys((keys) => [...keys, uuidv4()]); // Add a new unique key
+        setValue(name, [...value, ""]);
+        setUniqueKeys((keys) => [...keys, uuidv4()]);
     };
 
     // Ensure the list has at least one item at the start
     useEffect(() => {
         if (isList && value.length === 0) {
             setValue(name, [""]);
             setUniqueKeys([uuidv4()]); // Reset keys for new list
+        } else {
+            syncKeysWithValues(); // Sync keys with values length on every render
         }
     }, [isList, value, name, setValue]);
 
@@ -67,10 +76,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 +86,8 @@ export const EditableField = ({
                                     <InputField
                                         id={`${name}[${index}]`}
                                         className="w-100"
-                                        value={value}
                                         error={error?.message}
-                                        {...rest}
+                                        {...field}
                                     />
                                     <EditOrDelete
                                         onDelete={() => removeListItem(index)}
@@ -126,10 +131,11 @@ export const AddNewConfigSection = ({
 }: {
     sectionName?: string;
 }) => {
+    const { watch, setValue } = useFormContext<IMeshWideConfig>();
+
     const { open, onOpen, onClose } = useDisclosure();
     const { showToast } = useToast();
 
-    const { watch, setValue } = useFormContext<IMeshWideConfig>();
     const section = watch(sectionName);
 
     const onSuccess = (data: AddNewSectionFormProps) => {

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";
@@ -57,7 +57,7 @@ export const AddNewSectionModal = ({
     sectionName?: string;
 } & Pick<ModalProps, "isOpen" | "onClose">) => {
     const fmethods = useForm<AddNewSectionFormProps>({
-        defaultValues: { name: "", value: "", values: [""], isList: false },
+        defaultValues: { name: "", value: "", values: [], isList: false },
     });
 
     const handleSuccess = (data: AddNewSectionFormProps) => {
@@ -71,6 +71,7 @@ export const AddNewSectionModal = ({
         formState: { errors },
         watch,
         reset,
+        control,
     } = fmethods;
 
     let title = <Trans>Add new section</Trans>;
@@ -81,45 +82,55 @@ export const AddNewSectionModal = ({
     const isList = watch("isList");
 
     return (
-        <Modal
-            title={title}
-            successBtnText={<Trans>Add</Trans>}
-            {...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")}
+        <FormProvider {...fmethods}>
+            <form>
+                <Modal
+                    title={title}
+                    successBtnText={<Trans>Add</Trans>}
+                    {...rest}
+                    onSuccess={handleSubmit(handleSuccess)}
+                >
+                    <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}
                             />
-                            <label htmlFor="enabled">
-                                <Trans>Is a list</Trans>
-                            </label>
-                        </div>
-                        <Label>Value</Label>
-                        <EditableField
-                            name={isList ? "values" : "value"}
-                            isList={isList}
-                        />
-                    </>
-                )}
-            </FormProvider>
-        </Modal>
+                        )}
+                    />
+                    {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>
+            </form>
+        </FormProvider>
     );
 };
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>}