LazyLoaded routes

FLiotta · Oct 15, 2020 · ce6c246 · ce6c246
1 parent 648edae
commit ce6c246
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 39 deletions.
diff --git a/client/src/components/utils/LazyLoad.tsx b/client/src/components/utils/LazyLoad.tsx
diff --git a/client/src/pages/Auth/index.tsx b/client/src/pages/Auth/index.tsx
@@ -12,7 +12,7 @@ import Loading from '../../components/Loading';
 import GithubOAuth from '../../components/OAuth/Github';
 import { logIn, signUp, oauthGithub } from '../../actions/session';
 import { isLoggedSelector, isSessionFetching } from '../../selectors/session';
-import { RECAPTCHA_SITE_KEY } from '../../config';
+import { RECAPTCHA_SITE_KEY, RECAPTCHA_AVAILABLE } from '../../config';
 import './styles.scss';
 
 interface IAccount {
@@ -25,13 +25,13 @@ interface IPropsForm {
   btnText: string
 };
 
-const AuthForm = ({ onSubmit, btnText }: IPropsForm): JSX.Element => {
+export const AuthForm = ({ onSubmit, btnText }: IPropsForm): JSX.Element => {
   const [recaptchaStatus, setRecaptchaStatus] = useState(false);
   const { handleSubmit, register, errors } = useForm();
 
   return (
     <form onSubmit={handleSubmit((e) => {
-      if (recaptchaStatus) {
+      if (recaptchaStatus || !RECAPTCHA_AVAILABLE) {
         onSubmit(e)
       }
     })}>
@@ -49,11 +49,13 @@ const AuthForm = ({ onSubmit, btnText }: IPropsForm): JSX.Element => {
           ref={register({ required: "Required" })}
           placeholder="Password" />
       </div>
-      <ReCAPTCHA
-        sitekey={RECAPTCHA_SITE_KEY}
-        onChange={() => setRecaptchaStatus(true)}
-        onExpired={() => setRecaptchaStatus(false)}
-      />
+      {RECAPTCHA_AVAILABLE &&
+        <ReCAPTCHA
+          sitekey={RECAPTCHA_SITE_KEY}
+          onChange={() => setRecaptchaStatus(true)}
+          onExpired={() => setRecaptchaStatus(false)}
+        />
+      }
       <div className="auth__modal-form-node">
         <button type="submit" className="btn btn--block">{btnText}</button>
       </div>

diff --git a/client/src/routes/AppRouter.tsx b/client/src/routes/AppRouter.tsx
@@ -1,15 +1,17 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense, lazy } from 'react';
 import { IRootReducer } from '../reducers/rootReducer';
 import { connect } from 'react-redux';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import ProtectedRoute from '../components/utils/ProtectedRoute';
-import Auth from '../pages/Auth';
-import AuthCallback from '../pages/AuthCallback';
-import Boards from '../pages/Boards';
-import Board from '../pages/Board';
-import Navbar from '../components/Navbar';
 import Landing from '../pages/Landing';
 import CookiesModal from '../components/CookiesModal';
+import Loading from '../components/Loading';
+import Auth from '../pages/Auth';
+const AuthCallback = lazy(() => import('../pages/AuthCallback'));
+const Boards = lazy(() => import('../pages/Boards'));
+const Board = lazy(() => import('../pages/Board'));
+const Navbar = lazy(() => import('../components/Navbar'));
+
 
 interface IAppRouter {
   cookiesModalVisible: boolean;
@@ -21,17 +23,19 @@ const AppRouter = ({
   <Fragment>
     <BrowserRouter>
       {cookiesModalVisible && <CookiesModal />}
-      <Switch>
-        <Route path="/" component={Landing} exact />
-        <Route path="/home" component={Landing} />
-        <Route path="/auth/callback" component={AuthCallback} />
-        <Route path="/auth" component={Auth} />
-        <Fragment>
-          <Navbar />
-          <ProtectedRoute path="/b/:id" component={Board} />
-          <ProtectedRoute path="/boards" component={Boards} />
-        </Fragment>
-      </Switch>
+      <Suspense fallback={<Loading display />}>
+        <Switch>
+          <Route path="/" component={Landing} exact />
+          <Route path="/home" component={Landing} />
+          <Route path="/auth/callback" component={AuthCallback} />
+          <Route path="/auth" component={Auth} />
+          <Fragment>
+            <Navbar />
+            <ProtectedRoute path="/b/:id" component={Board} />
+            <ProtectedRoute path="/boards" component={Boards} />
+          </Fragment>
+        </Switch>
+      </Suspense>
     </BrowserRouter>
   </Fragment>
 );