moved user joblist into it's own slice, to avoid unneccessary side menu display recalculation

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 [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}
             />
           </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 */}