From 940114ea35ea62bdd6e8127b1fcf2f1f55623547 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Fri, 13 Dec 2024 03:54:09 +0900
Subject: [PATCH] chore: add types to form item

---
 src/components/forms/FormFactory.tsx  | 25 ++++++++++++++------
 src/components/forms/FormRenderer.tsx | 33 +++++++++++++--------------
 src/lib/FormFactory.ts                |  0
 3 files changed, 34 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/FormFactory.ts

diff --git a/src/components/forms/FormFactory.tsx b/src/components/forms/FormFactory.tsx
index d7bed67..269965b 100644
--- a/src/components/forms/FormFactory.tsx
+++ b/src/components/forms/FormFactory.tsx
@@ -4,17 +4,28 @@ import { QuestionTypes } from "./FormRenderer";
 import { SelectorWithLabelForm } from "./SelectorWithLabelForm";
 import { SliderWithLabelForm } from "./SliderWithLabelForm";
 
-export interface FormFactoryProps {
-    questionType: keyof typeof QuestionTypes;
-}
+export const FormItemType = {
+    selector: "selector",
+    checkbox: "checkbox",
+    slider: "slider",
+    doubleSlider: "doubleSlider",
+} as const;
+
+export type FormItemType = keyof typeof FormItemType;
+
+export type FormItemMap = {
+    [key in FormItemType]: (props: any) => JSX.Element;
+};
 
-export const FormFactory = ({ questionType }: FormFactoryProps) => {
-    const FormElements = {
+export class FormItemFactory {
+    static readonly formElementMap: FormItemMap = {
         [QuestionTypes.selector]: SelectorWithLabelForm,
         [QuestionTypes.checkbox]: CheckBoxWithLabelForm,
         [QuestionTypes.slider]: SliderWithLabelForm,
         [QuestionTypes.doubleSlider]: DoubleSliderWithLabelForm,
     };
 
-    return FormElements[questionType];
-};
+    public static createFormItem(itemType: FormItemType) {
+        return this.formElementMap[itemType];
+    }
+}
diff --git a/src/components/forms/FormRenderer.tsx b/src/components/forms/FormRenderer.tsx
index 45deff5..3215f47 100644
--- a/src/components/forms/FormRenderer.tsx
+++ b/src/components/forms/FormRenderer.tsx
@@ -12,6 +12,8 @@ export interface Option {
     value: any;
 }
 
+const str: A = "a";
+
 export interface Question {
     questionId: number;
     questionText: string;
@@ -20,7 +22,7 @@ export interface Question {
     options: Option[];
 }
 
-export interface FormProps {
+export interface Form {
     _id: string;
     title: string;
     description: string;
@@ -28,28 +30,25 @@ export interface FormProps {
 }
 
 export interface FormState {
-    formState: FormProps;
-    setFormState: React.Dispatch<React.SetStateAction<FormProps>>;
+    formState: Form;
+    setFormState: React.Dispatch<React.SetStateAction<Form>>;
 }
 
-export type FormRendererProps = FormProps & FormState;
-
-export const FormRenderer = ({
-    _id,
-    title,
-    description,
-    questions,
-    formState,
-    setFormState,
-}: FormRendererProps) => {
-    const forms = questions.map((question) => {
+export interface FormRendererProps {
+    questions: Question[];
+    formState: Form;
+    setFormState: React.Dispatch<React.SetStateAction<Form>>;
+}
+
+export const FormItemsRenderer = ({ questions, formState, setFormState }: FormRendererProps) => {
+    const formItems = questions.map((question) => {
         return {
             component: FormFactory({ questionType: question.questionType }),
             props: question,
         };
     });
 
-    return (
-        <div>{forms.map((form) => form.component({ ...form.props, formState, setFormState }))}</div>
-    );
+    return formItems.map((formItem) => {
+        return formItem.component({ ...formItem.props, formState, setFormState });
+    });
 };
diff --git a/src/lib/FormFactory.ts b/src/lib/FormFactory.ts
new file mode 100644
index 0000000..e69de29