Refactoring

app/src/client/app/ModelsPage.tsx

@@ -44,6 +44,10 @@ const ModelsPage = () => {
       );
       if (foundSchema) {
         dispatch({ type: ModelsActionType.UPDATE_EXISTING_MODEL, payload: selectedModel });
+        dispatch({
+          type: ModelsActionType.SELECT_MODEL,
+          payload: { json_schema: foundSchema.json_schema, name: foundSchema.name },
+        });
       }
     }
   };

app/src/client/components/DynamicFormBuilder.tsx

@@ -24,7 +24,10 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
   onSuccessCallback,
   onCancelCallback,
 }) => {
-  const { formData, handleChange, formErrors, setFormErrors } = useForm(jsonSchema);
+  const { formData, handleChange, formErrors, setFormErrors } = useForm({
+    jsonSchema,
+    defaultValues: updateExistingModel,
+  });
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSubmit = async (event: React.FormEvent) => {
@@ -44,11 +47,7 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
     <>
       <form onSubmit={handleSubmit} className='grid grid-cols-1 md:grid-cols-2 gap-9 p-6.5'>
         {Object.entries(jsonSchema.properties).map(([key, property]) => {
-          const inputValue =
-            updateExistingModel && updateExistingModel.hasOwnProperty(key)
-              ? // @ts-ignore
-                updateExistingModel[key] || ''
-              : formData[key] || '';
+          const inputValue = formData[key] || '';
 
           return property?.enum?.length === 1 ? null : (
             <div key={key} className='w-full'>

app/src/client/hooks/useForm.ts

@@ -1,23 +1,31 @@
 import { useState, useEffect } from 'react';
-import { JsonSchema } from '../interfaces/ModelInterfaces';
+import { JsonSchema, Model } from '../interfaces/ModelInterfaces';
 
-export const useForm = (jsonSchema: JsonSchema) => {
+interface UseFormProps {
+  jsonSchema: JsonSchema;
+  defaultValues?: Model | null;
+}
+interface FormData {
+  [key: string]: any;
+}
+
+function getValueFromModel(model: Model, key: keyof Model): string | undefined {
+  return model[key];
+}
+
+export const useForm = ({ jsonSchema, defaultValues }: UseFormProps) => {
   const [formData, setFormData] = useState<{ [key: string]: any }>({});
   const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
-    const initialValues: { [key: string]: any } = {};
+    const initialFormData: FormData = {};
     Object.keys(jsonSchema.properties).forEach((key) => {
-      const property = jsonSchema.properties[key];
-      if (property.enum && property.enum.length === 1) {
-        initialValues[key] = property.enum[0];
-      } else {
-        initialValues[key] = property.default ?? '';
-      }
+      initialFormData[key] =
+        defaultValues && defaultValues.hasOwnProperty(key) ? getValueFromModel(defaultValues, key as keyof Model) : '';
     });
-    setFormData(initialValues);
+    setFormData(initialFormData);
     setFormErrors({}); // Reset errors on schema change
-  }, [jsonSchema]);
+  }, [jsonSchema, defaultValues]);
 
   const handleChange = (key: string, value: any) => {
     setFormData((prev) => ({ ...prev, [key]: value }));