From 06186b3c0f245268ca929f59f4a92716d1cfa3e9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 26 Feb 2024 18:07:58 +0100 Subject: [PATCH] cache banner API using redux --- src/components/Home/FamilyDash.jsx | 60 ++++++++++++++++++++---------- src/middleware/AuthRoute.jsx | 21 ++++++++++- src/store/FamilyBannerList.js | 20 ++++++++++ src/store/TableReloads.js | 4 ++ src/store/store.js | 4 +- 5 files changed, 88 insertions(+), 21 deletions(-) create mode 100644 src/store/FamilyBannerList.js diff --git a/src/components/Home/FamilyDash.jsx b/src/components/Home/FamilyDash.jsx index 918b6b0..8ba2a34 100644 --- a/src/components/Home/FamilyDash.jsx +++ b/src/components/Home/FamilyDash.jsx @@ -4,32 +4,54 @@ import usersService from "../../services/UsersService"; import ParentWaiting from "../MyOffers/ParentWaiting"; import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable"; import FamilyActiveLSlde from "./FamilyActiveLSlde"; +import { useDispatch, useSelector } from "react-redux"; +import { tableReload } from "../../store/TableReloads"; export default function FamilyDash({ familyOffers, MyActiveJobList }) { // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list); + + const dispatch = useDispatch(); const userApi = new usersService(); const trending = MyActiveJobList; + + const { familyBannersList } = useSelector((state) => state.familyBannersList); - let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}}) + let [reloadBanner, setReloadBanner] = useState(0) - const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS - setFamilyBannersList({loading:true, result:[]}); - try { - const res = await userApi.getFamilyBannersList(); - setFamilyBannersList({loading:false, result:res.data}); - // console.log('TEST RESPONSE', res.data) - } catch (error) { - setFamilyBannersList({loading:false, result:[]}); - console.log("Error getting tasks"); - } - }; + // DO NOT UNCOMMENT THE CODE BELOW + + // let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}}) + // const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS + // setFamilyBannersList({loading:true, result:[]}); + // try { + // const res = await userApi.getFamilyBannersList(); + // setFamilyBannersList({loading:false, result:res.data}); + // console.log('TEST RESPONSE', res.data) + // } catch (error) { + // setFamilyBannersList({loading:false, result:[]}); + // console.log("Error getting tasks"); + // } + // }; + // useEffect(()=>{ + // getFamilyBanners() + // },[]) useEffect(()=>{ - getFamilyBanners() - },[]) + if(reloadBanner >= 2){ + dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS + setReloadBanner(0) + } + const timer = setInterval(()=>{ + setReloadBanner(prev => prev+1) + },300000) + + return ()=>{ + clearInterval(timer) + } + },[reloadBanner]) return (
@@ -38,18 +60,18 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) { {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' && <> - {!familyBannersList.loading && familyBannersList?.result?.result_list && Object.keys(familyBannersList?.result?.result_list).length > 0 && + {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 && // Loop for Family Banners
- {Object.keys(familyBannersList?.result?.result_list).map((item, index) => { - let content = familyBannersList?.result?.result_list[item] + {Object.keys(familyBannersList?.result_list).map((item, index) => { + let content = familyBannersList?.result_list[item] let action = item == 'recommend' ? 'familymarket' : 'mytask' return (
banner image
-

{content.banner.text}

+

{content.banner.text}

{content.banner.description}

{/* Horizontal Line */} @@ -79,7 +101,7 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
banner image
-

{'Heading'}

+

{'Heading'}

{'Description'}

{/* Horizontal Line */} diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index c8935c2..200193f 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -11,6 +11,7 @@ import { updateJobs } from "../store/jobLists"; import { updateNotifications } from "../store/notifications"; import { updateUserJobList } from "../store/userJobList"; import { updateWalletDetails } from "../store/walletDetails"; +import { familyBannersList } from "../store/FamilyBannerList"; const AuthRoute = ({ redirectPath = "/login", children }) => { const apiCall = useMemo(() => new usersService(), []); @@ -20,7 +21,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { const [loadProfileDetails, setLoadProfileDetails] = useState([]); const navigate = useNavigate(); - const { jobListTable, walletTable } = useSelector( + const { jobListTable, walletTable, familyBannersListTable } = useSelector( (state) => state.tableReload ); @@ -252,6 +253,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { }); }, []); + + //FUNCTION TO GET FAMILY BANNERS + useEffect(() => { + if((!loggedIn && !isLogin.status) || account_type == 'FULL'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL + return + } + const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS + // setFamilyBannersList({loading:true, result:[]}); + try { + const res = await apiCall.getFamilyBannersList(); + dispatch(familyBannersList(res.data)) + } catch (error) { + console.log("Error getting tasks"); + } + }; + getFamilyBanners() + }, [isLogin.status, familyBannersListTable]); + // useEffect(() => { // apiCall // .getHeroJBanners() diff --git a/src/store/FamilyBannerList.js b/src/store/FamilyBannerList.js new file mode 100644 index 0000000..d89bfc5 --- /dev/null +++ b/src/store/FamilyBannerList.js @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + familyBannersList: {} +}; + +export const familyBannersListSlice = createSlice({ + name: "familyBannersList", + initialState, + reducers: { + familyBannersList: (state,action) => { + state.familyBannersList = {...action.payload} + }, + }, +}); + +// Action creators are generated for each case reducer function +export const { familyBannersList } = familyBannersListSlice.actions; + +export default familyBannersListSlice.reducer; \ No newline at end of file diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js index cc1a298..d284f64 100644 --- a/src/store/TableReloads.js +++ b/src/store/TableReloads.js @@ -8,6 +8,7 @@ const initialState = { couponTable: false, walletTable: false, uploadsTable: false, + familyBannersListTable: false, }; export const tableReloadSlice = createSlice({ @@ -37,6 +38,9 @@ export const tableReloadSlice = createSlice({ case "UPLOADSTABLE": state.uploadsTable = !state.uploadsTable; return; + case "FAMILYBANNERSLIST": + state.familyBannersListTable = !state.familyBannersListTable; + return; default: return state; } diff --git a/src/store/store.js b/src/store/store.js index a6c5cc5..0becfb2 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -8,6 +8,7 @@ import jobReducer from "./jobLists"; import notificationsReducer from "./notifications"; import userJobListReducer from "./userJobList"; import walletDetails from "./walletDetails"; +import familyBannerListReducer from "./FamilyBannerList" export default configureStore({ reducer: { @@ -18,6 +19,7 @@ export default configureStore({ userJobList: userJobListReducer, commonHeadBanner: commonHeadBannerReducer, notifications: notificationsReducer, - walletDetails: walletDetails + walletDetails: walletDetails, + familyBannersList: familyBannerListReducer }, });