Merge branch 'myjoblist-moved' of WrenchBoard/Users-Wrench into master

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);
       })

src/components/MyJobs/index.jsx

@@ -44,7 +44,6 @@ export default function MyJobs(props) {
           </div>
           <MyJobTable
               MyJobList={props.MyJobList}
-              reloadJobList={props.reloadJobList}
           />
         </div>
       </div>

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 {jobListTable} = useSelector((state) => state.tableReload)
-  const [myJobList, setMyJobList] = useState({loading: true, data:[]});
+  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
-  const api = new usersService();
+  // const api = new usersService();
 
-  const getMyJobList = async () => {
+  // const getMyJobList = async () => {
-    setMyJobList({loading: true, data:[]})
+  //   setMyJobList({loading: true, data:[]})
-    try {
+  //   try {
-      const res = await api.getMyJobList();
+  //     const res = await api.getMyJobList();
-      setMyJobList({loading: false, data:res.data})
+  //     setMyJobList({loading: false, data:res.data})
-      // setMyJobList(res.data);
+  //     // setMyJobList(res.data);
-    } catch (error) {
+  //   } catch (error) {
-      setMyJobList({loading: false, data:[]})
+  //     setMyJobList({loading: false, data:[]})
-      console.log("Error getting mode");
+  //     console.log("Error getting mode");
-    }
+  //   }
-  };
+  // };
-  useEffect(() => {
+  // useEffect(() => {
-    getMyJobList();
+  //   getMyJobList();
-  }, [jobListTable]);
+  // }, [jobListTable]);
-  // const getJobList = ()=>{
-  //   let  jobLists  = useSelector((state) => state.jobLists);
-  //   return jobLists;
-  // }
-  //---------------------------------------
 
   return (
     <>
@@ -75,7 +71,7 @@ export default function Layout({ children }) {
               logoutModalHandler={logoutModalHandler}
               sidebar={drawer}
               action={() => dispatch(drawerToggle())}
-              myJobList={myJobList}
+              myJobList={userJobList}
             />
           </div>
           {MobileSideBar && (
@@ -93,7 +89,7 @@ export default function Layout({ children }) {
               logoutModalHandler={logoutModalHandler}
               sidebar={MobileSideBar}
               action={() => setMobileSidebar.toggle()}
-              myJobList={myJobList}
+              myJobList={userJobList}
             />
           </div>
           {/* end sidebar */}

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 () => {

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
   },
 });

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;

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 [myJobList, setMyJobList] = useState({ loading: true, data: [] });
-  const api = new usersService();
+  // const api = new usersService();
 
-  const getMyJobList = async () => {
+  // const getMyJobList = async () => {
-    setMyJobList({ loading: true, data: [] });
+  //   setMyJobList({ loading: true, data: [] });
-    try {
+  //   try {
-      const res = await api.getMyJobList();
+  //     const res = await api.getMyJobList();
-      setMyJobList({ loading: false, data: res.data });
+  //     setMyJobList({ loading: false, data: res.data });
-      // setMyJobList(res.data);
+  //     // setMyJobList(res.data);
-    } catch (error) {
+  //   } catch (error) {
-      setMyJobList({ loading: false, data: [] });
+  //     setMyJobList({ loading: false, data: [] });
-      console.log("Error getting mode");
+  //     console.log("Error getting mode");
-    }
+  //   }
-  };
+  // };
-  useEffect(() => {
+  // useEffect(() => {
-    getMyJobList();
+  //   getMyJobList();
-  }, [jobListTable]);
+  // }, [jobListTable]);
 
   // debugger;
   return (
     <>
-      <MyJobs MyJobList={MyJobList} commonHeadData={commonHeadData} />
+      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadData} />
     </>
   );
 }