family banner reload fixed

.env

@@ -23,7 +23,7 @@ REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

.env.development

@@ -23,7 +23,7 @@ REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

.env.production

@@ -23,7 +23,7 @@ REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

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"));
@@ -80,7 +75,7 @@ export default function Routers() {
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
+        {Number(process.env.REACT_APP_NEW_LOGIN_LAYOUT) === 1 ? (
           <>
             <Route exact path="/login" element={<LoginLandingPage />} />
             <Route exact path="/login/:type" element={<LoginPageTwo />} />
@@ -99,7 +94,7 @@ export default function Routers() {
             <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
             <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
             <Route exact path="/eoffer" element={<LoginPageTwo />} />
-            <Route exact path="/invite" element={<LoginPageTwo />} />
+            <Route exact path="/invite" element={<SignupPageTwo />} />
             <Route exact path="/promo/:name/:id" element={<PromoPage />} />
           </>
         ) : (
@@ -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/Contexts/SocketIOContext.js

@@ -67,6 +67,7 @@ export default function SocketIOContextProvider({children}) {
             let {message} = data
             if(message.action == "REFRESH_OFFER" && message.family_uid == user_uid && message.audience == "MEMBER"){  // for refreshing child account when parent assigns a job
                 dispatch(tableReload({type:'FAMILYOFFERLIST'})) // dispatches to update family pending/offer list on family side
+                dispatch(tableReload({ type: "FAMILYBANNERSLIST" })) // dispatches to update family banner list on family side
             }
             if(message.action == "REFRESH_TASK" && message.audience == "PARENT"){  // for refreshing parent account when child accepts or rejects a job
                 dispatch(tableReload({type:'PARENTFAMILYTASKLIST'})) // dispatches to update parent family task list on parent side

src/components/Home/index.jsx

@@ -2,49 +2,55 @@ 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 className="w-full">
+        <>
+        {userDetails && userDetails?.account_type == "FAMILY" ? (
+          <FamilyDash
+            account={userDetails}
+            commonHeadData={commonHeadBanner?.data?.result_list}
+            serverImg = {userDetails?.session_image_server}
+          />
+        ) : userDetails && userDetails?.account_type == "FULL" ? (
+          <>
+              {commonHeadBanner.loading ?
+                <LoadingSpinner height='h-48' size='16' />
+                :
+                <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>
+          </>
+        ) : (
+          <div>
+            You are not logged in or your account type is not supported.
+          </div>
+        )}
+        </>
+      </div>
     </Layout>
   );
 }

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -31,7 +31,10 @@ function ReferralTable({ history }) {
             currentReferral.map((item, index) => (
               <tr key={index} className="text-slate-500">
                 <td className="p-3">
-                  {item.added_date} / {item.firstname} {item.lastname}
+                 <div style={{flexDirection: "column"}} >
+                     <div style={{color: "blue"}}>{item.added_date} </div>
+                     <div>{item.firstname} {item.lastname}</div>
+                 </div>
                 </td>
                 <td className="p-3">{item.email}</td>
                 <td className="p-3">{item.status}</td>

src/components/Referral/ReferralDisplay.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -74,7 +74,7 @@ function ReferralDisplay() {
   };
 
   //FUNCTION TO SEND REFERRAL MESSAGE
-  const sendReferralMsg = (postData) => {
+  const sendReferralMsg = (postData, helpers) => {
     apiCall
       .sendReferralMsg(postData)
       .then((res) => {
@@ -84,11 +84,17 @@ function ReferralDisplay() {
             loading: false,
             status: false,
           });
-          return;
+          setTimeout(()=>{
+            setError({ message: '', loading: false, status: false });
+          },3000)
         } else {
-          toast.success(res.data.status | "Message Sent!");
-          setError({ message: "", loading: false, status: true });
+          // toast.success(res.data.status | "Message Sent!");
+          setError({ message: res.data.status, loading: false, status: true });
+          helpers.resetForm() // resets the form data
           setRefHistoryReload((prev) => !prev);
+          setTimeout(()=>{
+            setError({ message: '', loading: false, status: true });
+          },3000)
         }
       })
       .catch((error) => {
@@ -97,13 +103,16 @@ function ReferralDisplay() {
           loading: false,
           status: false,
         });
+        setTimeout(()=>{
+          setError({ message: '', loading: false, status: false });
+        },3000)
       });
   };
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values, helpers) => {
     setError({ message: "", loading: true, status: false });
-    sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
+    sendReferralMsg({...values}, helpers); // FUNCTION TO SEND REFERRAL MESSAGE
   };
 
   const [selectedTab, setSelectedTab] = useState("Send Referral");
@@ -228,7 +237,7 @@ function ReferralDisplay() {
 
                       <hr />
                       {error.message != "" && (
-                        <p className="text-base text-red-500 py-2">{error.message}</p>
+                        <p className={`text-base py-2 ${error.status ? 'text-emerald-500' : 'text-red-500'}`}>{error.message}</p>
                       )}
                       <div className="referral-btn flex justify-end items-center py-4">
                         {error.loading ? (
@@ -237,6 +246,7 @@ function ReferralDisplay() {
                           <button
                             type="submit"
                             className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            disabled={error.loading || error.status}
                           >
                             Send Message
                           </button>
@@ -251,9 +261,12 @@ function ReferralDisplay() {
             {selectedTab == 'Referral List' &&
               <>
                 <div className="w-full p-4">
-                  <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                    Referral List
-                  </h2>
+                  <div className='mb-2 flex flex-wrap gap-4 items-center'>
+                    <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                      Referral List
+                    </h2>
+                    <p className='text-slate-900 dark:text-white text-sm lg:text-base'>Uncompleted signup will be removed automatically after 7 days</p>
+                  </div>
                   {referralList.loading ? (
                     <LoadingSpinner size="22" color="sky-blue" />
                   ) : (

src/middleware/AuthRoute.jsx

@@ -20,11 +20,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   let {joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
 
+  const [nocache, setNoCache] = useState(false) // holds cache/nocache value
+
   const apiCall = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
   const [isLogin, setIsLogin] = useState({ loading: true, status: false });
-  const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
   const { jobListTable, marketTableList, walletTable, familyBannersListTable, homeBanners } = useSelector(
@@ -46,19 +47,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     };
 
     const checkInactivity = setInterval(() => {
-      let { account_type } = loadProfileDetails;
       if (account_type === "FAMILY") {
-        if (
-          Date.now() - lastActivityTime >
-          process.env.REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY
-        ) {
+        if (Date.now() - Number(lastActivityTime) > Number(process.env.REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY)) {
           expireSession();
         }
       } else {
-        if (
-          Date.now() - lastActivityTime >
-          process.env.REACT_APP_SESSION_EXPIRE_MINUTES
-        ) {
+        if (Date.now() - Number(lastActivityTime) > Number(process.env.REACT_APP_SESSION_EXPIRE_MINUTES)) {
           expireSession();
         }
       }
@@ -68,7 +62,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     return () => {
       clearInterval(checkInactivity);
     };
-  }, [lastActivityTime, navigate]);
+  }, [lastActivityTime, navigate, isLogin.status]);
 
   // Reset last activity time on user input
   const resetTime = useCallback(() => {
@@ -97,9 +91,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               setIsLogin({ loading: false, status: false });
               return;
             }
-            setLoadProfileDetails(res.data);
             dispatch(updateUserDetails({ ...res.data }));
             setIsLogin({ loading: false, status: true });
+            setNoCache(true) // Sets no cache to true, so as to trigger nocache whenever used in api call
           })
           .catch((error) => {
             setIsLogin({ loading: false, status: false });
@@ -108,6 +102,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       loadProfile();
     }else{
       setIsLogin({ loading: false, status: true });
+      setNoCache(true) // Sets no cache to true, so as to trigger nocache whenever used in api call
     }
   }, []);
 
@@ -116,16 +111,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]);
 
@@ -140,8 +136,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
             dispatch(updateNotifications({ loading: false, data: null }));
             return;
           }
-          setLoadProfileDetails(res.data);
-
           const _raw = res.data?.result_list;
 
           //Sort the notifications in ascending order based on the API time
@@ -279,8 +273,11 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
     const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
       // setFamilyBannersList({loading:true, result:[]});
+      dispatch(familyBannersList({loading:true}))
+      const noCache = (isLogin.status && nocache )? 1 : 0
+      const reqData = {nocache: noCache}
       try {
-        const res = await apiCall.getFamilyBannersList();
+        const res = await apiCall.getFamilyBannersList(reqData);
         dispatch(familyBannersList({...res?.data, loading:false}))
       } catch (error) {
         dispatch(familyBannersList({loading:false}))

src/services/UsersService.js

@@ -618,8 +618,8 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      offset: 1,
-      limit: 100,
+      offset: 0,
+      limit: 140,
       action: apiConst.WRENCHBOARD_ACCOUNT_REFFERHX,
     };
     return this.postAuxEnd("/refferhx", postData);
@@ -1396,7 +1396,7 @@ class usersService {
   }
 
   // API FUNCTION TO FAMILY BANNERS
-  getFamilyBannersList() {
+  getFamilyBannersList(reqData) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
@@ -1404,6 +1404,7 @@ class usersService {
       action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
       limit: 20,
       offset: 1,
+      ...reqData
     };
     return this.postAuxEnd("/familybanners", postData);
   }

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