Added setup tests file & react lazy loading + suspense.

This commit is contained in:
Patrick Fic
2019-12-30 07:45:17 -08:00
parent 850c3acb95
commit 78448bbc91
3 changed files with 53 additions and 34 deletions

View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, Suspense, lazy } from "react";
import { useApolloClient, useQuery } from "@apollo/react-hooks";
import { Switch, Route, Redirect } from "react-router-dom";
import firebase from "../firebase/firebase.utils";
@@ -6,18 +6,20 @@ import firebase from "../firebase/firebase.utils";
import "./App.css";
//Component Imports
import LandingPage from "../pages/landing/landing.page";
import ManagePage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route";
import SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component";
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../components/alert/alert.component";
import { auth } from "../firebase/firebase.utils";
import { UPSERT_USER } from "../graphql/user.queries";
import { GET_CURRENT_USER } from "../graphql/local.queries";
import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../components/alert/alert.component";
import PrivateRoute from "../utils/private-route";
const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page"));
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
const Unauthorized = lazy(() => import("../pages/unauthorized/unauthorized.component"));
export default () => {
const apolloClient = useApolloClient();
@@ -103,24 +105,26 @@ export default () => {
return (
<div>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
<Route
exact
path="/signin"
render={() =>
HookCurrentUser.data.currentUser ? (
<Redirect to="/manage" />
) : (
<SignInPage />
)
}
/>
<PrivateRoute
isAuthorized={HookCurrentUser.data.currentUser ? true : false}
path="/manage"
component={ManagePage}
/>
<Suspense fallback={<div>Suspended Loading...</div>}>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
<Route
exact
path="/signin"
render={() =>
HookCurrentUser.data.currentUser ? (
<Redirect to="/manage" />
) : (
<SignInPage />
)
}
/>
<PrivateRoute
isAuthorized={HookCurrentUser.data.currentUser ? true : false}
path="/manage"
component={ManagePage}
/>
</Suspense>
</Switch>
</div>
);