admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added setup tests file & react lazy loading + suspense.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

27
client/src/pages/manage/manage.page.jsx
View File

@@ -1,14 +1,18 @@
import React from "react"; import React, { lazy, Suspense } from "react";
import { Route } from "react-router"; import { Route } from "react-router";
import { Layout, BackTop } from "antd";
//Component Imports //Component Imports
import WhiteBoardPage from "../white-board/white-board.page"; // import WhiteBoardPage from "../white-board/white-board.page";
import JobsPage from "../jobs/jobs.page"; // import JobsPage from "../jobs/jobs.page";
import JobsDetailPage from "../jobs-detail/jobs-detail.page"; // import JobsDetailPage from "../jobs-detail/jobs-detail.page";
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component"; import FooterComponent from "../../components/footer/footer.component";
import { Layout, BackTop } from "antd"; const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application. //This page will handle all routing for the entire application.
@@ -20,10 +24,17 @@ export default function Manage({ match }) {
</Header> </Header>
<Content> <Content>
<Route exact path={`${match.path}`} component={WhiteBoardPage} /> <Suspense
fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
>
<Route exact path={`${match.path}`} component={WhiteBoardPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} /> <Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} /> <Route
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage}
/>
</Suspense>
</Content> </Content>
<Footer> <Footer>

4
client/src/setupTest.js Normal file
View File

@@ -0,0 +1,4 @@
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });