added familybanners API

src/components/Home/FamilyDash.jsx

@@ -1,13 +1,36 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { Link } from "react-router-dom";
+import usersService from "../../services/UsersService";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+  
+  const userApi = new usersService();
 
   const trending = MyActiveJobList;
+
+  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)
+    } catch (error) {
+      setFamilyBannersList({loading:false, result:[]});
+      console.log("Error getting tasks");
+    }
+  };
+
+
+  useEffect(()=>{
+    getFamilyBanners()
+  },[])
+
   return (
     <div>
       <div className="home-page-wrapper">
@@ -15,15 +38,21 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
 
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
-          <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
-            {[1,2,3,4,5].map((item, index) => (
-              <Link key={index} to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-                <div >
-
-                </div>
-              </Link>
-            ))}
-          </div>
+          {!familyBannersList.loading && familyBannersList?.result?.data && Object.keys(familyBannersList?.result?.data).length > 0 &&
+            // Loop for Family Banners
+            <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+              {Object.keys(familyBannersList?.result?.data).map((item, index) => {
+                let content = familyBannersList?.result?.data[item]
+                return (
+                  <Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                    <div className="">
+                    {content.banner.text} for <span className="font-bold">{item}</span> content
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          }
           
           <div className="my-4">
             <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>