From c889c0b09344b26cf8dd526576eea4e76226a7b4 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 23 Nov 2024 05:56:17 +0100 Subject: [PATCH] suspense loading added and made socket to trigger after login --- src/App.jsx | 15 +- src/Routers.jsx | 173 +++++++++--------- .../AuthPages/AuthRedirect/FbookRedirect.jsx | 2 +- .../AuthPages/AuthRedirect/Redirect.jsx | 2 +- src/components/MarketPlace/index.jsx | 2 +- src/middleware/SocketConnection.jsx | 11 ++ src/views/OffersInterestPage.jsx | 2 +- src/views/ResourcePage.jsx | 2 +- 8 files changed, 114 insertions(+), 95 deletions(-) create mode 100644 src/middleware/SocketConnection.jsx diff --git a/src/App.jsx b/src/App.jsx index 2c6e9c3..eb8b2c9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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 ( - + {/* */} <> {pathname.startsWith("/@") ? ( ) : ( - + }> + + )} - + {/* */} ); } diff --git a/src/Routers.jsx b/src/Routers.jsx index f1b6066..55b3c49 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -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() { {/* guest routes */} - {Number(process.env.REACT_APP_NEW_LOGIN_LAYOUT) === 1 ? ( + {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? ( <> } /> } /> @@ -129,94 +130,96 @@ export default function Routers() { } /> {/* private route */} - }> - } /> - {/* } /> - } /> - } /> - } /> - } />*/} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + }> + }> + } /> + {/* } /> + } /> + } /> + } /> + } />*/} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - } - /> - } /> - } /> - } - /> + } /> + } /> + } /> + } /> + {/* } /> */} + } /> + } + /> + } /> + } /> + } + /> - {/* } /> - } /> - } /> */} - } /> + {/* } /> + } /> + } /> */} + } /> - } /> - } /> - } /> - } - /> - } /> - } - /> - } - /> + } /> + } /> + } /> + } + /> + } /> + } + /> + } + /> - } - /> - } /> - } /> - } /> - } /> - {/*} />*/} - } /> - } /> - } /> - } /> - } /> - } /> + } + /> + } /> + } /> + } /> + } /> + {/*} />*/} + } /> + } /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/components/AuthPages/AuthRedirect/FbookRedirect.jsx b/src/components/AuthPages/AuthRedirect/FbookRedirect.jsx index 0cc40e9..5d167b2 100644 --- a/src/components/AuthPages/AuthRedirect/FbookRedirect.jsx +++ b/src/components/AuthPages/AuthRedirect/FbookRedirect.jsx @@ -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); diff --git a/src/components/AuthPages/AuthRedirect/Redirect.jsx b/src/components/AuthPages/AuthRedirect/Redirect.jsx index 23679df..5efd6c8 100644 --- a/src/components/AuthPages/AuthRedirect/Redirect.jsx +++ b/src/components/AuthPages/AuthRedirect/Redirect.jsx @@ -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); diff --git a/src/components/MarketPlace/index.jsx b/src/components/MarketPlace/index.jsx index 06121a3..9d03bde 100644 --- a/src/components/MarketPlace/index.jsx +++ b/src/components/MarketPlace/index.jsx @@ -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)){ diff --git a/src/middleware/SocketConnection.jsx b/src/middleware/SocketConnection.jsx new file mode 100644 index 0000000..0e1a337 --- /dev/null +++ b/src/middleware/SocketConnection.jsx @@ -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 ( + + + + ) +} diff --git a/src/views/OffersInterestPage.jsx b/src/views/OffersInterestPage.jsx index f070188..ed81d2b 100644 --- a/src/views/OffersInterestPage.jsx +++ b/src/views/OffersInterestPage.jsx @@ -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) diff --git a/src/views/ResourcePage.jsx b/src/views/ResourcePage.jsx index 6be0f33..0f7d5b9 100644 --- a/src/views/ResourcePage.jsx +++ b/src/views/ResourcePage.jsx @@ -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(); -- 2.34.1