src/Routers.jsx

@@ -3,10 +3,9 @@ import { lazy } from "react";
 
 import LoginLandingPage from './views/LoginLandingPage'
 import LoginPage from "./views/LoginPage";
-import HomePages from "./views/HomePages";
 import SocketConnection from "./middleware/SocketConnection";
 
-
+const HomePages = lazy(() => import("./views/HomePages"));
 const FourZeroFour = lazy(() => import("./components/FourZeroFour"));
 const ScrollToTop = lazy(() => import("./components/Helpers/ScrollToTop"));
 const StartJob = lazy(() => import("./components/MyJobs/StartJob"));
@@ -17,8 +16,6 @@ const AppleRedirectPage = lazy(() => import("./views/AppleRedirectPage"));
 const AuthProfilePage = lazy(() => import("./views/AuthProfilePage"));
 const AuthRedirect = lazy(() => import("./views/AuthRedirect"));
 const BlogPage = lazy(() => import("./views/BlogPage"));
-const CalendarPage = lazy(() => import("./views/CalendarPage"));
-const CollectionItemPage = lazy(() => import("./views/CollectionItemPage"));
 const FacebookRedirect = lazy(() => import("./views/FacebookRedirect"));
 const FamilyManagePage = lazy(() => import("./views/FamilyManagePage"));
 const FamilyMarketPage = lazy(() => import("./views/FamilyMarketPage"));
@@ -45,8 +42,6 @@ const OffersInterestPage = lazy(()=> import("./views/OffersInterestPage"));
 const ReferralPage = lazy(()=> import("./views/ReferralPage"));
 const RemindersPage = lazy(()=> import("./views/RemindersPage"));
 const ResourcePage = lazy(()=> import("./views/ResourcePage"));
-const SavedPage = lazy(()=> import("./views/SavedPage"));
-const SellPage = lazy(()=> import("./views/SellPage"));
 const SettingsPage = lazy(()=> import("./views/SettingsPage"));
 const SignupPage = lazy(()=> import("./views/SignupPage"));
 const SignupPageTwo = lazy(()=> import("./views/SignupPageTwo"));
@@ -133,14 +128,8 @@ export default function Routers() {
         <Route element={<SocketConnection />}>
           <Route element={<AuthRoute />}>
             <Route exact path="/" element={<HomePages />} />
-            {/*  <Route exact path="/active-bids" element={<AcitveBidsPage />} />
-            <Route exact path="/notification" element={<Notification />} />
-            <Route exact path="/market-place" element={<MarketPlacePage />} />
-            <Route exact path="/shop-details" element={<ShopDetailsPage />} />
-          <Route exact path="/my-collection" element={<MyCollection />} />*/}
             <Route exact path="/reminders" element={<RemindersPage />} />
             <Route exact path="/tracking" element={<TrackingPage />} />
-            <Route exact path="/calendar" element={<CalendarPage />} />
             <Route exact path="/resources" element={<ResourcePage />} />
             <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
             <Route exact path="/family-wallet" element={<FamilyWalletPage />} />
@@ -163,7 +152,6 @@ export default function Routers() {
             <Route exact path="/notification" element={<Notification />} />
             <Route exact path="/mytask" element={<MyTaskPage />} />
             <Route exact path="/myjobs" element={<MyJobsPage />} />
-            {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
             <Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
             <Route
               exact
@@ -177,10 +165,6 @@ export default function Routers() {
               path="/my-review-jobs"
               element={<MyReviewDueJobsPage />}
             />
-
-            {/* <Route exact path='/acc-family' element={<FamilyAccPage />} />
-            <Route exact path="/acc-family/activities" element={<FamilyActivitiesPage />} />
-            <Route exact path="/acc-family/familysettings" element={<FamilySettingsPage />} /> */}
             <Route path='/acc-family/*' element={<FamilyRoutesPage />} />
 
             <Route exact path="/manage-family" element={<FamilyManagePage />} />
@@ -202,17 +186,8 @@ export default function Routers() {
               path="/manage-offer"
               element={<ManageInterestOfferPage />}
             />
-
-            <Route
-              exact
-              path="/my-collection/collection-item"
-              element={<CollectionItemPage />}
-            />
-            <Route exact path="/sell" element={<SellPage />} />
-            <Route exact path="/saved" element={<SavedPage />} />
             <Route exact path="/history" element={<HistoryPage />} />
             <Route exact path="/learnmore" element={<LearnMorePage />} />
-            {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
             <Route exact path="/my-uploads" element={<UploadProductPage />} />
             <Route exact path="/profile" element={<AuthProfilePage />} />
             <Route exact path="/user-profile" element={<UserProfilePage />} />

src/components/Home/index.jsx

@@ -2,49 +2,53 @@ import React, { useState, useEffect } from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
 import LoadingSpinner from '../../components/Spinners/LoadingSpinner'
+import { tableReload } from '../../store/TableReloads';
 
 export default function Home(props) {
- // console.log("PROPS IN HOME->", props);
- // const userApi = new usersService();
+
+  const dispatch = useDispatch()
+
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
   const { userDetails } = useSelector((state) => state?.userDetails);
 
+  useEffect(()=>{
+    if(!commonHeadBanner.loading && (!commonHeadBanner?.data || Object.keys(commonHeadBanner?.data).length < 1)){
+      dispatch(tableReload({ type: "HOMEBANNERS" })); // reloads home banner in case it fails to load or encounters error while loading
+    }
+  },[])
+
   return (
     <Layout>
-        <div className="w-full">
-          {userDetails && userDetails?.account_type == "FAMILY" ? (
-            <FamilyDash
-              account={userDetails}
-              commonHeadData={props.bannerList}
-              // familyOffers={MyOffersList?.data}
-              serverImg = {userDetails?.session_image_server}
-              // MyActiveJobList={MyActiveJobList?.data}
-            />
-          ) : userDetails && userDetails?.account_type == "FULL" ? (
-            <>
-              {Object.keys(commonHeadBanner).length < 1 ?
-              <LoadingSpinner height='h-48' size='16' />
-              :
-              <FullAccountDash
-                bannerList={props.bannerList}
-                dashTypes={props.dashTypes}
-                // offersList={MyOffersList}
-                // MyActiveJobList={MyActiveJobList}
-                offersList={props.offersList}
-                imageServer={props.imageServer}
-              />
-              }
-            </>
-          ) : (
-            <div>
-              You are not logged in or your account type is not supported.
-            </div>
-          )}
-        </div>
+      <div className="w-full">
+        {commonHeadBanner.loading ?
+        <LoadingSpinner height='h-48' size='16' />
+        :
+        <>
+        {userDetails && userDetails?.account_type == "FAMILY" ? (
+          <FamilyDash
+            account={userDetails}
+            commonHeadData={commonHeadBanner?.data?.result_list}
+            serverImg = {userDetails?.session_image_server}
+          />
+        ) : userDetails && userDetails?.account_type == "FULL" ? (
+          <FullAccountDash
+            bannerList={commonHeadBanner?.data?.result_list}
+            dashTypes={commonHeadBanner?.data?.home_dash_type}
+            offersList={commonHeadBanner?.data?.offers_list}
+            imageServer={commonHeadBanner?.data?.session_image_server}
+          />
+        ) : (
+          <div>
+            You are not logged in or your account type is not supported.
+          </div>
+        )}
+        </>
+        }
+      </div>
     </Layout>
   );
 }

src/middleware/AuthRoute.jsx

@@ -116,16 +116,17 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
       return
     }
+      dispatch(commonHeadBanner({loading:true, data:{}}));
       apiCall
         .getHeroJBanners()
         .then((res) => {
           if (res?.data?.internal_return < 0) {
             return;
           }
-          dispatch(commonHeadBanner(res.data));
+          dispatch(commonHeadBanner({loading:false, data:res.data}));
         })
         .catch((error) => {
-          // console.log("ERROR ", error);
+          dispatch(commonHeadBanner({loading:false, data:{}}));
         });
   }, [isLogin.status, homeBanners]);
 

src/store/CommonHeadBanner.js

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

src/views/HomePages.jsx

@@ -1,24 +1,10 @@
-import {useState, useEffect} from 'react'
-import { useSelector } from "react-redux";
 import Home from "../components/Home";
 
 export default function HomePages() {
-  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-  const [bannerOptions, setBannerOptions] = useState({})
-
-  useEffect(()=>{
-    const bannerOptions = {
-      bannerList: commonHeadBanner?.result_list,
-      dashTypes: commonHeadBanner?.home_dash_type,
-      offersList: commonHeadBanner?.offers_list,
-      imageServer: commonHeadBanner?.session_image_server
-    };
-    setBannerOptions(bannerOptions)
-  },[commonHeadBanner])
 
   return (
     <>
-      <Home {...bannerOptions} />
+      <Home />
     </>
   );
 }