From 416455c2d86b1f82155de8315d4d41c8ef79553b Mon Sep 17 00:00:00 2001 From: senuravihanjayadeva Date: Thu, 2 Dec 2021 20:51:02 +0530 Subject: [PATCH] Fixed the bug in Application Form --- package.json | 3 +- src/pages/contact/contact-form-section.tsx | 2 +- src/pages/join_us/hero-section.tsx | 46 +- src/pages/join_us/join-us-form-section.tsx | 291 +- yarn.lock | 20582 +++++++++---------- 5 files changed, 10383 insertions(+), 10541 deletions(-) diff --git a/package.json b/package.json index ff315a3..9528001 100644 --- a/package.json +++ b/package.json @@ -20,14 +20,15 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-hook-form": "^7.20.4", + "react-multi-select-component": "^4.1.14", "react-notifications": "^1.7.2", "react-owl-carousel": "^2.3.3", "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "react-scroll-to-top": "^1.0.5", "react-select": "^5.2.1", - "sass": "^1.43.5", "react-toastify": "^8.1.0", + "sass": "^1.43.5", "typescript": "^4.1.2", "web-vitals": "^1.0.1", "yup": "^0.32.11" diff --git a/src/pages/contact/contact-form-section.tsx b/src/pages/contact/contact-form-section.tsx index f8e3c5b..de1a585 100644 --- a/src/pages/contact/contact-form-section.tsx +++ b/src/pages/contact/contact-form-section.tsx @@ -40,7 +40,7 @@ const ContactFormSection: React.FC = () => { sendMessage(messageDetails) .then(() => { reset(); - toastNotification("Application succesfully sent", "success"); + toastNotification("Succesfully sent", "success"); setIsLoading(false); }) .catch(() => { diff --git a/src/pages/join_us/hero-section.tsx b/src/pages/join_us/hero-section.tsx index 9707ccd..434758e 100644 --- a/src/pages/join_us/hero-section.tsx +++ b/src/pages/join_us/hero-section.tsx @@ -1,23 +1,63 @@ -import React from 'react'; +import React from "react"; const HeroSection: React.FC = () => (
+

Join with Us

Fill your application form today

+
+
+
+ + + facebook.com/msclubsliit + +
+
+ + + instagram.com/msclub.sliit + +
+
+ + + linkedin.com/msclubsliit + +
+
+ + + youtube.com/msclubsliit + +
+
+ + github.com/msclubsliit +
+
+
- home header + home header
); -export default HeroSection; \ No newline at end of file +export default HeroSection; diff --git a/src/pages/join_us/join-us-form-section.tsx b/src/pages/join_us/join-us-form-section.tsx index 4d38f05..ba29bf6 100644 --- a/src/pages/join_us/join-us-form-section.tsx +++ b/src/pages/join_us/join-us-form-section.tsx @@ -1,20 +1,20 @@ -import React, { useState } from 'react'; -import Select from 'react-select'; -import { useForm } from 'react-hook-form'; -import { yupResolver } from '@hookform/resolvers/yup'; -import * as Yup from 'yup'; +import React, { useState } from "react"; +import { MultiSelect } from "react-multi-select-component"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import * as Yup from "yup"; import { ToastContainer, toast } from "react-toastify"; -import { submitApplication } from '../../api/ApplicationAction'; +import { submitApplication } from "../../api/ApplicationAction"; const options = [ - { value: 'Public Speaking', label: 'Public Speaking' }, - { value: 'Designing', label: 'Designing' }, - { value: 'Content Writing', label: 'Content Writing' }, - { value: 'Video Editing', label: 'Video Editing' }, - { value: 'Web Development', label: 'Web Development' }, - { value: 'UI/UX', label: 'UI/UX' }, - { value: 'Community building', label: 'Community building' } -] + { value: "Public Speaking", label: "Public Speaking" }, + { value: "Designing", label: "Designing" }, + { value: "Content Writing", label: "Content Writing" }, + { value: "Video Editing", label: "Video Editing" }, + { value: "Web Development", label: "Web Development" }, + { value: "UI/UX", label: "UI/UX" }, + { value: "Community building", label: "Community building" }, +]; const webUrlRegEx = RegExp( //eslint-disable-next-line @@ -45,31 +45,46 @@ type IApplicationForm = { const ApplicationForm: React.FC = () => { const [isLoading, setIsLoading] = useState(false); + const [selected, setSelected] = useState([]); const validationSchema = Yup.object().shape({ - studentId: Yup.string().required('Student ID is required').max(10, 'Student ID not exceed 10 characters'), - name: Yup.string().required('Name is required'), - email: Yup.string().required('Email is required').email('Email address is invalid (@ and . signs are required)'), + studentId: Yup.string() + .required("Student ID is required") + .max(10, "Student ID not exceed 10 characters"), + name: Yup.string().required("Name is required"), + email: Yup.string() + .required("Email is required") + .email("Email address is invalid (@ and . signs are required)"), contactNumber: Yup.string() - .required('Mobile number is required') - .min(10, 'Mobile number is required 10 numbers') - .max(10, 'Mobile number not exceed 10 numbers') - .matches(contactNumberRegEx, 'Invalid mobile number'), - currentAcademicYear: Yup.string().required('Academic year is required'), + .required("Mobile number is required") + .min(10, "Mobile number is required 10 numbers") + .max(10, "Mobile number not exceed 10 numbers") + .matches(contactNumberRegEx, "Invalid mobile number"), + currentAcademicYear: Yup.string().required("Academic year is required"), selfIntroduction: Yup.string() - .required('Introduction is required') - .min(150, 'Introduction must have at leaset 150 charaters') - .max(1000, 'Introduction not exceed 1000 characters'), + .required("Introduction is required") + .min(150, "Introduction must have at leaset 150 charaters") + .max(1000, "Introduction not exceed 1000 characters"), reasonForJoin: Yup.string() - .required('Reason to join MS club is required') - .min(150, 'Reason must have at least 150 characters') - .max(500, 'Reason not exceed 500 characters'), - linkedIn: Yup.string().required('LinkedIn profile link is required').matches(webUrlRegEx, 'Invalid link (Ex: https://www.linkedin.com/in/account-name)'), - gitHub: Yup.string().required('GitHub profile link is required').matches(webUrlRegEx, 'Invalid link (Ex: https://github.com/account-name)'), + .required("Reason to join MS club is required") + .min(150, "Reason must have at least 150 characters") + .max(500, "Reason not exceed 500 characters"), + linkedIn: Yup.string() + .required("LinkedIn profile link is required") + .matches( + webUrlRegEx, + "Invalid link (Ex: https://www.linkedin.com/in/account-name)" + ), + gitHub: Yup.string() + .required("GitHub profile link is required") + .matches( + webUrlRegEx, + "Invalid link (Ex: https://github.com/account-name)" + ), blog: Yup.string().notRequired(), - experiences: Yup.string().required('Your experiences is required'), - challenges: Yup.string().required('Challenges are required'), - goal: Yup.string().required('This field is required'), + experiences: Yup.string().required("Your experiences is required"), + challenges: Yup.string().required("Challenges are required"), + goal: Yup.string().required("This field is required"), skillsAndTalents: Yup.string().notRequired(), }); @@ -111,28 +126,41 @@ const ApplicationForm: React.FC = () => { register, handleSubmit, reset, - formState: { errors } + formState: { errors }, } = useForm({ - resolver: yupResolver(validationSchema) + resolver: yupResolver(validationSchema), }); const onSubmit = (data: IApplicationForm) => { + const newApplication = { + studentId: data.studentId, + name: data.name, + email: data.email, + contactNumber: data.contactNumber, + currentAcademicYear: data.currentAcademicYear, + selfIntroduction: data.selfIntroduction, + reasonForJoin: data.reasonForJoin, + linkedIn: data.linkedIn, + gitHub: data.gitHub, + blog: data.blog, + experiences: data.experiences, + challenges: data.challenges, + goal: data.goal, + skillsAndTalents: selected ? selected.map((item: any) => item.value) : [], + }; setIsLoading(true); - submitApplication(data) - .then(() => { - reset(); - toastNotification("Application succesfully sent", "success"); - setIsLoading(false); - }) - .catch(() => { - toastNotification("Something went wrong. Please try again", "error"); - setIsLoading(false); - }); - } - - const handleChange = (select: any) => { - console.log(select); - } + submitApplication(newApplication) + .then(() => { + reset(); + setSelected([]); + toastNotification("Application succesfully sent", "success"); + setIsLoading(false); + }) + .catch(() => { + toastNotification("Something went wrong. Please try again", "error"); + setIsLoading(false); + }); + }; return (
@@ -149,58 +177,71 @@ const ApplicationForm: React.FC = () => { {errors.studentId?.message}
- + {errors.name?.message}
- + {errors.email?.message}
- + - {errors.contactNumber?.message} + + {errors.contactNumber?.message} +
- - - {errors.currentAcademicYear?.message} + + + + {errors.currentAcademicYear?.message} +
@@ -209,22 +250,31 @@ const ApplicationForm: React.FC = () => {