From 8033f6b0f1de931d8b5632325cb305a14f3d9e5f Mon Sep 17 00:00:00 2001
From: keyurparalkar <keur.plkar@gmail.com>
Date: Mon, 15 Apr 2024 18:22:26 +0530
Subject: [PATCH] feat: form updates on schema change in the code editor

---
 src/App.tsx                          | 12 ++++++------
 src/components/fields/InputField.tsx |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 58a1bec..0c81662 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,10 +19,10 @@ const FormValues = schema.fields.reduce((acc, currValue) => {
 export type TFormValues = typeof FormValues;
 
 function App() {
-	const [value, setValue] = useState(`${JSON.stringify(schema, null, 2)}`);
-	const onChange = useCallback((val, viewUpdate) => {
-		console.log("val:", val);
-		setValue(val);
+	const [value, setValue] = useState(schema);
+	const onChange = useCallback((val) => {
+		const tempSchema = SchemaDef.parse(JSON.parse(val));
+		setValue(tempSchema);
 	}, []);
 
 	const {
@@ -43,7 +43,7 @@ function App() {
 				<div id="editor">
 					<CodeMirror
 						className="border border-slate-300"
-						value={value}
+						value={`${JSON.stringify(value, null, 2)}`}
 						height="500px"
 						extensions={[json()]}
 						onChange={onChange}
@@ -52,7 +52,7 @@ function App() {
 				<div id="form-container" className="border border-slate-300">
 					<form className="my-5 mx-10" onSubmit={handleSubmit(onSubmit)}>
 						<SchemaRenderer
-							schema={schema}
+							schema={value}
 							errors={errors}
 							register={register}
 						/>
diff --git a/src/components/fields/InputField.tsx b/src/components/fields/InputField.tsx
index 022b6ea..e350ee6 100644
--- a/src/components/fields/InputField.tsx
+++ b/src/components/fields/InputField.tsx
@@ -17,7 +17,7 @@ const InputField = (props: InputFieldProps) => {
 	console.log({ htmlFor, validation });
 	return (
 		<>
-			<div className="flex flex-col space-y-2">
+			<div className="flex flex-col space-y-2 my-2">
 				<Label htmlFor={htmlFor}>{labelText}</Label>
 				<Input
 					id="htmlFor"