From b2bfa6cd5414b8248094e5a1a07331815f1c254e Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 30 May 2023 07:29:57 +0100 Subject: [PATCH] moved user joblist into it's own slice, to avoid unneccessary side menu display recalculation --- src/components/AddJob/AddJob.jsx | 7 ++++- src/components/MyJobs/index.jsx | 1 - src/components/Partials/Layout.jsx | 44 ++++++++++++++---------------- src/middleware/AuthRoute.jsx | 20 ++++++++++++++ src/store/store.js | 4 ++- src/store/userJobList.js | 20 ++++++++++++++ src/views/MyJobsPage.jsx | 39 +++++++++++++------------- 7 files changed, 89 insertions(+), 46 deletions(-) create mode 100644 src/store/userJobList.js diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 7bda2ad..8201460 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -4,7 +4,9 @@ import InputCom from "../Helpers/Inputs/InputCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import usersService from "../../services/UsersService"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; + +import { tableReload } from '../../store/TableReloads' import { Field, Form, Formik } from "formik"; import * as Yup from "yup"; @@ -40,6 +42,8 @@ function AddJob() { const ApiCall = new usersService(); const navigate = useNavigate(); + let dispatch = useDispatch() + let { userDetails } = useSelector((state) => state.userDetails); let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting @@ -105,6 +109,7 @@ function AddJob() { message: "Job Added Successfully", }); setTimeout(() => { + dispatch(tableReload({type:'JOBTABLE'})) navigate("/myjobs", { replace: true }); }, 1000); }) diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 82e71a1..4877726 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -44,7 +44,6 @@ export default function MyJobs(props) { diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx index 9d7e04a..035bb39 100644 --- a/src/components/Partials/Layout.jsx +++ b/src/components/Partials/Layout.jsx @@ -14,6 +14,7 @@ import usersService from "../../services/UsersService"; export default function Layout({ children }) { const { drawer } = useSelector((state) => state.drawer); + const {userJobList} = useSelector((state) => state.userJobList) const dispatch = useDispatch(); const [MobileSideBar, setMobileSidebar] = useToggle(false); const [logoutModal, setLogoutModal] = useState(false); @@ -35,29 +36,24 @@ export default function Layout({ children }) { //--------------------------------------- /* LET U DEAL WITH JOB LIST - we need to centralize this list */ - const {jobListTable} = useSelector((state) => state.tableReload) - const [myJobList, setMyJobList] = useState({loading: true, data:[]}); - const api = new usersService(); + // const {jobListTable} = useSelector((state) => state.tableReload) + // 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]); - // const getJobList = ()=>{ - // let jobLists = useSelector((state) => state.jobLists); - // return jobLists; - // } - //--------------------------------------- + // 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]); return ( <> @@ -75,7 +71,7 @@ export default function Layout({ children }) { logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} - myJobList={myJobList} + myJobList={userJobList} /> {MobileSideBar && ( @@ -93,7 +89,7 @@ export default function Layout({ children }) { logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} - myJobList={myJobList} + myJobList={userJobList} /> {/* end sidebar */} diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index ba160ec..52bbb81 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -5,6 +5,7 @@ import LoadingSpinner from "../components/Spinners/LoadingSpinner"; import { useDispatch, useSelector } from "react-redux"; import { updateUserDetails } from "../store/UserDetails"; import { updateJobs } from "../store/jobLists"; +import { updateUserJobList } from "../store/userJobList"; const AuthRoute = ({ redirectPath = "/login", children }) => { const apiCall = useMemo(() => new usersService(), []); @@ -12,6 +13,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { const [lastActivityTime, setLastActivityTime] = useState(Date.now()); const [isLogin, setIsLogin] = useState({ loading: true, status: false }); const navigate = useNavigate(); + + const {jobListTable} = useSelector((state) => state.tableReload) useEffect(() => { //Removing Data stored at localStorage after session expires @@ -73,6 +76,23 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { } }, []); + useEffect(()=>{ + const getMyJobList = async () => { + dispatch(updateUserJobList({loading: true, data:[]})) + try { + const res = await apiCall.getMyJobList(); + // setMyJobList({loading: false, data:res.data}) + // setMyJobList(res.data); + dispatch(updateUserJobList({loading: false, data:res.data})) + } catch (error) { + dispatch(updateUserJobList({loading: false, data:[]})) + // setMyJobList({loading: false, data:[]}) + console.log("Error getting mode"); + } + }; + getMyJobList() + },[jobListTable]) + useEffect(() => { // Getting market data const getMarketActiveJobList = async () => { diff --git a/src/store/store.js b/src/store/store.js index 579e97d..fef9940 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -4,12 +4,14 @@ import drawerReducer from "./drawer"; import userDetailReducer from "./UserDetails"; import jobReducer from "./jobLists"; import tableReloadReducer from "./TableReloads"; +import userJobListReducer from './userJobList' export default configureStore({ reducer: { drawer: drawerReducer, userDetails: userDetailReducer, jobLists: jobReducer, - tableReload: tableReloadReducer + tableReload: tableReloadReducer, + userJobList: userJobListReducer }, }); \ No newline at end of file diff --git a/src/store/userJobList.js b/src/store/userJobList.js new file mode 100644 index 0000000..c951425 --- /dev/null +++ b/src/store/userJobList.js @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + userJobList: {loading: true, data: []} +}; + +export const userSlice = createSlice({ + name: "userJobList", + initialState, + reducers: { + updateUserJobList: (state,action) => { + state.userJobList = {...action.payload} + }, + }, +}); + +// Action creators are generated for each case reducer function +export const { updateUserJobList } = userSlice.actions; + +export default userSlice.reducer; \ No newline at end of file diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index c9d6e25..9d3d3c2 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -12,32 +12,33 @@ export default function MyJobsPage() { return 0; }; - const { jobListTable } = useSelector((state) => state.tableReload); - + 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 [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]); + // 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; return ( <> - + ); }