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"; import { apiConst } from "../../lib/apiConst"; 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 { walletDetails } = useSelector((state) => state.walletDetails); 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: apiConst.WRENCHBOARD_PICTURE_JOB, }; 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 ( {(props) => (

Edit Job

{/* Price */}
{/* Title */}
{/* Description */}
{/* Details */}