From 6ae8be146ff5d56e326e499bc3a788fcd85db0ed Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 22 May 2023 15:22:04 +0100 Subject: [PATCH 1/4] manage layout accnt type and fixed width of table --- src/components/FamilyAcc/FamilyTable.jsx | 2 +- .../Helpers/Inputs/InputCom/index.jsx | 2 +- src/components/MyJobs/MyJobTable.jsx | 2 +- src/components/MyTasks/MyJobTable.jsx | 2 +- src/components/Partials/MobileSideBar.jsx | 264 +++++----- src/components/Partials/Sidebar.jsx | 460 +++++------------- 6 files changed, 244 insertions(+), 488 deletions(-) diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index f1e8d91..a3d6dec 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -52,7 +52,7 @@ export default function FamilyTable({ className, familyList, loader }) { >
-
+
data
-
+
data
-
+
data {/* 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) => ( + { name: "Dashboard", path: "/", iconName: "market" }, + userDetails?.account_type !== "family" + ? { + name: "Market", + path: "/market", + bubble: noOfJobs, + iconName: "market", + } + : {}, + { name: "My Task(s)", path: "/mytask", iconName: "market" }, + ].map(({ name, path, bubble, iconName }, idx) => ( ))} - {/*
  • */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Messages*/} - {/* */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* My Wallet*/} - {/* */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Resources*/} - {/* */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* History*/} - {/* */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Refer a Friend*/} - {/* */} - {/* */} - {/*
    • */}
    - {!userDetails.post_jobs ? ( -
    -
    - - - Enable Job Post - - -
    -
    - ) : jobLists?.result_list?.length ? ( -
    -
    -

    My Jobs

    -
    -
    -
      -
    • - - - - - - My Jobs - - -
      • -
    • - - - - - - Pending - - -
      • -
    • - - - - - - Active Job(s) - - -
      • -
    -
    -
    - ) : ( -
    -
    -

    My Jobs

    -
    -
    -
      -
    • - - - - - - My Jobs - - -
      • -
    -
    -
    + {userDetails?.account_type !== "family" && ( + <> + {!userDetails?.post_jobs ? ( +
    + {/* menus item */} +
    +
    +
    +

    + Job Post +

    +
    +
      +
    • + (navData.isActive ? "active" : ""), + sidebar + ? "justify-start space-x-3.5" + : "justify-center") + }`} + > + + + + + Enable Job Post + + +
      • +
    +
    +
    +
    + ) : jobLists?.result_list?.length ? ( +
    +
    +

    + My Jobs +

    +
    +
    +
      + {[ + { name: "List", path: "/myjobs", iconName: "people-two" }, + { + name: "Pending", + path: "/my-pending-jobs", + iconName: "people-two", + }, + { + name: "Active", + path: "/my-active-jobs", + iconName: "people-two", + }, + ].map(({ name, path, iconName }, idx) => ( + + ))} +
    +
    +
    + ) : ( +
    +
    +

    + My Jobs +

    +
    +
    +
      + +
    +
    +
    + )} + )}
    {/* signout area */} diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx index 0bb50a2..670a022 100644 --- a/src/components/Partials/Sidebar.jsx +++ b/src/components/Partials/Sidebar.jsx @@ -10,6 +10,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) { const darkMode = useContext(DarkModeContext); let { userDetails } = useSelector((state) => state.userDetails); + console.log(userDetails); //const jobLists = getJobList(); // pass from upper - we need in a lot of places let { jobLists } = useSelector((state) => state.jobLists); const marketData = jobLists?.result_list; @@ -103,185 +104,69 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
      {/* 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) => ( + { name: "Dashboard", path: "/", iconName: "market" }, + userDetails?.account_type !== "family" + ? { + name: "Market", + path: "/market", + bubble: noOfJobs, + iconName: "market", + } + : {}, + { name: "My Task(s)", path: "/mytask", iconName: "market" }, + ].map(({ name, path, bubble, iconName }, idx) => ( ))} - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Messages*/} - {/* */} - {/* */} - {/*
      • */} - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* My Wallet*/} - {/* */} - {/* */} - {/*
      • */} - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Resources*/} - {/* */} - {/* */} - {/*
      • */} - - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* History*/} - {/* */} - {/* */} - {/*
      • */} - - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Refer a Friend*/} - {/* */} - {/* */} - {/*
      • */}
    - {/*
    -
    - - - Family Account - - -
    -
    */} - {/* menu and settings item */} -
    - {/* menus item */} -
    - {/*
    - -

    - Family Corner -

    -     -
    */} -
    + {userDetails?.account_type !== "family" && ( +
    + {/* menus item */} +
    +
    -

    Family

    +

    + Family +

      -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - Family Corner - - -
      • +
    +
    -
    + )} - {!userDetails.post_jobs ? ( - -
    - {/* menus item */} -
    - {/*
    + {userDetails?.account_type !== "family" && ( + <> + {!userDetails?.post_jobs ? ( +
    + {/* menus item */} +
    + {/*
    @@ -290,175 +175,92 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
    */} -
    -
    -

    Job Post

    +
    +
    +

    + Job Post +

    +
    +
      +
    • + (navData.isActive ? "active" : ""), + sidebar + ? "justify-start space-x-3.5" + : "justify-center") + }`} + > + + + + + Enable Job Post + + +
      • +
    +
    -
      -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - Enable Job Post - - -
      • -
    -
    -
    - ) : jobLists?.result_list?.length ? ( -
    -
    -

    My Jobs

    -
    -
    -
      -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - List - - -
      • -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - Pending - - -
      • -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - Active - - -
      • - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* My Profile*/} - {/* */} - {/* */} - {/*
      • */} - {/*
    • */} - {/* (navData.isActive ? "active" : ""),*/} - {/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/} - {/* }`}*/} - {/* >*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Settings*/} - {/* */} - {/* */} - {/*
      • */} -
    -
    -
    - ) : ( -
    -
    -

    My Jobs

    -
    -
    -
      -
    • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - - Add Job - - -
      • -
    -
    -
    + ) : jobLists?.result_list?.length ? ( +
    +
    +

    + My Jobs +

    +
    +
    +
      + {[ + { name: "List", path: "/myjobs", iconName: "people-two" }, + { + name: "Pending", + path: "/my-pending-jobs", + iconName: "people-two", + }, + { + name: "Active", + path: "/my-active-jobs", + iconName: "people-two", + }, + ].map(({ name, path, iconName }, idx) => ( + + ))} +
    +
    +
    + ) : ( +
    +
    +

    + My Jobs +

    +
    +
    +
      + +
    +
    +
    + )} + )}
    {/* signout area */} @@ -526,7 +328,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) { ); } -const ListItem = ({ sidebar, route, title, bubble }) => { +const ListItem = ({ sidebar, route, title, bubble, iconName }) => { return (
  • { }`} > - + Date: Mon, 22 May 2023 17:41:55 +0100 Subject: [PATCH 2/4] fixed bug --- src/components/AuthPages/Login/index.jsx | 2 +- src/components/Partials/Header.jsx | 366 +++++++++++----------- src/components/Partials/MobileSideBar.jsx | 46 +-- src/components/Partials/Sidebar.jsx | 247 ++++++++------- 4 files changed, 334 insertions(+), 327 deletions(-) diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index b67f13a..17e0818 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -154,7 +154,7 @@ export default function Login() { Sign in
    • */} + {userDetails && userDetails?.account_type !== "FAMILY" && ( +
  • + +
    +

    + My Profile +

    +
    + +
    • + )}
  • - -
    -

    - My Profile -

    -
    - -
    • -
  • - +

    My Wallet @@ -681,155 +674,150 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {

    • -
  • - -
    -

    - Reports > -

    -
    - - {/* report list items*/} -
    -
      -
    • - -
      -

      - Referrals -

      + {userDetails && userDetails?.account_type !== "FAMILY" && ( + <> +
    • + +
      +

      + Reports > +

      +
      + + {/* report list items*/} +
      +
        +
      • + +
        +

        + Referrals +

        +
        + +
        • +
      • + +
        +

        + Billing +

        +
        + +
        • +
      • + +
        +

        + Payments +

        +
        + +
        • +
      • + +
        +

        + Completed Jobs +

        +
        + +
        • +
      • + +
        +

        + Previous Task +

        +
        + +
        • +
      +
      +
      +
      +
      - -
      • -
    • - -
      -

      - Billing -

      -
      - -
      • -
    • - -
      -

      - Payments -

      -
      - -
      • -
    • - -
      -

      - Completed Jobs -

      -
      - -
      • -
    • - -
      -

      - Previous Task -

      -
      - -
      • -
    -
    -
    -
    -
    +

    + Notifications +

    +
    -

    - Notifications -

    -
    -
    • - {/* end report list items*/} - -
  • - -
    -

    - My Statements -

    -
    - -
    • + {/* end report list items*/} + +
  • + +
    +

    + My Statements +

    +
    + +
    • + + )}
      -
    • - -
      -
      -

      Language

      -
      -

      English

      - U.S.A Flag + {userDetails && userDetails?.account_type !== "FAMILY" && ( + <> +
    • + +
      +
      +

      Language

      +
      +

      English

      + U.S.A Flag +
      +
      + + {/* langauge list items*/} +
      +
        +
      • + +
        +
        + U.S.A Flag +

        English

        +
        +
        + +
        • +
      -
    - - {/* langauge list items*/} -
    -
      -
    • - -
      -
      - U.S.A Flag -

      English

      -
      -
      - -
      • -
    -
    - {/* end Language list items*/} - -
  • - -
    -

    - Account Settings -

    -
    - -
    • + {/* end Language list items*/} + +
  • + +
    +

    + Account Settings +

    +
    + +
    • + + )}
  • @@ -839,7 +827,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
    • -
    +
    diff --git a/src/components/Partials/MobileSideBar.jsx b/src/components/Partials/MobileSideBar.jsx index 37ea8af..b35704c 100644 --- a/src/components/Partials/MobileSideBar.jsx +++ b/src/components/Partials/MobileSideBar.jsx @@ -1,10 +1,12 @@ import React, { useContext } from "react"; +import { useSelector } from "react-redux"; import { NavLink } from "react-router-dom"; -import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg"; -import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg"; +import { + default as logo, + default as logo3, +} from "../../assets/images/wrenchboard.png"; //logo-2.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); @@ -81,32 +83,32 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
      {/* Using mini component reduces the bulk amount of html */} - {[ - { name: "Dashboard", path: "/", iconName: "market" }, - userDetails?.account_type !== "family" - ? { - name: "Market", - path: "/market", - bubble: noOfJobs, - iconName: "market", - } - : {}, - { name: "My Task(s)", path: "/mytask", iconName: "market" }, - ].map(({ name, path, bubble, iconName }, idx) => ( + + {userDetails && userDetails?.account_type !== "FAMILY" && ( - ))} + )} +
    - {userDetails?.account_type !== "family" && ( + {userDetails?.account_type !== "FAMILY" && ( <> {!userDetails?.post_jobs ? (
    diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx index 670a022..3296517 100644 --- a/src/components/Partials/Sidebar.jsx +++ b/src/components/Partials/Sidebar.jsx @@ -1,10 +1,12 @@ import React, { useContext, useEffect } from "react"; +import { useSelector } from "react-redux"; import { NavLink } from "react-router-dom"; -import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg"; -import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg"; +import { + default as logo, + default as logo3, +} from "../../assets/images/wrenchboard.png"; //logo-2.svg"; import DarkModeContext from "../Contexts/DarkModeContext"; import Icons from "../Helpers/Icons"; -import { useSelector } from "react-redux"; export default function Sidebar({ sidebar, action, logoutModalHandler }) { const darkMode = useContext(DarkModeContext); @@ -16,6 +18,10 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) { const marketData = jobLists?.result_list; let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length; + function accntType() { + return userDetails?.account_type !== "FAMILY"; + } + useEffect(() => { const title = document.querySelectorAll(".menu-setting-items .heading"); if (sidebar) { @@ -103,33 +109,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
      {/* Using mini component reduces the bulk amount of html */} - {[ - { name: "Dashboard", path: "/", iconName: "market" }, - userDetails?.account_type !== "family" - ? { - name: "Market", - path: "/market", - bubble: noOfJobs, - iconName: "market", - } - : {}, - { name: "My Task(s)", path: "/mytask", iconName: "market" }, - ].map(({ name, path, bubble, iconName }, idx) => ( + + {userDetails && userDetails?.account_type !== "FAMILY" && ( - ))} + )} +
    {/* menu and settings item */} - {userDetails?.account_type !== "family" && ( + {userDetails?.account_type !== "FAMILY" && (
    {/* menus item */}
    )} - {userDetails?.account_type !== "family" && ( - <> - {!userDetails?.post_jobs ? ( -
    - {/* menus item */} -
    - {/*
    + <> + {!userDetails?.post_jobs ? ( +
    + {/* menus item */} +
    + {/*
    @@ -175,93 +180,98 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
    */} -
    -
    -

    - Job Post -

    -
    -
      -
    • - (navData.isActive ? "active" : ""), - sidebar - ? "justify-start space-x-3.5" - : "justify-center") +
      +
      +

      + Job Post +

      +
      +
        +
      • + (navData.isActive ? "active" : ""), + sidebar + ? "justify-start space-x-3.5" + : "justify-center") + }`} + > + + + + - - - - - Enable Job Post - - -
        • + Enable Job Post + + + +
      +
      +
    +
    + ) : jobLists?.result_list?.length ? ( + <> + {userDetails?.account_type !== "FAMILY" && ( +
    +
    +

    + My Jobs +

    +
    +
    +
      + {[ + { + name: "List", + path: "/myjobs", + iconName: "people-two", + }, + { + name: "Pending", + path: "/my-pending-jobs", + iconName: "people-two", + }, + { + name: "Active", + path: "/my-active-jobs", + iconName: "people-two", + }, + ].map(({ name, path, iconName }, idx) => ( + + ))}
    + )} + + ) : ( +
    +
    +

    My Jobs

    - ) : jobLists?.result_list?.length ? ( -
    -
    -

    - My Jobs -

    -
    -
    -
      - {[ - { name: "List", path: "/myjobs", iconName: "people-two" }, - { - name: "Pending", - path: "/my-pending-jobs", - iconName: "people-two", - }, - { - name: "Active", - path: "/my-active-jobs", - iconName: "people-two", - }, - ].map(({ name, path, iconName }, idx) => ( - - ))} -
    -
    +
    +
      + +
    - ) : ( -
    -
    -

    - My Jobs -

    -
    -
    -
      - -
    -
    -
    - )} - - )} +
    + )} +
    {/* signout area */} {sidebar ? ( @@ -328,9 +338,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) { ); } -const ListItem = ({ sidebar, route, title, bubble, iconName }) => { +const ListItem = ({ + sidebar, + route, + title, + bubble, + iconName, + listClassName, +}) => { return ( -
  • +
  • Date: Mon, 22 May 2023 17:53:02 +0100 Subject: [PATCH 3/4] . --- src/components/AuthPages/Login/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index c72d73b..823b680 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -155,7 +155,7 @@ export default function Login() { Sign in