From 872b5140a5dd9c0dd3b1282d310f8876879bd001 Mon Sep 17 00:00:00 2001
From: keyurparalkar <keur.plkar@gmail.com>
Date: Sat, 13 Apr 2024 16:22:09 +0530
Subject: [PATCH] types: added form values for schema

---
 src/App.tsx              | 42 ++++++++++++++++++++++++++++------------
 src/interfaces/field.ts  | 19 +++++++-----------
 src/interfaces/group.ts  | 12 +++++++++---
 src/interfaces/schema.ts | 18 +----------------
 4 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7f2c78f..403bf20 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,27 @@
 import { useForm } from "react-hook-form";
 import InputField from "./components/fields/InputField";
 import personalInfoSchema from "./schemas/forms/personal_info.json";
+import { SchemaDef } from "./interfaces/schema";
+
+const schema = SchemaDef.parse(personalInfoSchema);
+
+// type FormValues<T extends typeof schema> = {
+// 	[P in keyof T]: T[P];
+// };
+const FormValues = schema.fields.reduce((acc, currValue) => {
+	if (currValue.type === "field") {
+		acc[currValue.accessorKey] = "";
+	}
+	return acc;
+}, {} as Record<string, string>);
+
+type TFormValues = typeof FormValues;
 
 function App() {
-	const schema = personalInfoSchema;
-	const { register, handleSubmit } = useForm();
+	console.log({ schema });
+	const { register, handleSubmit } = useForm<TFormValues>();
 
-	const onSubmit = (data) => {
+	const onSubmit = (data: TFormValues) => {
 		console.log("form Data = ", data);
 	};
 
@@ -17,15 +32,18 @@ function App() {
 			<form onSubmit={handleSubmit(onSubmit)}>
 				{/* TODO(Keyur): Make the below logic recursive*/}
 				{schema &&
-					schema.fields.map((field) => (
-						<InputField
-							key={`key-${field.accessorKey}`}
-							register={register}
-							labelText={field.fieldName}
-							htmlFor={field.accessorKey}
-							type={field.type}
-						/>
-					))}
+					schema.fields.map(
+						(field) =>
+							field.type === "field" && (
+								<InputField
+									key={`key-${field.accessorKey}`}
+									register={register}
+									labelText={field.fieldName}
+									htmlFor={field.accessorKey}
+									type={field.type}
+								/>
+							)
+					)}
 				<input type="submit" />
 			</form>
 		</div>
diff --git a/src/interfaces/field.ts b/src/interfaces/field.ts
index 3a1560f..fab6190 100644
--- a/src/interfaces/field.ts
+++ b/src/interfaces/field.ts
@@ -1,13 +1,8 @@
-export type FieldType = {
-	type: "field";
-	dataType: FIELD_DATA_TYPE;
-	fieldName: string;
-	accessorKey: string;
-	constraints?: Partial<Record<string, unknown>>;
-};
+import { z } from "zod";
 
-export enum FIELD_DATA_TYPE {
-	TEXT = "text",
-	NUMBER = "number",
-	EMAIL = "email",
-}
+export const FieldTypeDef = z.object({
+	type: z.literal("field"),
+	dataType: z.enum(["text", "number", "email"]),
+	fieldName: z.string(),
+	accessorKey: z.string(),
+});
diff --git a/src/interfaces/group.ts b/src/interfaces/group.ts
index a5df6e1..4e83f8f 100644
--- a/src/interfaces/group.ts
+++ b/src/interfaces/group.ts
@@ -1,6 +1,12 @@
-import { FieldType } from "./field";
+import { z } from "zod";
+import { FieldTypeDef } from "./field";
 
-export type GroupField = {
+type GroupFieldType = {
 	type: "group";
-	fields: (FieldType | GroupField)[];
+	fields: (z.infer<typeof FieldTypeDef> | GroupFieldType)[];
 };
+
+export const GroupTypeDef: z.ZodType<GroupFieldType> = z.object({
+	type: z.literal("group"),
+	fields: z.array(z.union([FieldTypeDef, z.lazy(() => GroupTypeDef)])),
+});
diff --git a/src/interfaces/schema.ts b/src/interfaces/schema.ts
index 071337e..5b02d08 100644
--- a/src/interfaces/schema.ts
+++ b/src/interfaces/schema.ts
@@ -1,21 +1,5 @@
 import { z } from "zod";
-
-export const FieldTypeDef = z.object({
-	type: z.literal("field"),
-	dataType: z.enum(["text", "number", "email"]),
-	fieldName: z.string(),
-	accessorKey: z.string(),
-});
-
-type GroupFieldType = {
-	type: "group";
-	fields: (z.infer<typeof FieldTypeDef> | GroupFieldType)[];
-};
-
-export const GroupTypeDef: z.ZodType<GroupFieldType> = z.object({
-	type: z.literal("group"),
-	fields: z.array(z.union([FieldTypeDef, z.lazy(() => GroupTypeDef)])),
-});
+import { GroupTypeDef } from "./group";
 
 export const SchemaDef = GroupTypeDef;