form data handle

client/src/api/members/createMember.ts

@@ -0,0 +1,35 @@
+import { AxiosResponse } from 'axios';
+import { http } from '../../../config';
+import { IMember, MembershipType } from '../../types/Member';
+
+interface ICreateMember {
+    firstName: string;
+    lastName: string;
+    email: string;
+    number: string;
+    file: File;
+    membershipType: MembershipType;
+    occupation: string;
+}
+interface ICreateResponse {
+    success: string;
+    message: string;
+    result: IMember;
+}
+
+const createMemberAction = async (body: ICreateMember) => {
+    const formData = new FormData();
+
+    Object.entries(body).forEach(([key, value]) => {
+        formData.append(key, value);
+    });
+
+    try {
+        const response = await http.post<typeof formData, AxiosResponse<ICreateResponse>>('/members', formData);
+        return response.data;
+    } catch (error) {
+        throw new Error();
+    }
+};
+
+export default createMemberAction;

client/src/libs/useForm/useForm.ts

@@ -14,7 +14,7 @@ const useForm = <P>({ onSubmit, formState }: IuseFrom<P>): IUserFormReturn<P> =>
         if (errorResolve.length) {
             for (let i = 0; i < errorResolve.length; i++) {
                 const name = errorResolve[i];
-                const validate = validationRef.current[name]?.generateErrors(state[name]);
+                const validate = validationRef.current[name]?.getErrors(state[name]);
                 if (validate?.error) {
                     errors[name] = validate;
                 }
@@ -43,7 +43,7 @@ const useForm = <P>({ onSubmit, formState }: IuseFrom<P>): IUserFormReturn<P> =>
                     ...state,
                     [name]: changeValue,
                 });
-                const getErros = validate?.generateErrors(changeValue);
+                const getErros = validate?.getErrors(changeValue);
                 if (getErros?.error) {
                     setErrors({
                         ...errors,

client/src/libs/useForm/validator.ts

@@ -33,7 +33,7 @@ export class Validator {
         }
     };
 
-    generateErrors = (value: unknown, digginValue?: Function) => {
+    private generateErrors = (value: unknown, digginValue?: Function) => {
         const parseValue = digginValue ? digginValue(value) : value;
         const resolve = this.errros.reduce(
             (prevValue: { error: boolean; message: string[] }, current) => {
@@ -54,10 +54,14 @@ export class Validator {
         return resolve;
     };
 
+    getErrors = (value: any) => {
+        return this.generateErrors(value);
+    };
+
     findKey = <T>(callback: (value: T) => string) => {
         return {
             ...this,
-            get: (value: T) => this.generateErrors(value, callback),
+            getErrors: (value: T) => this.generateErrors(value, callback),
         };
     };
 }

client/src/modules/common/components/SingleSelect/SingleSelect.module.scss

@@ -1,80 +1,101 @@
 .root {
-	z-index: 20;
-	.input_wraper {
-		min-height: 50px;
-		box-shadow: 0 1px 0 0 #e8e8e8;
-		background-color: #fafafa;
-		.item_wraper {
-			font-size: 11px;
-			width: calc(100% - 40px);
-			display: flex;
-			gap: 5px;
-		}
-		.arrow_wrraper {
-			.arrow {
-				border-left: 5px solid transparent;
-				border-right: 5px solid transparent;
-				border-top: 5px solid #bebebe;
-			}
-		}
-	}
+    z-index: 20;
+    .input_wraper {
+        min-height: 50px;
+        box-shadow: 0 1px 0 0 #e8e8e8;
+        background-color: #fafafa;
+        .item_wraper {
+            font-size: 11px;
+            width: calc(100% - 40px);
+            display: flex;
+            gap: 5px;
+        }
+        .arrow_wrraper {
+            .arrow {
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 5px solid #bebebe;
+            }
+        }
+    }
+    .error_text {
+        color: #ff5b43;
+        font-size: 11px;
+        font-weight: 500;
+    }
 
-	ul {
-		width: calc(100% - 40px);
-		top: calc(100% + 2px);
-		box-shadow: 5px 15px 20px 0 rgba(0, 0, 0, 0.1);
+    ul {
+        width: calc(100% - 40px);
+        top: calc(100% + 2px);
+        box-shadow: 5px 15px 20px 0 rgba(0, 0, 0, 0.1);
 
-		li {
-			width: 100%;
-			display: block;
-			padding: 9px;
-			font-size: 14px;
-			border-radius: 4px;
-			&:hover {
-				background: #f4f4f4;
-				// color: #63636a;
-			}
-		}
-	}
+        li {
+            width: 100%;
+            display: block;
+            padding: 9px;
+            font-size: 14px;
+            border-radius: 4px;
+            &:hover {
+                background: #f4f4f4;
+                // color: #63636a;
+            }
+        }
+    }
 
-	.error {
-		border-color: #ff5b43 !important;
-	}
+    .error {
+        border-color: #ff5b43 !important;
+    }
 
-	.error_text {
-		color: #ff5b43;
-		font-size: 11px;
-		font-weight: 500;
-	}
+    .error_text {
+        color: #ff5b43;
+        font-size: 11px;
+        font-weight: 500;
+    }
 
-	&:focus-within {
-		.input_wraper {
-			background-color: white;
-			border: 1px solid #01896a;
-			box-shadow: 0 1px 0 0 #01896a;
-		}
+    &:focus-within {
+        .input_wraper {
+            background-color: white;
+            border: 1px solid #9c51e0;
+            box-shadow: 0 1px 0 0 #9c51e0;
+        }
 
-		.span_label {
-			top: -22px;
-			left: 0;
-			font-size: 0.875rem;
-			color: #01896a;
-		}
-	}
-	.span_label_active {
-		top: -22px !important;
-		left: 0px !important;
-	}
+        .span_label {
+            top: -22px;
+            left: 0;
+            font-size: 0.875rem;
+            color: #9c51e0;
+        }
+    }
+    .span_label_active {
+        top: -22px !important;
+        left: 0px !important;
+    }
 
-	.span_label {
-		top: 16px;
-		left: 14px;
-		position: absolute;
-		font-size: 0.875rem;
-		font-weight: 500;
-		text-align: left;
-		color: #9797a0;
-		letter-spacing: 0.65px;
-		transition: all 0.15s ease-in-out 0s;
-	}
+    .span_label {
+        top: 16px;
+        left: 14px;
+        position: absolute;
+        font-size: 0.875rem;
+        font-weight: 500;
+        text-align: left;
+        color: #9797a0;
+        letter-spacing: 0.65px;
+        transition: all 0.15s ease-in-out 0s;
+    }
+}
+
+.error {
+    .input_wraper {
+        box-shadow: 0 1px 0 0 #ff5b43 !important;
+    }
+    &:focus-within {
+        .input_wraper {
+            border: 1px solid #ff5b43 !important;
+            box-shadow: 0 1px 0 0 #ff5b43 !important;
+        }
+
+        .span_label {
+            color: #ff5b43 !important;
+        }
+    }
 }