diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 3a2a0fe..facd5f9 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -42,15 +42,15 @@ export default function FamilyTable({ className, familyList, loader }) { key={idx} > -
-
+
+
data
-
+

{`${firstname} ${lastname} (${age})`}

diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 6ea5315..0e161c9 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -7,7 +7,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; export default function MyActiveJobTable({ MyJobList, className }) { - const navigate = useNavigate() + const navigate = useNavigate(); const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); @@ -51,15 +51,15 @@ export default function MyActiveJobTable({ MyJobList, className }) { className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" > -
-
+
+
data
-
+

{value.title}

@@ -100,7 +100,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
- {MyJobList && MyJobList?.result_list && ( + {MyJobList.loading ? ( + + ) : (
@@ -100,8 +101,8 @@ export default function MyJobTable({ MyJobList, className }) { {selectedCategory === "All Categories" ? ( <> {MyJobList && - MyJobList?.result_list && - MyJobList.result_list.length > 0 && + MyJobList?.data?.result_list && + MyJobList.data?.result_list.length > 0 && currentJobList.map((value, index) => ( + + ))} + + } + +
-
-
+
+
data
-
+

{value.title}

@@ -196,11 +197,11 @@ export default function MyJobTable({ MyJobList, className }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - MyJobList?.result_list?.length + MyJobList?.data?.result_list?.length ? true : false } - data={MyJobList?.result_list} + data={MyJobList?.data?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} /> @@ -227,6 +228,7 @@ export default function MyJobTable({ MyJobList, className }) { onClose={() => { setDeleteJobPopout({ show: false, data: {} }); }} + reloadJobList={reloadJobList} situation={deleteJobPopout.show} /> )} diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 339e678..c1ef1a0 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -40,7 +40,7 @@ export default function MyJobs(props) { >
- +
diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx index b63e091..d40c81e 100644 --- a/src/components/MyPendingJobs/MyPendingJobTable.jsx +++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx @@ -1,112 +1,144 @@ import React, { useState } from "react"; -import dataImage1 from "../../assets/images/data-table-user-1.png"; import dataImage2 from "../../assets/images/data-table-user-2.png"; -import dataImage3 from "../../assets/images/data-table-user-3.png"; -import dataImage4 from "../../assets/images/data-table-user-4.png"; -import SelectBox from "../Helpers/SelectBox"; import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; -import PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; +import PaginatedList from "../Pagination/PaginatedList"; -export default function MyPendingJobTable({MyJobList, className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); +export default function MyPendingJobTable({ MyJobList, className }) { + const filterCategories = ["All Categories", "Explore", "Featured"]; + const [selectedCategory, setCategory] = useState(filterCategories[0]); + let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW - let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentActiveJobList = MyJobList?.result_list?.slice( + indexOfFirstItem, + indexOfLastItem + ); - const [currentPage, setCurrentPage] = useState(0); - const indexOfFirstItem = Number(currentPage); - const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem); - - const handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) - } + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; - return ( -
- {MyJobList && MyJobList?.result_list && -
- - - {/**/} - {/* */} - {/* */} - {/**/} + return ( +
+ {MyJobList && MyJobList?.result_list && ( +
+
All Product.
+ + {/**/} + {/* */} + {/* */} + {/**/} - { - <> - {MyJobList && MyJobList?.result_list && - MyJobList.result_list.length > 0 && - currentActiveJobList.map((value, index) => ( - - + - - - - - - - - ))} - - - - } - -
All Product.
-
-
- data -
-
-

- {value.title} -

-
- {value.description} -
- - Price: {value.price*0.01} - - - Duration: {value.timeline_days} day(s) - - - Expire: {value.expire} - - - Send to: {value.job_to} - + { + <> + {MyJobList && + MyJobList?.result_list && + MyJobList.result_list.length > 0 && + currentActiveJobList.map((value, index) => ( +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {value.price * 0.01} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {value.expire} + + + + Send to:{" "} + + {" "} + {value.job_to} + + +
+
+ 		- -
- {/* PAGINATION BUTTON */} - = MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} -
+
+ +
+ {/* PAGINATION BUTTON */} + = + MyJobList?.result_list.length + ? true + : false } - - {/* Active Job Popout */} - {jobPopout.show && - {setJobPopout({show:false, data:{}})}} situation={jobPopout.show} /> - } - {/* End of Active Job Popout */} + data={MyJobList?.result_list} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */}
- ); + )} + + {/* Active Job Popout */} + {jobPopout.show && ( + { + setJobPopout({ show: false, data: {} }); + }} + situation={jobPopout.show} + /> + )} + {/* End of Active Job Popout */} +
+ ); } diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 679dd13..a069186 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -1,48 +1,42 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; -import dataImage2 from "../../assets/images/data-table-user-2.png"; -import dataImage3 from "../../assets/images/data-table-user-3.png"; -import dataImage4 from "../../assets/images/data-table-user-4.png"; -import SelectBox from "../Helpers/SelectBox"; import PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; export default function MyJobTable({ className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); const [tasksData, setTasksData] = useState(null); + const [loader, setLoader] = useState(true); let apiCall = useMemo(() => new usersService(), []); const displayTasks = useCallback(async () => { try { const res = await apiCall.getMyActiveTaskList(); - console.log('Ebube step', res) let { - data: { result_list }, - internal_return, - statusText, - } = await res; + data: { result_list }, + internal_return, + statusText, + } = await res; if (internal_return < 0 || statusText !== "OK") return; setTasksData(result_list); + setLoader(false); } catch (error) { throw new Error(error); } }, [apiCall]); useEffect(() => { - displayTasks() - }, []) - - let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL + displayTasks(); + }, []); const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentTask = data.slice(indexOfFirstItem, indexOfLastItem); + const currentTask = tasksData?.slice(indexOfFirstItem, indexOfLastItem); const handlePagination = (e) => { handlePagingFunc(e, setCurrentPage); @@ -54,438 +48,29 @@ export default function MyJobTable({ className }) { className || "" }`} > - {tasksData && ( + {loader ? ( +
+ +
+ ) : (
- {/* - - - - - - - - - - - - {selectedCategory === "All Categories" - ? currentTask.map((item, index) => ( - - - - - - - - - - )) - : selectedCategory === "Explore" - ? currentTask.map((item, index) => ( - - - - - - - - - - )) - : currentTask.map((item, index) => ( - - - - - - - - - - ))} - -
All ProductValueUSD24H%BitsTimeStatus
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
*/} - -
+
{tasksData?.length > 0 ? ( - tasksData?.map((task, idx) => ( + currentTask?.map((task, idx) => (
-
+
data
-
+

{task?.title}

@@ -494,19 +79,29 @@ export default function MyJobTable({ className }) { Price: - {task?.price} + + {task?.price} + Duration: - {Number(task?.timeline_days) === 1 ? `${task?.timeline_days} day` : `${task?.timeline_days} day(s)`} + + {Number(task?.timeline_days) === 1 + ? `${task?.timeline_days} day` + : `${task?.timeline_days} day(s)`} + Due Date: - {task?.delivery_date} + + {task?.delivery_date} + Confirmation: - {task?.contract} + + {task?.contract} +
@@ -537,11 +132,11 @@ export default function MyJobTable({ className }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - data.length + tasksData?.length ? true : false } - data={data} + data={tasksData} start={indexOfFirstItem} stop={indexOfLastItem} /> diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx index 50d3feb..a7dfd10 100644 --- a/src/components/jobPopout/DeleteJobPopout.jsx +++ b/src/components/jobPopout/DeleteJobPopout.jsx @@ -3,8 +3,11 @@ import ModalCom from '../Helpers/ModalCom' import { useNavigate } from 'react-router-dom' import usersService from '../../services/UsersService' import LoadingSpinner from '../Spinners/LoadingSpinner' +import { useDispatch } from 'react-redux' +import { tableReload } from '../../store/TableReloads' function DeleteJobPopout({details, onClose, situation}) { + let dispatch = useDispatch() const navigate = useNavigate() const ApiCall = new usersService() @@ -26,10 +29,10 @@ function DeleteJobPopout({details, onClose, situation}) { } setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'}) setTimeout(()=>{ - navigate('/myjobs', {replace: true}) - onClose() - // window.location.reload() - }, 1000) + dispatch(tableReload({type:'JOBTABLE'})) + navigate('/myjobs', {replace: true}) + onClose() + }, 1000) }).catch(error => { setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'}) }).finally(()=>{ diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index 7addfcc..72e9e7b 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/src/components/jobPopout/EditJobPopout.jsx @@ -7,7 +7,13 @@ import LoadingSpinner from "../Spinners/LoadingSpinner"; import usersService from "../../services/UsersService"; import { useNavigate } from "react-router-dom"; +import { tableReload } from "../../store/TableReloads"; +import { useDispatch } from "react-redux"; + const EditJobPopOut = ({ details, onClose, situation, country }) => { + + const dispatch = useDispatch() + let [requestStatus, setRequestStatus] = useState({ loading: false, status: false, @@ -69,6 +75,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => { if (data?.internal_return < 0) return; setRequestStatus({ loading: false, message: null }); setTimeout(() => { + dispatch(tableReload({type:'JOBTABLE'})) navigate("/myjobs", { replace: true }); onClose(); }, 1000); diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js new file mode 100644 index 0000000..486e258 --- /dev/null +++ b/src/store/TableReloads.js @@ -0,0 +1,29 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + jobListTable: false, + pendingListTable: false +}; + +export const tableReloadSlice = createSlice({ + name: "tableReload", + initialState, + reducers: { + tableReload: (state, action) => { + switch(action.payload.type){ + case 'JOBTABLE': + state.jobListTable = !state.jobListTable; + return + case 'PENDINGTABLE' : + state.pendingListTable = !state.pendingListTable; + return + default: + return state + } + }, + }, +}); + +export const { tableReload } = tableReloadSlice.actions; + +export default tableReloadSlice.reducer; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index 07fbf4f..579e97d 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -3,11 +3,13 @@ import drawerReducer from "./drawer"; import userDetailReducer from "./UserDetails"; import jobReducer from "./jobLists"; +import tableReloadReducer from "./TableReloads"; export default configureStore({ reducer: { drawer: drawerReducer, userDetails: userDetailReducer, - jobLists: jobReducer + jobLists: jobReducer, + tableReload: tableReloadReducer }, }); \ No newline at end of file diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index 6e85279..6faea5e 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -4,25 +4,31 @@ import React, { useContext,useState, useEffect } from "react"; // import UsersService from "../services/UsersService"; import usersService from "../services/UsersService"; import MyJobs from "../components/MyJobs"; +import { useSelector } from "react-redux"; export default function MyJobsPage() { + const {jobListTable} = useSelector((state) => state.tableReload) + // const userApi = new usersService(); // const activeJobList = userApi.getMyJobList(); - const [MyJobList, setMyJobList] = useState([]); + 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(res.data); + setMyJobList({loading: false, data:res.data}) + // setMyJobList(res.data); } catch (error) { + setMyJobList({loading: false, data:[]}) console.log("Error getting mode"); } }; useEffect(() => { getMyJobList(); - }, []); + }, [jobListTable]); // debugger; return (