improved-code-structure

ankman007 · Sep 19, 2024 · 3d59f60 · 3d59f60
1 parent e7331d0
commit 3d59f60
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 140 deletions.
diff --git a/src/components/DateField/DateFieldComponent.tsx b/src/components/DateField/DateFieldComponent.tsx
@@ -7,7 +7,6 @@ export const DateFieldComponent: React.FC<DateFieldComponentProps> = ({
   name,
   value,
   onChange,
-  onBlur,
   localError = null,
   helperText,
   required = false,
@@ -35,7 +34,6 @@ export const DateFieldComponent: React.FC<DateFieldComponentProps> = ({
       name={name}
       value={value}
       onChange={handleChange}
-      onBlur={onBlur}
       fullWidth
       required={required}
       variant="outlined"

diff --git a/src/components/FileUpload/FileUploadComponent.tsx b/src/components/FileUpload/FileUploadComponent.tsx
@@ -8,7 +8,7 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({ label,
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
-      if (file.size > 1000000) { 
+      if (file.size > 10000000) { 
         setError("File size exceeds 1MB.");
         return;
       }

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -14,12 +14,17 @@ const Form: React.FC = () => {
   const [formData, setFormData] = useState<FormData>({});
   const [submitted, setSubmitted] = useState(false);
 
-  const handleChange = (name: string, value: string | boolean | string[]) => {
+  const handleChange = (name: string, value: any) => {
+    if (value && value.target) {
+      value = value.target.type === 'checkbox' ? value.target.checked : value.target.value;
+    }
+
     setFormData((prevData) => ({
       ...prevData,
       [name]: value,
     }));
   };
+
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
@@ -1,7 +1,5 @@
-import React, { useState } from "react";
-import { SelectChangeEvent } from "@mui/material";
+import React from "react";
 import { InputFieldProps } from "../types/types";
-import { validateUserInput } from "../utils/validation";
 import { CheckboxComponent } from "./Checkbox/Checkbox";
 import { RadioComponent } from "./Radio/RadioComponent";
 import { SelectComponent } from "./Select/SelectComponent";
@@ -20,139 +18,101 @@ const InputField: React.FC<InputFieldProps> = ({
   onChange,
   value,
 }) => {
-  const [localError, setLocalError] = useState<string | null>(null);
 
-  const handleBlur = () => {
-    const userValidation = validateUserInput(type, value, required, label);
-    setLocalError(userValidation);
-  };
-
-  const handleChange = (
-    event: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
-  ) => {
-    const target = event.target;
+  const renderField = () => {
+    switch (type) {
+      case "text":
+      case "email":
+      case "number":
+      case "password":
+      case "textarea":
+        return (
+          <TextFieldComponent
+            type={type === "textarea" ? "textarea" : type}
+            label={label}
+            name={name}
+            value={value as string}
+            onChange={onChange}
+            helperText={helperText}
+            required={required}
+          />
+        );
 
-    if (target.type === "checkbox") {
-      handleCheckboxChange(event, target.checked); 
-    } else if (target.type === "radio") {
-      onChange(target.value);
-    } else {
-      onChange(target.value);
-    }
-  };
+      case "select":
+        return (
+          <SelectComponent
+            label={label}
+            name={name}
+            value={value as string}
+            onChange={onChange}
+            options={options}
+            required={required}
+          />
+        );
 
-  const handleSelectChange = (event: SelectChangeEvent<string>) => {
-    const selectedValue = event;
-    onChange(selectedValue); 
-  };
+      case "multi-select":
+        return (
+          <MultiSelectComponent
+            label={label}
+            name={name}
+            value={value as string[]}
+            onChange={onChange}
+            options={options}
+            required={required}
+          />
+        );
 
-  const handleCheckboxChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    checked: boolean
-  ) => {
-    onChange(checked);
-  };
+      case "radio":
+        return (
+          <RadioComponent
+            label={label}
+            name={name}
+            value={value as string}
+            onChange={onChange}
+            options={options}
+            required={required}
+          />
+        );
 
-  return (
-    <div>
-      {["text", "email", "number", "password"].includes(type) ? (
-        <TextFieldComponent
-          type={type}
-          label={label}
-          name={name}
-          value={value as string}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          localError={localError}
-          helperText={helperText}
-          required={required}
-        />
-      ) : null}
+      case "checkbox":
+        return (
+          <CheckboxComponent
+            name={name}
+            label={label}
+            value={value as boolean}
+            onChange={onChange}
+            required={required}
+          />
+        );
 
-      {type === "textarea" ? (
-        <TextFieldComponent
-          type="textarea"
-          label={label}
-          name={name}
-          value={value as string}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          localError={localError}
-          helperText={helperText}
-          required={required}
-        />
-      ) : null}
+      case "file":
+      case "image":
+        return (
+          <FileUploadComponent
+            label={label}
+            name={name}
+            onChange={onChange}
+          />
+        );
 
-      {type === "select" ? (
-        <SelectComponent
-          label={label}
-          name={name}
-          value={value as string}
-          onChange={handleSelectChange}
-          onBlur={handleBlur}
-          options={options}
-          localError={localError}
-          required={required}
-        />
-      ) : null}
+      case "date":
+        return (
+          <DateFieldComponent
+            label={label}
+            name={name}
+            value={value as string}
+            onChange={onChange}
+            required={required}
+            helperText={helperText}
+          />
+        );
 
-      {type === "multi-select" ? (
-        <MultiSelectComponent
-          label={label}
-          name={name}
-          value={value as string[]}
-          onChange={handleSelectChange}
-          options={options}
-          localError={localError}
-          required={required}
-        />
-      ) : null}
-
-      {type === "radio" ? (
-        <RadioComponent
-          label={label}
-          name={name}
-          value={value as string}
-          onChange={handleChange}
-          options={options}
-          required={required}
-        />
-      ) : null}
-
-      {["file", "image"].includes(type) ? (
-        <FileUploadComponent
-          label={label}
-          name={name}
-          onChange={handleChange}
-        />
-      ) : null}
-
-      {type === "date" ? (
-        <DateFieldComponent
-          label={label}
-          name={name}
-          value={value as string}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          required={required}
-          localError={localError}
-          helperText={helperText}
-        />
-      ) : null}
+      default:
+        return null;
+    }
+  };
 
-      {type === "checkbox" ? (
-        <CheckboxComponent
-          name={name}
-          label={label}
-          value={value as boolean}
-          onChange={handleCheckboxChange}
-          required={false}
-        />
-      ) : null}
-    </div>
-  );
+  return <div>{renderField()}</div>;
 };
 
 export default InputField;
diff --git a/src/components/Select/SelectComponent.tsx b/src/components/Select/SelectComponent.tsx
@@ -40,7 +40,6 @@ export const SelectComponent: React.FC<SelectComponentProps> = ({
         name={name}
         value={value || ""}
         onChange={handleChange}
-        onBlur={handleBlur}
         required={required}
         label={label}
       >

diff --git a/src/components/TextField/TextFieldComponent.tsx b/src/components/TextField/TextFieldComponent.tsx
@@ -32,7 +32,7 @@ export const TextFieldComponent: React.FC<TextFieldComponentProps> = ({
       setError(`${label} is required.`);
     } else {
       setError(null);
-      setActive(true);
+      setActive(true)
     }
   };
 

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -53,7 +53,6 @@ export type CheckboxComponentProps = {
   onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 
   required?: boolean;
-  localError?: string | null;
 };
 
 export type RadioComponentProps = {
@@ -63,17 +62,15 @@ export type RadioComponentProps = {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   options: Option[];
   required?: boolean;
-  localError?: string | null;
 };
 
 export type SelectComponentProps = {
   name: string;
   label: string;
-  value: string;
+  value: unknown;
   // onChange: (event: SelectChangeEvent<string>) => void;
   onChange: (value: string) => void;
   options: Option[];
-  localError?: string | null;
   required?: boolean;
 };
 
@@ -84,7 +81,6 @@ export type MultiSelectComponentProps = {
   onChange: (event: SelectChangeEvent<string[]>) => void;
   options: Option[];
   required?: boolean;
-  localError?: string | null;
 };
 
 export type TextFieldComponentProps = {
@@ -94,7 +90,7 @@ export type TextFieldComponentProps = {
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   onBlur?: () => void;
-  localError?: string | null;
+
   helperText?: string;
   required?: boolean;
 };
@@ -111,7 +107,6 @@ export type DateFieldComponentProps = {
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: () => void;
-  localError?: string | null;
   helperText?: string;
   required?: boolean;
 };