diff --git a/src/Routers.jsx b/src/Routers.jsx index 45d669c..4354c41 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -34,6 +34,7 @@ import VerifyLinkPages from "./views/VerifyLinkPages"; import MyActiveJobsPage from "./views/MyActiveJobsPage"; import FamilyAccPage from "./views/FamilyAccPage"; import StartJob from "./components/MyJobs/StartJob"; +import AddJobPage from "./views/AddJobPage"; export default function Routers() { return ( @@ -76,6 +77,7 @@ export default function Routers() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx new file mode 100644 index 0000000..270036b --- /dev/null +++ b/src/components/AddJob/AddJob.jsx @@ -0,0 +1,340 @@ +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() + .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: '', + title: '', + description: '', + job_detail: '', + timeline_days: '' +} + +function AddJob() { + const ApiCall = new usersService() + const navigate = useNavigate() + + 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 [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 HANDLE ADD JOB FORM + const handleAddJob = (values, helpers) => { + console.log(values) + 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'}) + }) + } + + useEffect(()=>{ + setPageLoading(false) + getUserCountry() + },[]) + + return pageLoading.loading ? ( +
+
+ +
+
+ ) : ( +
+ + {(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} +

+ )} +
+
+ + {/* Title */} + +
+ + {props.errors.title && props.touched.title && ( +

+ {props.errors.title} +

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

+ {props.errors.description} +

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