WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'master' into edit-job

Browse Source
This commit was merged in pull request #81.
This commit is contained in:
Ebube
2023-05-19 01:16:43 +01:00
parent 7998eaf52d f64cdcb316
commit 4f107df131
2 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddJob/AddJob.jsx
+53 -43
View File
@@ -4,6 +4,8 @@ import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService";
import { useSelector } from "react-redux";
import { Form, Formik } from "formik";
import * as Yup from "yup";
@@ -31,30 +33,43 @@ const validationSchema = Yup.object().shape({
timeline_days: Yup.number()
.typeError("you must specify a number")
.min(1, "Price must be greater than 0")
.required("Price is required"),
.required("Timeline is required"),
});
let initialValues = {
// initial values for formik
country: "",
price: 0,
title: "",
description: "",
job_detail: "",
timeline_days: "",
};
// let initialValues = {
// // initial values for formik
// country: "NG",
// price: 0,
// title: "",
// description: "",
// job_detail: "",
// timeline_days: "",
// };
function AddJob() {
const ApiCall = new usersService();
const navigate = useNavigate();
let {userDetails} = useSelector((state)=> state.userDetails)
let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
let [country, setCountry] = useState({
loading: false,
loading: true,
status: false,
data: [],
}); // To Hold the array of country getUserCountry returns
let initialValues = {
// initial values for formik
country: userDetails.country,
price: "",
title: "",
description: "",
job_detail: "",
timeline_days: "",
};
let [requestStatus, setRequestStatus] = useState({
loading: false,
status: false,
@@ -118,8 +133,8 @@ function AddJob() {
};
useEffect(() => {
setPageLoading(false);
getUserCountry();
setPageLoading(false);
}, []);
return pageLoading.loading ? (
@@ -148,16 +163,17 @@ function AddJob() {
<div className="xl:flex xl:space-x-7 mb-6">
<div className="field w-full mb-6 xl:mb-0">
{/* <InputCom
fieldClass="px-6"
label="Country"
labelClass='tracking-wide'
inputBg = 'bg-slate-100'
type="text"
name="country"
// placeholder="Select Country"
value={props.values.country}
inputHandler={props.handleChange}
/> */}
fieldClass="px-6 cursor-not-allowed"
label="Country"
labelClass='tracking-wide'
inputBg = 'bg-slate-100'
type="text"
name="country"
disable={true}
value={country.loading ? 'loading' : country.data ? country.data : 'no country found!'}
inputHandler={(e)=> setCountry((prev) => ({...prev, data:e.target.value}))}
/> */}
<label
htmlFor="country"
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
@@ -167,6 +183,7 @@ function AddJob() {
<select
id="country"
name="country"
disabled
value={props.values.country}
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
onChange={props.handleChange}
@@ -181,15 +198,19 @@ function AddJob() {
<option className="text-slate-500 text-lg" value="">
Select...
</option>
{country.data.map((item, index) => (
<option
key={index}
className="text-slate-500 text-lg"
value={item[0]}
>
{item[1]}
</option>
))}
{country.data.map((item, index) => {
if(item[0] == userDetails.country){
return (
<option
key={index}
className="text-slate-500 text-lg"
value={item[0]}
>
{item[1]}
</option>
)
}
})}
</>
) : (
<option className="text-slate-500 text-lg" value="">
@@ -213,7 +234,7 @@ function AddJob() {
inputBg="bg-slate-100"
type="number"
name="price"
// placeholder="Please Enter Amount"
placeholder="0"
value={props.values.price}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
@@ -271,17 +292,6 @@ function AddJob() {
{/* Details */}
<div className="field w-full mb-6">
{/* <InputCom
fieldClass="px-6"
label="Job Delivery Details"
labelClass='tracking-wide'
inputBg = 'bg-slate-100'
type="text"
name="details"
// placeholder="Please Enter Detail Description of Job"
value={props.values.details}
inputHandler={props.handleChange}
/> */}
<label
htmlFor="Job Delivery Details"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
src/components/MyActiveJobs/ActiveJobs.jsx
+4 -4
View File
@@ -25,7 +25,7 @@ function ActiveJobs() {
{/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
<div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
<div className="w-full lg:w-3/4">
<div className="w-full lg:w-1/2">
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
{/* back btn and title */}
<div className="w-full flex justify-start space-x-3 items-center">
@@ -83,9 +83,9 @@ function ActiveJobs() {
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
<div className="">
<p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
<p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
<textarea
className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
rows="10"
style={{ resize: "none" }}
/>
@@ -128,7 +128,7 @@ function ActiveJobs() {
</div>
{/* ACTION SECTION */}
<div className="w-full lg:w-1/4 h-full">
<div className="w-full lg:w-1/2 h-full">
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>