diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 61cb8fc..6e35d2a 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -1,124 +1,154 @@ -import React, {useState, useEffect} from 'react' -import { Link, useNavigate } from 'react-router-dom'; -import InputCom from '../Helpers/Inputs/InputCom'; -import LoadingSpinner from '../Spinners/LoadingSpinner'; -import usersService from '../../services/UsersService'; +import React, { useState, useEffect } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import InputCom from "../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import usersService from "../../services/UsersService"; import { Form, Formik } from "formik"; import * as Yup from "yup"; const validationSchema = Yup.object().shape({ - country: Yup.string() - .min(1, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("Country is required"), - price: Yup.number() - .typeError("you must specify a number") - .min(1, "Price must be greater than 0") - .required("Price is required"), - title: Yup.string() - .min(3, "Minimum 3 characters") - .max(100, "Maximum 25 characters") - .required("Title is required"), - description: Yup.string() - .min(3, "Minimum 3 characters") - .max(250, "Maximum 250 characters") - .required("Description is required"), - job_detail: Yup.string() - .min(3, "Minimum 3 characters") - .max(250, "Maximum 250 characters") - .required("Details is required"), - timeline_days: Yup.number() + country: Yup.string() + .min(1, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Country is required"), + price: Yup.number() .typeError("you must specify a number") .min(1, "Price must be greater than 0") .required("Price is required"), - }); + title: Yup.string() + .min(3, "Minimum 3 characters") + .max(100, "Maximum 25 characters") + .required("Title is required"), + description: Yup.string() + .min(3, "Minimum 3 characters") + .max(250, "Maximum 250 characters") + .required("Description is required"), + job_detail: Yup.string() + .min(3, "Minimum 3 characters") + .max(250, "Maximum 250 characters") + .required("Details is required"), + timeline_days: Yup.number() + .typeError("you must specify a number") + .min(1, "Price must be greater than 0") + .required("Price is required"), +}); - let initialValues = { // initial values for formik - country: '', - price: 0, - title: '', - description: '', - job_detail: '', - timeline_days: '' -} +let initialValues = { + // initial values for formik + country: "", + price: 0, + title: "", + description: "", + job_detail: "", + timeline_days: "", +}; function AddJob() { - const ApiCall = new usersService() - const navigate = useNavigate() + const ApiCall = new usersService(); + const navigate = useNavigate(); - let [pageLoading, setPageLoading] = useState(true) // State used for knowing when the page is mounting + let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting - let [country, setCountry] = useState({loading: false, status: false, data:[]}) // To Hold the array of country getUserCountry returns + let [country, setCountry] = useState({ + loading: false, + status: false, + data: [], + }); // To Hold the array of country getUserCountry returns - let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message:''}) // Holds state when submit button is pressed + let [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); // Holds state when submit button is pressed - // FUNCTION TO GET COUNTRY - const getUserCountry = () =>{ - setCountry(prev => ({...prev, loading:true})) - ApiCall.getSignupCountryData().then(res => { - if(res.data.internal_return < 1){ - setCountry({loading: false, status: true, data:[]}) - return - } - setCountry({loading: false, status: true, data:res.data.signup_country}) - }).catch(err => { - setCountry({loading: false, status: false, data:[]}) - }) - } + // FUNCTION TO GET COUNTRY + const getUserCountry = () => { + setCountry((prev) => ({ ...prev, loading: true })); + ApiCall.getSignupCountryData() + .then((res) => { + if (res.data.internal_return < 1) { + setCountry({ loading: false, status: true, data: [] }); + return; + } + setCountry({ + loading: false, + status: true, + data: res.data.signup_country, + }); + }) + .catch((err) => { + setCountry({ loading: false, status: false, data: [] }); + }); + }; - // FUNCTION TO HANDLE ADD JOB FORM - const handleAddJob = (values, helpers) => { - setRequestStatus({loading: true, status: false, message:''}) - ApiCall.jobManagerCreateJob(values).then(res => { - if(res.data.internal_return < 1){ - setRequestStatus({loading: false, status: false, message:'Could not complete your request at the moment'}) - return - } - setRequestStatus({loading: false, status: true, message:'Job Added Successfully'}) - setTimeout(()=>{ - navigate('/myjobs', {replace: true}) - },1000) + // FUNCTION TO HANDLE ADD JOB FORM + const handleAddJob = (values, helpers) => { + setRequestStatus({ loading: true, status: false, message: "" }); + ApiCall.jobManagerCreateJob(values) + .then((res) => { + if (res.data.internal_return < 1) { + setRequestStatus({ + loading: false, + status: false, + message: "Could not complete your request at the moment", + }); + return; + } + setRequestStatus({ + loading: false, + status: true, + message: "Job Added Successfully", + }); + setTimeout(() => { + navigate("/myjobs", { replace: true }); + }, 1000); + }) + .catch((err) => { + setRequestStatus({ + loading: false, + status: false, + message: "Opps! soemthing went wrong. Try Again", + }); + }) + .finally(() => { + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + }); + }; - }).catch(err => { - setRequestStatus({loading: false, status: false, message:'Opps! soemthing went wrong. Try Again'}) - }).finally(()=>{ - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message:''}) - }, 5000) - }) - } + useEffect(() => { + setPageLoading(false); + getUserCountry(); + }, []); - useEffect(()=>{ - setPageLoading(false) - getUserCountry() - },[]) - - return pageLoading.loading ? ( -
-
- -
-
- ) : ( -
- - {(props) => { - return ( -
-

Create New Job

-
-
- - {/* inputs starts here */} - {/* country */} -
-
- {/* +
+ +
+
+ ) : ( +
+ + {(props) => { + return ( + +

+ Create New Job +

+
+
+ {/* inputs starts here */} + {/* country */} +
+
+ {/* */} - - - {props.errors.country && props.touched.country && ( -

- {props.errors.country} -

- )} -
- - {/* Price */} -
- - {props.errors.price && props.touched.price && ( -

- {props.errors.price} -

- )} -
-
+ + + {props.errors.country && props.touched.country && ( +

+ {props.errors.country} +

+ )} +
- {/* Title */} + {/* Price */} +
+ + {props.errors.price && props.touched.price && ( +

+ {props.errors.price} +

+ )} +
+
-
- - {props.errors.title && props.touched.title && ( -

- {props.errors.title} -

- )} -
+ {/* Title */} - {/* Description */} -
- - {props.errors.description && props.touched.description && ( -

- {props.errors.description} -

- )} -
+
+ + {props.errors.title && props.touched.title && ( +

+ {props.errors.title} +

+ )} +
- {/* Details */} -
- {/* + + {props.errors.description && props.touched.description && ( +

+ {props.errors.description} +

+ )} +
+ + {/* Details */} +
+ {/* */} - -