chore: add types to form item

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];
+    }
+}

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,36 +22,33 @@ export interface Question {
     options: Option[];
 }
 
-export interface FormProps {
+export interface Form {
     _id: string;
     title: string;
     description: string;
     questions: Question[];
 }
 
 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 });
+    });
 };