Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-bubble-length

src/components/Partials/MobileSideBar.jsx

@@ -4,9 +4,16 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
+import { useSelector } from "react-redux";
 
 export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
+  let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
+
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const marketData = jobLists?.result_list;
+  let noOfJobs = marketData?.length;
+
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -73,49 +80,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                  to="/"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="dashboard" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    Dashboard
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/market"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="active-bids" />
-                  </span>
-                  <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                    Market
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
-                      0
-                    </span>
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/mytask"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="market" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    My Task(s)
-
-                  </span>
-                </NavLink>
-              </li>
+              {/* Using mini component reduces the bulk amount of html */}
+              {[
+                { name: "Dashboard", path: "/" },
+                { name: "Market", path: "/market", bubble: noOfJobs },
+                { name: "My Task(s)", path: "/mytask" },
+              ].map(({ name, path, bubble }, idx) => (
+                <ListItem
+                  key={idx}
+                  title={name}
+                  route={path}
+                  bubble={bubble}
+                  sidebar
+                />
+              ))}
               {/*<li className="item group">*/}
               {/*  <NavLink*/}
               {/*    to="/notification"*/}
@@ -184,41 +162,67 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
-        <div className="setting-item">
-          <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-          </div>
-          <div className="items">
-            <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  to="/myjobs"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="people-two" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    My Jobs
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/market"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="setting" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    Active Job(s)
-                  </span>
-                </NavLink>
-              </li>
-            </ul>
+
+        {!userDetails.post_jobs ? 
+          <div className="setting-item">
+          <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
+            <NavLink to="/start-job" className="nav-item flex items-center justify-start space-x-3.5">
+              <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
+                Enable Job Post
+              </span>
+            </NavLink>
           </div>
         </div>
+        :
+          <div className="setting-item">
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+            </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <li className="item group">
+                  <NavLink
+                    to="/myjobs"
+                    className="nav-item flex items-center justify-start space-x-3.5"
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                      <Icons name="people-two" />
+                    </span>
+                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                      My Jobs
+                    </span>
+                  </NavLink>
+                </li>
+                <li className="item group">
+                  <NavLink
+                    to="/my-active-jobs"
+                    className="nav-item flex items-center justify-start space-x-3.5"
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                      <Icons name="setting" />
+                    </span>
+                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                      Pending
+                    </span>
+                  </NavLink>
+                </li>
+                <li className="item group">
+                  <NavLink
+                    to="/my-active-jobs"
+                    className="nav-item flex items-center justify-start space-x-3.5"
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                      <Icons name="setting" />
+                    </span>
+                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                      Active Job(s)
+                    </span>
+                  </NavLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+      }
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -284,3 +288,33 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
     </div>
   );
 }
+
+const ListItem = ({ sidebar, route, title, bubble }) => {
+  return (
+    <li className="item group">
+      <NavLink
+        to={route}
+        className={`nav-item flex items-center  ${
+          ((navData) => (navData.isActive ? "active" : ""),
+          sidebar ? "justify-start space-x-3.5" : "justify-center")
+        }`}
+      >
+        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+          <Icons name="market" />
+        </span>
+        <span
+          className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+            sidebar ? "active flex-1" : "w-0"
+          }`}
+        >
+          {title && title}
+          {bubble && (
+            <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+              {bubble}
+            </span>
+          )}
+        </span>
+      </NavLink>
+    </li>
+  );
+};

src/components/Partials/Sidebar.jsx

@@ -9,6 +9,8 @@ import { useSelector } from "react-redux";
 export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   const darkMode = useContext(DarkModeContext);
 
+  let { userDetails } = useSelector((state) => state.userDetails);
+
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length;
@@ -227,6 +229,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </NavLink>
           </div>
         </div>
+
+        {!userDetails.post_jobs ? 
         <div className="setting-item">
           <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
             <NavLink to="/start-job">
@@ -236,6 +240,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </NavLink>
           </div>
         </div>
+        :
         <div className="setting-item">
           <div className="heading mb-5">
             <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -345,6 +350,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
+        }
+
       </div>
       {/* signout area */}
       {sidebar ? (