.

src/Routers.jsx

@@ -89,7 +89,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          <Route exact path="/add-job" element={<AddJobPage />} />
+          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />

src/components/AddJob/AddJob.jsx

@@ -127,7 +127,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCountry();
   }, []);
 
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -237,7 +236,9 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.description && props.touched.description}
+                      errorBorder={
+                        props.errors.description && props.touched.description
+                      }
                     />
                   </div>
 
@@ -276,7 +277,10 @@ function AddJob({ popUpHandler, categories }) {
                         aria-labelledby="checked-group"
                       >
                         {Object.entries(categories).map(([key, value]) => (
-                          <label key={key} className="flex gap-1 w-full items-center">
+                          <label
+                            key={key}
+                            className="flex gap-1 w-full items-center"
+                          >
                             <Field
                               type="checkbox"
                               name="category"
@@ -354,8 +358,8 @@ function AddJob({ popUpHandler, categories }) {
 
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
-                      to="/myjobs"
+                    <button
+                      type="button"
                       className="text-18 text-light-red tracking-wide "
                     >
                       <span
@@ -365,7 +369,7 @@ function AddJob({ popUpHandler, categories }) {
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </button>
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />

src/components/MyJobs/MyJobTable.jsx

@@ -186,9 +186,9 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       <div className="header w-full flex justify-between items-center mb-5">
         <div className="flex space-x-2 items-center">
           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-            All Jobs
+            {filterCategories[selectedCategory]} Jobs
           </h1>
-        </div>
+        </div>  
         <SelectBox
           action={handleSetCategory}
           datas={Object.values(filterCategories)}

src/components/MyJobs/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
@@ -7,13 +7,26 @@ import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
   let { state } = useLocation();
-  const [popUp, setPopUp] = useState(state?.popup ? true : false);
+  const navigate = useNavigate();
+  const [popUp, setPopUp] = useState(false);
+
+  console.log(state)
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
+
+    if (state?.popup) navigate("/", { replace: true });
   };
 
   const categoryOptions = props.MyJobList?.data?.categories;
 
+  useEffect(() => {
+    if (!state?.popup) {
+      setPopUp(false);
+    } else {
+      setPopUp(true);
+    }
+  }, [state?.popup]);
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -4,6 +4,8 @@ import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 
 import usersService from "../../services/UsersService";
+// import { handlePagingFunc } from "../Pagination/HandlePagination";
+// import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
 
@@ -21,7 +23,15 @@ export default function ManageInterestOffer(props) {
 
     let [messageListReload, setMessageListReload] = useState(false) // STATE TO DETERMINE WHEN MESSAGE LIST WILL RELOAD
 
-    const [messageList, setMessageList] = useState({loading: true, data: []}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    const [messageList, setMessageList] = useState({loading: true, data: [1,2,3,4,5,6,7,8,95,6,7,8,9]}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    // const [currentPage, setCurrentPage] = useState(0);
+    // const indexOfFirstItem = Number(currentPage);
+    // const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    // const handlePagination = (e) => {
+    //     handlePagingFunc(e, setCurrentPage);
+    // };
 
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
@@ -102,17 +112,14 @@ export default function ManageInterestOffer(props) {
         })
     }
 
-    useEffect(()=>{ //API to get Offer Interest message list
-        let reqData = { // API PAYLOADS
-            msg_type: 'MRKTINT',
-            offer_uid: props.offerDetails.offer_uid,
-            interest_uid: props.offerDetails.interest_uid
-        }
-        setMessageList(prev => ({...prev, loading: true}))
-        apiCall.offerInterestListMsg(reqData).then(res=>{
-            setMessageList({loading: false, data:res?.data?.result_list})
+    useEffect(()=>{
+        // run API to get message to replace message array above, add reload variable as dependence array. CODE IS DUMMY FOR NOW
+        setMessageList({loading: true, data: []})
+        apiCall.offerInterestMsg().then(res=>{
+            console.log('Data', res.data)
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
         }).catch(err => {
-            setMessageList(prev => ({...prev, loading: false}))
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
             console.log('Failed', err)
         })
     },[messageListReload])
@@ -281,14 +288,36 @@ export default function ManageInterestOffer(props) {
                                         <div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
                                         { messageList.loading ?
                                         <LoadingSpinner color='sky-blue' size='16' />
-                                        : messageList?.data?.map((item, index)=>(
+                                        : messageList.data.map((item, index)=>(
                                             <div key={index} className="my-2 w-full flex items-center gap-1">
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">{item.added.split(' ')[0]}-from { }<span className="font-normal">{item.sender || 'Dummy name'}</span></p>
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">{item.msg}</p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
                                             </div>
                                             ))
                                         }
+                                        {/* {messageList.data.map((item, index)=>(
+                                            <div key={index} className="my-2 w-full flex items-center gap-1">
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                            </div>
+                                        ))} */}
                                         </div>
+
+                                        {/* PAGINATION BUTTON */}
+                                        {/* <PaginatedList
+                                            onClick={handlePagination}
+                                            prev={currentPage == 0 ? true : false}
+                                            next={
+                                                currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                                                messageList?.data?.length
+                                                    ? true
+                                                    : false
+                                            }
+                                            data={messageList?.data}
+                                            start={indexOfFirstItem}
+                                            stop={indexOfLastItem}
+                                        /> */}
+                                        {/* END OF PAGINATION BUTTON */}
                                     </div>
                                     }
                                 </div>

src/components/Partials/MobileSideBar.jsx

@@ -228,7 +228,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      state={true}
                     />
                   </ul>
                 </div>
@@ -302,12 +302,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, popup }) => {
   return (
     <li className="item group">
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Partials/Sidebar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -131,27 +136,25 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-            <div
-              className={`menu-item transition-all duration-300 ease-in-out ${
-                sidebar ? "my-5" : ""
-              }`}
-            >
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">
-                  Family
-                </h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <ListItem
-                    title="Family Corner"
-                    route="/acc-family"
-                    iconName="people-two"
-                    sidebar={sidebar}
-                  />
-                </ul>
-              </div>
+          <div
+            className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "my-5" : ""
+            }`}
+          >
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">Family</h1>
             </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="people-two"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
         {userDetails?.account_type !== "FAMILY" && (
           <>
@@ -252,7 +255,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -326,12 +329,12 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
     <li className={`item group`}>
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/services/UsersService.js

@@ -730,7 +730,7 @@ class usersService {
     return this.postAuxEnd("/paylistcard", postData);
   }
 
-    // END POINT TO SEND OFFER INTEREST MESSAGE
+    // END POINT TO SEND AND GET OFFER INTEREST MESSAGE
     offerInterestMsg(reqData) {
       var postData = {
         uid: localStorage.getItem("uid"),
@@ -741,18 +741,6 @@ class usersService {
       };
       return this.postAuxEnd("/offerinterestmsg", postData);
     }
-
-    // END POINT TO GET OFFER INTEREST MESSAGE
-    offerInterestListMsg(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        action: 13037,
-        ...reqData
-      };
-      return this.postAuxEnd("/offerinterestlistmsg", postData);
-    }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)