fix(client): do not unmount default layout on navigate

2019-01-23 00:53:35 +03:00 · 2019-01-23 00:53:35 +03:00 · 28ee458ceb
commit 28ee458ceb
parent a284b296fc
16 changed files with 143 additions and 130 deletions
--- a/client/gatsby-browser.js
+++ b/client/gatsby-browser.js
@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { createStore } from './src/redux/createStore';
 import AppMountNotifier from './src/components/AppMountNotifier';
 import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
+import DefaultLayout from './src/components/layouts/Default';

 const store = createStore();

@ -21,3 +22,23 @@ export const wrapRootElement = ({ element }) => {
 wrapRootElement.propTypes = {
  element: PropTypes.any
 };
+
+export const wrapPageElement = ({ element, props }) => {
+  const {
+    location: { pathname }
+  } = props;
+  if (pathname === '/') {
+    return (
+      <DefaultLayout disableSettings={true} landingPage={true}>
+        {element}
+      </DefaultLayout>
+    );
+  }
+  return <DefaultLayout>{element}</DefaultLayout>;
+};
+
+wrapPageElement.propTypes = {
+  element: PropTypes.any,
+  location: PropTypes.objectOf({ pathname: PropTypes.string }),
+  props: PropTypes.any
+};
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@ -7,6 +7,7 @@ import headComponents from './src/head';
 import { createStore } from './src/redux/createStore';

 import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
+import DefaultLayout from './src/components/layouts/Default';

 const store = createStore();

@ -22,6 +23,26 @@ wrapRootElement.propTypes = {
  element: PropTypes.any
 };

+export const wrapPageElement = ({ element, props }) => {
+  const {
+    location: { pathname }
+  } = props;
+  if (pathname === '/') {
+    return (
+      <DefaultLayout disableSettings={true} landingPage={true}>
+        {element}
+      </DefaultLayout>
+    );
+  }
+  return <DefaultLayout>{element}</DefaultLayout>;
+};
+
+wrapPageElement.propTypes = {
+  element: PropTypes.any,
+  location: PropTypes.objectOf({ pathname: PropTypes.string }),
+  props: PropTypes.any
+};
+
 export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  setHeadComponents([...headComponents]);
  setPostBodyComponents(
--- a/client/src/client-only-routes/ShowProfileOrFourOhFour.js
+++ b/client/src/client-only-routes/ShowProfileOrFourOhFour.js
@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 import { isEmpty } from 'lodash';

 import Loader from '../components/helpers/Loader';
-import Layout from '../components/layouts/Default';
 import {
  userByNameSelector,
  userProfileFetchStateSelector,
@ -61,11 +60,9 @@ class ShowFourOhFour extends Component {
      // We don't know if /:maybeUser is a user or not, we will show the loader
      // until we get a response from the API
      return (
-        <Layout>
-          <div className='loader-wrapper'>
-            <Loader />
-          </div>
-        </Layout>
+        <div className='loader-wrapper'>
+          <Loader />
+        </div>
      );
    }
    if (isEmpty(requestedUser)) {
--- a/client/src/client-only-routes/ShowSettings.js
+++ b/client/src/client-only-routes/ShowSettings.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@ -16,7 +16,6 @@ import {
 import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
 import { createFlashMessage } from '../components/Flash/redux';

-import Layout from '../components/layouts/Default';
 import Spacer from '../components/helpers/Spacer';
 import Loader from '../components/helpers/Loader';
 import FullWidthRow from '../components/helpers/FullWidthRow';
@ -167,11 +166,9 @@ function ShowSettings(props) {

  if (showLoading) {
    return (
-      <Layout>
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      </Layout>
+      <div className='loader-wrapper'>
+        <Loader />
+      </div>
    );
  }

@ -180,7 +177,7 @@ function ShowSettings(props) {
  }

  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>Settings | freeCodeCamp.org</title>
      </Helmet>
@ -264,7 +261,7 @@ function ShowSettings(props) {
          {/* <DangerZone /> */}
        </main>
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

--- a/client/src/client-only-routes/ShowUnsubscribed.js
+++ b/client/src/client-only-routes/ShowUnsubscribed.js
@ -1,10 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';

 import env from '../../config/env.json';
-import Layout from '../components/layouts/Default';
 import FullWidthRow from '../components/helpers/FullWidthRow';
 import { Spacer } from '../components/helpers';

@ -12,7 +11,7 @@ const { apiLocation } = env;

 function ShowUnsubscribed({ unsubscribeId }) {
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>You have been unsubscribed | freeCodeCamp.org</title>
      </Helmet>
@ -41,7 +40,7 @@ function ShowUnsubscribed({ unsubscribeId }) {
          ) : null}
        </main>
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

--- a/client/src/client-only-routes/ShowUser.js
+++ b/client/src/client-only-routes/ShowUser.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { Link, navigate } from 'gatsby';
@ -20,7 +20,6 @@ import {
  userSelector,
  reportUser
 } from '../redux';
-import Layout from '../components/layouts/Default';
 import { Spacer, Loader, FullWidthRow } from '../components/helpers';

 const propTypes = {
@ -91,52 +90,48 @@ class ShowUser extends Component {
    const { pending, complete, errored } = userFetchState;
    if (pending && !complete) {
      return (
-        <Layout>
-          <div className='loader-wrapper'>
-            <Loader />
-          </div>
-        </Layout>
+        <div className='loader-wrapper'>
+          <Loader />
+        </div>
      );
    }

    if ((complete || errored) && !isSignedIn) {
      this.setNavigationTimer();
      return (
-        <Layout>
-          <main>
-            <FullWidthRow>
-              <Spacer />
-              <Spacer />
-              <Panel bsStyle='info'>
-                <Panel.Heading>
-                  <Panel.Title componentClass='h3'>
-                    You need to be signed in to report a user
-                  </Panel.Title>
-                </Panel.Heading>
-                <Panel.Body className='text-center'>
-                  <Spacer />
-                  <p>
-                    You will be redirected to sign in to freeCodeCamp.org
-                    automatically in 5 seconds
-                  </p>
-                  <p>
-                    <Link to='/signin'>
-                      Or you can here if you do not want to wait
-                    </Link>
-                  </p>
-                  <Spacer />
-                </Panel.Body>
-              </Panel>
-            </FullWidthRow>
-          </main>
-        </Layout>
+        <main>
+          <FullWidthRow>
+            <Spacer />
+            <Spacer />
+            <Panel bsStyle='info'>
+              <Panel.Heading>
+                <Panel.Title componentClass='h3'>
+                  You need to be signed in to report a user
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body className='text-center'>
+                <Spacer />
+                <p>
+                  You will be redirected to sign in to freeCodeCamp.org
+                  automatically in 5 seconds
+                </p>
+                <p>
+                  <Link to='/signin'>
+                    Or you can here if you do not want to wait
+                  </Link>
+                </p>
+                <Spacer />
+              </Panel.Body>
+            </Panel>
+          </FullWidthRow>
+        </main>
      );
    }

    const { textarea } = this.state;

    return (
-      <Layout>
+      <Fragment>
        <Helmet>
          <title>Report a users profile | freeCodeCamp.org</title>
        </Helmet>
@ -170,7 +165,7 @@ class ShowUser extends Component {
            </form>
          </Col>
        </FullWidthRow>
-      </Layout>
+      </Fragment>
    );
  }
 }
--- a/client/src/components/FourOhFour/index.js
+++ b/client/src/components/FourOhFour/index.js
@ -3,8 +3,6 @@ import Helmet from 'react-helmet';
 import Spinner from 'react-spinkit';
 import { Link } from 'gatsby';

-import Layout from '../layouts/Default';
-
 import notFoundLogo from '../../images/freeCodeCamp-404.svg';
 import { quotes } from '../../resources/quotes.json';

@ -30,33 +28,31 @@ class NotFoundPage extends Component {

  render() {
    return (
-      <Layout>
-        <div className='notfound-page-wrapper'>
-          <Helmet title='Page Not Found | freeCodeCamp' />
-          <img alt='404 Not Found' src={notFoundLogo} />
-          <h1>NOT FOUND</h1>
-          {this.state.randomQuote ? (
-            <div>
-              <p>
-                We couldn&#x27;t find what you were looking for, but here is a
-                quote:
+      <div className='notfound-page-wrapper'>
+        <Helmet title='Page Not Found | freeCodeCamp' />
+        <img alt='404 Not Found' src={notFoundLogo} />
+        <h1>NOT FOUND</h1>
+        {this.state.randomQuote ? (
+          <div>
+            <p>
+              We couldn&#x27;t find what you were looking for, but here is a
+              quote:
+            </p>
+            <div className='quote-wrapper'>
+              <p className='quote'>
+                <span>&#8220;</span>
+                {this.state.randomQuote.quote}
              </p>
-              <div className='quote-wrapper'>
-                <p className='quote'>
-                  <span>&#8220;</span>
-                  {this.state.randomQuote.quote}
-                </p>
-                <p className='author'>- {this.state.randomQuote.author}</p>
-              </div>
+              <p className='author'>- {this.state.randomQuote.author}</p>
            </div>
-          ) : (
-            <Spinner color='#006400' name='ball-clip-rotate-multiple' />
-          )}
-          <Link className='btn-curriculum' to='/learn'>
-            View the Curriculum
-          </Link>
-        </div>
-      </Layout>
+          </div>
+        ) : (
+          <Spinner color='#006400' name='ball-clip-rotate-multiple' />
+        )}
+        <Link className='btn-curriculum' to='/learn'>
+          View the Curriculum
+        </Link>
+      </div>
    );
  }
 }
--- a/client/src/components/layouts/GuideLayout.js
+++ b/client/src/components/layouts/GuideLayout.js
@ -1,10 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';

 import { NavigationContext } from '../../contexts/GuideNavigationContext';
-import DefaultLayout from './Default';
 import SideNav from './components/guide/SideNav';
 import Spacer from '../helpers/Spacer';

@ -59,7 +58,7 @@ const Layout = ({ children }) => (
            expandedState,
            toggleExpandedState
          }) => (
-            <DefaultLayout>
+            <Fragment>
              <Spacer size={2} />
              <Grid>
                <Row>
@ -87,7 +86,7 @@ const Layout = ({ children }) => (
                  </Col>
                </Row>
              </Grid>
-            </DefaultLayout>
+            </Fragment>
          )}
        </NavigationContext>
      );
--- a/client/src/components/layouts/Learn.js
+++ b/client/src/components/layouts/Learn.js
@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';

-import DefaultLayout from './Default';
 import DonationModal from '../Donation';

 import 'prismjs/themes/prism.css';
@ -11,9 +10,7 @@ import './learn.css';
 function LearnLayout({ children }) {
  return (
    <Fragment>
-      <DefaultLayout>
-        <main id='learn-app-wrapper'>{children}</main>
-      </DefaultLayout>
+      <main id='learn-app-wrapper'>{children}</main>
      <DonationModal />
    </Fragment>
  );
--- a/client/src/components/profile/Profile.js
+++ b/client/src/components/profile/Profile.js
@ -4,7 +4,6 @@ import { Alert, Button, Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { Link } from 'gatsby';

-import Layout from '../layouts/Default';
 import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
 import FullWidthRow from '../helpers/FullWidthRow';
 import Spacer from '../helpers/Spacer';
@ -44,7 +43,7 @@ function TakeMeToTheChallenges() {

 function renderIsLocked(username) {
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>{username} | freeCodeCamp.org</title>
      </Helmet>
@ -67,7 +66,7 @@ function renderIsLocked(username) {
          <TakeMeToTheChallenges />
        </FullWidthRow>
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

@ -131,7 +130,7 @@ function Profile({ user, isSessionUser }) {
    return renderIsLocked(username);
  }
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>{username} | freeCodeCamp.org</title>
      </Helmet>
@ -166,7 +165,7 @@ function Profile({ user, isSessionUser }) {
          />
        ) : null}
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

--- a/client/src/pages/academic-honesty.js
+++ b/client/src/pages/academic-honesty.js
@ -1,16 +1,15 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';

 import honesty from '../resources/honesty-policy';

-import Layout from '../components/layouts/Default';
 import Spacer from '../components/helpers/Spacer';
 import FullWidthRow from '../components/helpers/FullWidthRow';

 function AcademicHonesty() {
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>Academic Honesty Policy | freeCodeCamp.org</title>
      </Helmet>
@ -22,7 +21,7 @@ function AcademicHonesty() {
          {honesty}
        </FullWidthRow>
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

--- a/client/src/pages/accept-privacy-terms.js
+++ b/client/src/pages/accept-privacy-terms.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@ -13,7 +13,6 @@ import {
 } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';

-import Layout from '../components/layouts/Default';
 import { ButtonSpacer, Spacer } from '../components/helpers';
 import { acceptTerms, userSelector } from '../redux';
 import { createSelector } from 'reselect';
@ -71,7 +70,7 @@ class AcceptPrivacyTerms extends Component {
    }
    const { privacyPolicy, termsOfService, quincyEmail } = this.state;
    return (
-      <Layout>
+      <Fragment>
        <Helmet>
          <title>Privacy Policy and Terms of Service | freeCodeCamp.org</title>
        </Helmet>
@ -165,7 +164,7 @@ class AcceptPrivacyTerms extends Component {
            </Col>
          </Row>
        </Grid>
-      </Layout>
+      </Fragment>
    );
  }
 }
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Grid, Row, Col, Image } from '@freecodecamp/react-bootstrap';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import {
@ -13,7 +13,6 @@ import { faDatabase } from '@fortawesome/free-solid-svg-icons';
 import Helmet from 'react-helmet';

 import { Spacer } from '../components/helpers';
-import Layout from '../components/layouts/Default';
 import Login from '../components/Header/components/Login';

 import './index.css';
@ -27,7 +26,7 @@ const BigCallToAction = () => (
 );

 const IndexPage = () => (
-  <Layout disableSettings={true} landingPage={true}>
+  <Fragment>
    <Helmet>
      <title>Learn to code | freeCodeCamp.org</title>
    </Helmet>
@ -246,7 +245,7 @@ const IndexPage = () => (
      <Spacer />
      <Spacer />
    </Grid>
-  </Layout>
+  </Fragment>
 );

 export default IndexPage;
--- a/client/src/pages/software-resources-for-nonprofits.js
+++ b/client/src/pages/software-resources-for-nonprofits.js
@ -1,14 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';

-import Layout from '../components/layouts/Default';
 import FullWidthRow from '../components/helpers/FullWidthRow';
 import { Spacer } from '../components/helpers';

 function SoftwareResourcesForNonProfits() {
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>Software Resources for Nonprofits | freeCodeCamp.org</title>
      </Helmet>
@ -312,7 +311,7 @@ function SoftwareResourcesForNonProfits() {
          </ul>
        </FullWidthRow>
      </Grid>
-    </Layout>
+    </Fragment>
  );
 }

--- a/client/src/pages/update-email.js
+++ b/client/src/pages/update-email.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import { bindActionCreators } from 'redux';
@ -18,7 +18,6 @@ import Helmet from 'react-helmet';
 import isEmail from 'validator/lib/isEmail';
 import { isString } from 'lodash';

-import Layout from '../components/layouts/Default';
 import { Spacer } from '../components/helpers';
 import './update-email.css';
 import { userSelector } from '../redux';
@ -79,7 +78,7 @@ class UpdateEmail extends Component {
  render() {
    const { isNewEmail } = this.props;
    return (
-      <Layout>
+      <Fragment>
        <Helmet>
          <title>Update your email address | freeCodeCamp.org</title>
        </Helmet>
@ -127,7 +126,7 @@ class UpdateEmail extends Component {
            </Col>
          </Row>
        </Grid>
-      </Layout>
+      </Fragment>
    );
  }
 }
--- a/client/src/pages/welcome.js
+++ b/client/src/pages/welcome.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { bindActionCreators } from 'redux';
@ -9,7 +9,6 @@ import Helmet from 'react-helmet';

 import { Loader, Spacer } from '../components/helpers';
 import CurrentChallengeLink from '../components/helpers/CurrentChallengeLink';
-import Layout from '../components/layouts/Default';
 import Supporters from '../components/Supporters';
 import {
  userSelector,
@ -70,11 +69,9 @@ function Welcome({
 }) {
  if (pending && !complete) {
    return (
-      <Layout>
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      </Layout>
+      <div className='loader-wrapper'>
+        <Loader />
+      </div>
    );
  }

@ -90,7 +87,7 @@ function Welcome({

  const { quote, author } = randomQuote();
  return (
-    <Layout>
+    <Fragment>
      <Helmet>
        <title>Welcome {name ? name : 'Camper'} | freeCodeCamp.org</title>
      </Helmet>
@ -147,17 +144,17 @@ function Welcome({
          <Spacer />
          <Row>
            <Col sm={8} smOffset={2} xs={12}>
-            <CurrentChallengeLink>
-              <Button block={true} bsStyle='primary' className='btn-cta-big'>
-                Go to my next challenge
-              </Button>
-            </CurrentChallengeLink>
+              <CurrentChallengeLink>
+                <Button block={true} bsStyle='primary' className='btn-cta-big'>
+                  Go to my next challenge
+                </Button>
+              </CurrentChallengeLink>
            </Col>
          </Row>
          <Spacer size={4} />
        </Grid>
      </main>
-    </Layout>
+    </Fragment>
  );
 }