import { Field, Form, Formik } from "formik"; import React, { useCallback, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import * as Yup from "yup"; import usersService from "../../services/UsersService"; import { tableReload } from "../../store/TableReloads"; import InputCom from "../Helpers/Inputs/InputCom"; import ModalCom from "../Helpers/ModalCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; const validationSchema = Yup.object().shape({ country: Yup.string() .min(1, "Minimum 3 characters") .max(25, "Maximum 25 characters") .required("Country 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(1440, "Maximum 1440 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 EditJobPopOut = ({ details, onClose, situation, country, categories, }) => { const dispatch = useDispatch(); const { userDetails } = useSelector((state) => state.userDetails); const uploadedImage = `${userDetails.session_image_server}${localStorage.getItem('session_token')}/job/${details?.job_uid}` const [taskImage, setTaskImage] = useState(uploadedImage) let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS let [requestStatus, setRequestStatus] = useState({ loading: false, status: false, message: "", }); // Holds state when submit button is pressed let initialValues = { // initial values for formik country: details.currency, price: details?.price * 0.01, title: details?.title, description: details?.description, job_detail: details?.job_detail, timeline_days: details?.timeline_days, category: details?.category, }; const jobApi = useMemo(() => new usersService(), []); const navigate = useNavigate(); const handleEditJob = useCallback( async (values) => { let reqData = { country: values?.country, price: Number(values.price) * 100, title: values?.title, description: values?.description, job_detail: values?.job_detail, timeline_days: values?.timeline_days, category: values.category?.join("@"), job_id: details.job_id, job_uid: details.job_uid, }; setRequestStatus({ loading: true, message: "" }); try { let res = await jobApi.jobManagerUpdateJob(reqData); let { data } = await res; if (data?.internal_return < 0) return; setRequestStatus({ loading: false, message: null }); setTimeout(() => { dispatch(tableReload({ type: "JOBTABLE" })); navigate("/myjobs", { replace: true }); onClose(); }, 1000); } catch (error) { setRequestStatus({ loading: false, message: error }); throw new Error(error); } }, [jobApi, navigate, onClose, details] ); const taskImgChangeHandler = (e) => { setUploadStatus({loading: false, status: false, message:''}) let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS let uploadedFile = e.target.files[0] //UPLOADED FILE const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase(); if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`; setUploadStatus({loading: false, status: false, message:msg}) return setTimeout(()=>{ // profileImgInput.current.value = '' // clear the input setUploadStatus({loading: false, status: false, message:''}) },5000) } if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'}) return setTimeout(()=>{ // profileImgInput.current.value = '' // clear the input setUploadStatus({loading: false, status: false, message:''}) },5000) } if (e.target.value !== "") { const imgReader = new FileReader(); imgReader.onload = (event) => { let base64Img = imgReader.result.split(",")[1]; let reqData = { // PAYLOAD FOR API CALL job_uid: details?.job_uid, file_name: uploadedFile?.name.slice(0,19), file_size: uploadedFile?.size, file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(), file_data: base64Img, msg_type: 'FILE', action: 11303 } setUploadStatus({loading: true, status: false, message:'Loading...'}) jobApi.sendFiles(reqData).then(res=>{ if(res.status != 200 || res.data.internal_return < 0){ return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'}) } setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'}) setTaskImage(event.target.result); setTimeout(() => { dispatch(tableReload({ type: "JOBTABLE" })); navigate("/myjobs", { replace: true }); onClose(); }, 1000); }).catch(error=>{ setUploadStatus({loading: false, status: false, message: 'Network error, try again'}) }).finally(()=>{ setTimeout(()=>{ setUploadStatus({loading: false, status: false, message: ''}) },5000) }) }; imgReader.readAsDataURL(e.target.files[0]); } }; return (

Edit Job

{(props) => (
{/* Price */}
{/* Title */}
{/* Description */}
{/* Details */}