cache banner API using redux

src/components/Dashboards/AccountDashboard.jsx

@@ -1,15 +1,83 @@
-import React from 'react'
+import React from "react";
 
-const AccountDashboard = ({className}) => {
+const AccountDashboard = ({ className }) => {
   return (
-    <div className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-[#ffed00] ${
+    <div
+      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
         className || ""
-      }`}>
-      <div className="w-full h-full flex items-center justify-center text-5xl text-center">
-        Account Dashboard
+      }`}
+    >
+      <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
+        <TopBanner />
+        <TopBanner />
+        <TopBanner />
+      </div>
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
+        <LowerBanner />
+        <LowerBanner />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default AccountDashboard
+export default AccountDashboard;
+
+const TopBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col shadow-md rounded-xl">
+      <div className="h-[12rem] rounded-t-xl">
+        <img
+          src={Image}
+          alt="banner-img"
+          className="w-full h-full rounded-t-xl"
+        />
+      </div>
+      <div className="h-[7rem] rounded-b-xl bg-white">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
+          <h3 className="font-bold text-lg">Banner Title</h3>
+          <p>Banner description text will come follow</p>
+        </div>
+        <div className="flex justify-between w-full px-2 items-center">
+          <span className="text-slate-300 font-semibold">follow up text</span>
+          <button className="flex items-center justify-center gap-2">
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LowerBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
+      <div className="w-full flex justify-between border-b border-slate-300 p-2">
+        <div className="h-[130px] flex justify-between items-center">
+          <div className="px-2">
+            <h3 className="text-lg font-bold">Banner Title</h3>
+            <p className="text-sm">Banner description text will come follow</p>
+          </div>
+        </div>
+        <div className="w-[150px] h-[100px]">
+          <img
+            src={Image}
+            alt="banner-img"
+            className="w-full h-full rounded-xl"
+          />
+        </div>
+      </div>
+      <div className="flex justify-between w-full px-2 items-center">
+        <span className="text-slate-300 font-semibold">follow up text</span>
+        <button className="flex items-center justify-center gap-2">
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+        </button>
+      </div>
+    </div>
+  );
+};

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 (
     <div>
@@ -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
             <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
-              {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 (
                   <Link key={item} to={`/${action}`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
                       <img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
                       <div className="px-2 py-1">
-                        <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{content.banner.text}</h1>
+                        <h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
                         <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
                       </div>
                       {/* Horizontal Line */}
@@ -79,7 +101,7 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                   <div className="h-full w-full">
                     <img className="w-full h-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
                     <div className="px-2 py-1">
-                      <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{'Heading'}</h1>
+                      <h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
                       <p className="text-sm text-black dark:text-white">{'Description'}</p>
                     </div>
                     {/* Horizontal Line */}

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()

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;

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;
       }

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
   },
 });