suspense loading added and made socket to trigger after login #853

Merged
victor.ebuka merged 1 commits from suspense-loading-added into master 2024-11-23 04:57:34 +00:00
8 changed files with 114 additions and 95 deletions
+10 -5
View File
@@ -1,28 +1,33 @@
import {Suspense, lazy} from 'react'
import { Navigate, useLocation } from "react-router-dom";
import Routers from "./Routers";
// import Routers from "./Routers";
// import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
import Toaster from "./components/Helpers/Toaster";
import Default from "./components/Partials/Default";
import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import LoadingSpinner from './components/Spinners/LoadingSpinner';
if (process.env.REACT_APP_NODE_ENV === 'production') {
disableReactDevTools();
}
const Routers = lazy(()=>import('./Routers'))
function App() {
const { pathname } = useLocation();
return (
<Default>
<SocketIOContextProvider>
{/* <SocketIOContextProvider> */}
<>
{pathname.startsWith("/@") ? (
<Navigate to="/app" replace={true} />
) : (
<Routers />
<Suspense fallback={<LoadingSpinner size="32" color="sky-blue" height="h-screen" />}>
<Routers />
</Suspense>
)}
<Toaster />
</>
</SocketIOContextProvider>
{/* </SocketIOContextProvider> */}
</Default>
);
}
+88 -85
View File
@@ -4,6 +4,7 @@ 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 FourZeroFour = lazy(() => import("./components/FourZeroFour"));
@@ -79,7 +80,7 @@ export default function Routers() {
<ScrollToTop>
<Routes>
{/* guest routes */}
{Number(process.env.REACT_APP_NEW_LOGIN_LAYOUT) === 1 ? (
{process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
<>
<Route exact path="/login" element={<LoginLandingPage />} />
<Route exact path="/login/:type" element={<LoginPageTwo />} />
@@ -129,94 +130,96 @@ export default function Routers() {
<Route exact path="/app" element={<AppDownloadPage />} />
{/* private route */}
<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 />} />
<Route exact path="/my-coupon" element={<MyCouponPage />} />
<Route exact path="/notification" element={<Notification />} />
<Route exact path="/market-place" element={<MarketPlacePage />} />
<Route exact path="/market" element={<MarketPlacePage />} />
<Route exact path="/familymarket" element={<FamilyMarketPage />} />
<Route exact path="/suggested" element={<ParentWaitingPage />} />
<Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
<Route exact path="/pending" element={<FamilyPendingOfferPage />} />
<Route exact path="/fam-blog" element={<FamBlogPage />} />
<Route exact path="/ai-question" element={<FamAIQuestionPage />} />
<Route exact path="/myfiles" element={<FamMyFilesPage />} />
<Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
<Route exact path="/fam-games" element={<FamGamesPage />} />
<Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
<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 />} />
<Route exact path="/my-coupon" element={<MyCouponPage />} />
<Route exact path="/notification" element={<Notification />} />
<Route exact path="/market-place" element={<MarketPlacePage />} />
<Route exact path="/market" element={<MarketPlacePage />} />
<Route exact path="/familymarket" element={<FamilyMarketPage />} />
<Route exact path="/suggested" element={<ParentWaitingPage />} />
<Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
<Route exact path="/pending" element={<FamilyPendingOfferPage />} />
<Route exact path="/fam-blog" element={<FamBlogPage />} />
<Route exact path="/ai-question" element={<FamAIQuestionPage />} />
<Route exact path="/myfiles" element={<FamMyFilesPage />} />
<Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
<Route exact path="/fam-games" element={<FamGamesPage />} />
<Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
<Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
<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
path="/my-pastdue-jobs"
element={<MyPastDueJobsPage />}
/>
<Route exact path="/my-offers" element={<MyOffersPage />} />
<Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
<Route
exact
path="/my-review-jobs"
element={<MyReviewDueJobsPage />}
/>
<Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
<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
path="/my-pastdue-jobs"
element={<MyPastDueJobsPage />}
/>
<Route exact path="/my-offers" element={<MyOffersPage />} />
<Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
<Route
exact
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='/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 />} />
<Route exact path="/start-job" element={<StartJob />} />
<Route exact path="/yourpage" element={<YourPages />} />
<Route
exact
path="/manage-active-job"
element={<ManageActiveJobs />}
/>
<Route exact path="/blog-page" element={<BlogPage />} />
<Route
exact
path="/offer-interest"
element={<OffersInterestPage />}
/>
<Route
exact
path="/manage-offer"
element={<ManageInterestOfferPage />}
/>
<Route exact path="/manage-family" element={<FamilyManagePage />} />
<Route exact path="/start-job" element={<StartJob />} />
<Route exact path="/yourpage" element={<YourPages />} />
<Route
exact
path="/manage-active-job"
element={<ManageActiveJobs />}
/>
<Route exact path="/blog-page" element={<BlogPage />} />
<Route
exact
path="/offer-interest"
element={<OffersInterestPage />}
/>
<Route
exact
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 />} />
<Route exact path="/settings" element={<SettingsPage />} />
<Route exact path="/referral" element={<ReferralPage />} />
<Route exact path="/job-groups" element={<JobGroupsPage />} />
<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 />} />
<Route exact path="/settings" element={<SettingsPage />} />
<Route exact path="/referral" element={<ReferralPage />} />
<Route exact path="/job-groups" element={<JobGroupsPage />} />
</Route>
</Route>
<Route path="*" element={<FourZeroFour />} />
</Routes>
@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
function FbookRedirect() {
const location = useLocation();
const navigate = useNavigate();
const userApi = useMemo(()=>{new usersService()},[]);
const userApi = useMemo(()=> new usersService(),[]);
const dispatch = useDispatch()
const queryParams = new URLSearchParams(location?.search);
@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
function Redirect() {
const location = useLocation();
const navigate = useNavigate();
const userApi = useMemo(()=>{new usersService()},[]);
const userApi = useMemo(()=> new usersService(),[]);
const dispatch = useDispatch();
const queryParams = new URLSearchParams(location?.search);
+1 -1
View File
@@ -15,7 +15,7 @@ export default function MarketPlace({ commonHeadData }) {
const marketData = jobLists?.result_list;
const categories = jobLists?.categories;
const image_server = jobLists?.session_image_server;
console.log('Lenth', marketData?.length )
// console.log('Lenth', marketData?.length )
useEffect(()=>{
if(!jobLists.loading && (marketData?.length < 1 || !marketData)){
+11
View File
@@ -0,0 +1,11 @@
import React from 'react'
import SocketIOContextProvider from '../components/Contexts/SocketIOContext'
import { Navigate, Outlet, useNavigate } from "react-router-dom";
export default function SocketConnection() {
return (
<SocketIOContextProvider>
<Outlet />
</SocketIOContextProvider>
)
}
+1 -1
View File
@@ -15,7 +15,7 @@ export default function OffersInterestPage() {
let {joinRoom} = SocketValues() // function to join room for socket
const apiCall = useMemo(()=>{new usersService()},[])
const apiCall = useMemo(()=> new usersService(),[])
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+1 -1
View File
@@ -5,7 +5,7 @@ import { useLocation } from "react-router-dom";
export default function ResourcePage() {
const {state} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
const [MyResourceData, setMyResourceData] = useState([]);
const api = useMemo(()=>{new usersService()},[]);
const api = useMemo(()=> new usersService(),[]);
const getMyResourceData = useCallback( async () => {
try {
const res = await api.getResourceList();