Merge branch 'common-home-banner' of WrenchBoard/Users-Wrench into master

src/components/Home/HomeSliders.jsx

@@ -22,8 +22,8 @@ export default function HomeSliders(props) {
                         {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
                         {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
                         {/*</div>*/}
-                        {props.bannerList.map((item, index) => (
+                        {props.bannerList?.length && props.bannerList.map((item, index) => (
-                            <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                            <div key={index} className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                                 <HomeBannerOffersCard
                                     itemData={item}
                                 />

src/components/Home/index.jsx

@@ -17,10 +17,7 @@ export default function Home(props) {
 
     const {userDetails} = useSelector((state) => state?.userDetails)
 
-    const commonHeadData =()=>{
+    const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA INDEX ----------------=====---------------------");
-        return 0;
-    }
 
     // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
     const getHomeDate = () => {
@@ -42,7 +39,7 @@ export default function Home(props) {
         <Layout>
             <div className="home-page-wrapper">
                 {userDetails && userDetails?.account_type == "FAMILY" && (
-                    <FamilyDash commonHeadData={commonHeadData} />
+                    <FamilyDash commonHeadData={props.bannerList} />
                 )}
                 {userDetails && userDetails?.account_type == "FULL" && (
                     <FullAccountDash  nextDueTask={nextDueTask} bannerList={props.bannerList} />

src/components/UserHeader/CommonHead.jsx

@@ -3,15 +3,13 @@ import { Link } from "react-router-dom";
 import RecomendedSliders from "./RecomendedSliders";
 
 export default function CommonHead({ className,commonHeadData }) {
-    const bannerData =  commonHeadData();
-    console.log("UUUUUUUU-",bannerData);
     return (
         <div
             className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
                 className || ""
             }`}
         >
-            <RecomendedSliders bannerData={bannerData}  />
+            {commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData}  /> }
             {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
             {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
             {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}

src/components/UserHeader/RecomendedSliders.jsx

@@ -5,20 +5,22 @@ import top3 from "../../assets/images/top-buyer-3.png";
 import top4 from "../../assets/images/top-buyer-4.png";
 import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
+import { Link } from "react-router-dom";
 
-export default function RecomendedSliders({ className ,bannerData }) {
+export default function RecomendedSliders({ className,bannerData }) {
     const settings = {
         arrows: false,
         dots: false,
-        infinite: true,
+        infinite: bannerData.length > 4 ? true : false,
         autoplay: true,
-        slidesToShow: 4,
+        slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
         slidesToScroll: 1,
         responsive: [
             {
                 breakpoint: 426,
                 settings: {
-                    slidesToShow: 2,
+                    infinite: bannerData.length > 2 ? true : false,
+                    slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
                     slidesToScroll: 1,
                 },
             },
@@ -97,177 +99,32 @@ export default function RecomendedSliders({ className ,bannerData }) {
             {/*</div>*/}
             <div className="slider-content">
                 <SliderCom settings={settings} selector={sellSlider}>
-                    <div className="item">
+                    {bannerData.map((item, index) => (
-                        <div className="commonHeaderSliderItem">
+                        <Link key={index} to={item.link_path}>
-                            {/* title */}
+                            <div className="item">
-                            <div className="flex justify-center">
+                                <div className="commonHeaderSliderItem">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                    {/* title */}
-                                    This is short title
+                                    <div className="flex justify-center">
-                                </p>
+                                        <p className="text-base font-bold   text-dark-gray dark:text-white">
-                            </div>
+                                            {item.short_title}
-                            {/* username */}
+                                        </p>
-                            <div className="flex justify-center mb-1">
+                                    </div>
-                                <p className="text-xs text-thin-light-gray">
+                                    {/* username */}
-                                    Some wondersull text here and more
+                                    <div className="flex justify-center mb-1">
-                                </p>
+                                        <p className="text-xs text-thin-light-gray">
-                            </div>
+                                            {item.short_description}
-                            {/* items */}
+                                        </p>
-                            <div className="flex justify-center">
+                                    </div>
-                                <div className="flex space-x-1 items-center text-purple text-xs">
+                                    {/* items */}
-                                    <span>(button)</span>
+                                    <div className="flex justify-center">
+                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                                            <span>{item.short_button_text}</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
+                        </Link>
-
+                    ))}
-                    </div>
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-                    <div className="item">
-                        <div className="commonHeaderSliderItem">
-                            {/* title */}
-                            <div className="flex justify-center">
-                                <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    This is short title
-                                </p>
-                            </div>
-                            {/* username */}
-                            <div className="flex justify-center mb-1">
-                                <p className="text-xs text-thin-light-gray">
-                                    Some wondersull text here and more
-                                </p>
-                            </div>
-                            {/* items */}
-                            <div className="flex justify-center">
-                                <div className="flex space-x-1 items-center text-purple text-xs">
-                                    <span>(button)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
                 </SliderCom>
             </div>
         </>

src/middleware/AuthRoute.jsx

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { updateUserDetails } from "../store/UserDetails";
 import { updateJobs } from "../store/jobLists";
 import { updateUserJobList } from "../store/userJobList";
+import { commonHeadBanner } from "../store/CommonHeadBanner";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -120,6 +121,19 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMarketActiveJobList();
   }, [apiCall, dispatch]);
 
+  //FUNCTION TO GET COMMON HEAD DATA
+  useEffect(()=>{
+    apiCall.getHeroJBanners().then((res) => {
+      if (res.data.internal_return < 0) {
+        return;
+      }
+      dispatch(commonHeadBanner(res.data));
+    })
+    .catch((error) => {
+      console.log('ERROR ', error)
+    });
+  },[])
+
   return isLogin.loading ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
   ) : // Stills needs fixing

src/store/CommonHeadBanner.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  commonHeadBanner: {}
+};
+
+export const commonHeadBannerSlice = createSlice({
+  name: "commonHeadBanner",
+  initialState,
+  reducers: {
+    commonHeadBanner: (state,action) => {
+      state.commonHeadBanner = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { commonHeadBanner } = commonHeadBannerSlice.actions;
+
+export default commonHeadBannerSlice.reducer;

src/store/store.js

@@ -5,6 +5,7 @@ import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
 import tableReloadReducer from "./TableReloads";
 import userJobListReducer from './userJobList'
+import commonHeadBannerReducer from './CommonHeadBanner'
 
 export default configureStore({
   reducer: {
@@ -12,6 +13,7 @@ export default configureStore({
     userDetails: userDetailReducer,
     jobLists: jobReducer,
     tableReload: tableReloadReducer,
-    userJobList: userJobListReducer
+    userJobList: userJobListReducer,
+    commonHeadBanner: commonHeadBannerReducer
   },
 });

src/views/BlogPage.jsx

@@ -1,15 +1,13 @@
 import React, { useContext, useState, useEffect } from "react";
 import BlogItem from "../components/Blogs";
+import { useSelector } from "react-redux";
 
 export default function BlogPage() {
-    const commonHeadData = () => {
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    };
 
     return (
         <>
-            <BlogItem  commonHeadData={commonHeadData} />
+            <BlogItem  commonHeadData={commonHeadBanner.result_list} />
         </>
     );
 }

src/views/HomePages.jsx

@@ -1,29 +1,17 @@
 import React, {useState, useEffect} from 'react'
 import Home from "../components/Home";
 import usersService from "../services/UsersService";
+
+import { useSelector } from 'react-redux';
+
 export default function HomePages() {
 
-   // const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+  const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-    const [bannerList, setBannerList] = useState([]);
-    const api = new usersService();
-
-    const getHeroJBannersList = async () => {
-        try {
-            const res = await api.getHeroJBanners();
-           // console.log("BANNERS->",res.data);
-            setBannerList(res.data?.result_list);
-        } catch (error) {
-            console.log("Error getting BANNERS....");
-        }
-    };
-    useEffect(() => {
-        getHeroJBannersList();
-    }, []);
 
   return (
     <>
       <Home
-          bannerList={bannerList}
+          bannerList={commonHeadBanner?.result_list}
       />
     </>
   );

src/views/MarketPlacePage.jsx

@@ -1,16 +1,15 @@
 import MarketPlace from "../components/MarketPlace";
 
+import { useSelector } from "react-redux";
+
 export default function MarketPlacePage() {
 
-    const commonHeadData =()=>{
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
 
   return (
     <>
       <MarketPlace
-          commonHeadData={commonHeadData} />
+          commonHeadData={commonHeadBanner?.result_list} />
     </>
   );
 }

src/views/MyActiveJobsPage.jsx

@@ -2,12 +2,10 @@ import React, { useContext,useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 import MyActiveJobs from "../components/MyActiveJobs";
+import { useSelector } from "react-redux";
 
 export default function MyActiveJobsPage() {
-    const commonHeadData =()=>{
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
@@ -28,7 +26,7 @@ export default function MyActiveJobsPage() {
         <>
             <MyActiveJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyJobsPage.jsx

@@ -7,10 +7,7 @@ import MyJobs from "../components/MyJobs";
 import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
-  const commonHeadData = () => {
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-    console.log("COMMON HEAD DATA ----------------=====---------------------");
-    return 0;
-  };
 
   const {userJobList} = useSelector((state) => state.userJobList)
   
@@ -38,7 +35,7 @@ export default function MyJobsPage() {
   // debugger;
   return (
     <>
-      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadData} />
+      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadBanner.result_list} />
     </>
   );
 }

src/views/MyPendingJobsPage.jsx

@@ -3,12 +3,10 @@ import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 import MyActiveJobs from "../components/MyActiveJobs";
 import MyPendingJobs from "../components/MyPendingJobs";
+import { useSelector } from "react-redux";
 
 export default function MyPendingJobsPage() {
-    const commonHeadData =()=>{
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 
@@ -29,7 +27,7 @@ export default function MyPendingJobsPage() {
         <>
             <MyPendingJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyReviewDueJobsPage.jsx

@@ -1,12 +1,10 @@
 import React, { useContext,useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import { useSelector } from "react-redux";
 
 export default function MyReviewDueJobsPage() {
-    const commonHeadData =()=>{
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
     const getMyJobList = async () => {
@@ -26,7 +24,7 @@ export default function MyReviewDueJobsPage() {
         <>
             <MyReviewDueJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyTaskPage.jsx

@@ -8,6 +8,8 @@ import { useSelector } from "react-redux";
 export default function MyTaskPage() {
   const { myTaskTable } = useSelector((state) => state.tableReload);
 
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+
   const [MyActiveJobList, setMyActiveJobList] = useState({
     loading: true,
     status: false,
@@ -15,10 +17,7 @@ export default function MyTaskPage() {
   });
   const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
   const api = new usersService();
-  const commonHeadData = () => {
+
-    console.log("COMMON HEAD DATA ----------------=====---------------------");
-    return 0;
-  };
   const getMyActiveJobList = async () => {
     setMyActiveJobList({ loading: true, status: false, data: [] });
     try {
@@ -53,7 +52,7 @@ export default function MyTaskPage() {
     <MyTasks
       ActiveJobList={MyActiveJobList}
       MyActiveOffersList={MyActiveOffersList}
-      commonHeadData={commonHeadData}
+      commonHeadData={commonHeadBanner?.result_list}
     />
   );
 }