Clean up...added feature to edit popup
This commit is contained in:
@@ -1,45 +1,21 @@
|
||||
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();
|
||||
@@ -48,44 +24,13 @@ function AddJob({ popUpHandler, categories }) {
|
||||
|
||||
let dispatch = useDispatch();
|
||||
|
||||
const getWalletDetail = (countryParams) => {
|
||||
// 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,
|
||||
}
|
||||
: "";
|
||||
};
|
||||
|
||||
const walletAmount = getWalletDetail(userDetails.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
|
||||
|
||||
let initialValues = {
|
||||
// initial values for formik
|
||||
country: walletAmount?.description,
|
||||
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.component,
|
||||
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 = {
|
||||
@@ -98,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 {
|
||||
@@ -150,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 (
|
||||
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
|
||||
<Formik
|
||||
@@ -249,7 +187,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
|
||||
className='input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
|
||||
>
|
||||
Job Delivery Details
|
||||
{props.errors.job_detail &&
|
||||
@@ -276,18 +214,19 @@ function AddJob({ popUpHandler, categories }) {
|
||||
htmlFor="Job Categories"
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
|
||||
>
|
||||
Categories
|
||||
Categories ({`multiple categories - ${isIOS ? "⌘" : isWindows ? "Ctrl+" : ""}`})
|
||||
{props.errors.category && props.touched.category && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.category}
|
||||
</span>
|
||||
)}
|
||||
|
||||
</label>
|
||||
<select
|
||||
id="category"
|
||||
name="category"
|
||||
value={props.values.category}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-[5.4rem] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
||||
className={`input-field p-2 mt-1 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-[4.7rem] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
multiple
|
||||
@@ -402,7 +341,6 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
>
|
||||
Add Job
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user