From 3461b828dd9ebb821315382b6322daab2db7cc46 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 10 Jun 2023 21:30:31 +0100 Subject: [PATCH 1/2] common home banner head implemented --- src/components/Home/HomeSliders.jsx | 4 +- src/components/Home/index.jsx | 7 +- src/components/UserHeader/CommonHead.jsx | 4 +- .../UserHeader/RecomendedSliders.jsx | 203 +++--------------- src/middleware/AuthRoute.jsx | 14 ++ src/store/CommonHeadBanner.js | 20 ++ src/store/store.js | 4 +- src/views/BlogPage.jsx | 8 +- src/views/HomePages.jsx | 22 +- src/views/MarketPlacePage.jsx | 9 +- src/views/MyActiveJobsPage.jsx | 8 +- src/views/MyJobsPage.jsx | 7 +- src/views/MyPendingJobsPage.jsx | 8 +- src/views/MyReviewDueJobsPage.jsx | 8 +- src/views/MyTaskPage.jsx | 10 +- 15 files changed, 100 insertions(+), 236 deletions(-) create mode 100644 src/store/CommonHeadBanner.js diff --git a/src/components/Home/HomeSliders.jsx b/src/components/Home/HomeSliders.jsx index ce3743f..ee31333 100644 --- a/src/components/Home/HomeSliders.jsx +++ b/src/components/Home/HomeSliders.jsx @@ -22,8 +22,8 @@ export default function HomeSliders(props) { {/*
*/} {/* slider*/} {/*
*/} - {props.bannerList.map((item, index) => ( -
+ {props.bannerList?.length && props.bannerList.map((item, index) => ( +
diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 7a59652..49ad10b 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -17,10 +17,7 @@ export default function Home(props) { const {userDetails} = useSelector((state) => state?.userDetails) - const commonHeadData =()=>{ - console.log("COMMON HEAD DATA INDEX ----------------=====---------------------"); - return 0; - } + const {commonHeadBanner} = useSelector(state => state.commonHeadBanner) // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME const getHomeDate = () => { @@ -42,7 +39,7 @@ export default function Home(props) {
{userDetails && userDetails?.account_type == "FAMILY" && ( - + )} {userDetails && userDetails?.account_type == "FULL" && ( diff --git a/src/components/UserHeader/CommonHead.jsx b/src/components/UserHeader/CommonHead.jsx index ce37cb3..5cc775e 100644 --- a/src/components/UserHeader/CommonHead.jsx +++ b/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 (
- + {commonHeadData?.length > 0 && } {/*
*/} {/* /!*

*!/*/} {/* /!* This is common head which will appear as needed , will take many shape*!/*/} diff --git a/src/components/UserHeader/RecomendedSliders.jsx b/src/components/UserHeader/RecomendedSliders.jsx index 8b117a5..b4207df 100644 --- a/src/components/UserHeader/RecomendedSliders.jsx +++ b/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 }) { {/*

*/}
-
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) + {bannerData.map((item, index) => ( + +
+
+ {/* title */} +
+

+ {item.short_title} +

+
+ {/* username */} +
+

+ {item.short_description} +

+
+ {/* items */} +
+
+ {item.short_button_text} +
+
-
- -
- -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- - -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- - -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- - -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- -
-
- {/* title */} -
-

- This is short title -

-
- {/* username */} -
-

- Some wondersull text here and more -

-
- {/* items */} -
-
- (button) -
-
-
- -
- + + ))}
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index bfeb75d..8329273 100644 --- a/src/middleware/AuthRoute.jsx +++ b/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 ? ( ) : // Stills needs fixing diff --git a/src/store/CommonHeadBanner.js b/src/store/CommonHeadBanner.js new file mode 100644 index 0000000..5ae2312 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index fef9940..a042c79 100644 --- a/src/store/store.js +++ b/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 }, }); \ No newline at end of file diff --git a/src/views/BlogPage.jsx b/src/views/BlogPage.jsx index 25d8eb2..f9607d3 100644 --- a/src/views/BlogPage.jsx +++ b/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 = () => { - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - }; + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) return ( <> - + ); } diff --git a/src/views/HomePages.jsx b/src/views/HomePages.jsx index 3e3282f..b6d1cda 100644 --- a/src/views/HomePages.jsx +++ b/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 [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(); - }, []); + const {commonHeadBanner} = useSelector(state => state.commonHeadBanner) return ( <> ); diff --git a/src/views/MarketPlacePage.jsx b/src/views/MarketPlacePage.jsx index 79470d6..d82c5a6 100644 --- a/src/views/MarketPlacePage.jsx +++ b/src/views/MarketPlacePage.jsx @@ -1,16 +1,15 @@ import MarketPlace from "../components/MarketPlace"; +import { useSelector } from "react-redux"; + export default function MarketPlacePage() { - const commonHeadData =()=>{ - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - } + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) return ( <> + commonHeadData={commonHeadBanner?.result_list} /> ); } diff --git a/src/views/MyActiveJobsPage.jsx b/src/views/MyActiveJobsPage.jsx index fd86b65..7b8a6c6 100644 --- a/src/views/MyActiveJobsPage.jsx +++ b/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 =()=>{ - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - } + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) 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() { <> ); diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index 9d3d3c2..d98adb4 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -7,10 +7,7 @@ import MyJobs from "../components/MyJobs"; import { useSelector } from "react-redux"; export default function MyJobsPage() { - const commonHeadData = () => { - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - }; + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) const {userJobList} = useSelector((state) => state.userJobList) @@ -38,7 +35,7 @@ export default function MyJobsPage() { // debugger; return ( <> - + ); } diff --git a/src/views/MyPendingJobsPage.jsx b/src/views/MyPendingJobsPage.jsx index 3d7b4cc..5c1458a 100644 --- a/src/views/MyPendingJobsPage.jsx +++ b/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 =()=>{ - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - } + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) const [MyJobList, setMyJobList] = useState([]); const api = new usersService(); @@ -29,7 +27,7 @@ export default function MyPendingJobsPage() { <> ); diff --git a/src/views/MyReviewDueJobsPage.jsx b/src/views/MyReviewDueJobsPage.jsx index efae559..a20428d 100644 --- a/src/views/MyReviewDueJobsPage.jsx +++ b/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 =()=>{ - console.log("COMMON HEAD DATA ----------------=====---------------------"); - return 0; - } + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) const [MyJobList, setMyJobList] = useState([]); const api = new usersService(); const getMyJobList = async () => { @@ -26,7 +24,7 @@ export default function MyReviewDueJobsPage() { <> ); diff --git a/src/views/MyTaskPage.jsx b/src/views/MyTaskPage.jsx index bdc4abb..ea32052 100644 --- a/src/views/MyTaskPage.jsx +++ b/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,8 @@ export default function MyTaskPage() { ); } From 746cd00ec4ef97b28cfe9dc28fba9b9ccdcb6327 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 10 Jun 2023 21:32:37 +0100 Subject: [PATCH 2/2] common home banner head implemented --- src/views/MyTaskPage.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/MyTaskPage.jsx b/src/views/MyTaskPage.jsx index ea32052..f729720 100644 --- a/src/views/MyTaskPage.jsx +++ b/src/views/MyTaskPage.jsx @@ -52,8 +52,7 @@ export default function MyTaskPage() { ); }