diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 90c2db8..bbd0094 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -1,78 +1,40 @@ -import { Field, Form, Formik } from "formik"; -import React, { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import * as Yup from "yup"; -import usersService from "../../services/UsersService"; -import { tableReload } from "../../store/TableReloads"; -import InputCom from "../Helpers/Inputs/InputCom"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { + validationSchema as VS, + getWalletDetail, + useDispatch, + useSelector, + usersService, + initialValues as IV, + initialReqState, + useState, + tableReload, + Formik, + InputCom, + Field, + Form, + LoadingSpinner, +} from "./settings"; -const validationSchema = Yup.object().shape({ - country: Yup.string() - .min(1, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("Currency is required"), - price: Yup.string() - .typeError("Invalid number") - .min(1, "Price must be greater than 0") - .test("no-e", "Invalid number", (value) => { - if (value && /\d+e/.test(value)) { - return false; - } - return true; - }) - .required("Price is required"), - title: Yup.string() - .min(5, "Minimum 5 characters") - .max(149, "Maximum 149 characters") - .required("Title is required"), - description: Yup.string() - .min(5, "Minimum 5 characters") - .max(299, "Maximum 299 characters") - .required("Description is required"), - job_detail: Yup.string() - .min(3, "Minimum 3 characters") - .max(499, "Maximum 499 characters") - .required("Details is required"), - timeline_days: Yup.number() - .typeError("you must specify a number") - .min(1, "Price must be greater than 0") - .required("Timeline is required"), - category: Yup.array().min(1, "Select at least one checkbox"), -}); +const validationSchema = VS; function AddJob({ popUpHandler, categories }) { const ApiCall = new usersService(); const { walletDetails } = useSelector((state) => state.walletDetails); + const { userDetails } = useSelector((state) => state.userDetails); + let dispatch = useDispatch(); - let initialValues = { - // initial values for formik - country: "", - price: "", - title: "", - description: "", - job_detail: "", - timeline_days: "", - category: [], - }; - - let [requestStatus, setRequestStatus] = useState({ - loading: false, - status: false, - message: "", - }); // Holds state when submit button is pressed - - // const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED - // const walletChecker = walletDetails?.data.find( - // (item) => item.country === country - // ); - // return walletChecker ? walletChecker.amount : 0; - // }; + const getWalletDetails = getWalletDetail( + userDetails.country, + walletDetails + ); + const walletAmount = getWalletDetails; // GETTING USER BALANCE BASED ON COUNTRY SELECTED + const initialValues = { ...IV, country: walletAmount?.description }; + const [requestStatus, setRequestStatus] = useState(initialReqState); // Holds state when submit button is pressed const handleAddJob = async (values, helpers) => { const reqData = { - country: values?.country, + country: walletAmount?.country, price: Number(values.price) * 100, title: values?.title, description: values?.description, @@ -81,21 +43,6 @@ function AddJob({ popUpHandler, categories }) { category: values.category?.join("@"), }; - // const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED - - // if (reqData.price > walletAmount) { - // setRequestStatus({ - // loading: false, - // status: false, - // message: "Insufficient Balance", - // }); - - // setTimeout(() => { - // setRequestStatus({ loading: false, status: false, message: "" }); - // }, 1500); - // return; - // } - setRequestStatus({ loading: true, status: false, message: "" }); try { @@ -133,6 +80,14 @@ function AddJob({ popUpHandler, categories }) { } }; + // Check if the user is using iOS + const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream; + + // Check if the user is using Windows + const isWindows = /Windows/.test(navigator.userAgent); + + // console.log(isIOS, isWindows, navigator); + return (
- - + inputHandler={props.handleChange} + blurHandler={props.handleBlur} + disable={true} + error={ + props.errors.country && + props.touched.country && + props.errors.country + } + />
{/* Price */} @@ -258,7 +187,7 @@ function AddJob({ popUpHandler, categories }) {
-
- Categories -
-
+ {props.errors.category} + + )} + + +
@@ -406,7 +341,6 @@ function AddJob({ popUpHandler, categories }) { diff --git a/src/components/AddJob/settings.js b/src/components/AddJob/settings.js new file mode 100644 index 0000000..3c784ae --- /dev/null +++ b/src/components/AddJob/settings.js @@ -0,0 +1,100 @@ +import { Field, Form, Formik } from "formik"; +import { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import * as Yup from "yup"; +import usersService from "../../services/UsersService"; +import { tableReload } from "../../store/TableReloads"; +import InputCom from "../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; + +// Initialize state for request values +const initialReqState = { + loading: false, + status: false, + message: "", +}; + +// For form initial values +const initialValues = { + // initial values for formik + country: "", + price: "", + title: "", + description: "", + job_detail: "", + timeline_days: "", + category: [], +}; + +// const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED +// const walletChecker = walletDetails?.data.find( +// (item) => item.country === country +// ); +// return walletChecker ? walletChecker.amount : 0; +// }; + +// To get the validation schema +const validationSchema = Yup.object().shape({ + country: Yup.string() + .min(1, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Currency is required"), + price: Yup.string() + .typeError("Invalid number") + .min(1, "Price must be greater than 0") + .test("no-e", "Invalid number", (value) => { + if (value && /\d+e/.test(value)) { + return false; + } + return true; + }) + .required("Price is required"), + title: Yup.string() + .min(5, "Minimum 5 characters") + .max(149, "Maximum 149 characters") + .required("Title is required"), + description: Yup.string() + .min(5, "Minimum 5 characters") + .max(299, "Maximum 299 characters") + .required("Description is required"), + job_detail: Yup.string() + .min(3, "Minimum 3 characters") + .max(499, "Maximum 499 characters") + .required("Details is required"), + timeline_days: Yup.number() + .typeError("you must specify a number") + .min(1, "Price must be greater than 0") + .required("Timeline is required"), + category: Yup.array().min(1, "Select category"), +}); + +const getWalletDetail = (countryParams, walletDetails) => { + // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED + const walletChecker = walletDetails?.data.find( + (item) => item.country === countryParams + ); + return walletChecker + ? { + description: walletChecker.description, + country: walletChecker.country, + } + : ""; +}; + +export { + Field, + Form, + Formik, + useState, + useEffect, + useDispatch, + useSelector, + usersService, + InputCom, + LoadingSpinner, + initialReqState, + initialValues, + validationSchema, + getWalletDetail, + tableReload +}; diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index 658ab51..a06d995 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/src/components/jobPopout/EditJobPopout.jsx @@ -52,6 +52,8 @@ const EditJobPopOut = ({ }) => { const dispatch = useDispatch(); const { userDetails } = useSelector((state) => state.userDetails); + const { walletDetails } = useSelector((state) => state.walletDetails); + const uploadedImage = `${userDetails.session_image_server}${localStorage.getItem('session_token')}/job/${details?.job_uid}` @@ -172,6 +174,12 @@ const EditJobPopOut = ({ } }; + // Check if the user is using iOS + const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream; + + // Check if the user is using Windows + const isWindows = /Windows/.test(navigator.userAgent); + return (
@@ -313,38 +321,53 @@ const EditJobPopOut = ({
-
- Categories -
-
- {categories && Object.entries(categories)?.map(([key, value]) => ( - - ))} - - {props.errors.category && - props.touched.category && - "please select a category"} +
-
+ )} + + + +
{/* FOR TASK IMAGE */}