From f48952c3e62438bd825a72a1ecacdf6fd93b121d Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Mon, 7 Oct 2019 21:41:29 +0530
Subject: [PATCH] fix(client): move all user fetching to learn

---
 client/src/components/layouts/Learn.js        |  52 +++++-
 client/src/components/welcome/Welcome.test.js |   4 +-
 client/src/components/welcome/index.js        |   8 -
 client/src/pages/accept-privacy-terms.js      | 156 +++++++++---------
 client/src/pages/index.js                     |  49 +-----
 client/src/pages/learn.js                     |   8 +-
 6 files changed, 130 insertions(+), 147 deletions(-)

diff --git a/client/src/components/layouts/Learn.js b/client/src/components/layouts/Learn.js
index 8c314fe1cf..657ffc767f 100644
--- a/client/src/components/layouts/Learn.js
+++ b/client/src/components/layouts/Learn.js
@@ -1,6 +1,15 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { createSelector } from 'reselect';
+import { connect } from 'react-redux';
 
+import { Loader } from '../../components/helpers';
+import {
+  userSelector,
+  userFetchStateSelector,
+  isSignedInSelector
+} from '../../redux';
+import createRedirect from '../../components/createRedirect';
 import DonateModal from '../Donation';
 
 import 'prismjs/themes/prism.css';
@@ -9,7 +18,33 @@ import './prism-night.css';
 import 'react-reflex/styles.css';
 import './learn.css';
 
-function LearnLayout({ children }) {
+const mapStateToProps = createSelector(
+  userFetchStateSelector,
+  isSignedInSelector,
+  userSelector,
+  (fetchState, isSignedIn, user) => ({
+    fetchState,
+    isSignedIn,
+    user
+  })
+);
+
+const RedirectAcceptPrivacyTerm = createRedirect('/accept-privacy-terms');
+
+function LearnLayout({
+  fetchState: { pending, complete },
+  isSignedIn,
+  user: { acceptedPrivacyTerms },
+  children
+}) {
+  if (pending && !complete) {
+    return <Loader fullScreen={true} />;
+  }
+
+  if (isSignedIn && !acceptedPrivacyTerms) {
+    return <RedirectAcceptPrivacyTerm />;
+  }
+
   return (
     <Fragment>
       <main id='learn-app-wrapper'>{children}</main>
@@ -19,6 +54,17 @@ function LearnLayout({ children }) {
 }
 
 LearnLayout.displayName = 'LearnLayout';
-LearnLayout.propTypes = { children: PropTypes.any };
+LearnLayout.propTypes = {
+  children: PropTypes.any,
+  fetchState: PropTypes.shape({
+    pending: PropTypes.bool,
+    complete: PropTypes.bool,
+    errored: PropTypes.bool
+  }),
+  isSignedIn: PropTypes.bool,
+  user: PropTypes.shape({
+    acceptedPrivacyTerms: PropTypes.bool
+  })
+};
 
-export default LearnLayout;
+export default connect(mapStateToProps)(LearnLayout);
diff --git a/client/src/components/welcome/Welcome.test.js b/client/src/components/welcome/Welcome.test.js
index 4d2ae8f9ca..a7c985f134 100644
--- a/client/src/components/welcome/Welcome.test.js
+++ b/client/src/components/welcome/Welcome.test.js
@@ -16,7 +16,9 @@ describe('<Welcome />', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<LearnPage {...loggedInProps} />);
     const result = shallow.getRenderOutput();
-    expect(result.type.displayName === 'LearnLayout').toBeTruthy();
+    expect(
+      result.type.WrappedComponent.displayName === 'LearnLayout'
+    ).toBeTruthy();
   });
 
   it('has a header', () => {
diff --git a/client/src/components/welcome/index.js b/client/src/components/welcome/index.js
index 827d9f7f01..d05f26518e 100644
--- a/client/src/components/welcome/index.js
+++ b/client/src/components/welcome/index.js
@@ -32,14 +32,6 @@ function Welcome({ name }) {
           </blockquote>
         </Col>
       </Row>
-      <Row>
-        <Col sm={10} smOffset={1} xs={12}>
-          <Spacer />
-          <h2 className='text-center medium-heading'>
-            What would you like to do today?
-          </h2>
-        </Col>
-      </Row>
     </Fragment>
   );
 }
diff --git a/client/src/pages/accept-privacy-terms.js b/client/src/pages/accept-privacy-terms.js
index 3786b0e978..db7908ec98 100644
--- a/client/src/pages/accept-privacy-terms.js
+++ b/client/src/pages/accept-privacy-terms.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import {
-  Grid,
   Row,
   Col,
   Button,
@@ -74,87 +73,84 @@ class AcceptPrivacyTerms extends Component {
         <Helmet>
           <title>Privacy Policy and Terms of Service | freeCodeCamp.org</title>
         </Helmet>
-        <Grid>
-          <Row>
-            <Col xs={12}>
-              <div className='text-center'>
-                <Spacer size={2} />
-                <h3>
-                  Please review our updated privacy policy and the terms of
-                  service.
-                </h3>
+        <Spacer size={2} />
+        <Row className='text-center'>
+          <Col sm={8} smOffset={2} xs={12}>
+            <h1>
+              Please review our updated privacy policy and the terms of service.
+            </h1>
+          </Col>
+        </Row>
+        <Spacer size={2} />
+        <Row>
+          <Col sm={8} smOffset={2} xs={12}>
+            <form onSubmit={this.handleSubmit}>
+              <FormGroup>
+                <ControlLabel htmlFor='terms-of-service'>
+                  Terms of Service
+                </ControlLabel>
                 <Spacer />
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={6} smOffset={3}>
-              <form onSubmit={this.handleSubmit}>
-                <FormGroup>
-                  <ControlLabel htmlFor='terms-of-service'>
-                    Terms of Service
-                  </ControlLabel>
-                  <Spacer />
-                  <Checkbox
-                    checked={termsOfService}
-                    id='terms-of-service'
-                    inline={true}
-                    onChange={this.createHandleChange('termsOfService')}
-                  >
-                    I accept the{' '}
-                    <Link external={true} to='/news/terms-of-service'>
-                      terms of service
-                    </Link>{' '}
-                    (required)
-                  </Checkbox>
-                </FormGroup>
-                <FormGroup>
-                  <ControlLabel htmlFor='privacy-policy'>
-                    Privacy Policy
-                  </ControlLabel>
-                  <Spacer />
-                  <Checkbox
-                    checked={privacyPolicy}
-                    id='privacy-policy'
-                    inline={true}
-                    onChange={this.createHandleChange('privacyPolicy')}
-                  >
-                    I accept the{' '}
-                    <Link external={true} to='/news/privacy-policy'>
-                      privacy policy
-                    </Link>{' '}
-                    (required)
-                  </Checkbox>
-                </FormGroup>
-                <FormGroup>
-                  <ControlLabel htmlFor='quincy-email'>
-                    Quincy's Emails
-                  </ControlLabel>
-                  <Spacer />
-                  <Checkbox
-                    checked={quincyEmail}
-                    id='quincy-email'
-                    inline={true}
-                    onChange={this.createHandleChange('quincyEmail')}
-                  >
-                    I want weekly emails from Quincy, freeCodeCamp.org's
-                    founder.
-                  </Checkbox>
-                </FormGroup>
-                <ButtonSpacer />
-                <Button
-                  block={true}
-                  bsStyle='primary'
-                  className='big-cta-btn'
-                  disabled={!privacyPolicy || !termsOfService}
-                  type='submit'
+                <Checkbox
+                  checked={termsOfService}
+                  id='terms-of-service'
+                  inline={true}
+                  onChange={this.createHandleChange('termsOfService')}
                 >
-                  Continue to freeCodeCamp
-                </Button>
-              </form>
-            </Col>
-          </Row>
-        </Grid>
+                  I accept the{' '}
+                  <Link external={true} to='/news/terms-of-service'>
+                    terms of service
+                  </Link>{' '}
+                  (required)
+                </Checkbox>
+              </FormGroup>
+              <Spacer />
+              <FormGroup>
+                <ControlLabel htmlFor='privacy-policy'>
+                  Privacy Policy
+                </ControlLabel>
+                <Spacer />
+                <Checkbox
+                  checked={privacyPolicy}
+                  id='privacy-policy'
+                  inline={true}
+                  onChange={this.createHandleChange('privacyPolicy')}
+                >
+                  I accept the{' '}
+                  <Link external={true} to='/news/privacy-policy'>
+                    privacy policy
+                  </Link>{' '}
+                  (required)
+                </Checkbox>
+              </FormGroup>
+              <Spacer />
+              <FormGroup>
+                <ControlLabel htmlFor='quincy-email'>
+                  Quincy's Emails
+                </ControlLabel>
+                <Spacer />
+                <Checkbox
+                  checked={quincyEmail}
+                  id='quincy-email'
+                  inline={true}
+                  onChange={this.createHandleChange('quincyEmail')}
+                >
+                  I want weekly emails from Quincy, freeCodeCamp.org's founder.
+                </Checkbox>
+              </FormGroup>
+              <ButtonSpacer />
+              <Button
+                block={true}
+                bsStyle='primary'
+                className='big-cta-btn'
+                disabled={!privacyPolicy || !termsOfService}
+                type='submit'
+              >
+                Continue to freeCodeCamp.org
+              </Button>
+              <Spacer size={2} />
+            </form>
+          </Col>
+        </Row>
       </Fragment>
     );
   }
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index a381dd4e9f..c992b68403 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -1,75 +1,28 @@
 import React from 'react';
-import { createSelector } from 'reselect';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 
-import { Loader } from '../components/helpers';
 import Landing from '../components/landing';
-import {
-  userSelector,
-  userFetchStateSelector,
-  isSignedInSelector
-} from '../redux';
-import createRedirect from '../components/createRedirect';
 import { AllChallengeNode } from '../redux/propTypes';
 
-const mapStateToProps = createSelector(
-  userFetchStateSelector,
-  isSignedInSelector,
-  userSelector,
-  (fetchState, isSignedIn, user) => ({
-    fetchState,
-    isSignedIn,
-    user
-  })
-);
-
-const RedirectAcceptPrivacyTerm = createRedirect('/accept-privacy-terms');
-const RedirectLearn = createRedirect('/learn');
-
 export const IndexPage = ({
-  fetchState: { pending, complete },
-  isSignedIn,
-  user: { acceptedPrivacyTerms },
   data: {
     allChallengeNode: { edges }
   }
 }) => {
-  if (pending && !complete) {
-    return <Loader fullScreen={true} />;
-  }
-
-  if (isSignedIn && !acceptedPrivacyTerms) {
-    return <RedirectAcceptPrivacyTerm />;
-  }
-
-  if (isSignedIn) {
-    return <RedirectLearn />;
-  }
-
   return <Landing edges={edges} />;
 };
 
 const propTypes = {
   data: PropTypes.shape({
     allChallengeNode: AllChallengeNode
-  }),
-  fetchState: PropTypes.shape({
-    pending: PropTypes.bool,
-    complete: PropTypes.bool,
-    errored: PropTypes.bool
-  }),
-  isSignedIn: PropTypes.bool,
-  user: PropTypes.shape({
-    acceptedPrivacyTerms: PropTypes.bool
   })
 };
 
 IndexPage.propTypes = propTypes;
 IndexPage.displayName = 'IndexPage';
 
-export default connect(mapStateToProps)(IndexPage);
+export default IndexPage;
 
 export const query = graphql`
   query challNodes {
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index 4f4079a421..8f1324b39b 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -14,7 +14,7 @@ import {
 
 import LearnLayout from '../components/layouts/Learn';
 import Login from '../components/Header/components/Login';
-import { Link, Spacer, Loader } from '../components/helpers';
+import { Link, Spacer } from '../components/helpers';
 import Map from '../components/Map';
 import Welcome from '../components/welcome';
 import { dasherize } from '../../../utils/slugs';
@@ -80,7 +80,6 @@ const hashValueSelector = (state, hash) => {
 };
 
 export const LearnPage = ({
-  fetchState: { pending, complete },
   location: { hash = '', state = '' },
   isSignedIn,
   user: { name = '' },
@@ -92,12 +91,7 @@ export const LearnPage = ({
     allMarkdownRemark: { edges: mdEdges }
   }
 }) => {
-  if (pending && !complete) {
-    return <Loader fullScreen={true} />;
-  }
-
   const hashValue = hashValueSelector(state, hash);
-
   return (
     <LearnLayout>
       <Helmet title='Learn | freeCodeCamp.org' />