From ae23195e0ed56b3e9ca88265cebb1a212be4131e Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 17 Jun 2023 06:20:09 +0100 Subject: [PATCH 1/2] Changed add job to modal --- src/components/AddJob/AddJob.jsx | 37 +++++++++---------------- src/components/MyJobs/index.jsx | 41 +++++++++++----------------- src/index.css | 5 ++++ src/views/AddJobPage.jsx | 46 +++++++++++++++++++++++++------- src/views/MyJobsPage.jsx | 38 +++++--------------------- 5 files changed, 76 insertions(+), 91 deletions(-) diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 8201460..1a64d38 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({ .required("Timeline is required"), }); -function AddJob() { +function AddJob({popUpHandler}) { const ApiCall = new usersService(); const navigate = useNavigate(); @@ -46,7 +46,7 @@ function AddJob() { let { userDetails } = useSelector((state) => state.userDetails); - let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting + // let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting let [country, setCountry] = useState({ loading: true, @@ -129,16 +129,9 @@ function AddJob() { useEffect(() => { getUserCountry(); - setPageLoading(false); }, []); - return pageLoading.loading ? ( -
-
- -
-
- ) : ( + return (
{ return (
-

+ {/*

Create New Job -

+ */}
{/* inputs starts here */} {/* country */}
- {/* setCountry((prev) => ({...prev, data:e.target.value}))} - - /> */}
+// ) : diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 4877726..7541542 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -3,50 +3,41 @@ import { Link } from "react-router-dom"; import Layout from "../Partials/Layout"; import MyJobTable from "./MyJobTable"; import CommonHead from "../UserHeader/CommonHead"; +import AddJobPage from "../../views/AddJobPage"; export default function MyJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); + const [popUp, setPopUp] = useState(false); + const popUpHandler = () => { + setPopUp((prev) => !prev); }; - + return ( - +
{/* heading */} -
+

- - My Jobs - + My Jobs - Add Job - +

-
-
filterHandler("today")} - className="relative" - >
-
- +
+ + {/* Add Job List Popout */} + {popUp && } + {/* End of Add Job List Popout */} ); } diff --git a/src/index.css b/src/index.css index 26c3962..e1866e0 100644 --- a/src/index.css +++ b/src/index.css @@ -883,4 +883,9 @@ TODO: Responsive =========================== .job-popup{ top: 55px; +} + +.addJob-popup{ + top: 30px; + height: 55rem !important; } \ No newline at end of file diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx index 8cd8845..6031cbb 100644 --- a/src/views/AddJobPage.jsx +++ b/src/views/AddJobPage.jsx @@ -1,14 +1,40 @@ -import React from 'react' -import AddJob from '../components/AddJob/AddJob' -import Layout from '../components/Partials/Layout' +import React from "react"; +import AddJob from "../components/AddJob/AddJob"; +import ModalCom from "../components/Helpers/ModalCom"; - -function AddJobPage() { +function AddJobPage({ action, situation }) { return ( - - - - ) + +
+
+

+ Create New Job +

+ +
+ +
+ + ); } -export default AddJobPage \ No newline at end of file +export default AddJobPage; \ No newline at end of file diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index d98adb4..68189d9 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -1,41 +1,15 @@ -//import React from "react"; -import React, { useContext, useState, useEffect } from "react"; -// import MyTasks from "../components/MyTasks"; -// import UsersService from "../services/UsersService"; -import usersService from "../services/UsersService"; import MyJobs from "../components/MyJobs"; import { useSelector } from "react-redux"; export default function MyJobsPage() { - let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) - - const {userJobList} = useSelector((state) => state.userJobList) - - // const { jobListTable } = useSelector((state) => state.tableReload); - // const userApi = new usersService(); - // const activeJobList = userApi.getMyJobList(); - // const [myJobList, setMyJobList] = useState({ loading: true, data: [] }); - // const api = new usersService(); - - // const getMyJobList = async () => { - // setMyJobList({ loading: true, data: [] }); - // try { - // const res = await api.getMyJobList(); - // setMyJobList({ loading: false, data: res.data }); - // // setMyJobList(res.data); - // } catch (error) { - // setMyJobList({ loading: false, data: [] }); - // console.log("Error getting mode"); - // } - // }; - // useEffect(() => { - // getMyJobList(); - // }, [jobListTable]); - - // debugger; + let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); + const { userJobList } = useSelector((state) => state.userJobList); return ( <> - + ); } From 6d51fdfc19d89a281bca838888c17607211305b8 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 17 Jun 2023 06:33:08 +0100 Subject: [PATCH 2/2] popup closes --- src/components/AddJob/AddJob.jsx | 27 ++++++--------------------- src/views/AddJobPage.jsx | 2 +- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 1a64d38..2930858 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; import InputCom from "../Helpers/Inputs/InputCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import usersService from "../../services/UsersService"; import { useSelector, useDispatch } from "react-redux"; -import { tableReload } from '../../store/TableReloads' +import { tableReload } from "../../store/TableReloads"; import { Field, Form, Formik } from "formik"; import * as Yup from "yup"; @@ -38,16 +38,12 @@ const validationSchema = Yup.object().shape({ .required("Timeline is required"), }); -function AddJob({popUpHandler}) { +function AddJob({ popUpHandler }) { const ApiCall = new usersService(); - const navigate = useNavigate(); - - let dispatch = useDispatch() + let dispatch = useDispatch(); 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: true, status: false, @@ -109,8 +105,8 @@ function AddJob({popUpHandler}) { message: "Job Added Successfully", }); setTimeout(() => { - dispatch(tableReload({type:'JOBTABLE'})) - navigate("/myjobs", { replace: true }); + dispatch(tableReload({ type: "JOBTABLE" })); + popUpHandler() }, 1000); }) .catch((err) => { @@ -141,9 +137,6 @@ function AddJob({popUpHandler}) { {(props) => { return ( - {/*

- Create New Job -

*/}
{/* inputs starts here */} @@ -400,11 +393,3 @@ const publicArray = [ { duration: 21, name: "3 weeks" }, { duration: 28, name: "4 weeks" }, ]; - -// pageLoading.loading ? ( -//
-//
-// -//
-//
-// ) : diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx index 6031cbb..64660a5 100644 --- a/src/views/AddJobPage.jsx +++ b/src/views/AddJobPage.jsx @@ -31,7 +31,7 @@ function AddJobPage({ action, situation }) {
- +
);