linked family resources

src/components/Home/FamilyDash.jsx

@@ -5,6 +5,7 @@ import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function FamilyDash({ MyActiveJobList, serverImg }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
@@ -76,7 +77,12 @@ export default function FamilyDash({ MyActiveJobList, serverImg }) {
 
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
-          {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
+          {familyBannersList?.loading ?
+          <div className="w-full bg-white rounded-2xl">
+            <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
+          </div>
+          :
+          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_list).map((item, index) => {
@@ -97,6 +103,8 @@ export default function FamilyDash({ MyActiveJobList, serverImg }) {
                 )
               })}
             </div>
+            :
+            null
           }
           
           {tab_categories?.data &&
@@ -104,9 +112,29 @@ export default function FamilyDash({ MyActiveJobList, serverImg }) {
             <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
             <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
               {tab_categories.data.map((item) => {
+                // onClick={()=>navigate('/resources', {state:{tab:'created'}})}
+                let resourceState = ''
+                switch(item?.action){
+                  case 'fam-blog':
+                    resourceState = 'blog'
+                    break
+                  case 'ai-question':
+                    resourceState = 'onsale'
+                    break
+                  case 'myfiles':
+                    resourceState = 'created'
+                    break
+                  case 'ai-lab':
+                    resourceState = 'onsale'
+                    break
+                  default:
+                    resourceState = 'blog'
+                    break
+                }
+                // console.log('EX', item.enabled, item?.action, resourceState)
                 if(item.enabled){
                 return (
-                  <Link key={item.uid} to={item?.action} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item.uid} to={'/resources'} state={{tab:resourceState}} className={`group rounded-xl 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">
                       <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
                         <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />

src/middleware/AuthRoute.jsx

@@ -264,8 +264,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       // setFamilyBannersList({loading:true, result:[]});
       try {
         const res = await apiCall.getFamilyBannersList();
-        dispatch(familyBannersList(res.data))
+        dispatch(familyBannersList({...res.data, loading:false}))
       } catch (error) {
+        dispatch(familyBannersList({loading:false}))
         console.log("Error getting tasks");
       }
     };

src/store/FamilyBannerList.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-    familyBannersList: {}
+    familyBannersList: {loading:true}
 };
 
 export const familyBannersListSlice = createSlice({

src/views/ResourcePage.jsx

@@ -6,7 +6,6 @@ export default function ResourcePage() {
   const {state, pathname} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
   const [MyResourceData, setMyResourceData] = useState([]);
   const api = new usersService();
-
   const getMyResourceData = async () => {
     try {
       const res = await api.getResourceList();