WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

cache banner API using redux

Browse Source
This commit was merged in pull request #580.
This commit is contained in:
victorAnumudu
2024-02-26 18:07:58 +01:00
parent bddbe6ceb4
commit 06186b3c0f
5 changed files with 88 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/FamilyDash.jsx
+41 -19
View File
@@ -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 */}