fix(client): merge and update the learn map (#36822)

client/src/pages/learn.js

@@ -1,19 +1,22 @@
 import React from 'react';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { graphql } from 'gatsby';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
 
-import { userFetchStateSelector, isSignedInSelector } from '../redux';
+import {
+  userFetchStateSelector,
+  isSignedInSelector,
+  userSelector
+} from '../redux';
 
 import LearnLayout from '../components/layouts/Learn';
 import Login from '../components/Header/components/Login';
 import { Link, Spacer, Loader } from '../components/helpers';
 import Map from '../components/Map';
-
-import './learn.css';
+import Welcome from '../components/welcome';
 
 import {
   ChallengeNode,
@@ -24,9 +27,11 @@ import {
 const mapStateToProps = createSelector(
   userFetchStateSelector,
   isSignedInSelector,
-  (fetchState, isSignedIn) => ({
+  userSelector,
+  (fetchState, isSignedIn, user) => ({
     fetchState,
-    isSignedIn
+    isSignedIn,
+    user
   })
 );
 
@@ -41,17 +46,20 @@ const propTypes = {
     complete: PropTypes.bool,
     errored: PropTypes.bool
   }),
-  isSignedIn: PropTypes.bool
+  isSignedIn: PropTypes.bool,
+  user: PropTypes.shape({
+    name: PropTypes.string
+  })
 };
 
 const BigCallToAction = isSignedIn => {
   if (!isSignedIn) {
     return (
       <>
-        <Spacer size={2} />
         <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <Login className={'text-center'}>Sign in to save progress.</Login>
+          <Col sm={10} smOffset={1} xs={12}>
+            <Spacer />
+            <Login>Sign in to save your progress.</Login>
           </Col>
         </Row>
       </>
@@ -60,9 +68,10 @@ const BigCallToAction = isSignedIn => {
   return '';
 };
 
-const IndexPage = ({
+export const LearnPage = ({
   fetchState: { pending, complete },
   isSignedIn,
+  user: { name = '' },
   data: {
     challengeNode: {
       fields: { slug }
@@ -77,44 +86,34 @@ const IndexPage = ({
 
   return (
     <LearnLayout>
-      <div className='learn-page-wrapper'>
-        <Helmet title='Learn | freeCodeCamp.org' />
-        {BigCallToAction(isSignedIn)}
-        <Spacer size={2} />
-        <h1 className='text-center'>Welcome to the freeCodeCamp curriculum</h1>
-        <p>
-          We have thousands of coding lessons to help you improve your skills.
-        </p>
-        <p>
-          You can earn each certification by completing its 5 final projects.
-        </p>
-        <p>
-          And yes - all of this is 100% free, thanks to the thousands of campers
-          who{' '}
-          <Link external={true} to='/donate'>
-            donate
-          </Link>{' '}
-          to our nonprofit.
-        </p>
-        <p>
-          If you are new to coding, we recommend you{' '}
-          <Link to={slug}>start at the beginning</Link>.
-        </p>
+      <Helmet title='Learn | freeCodeCamp.org' />
+      <Grid>
+        <Welcome name={name} />
+        <Row className='text-center'>
+          <Col sm={10} smOffset={1} xs={12}>
+            {BigCallToAction(isSignedIn)}
+            <Spacer />
+            <h3>
+              If you are new to coding, we recommend you{' '}
+              <Link to={slug}>start at the beginning</Link>.
+            </h3>
+          </Col>
+        </Row>
         <Map
           introNodes={mdEdges.map(({ node }) => node)}
           nodes={edges
             .map(({ node }) => node)
             .filter(({ isPrivate }) => !isPrivate)}
         />
-      </div>
+      </Grid>
     </LearnLayout>
   );
 };
 
-IndexPage.displayName = 'IndexPage';
-IndexPage.propTypes = propTypes;
+LearnPage.displayName = 'LearnPage';
+LearnPage.propTypes = propTypes;
 
-export default connect(mapStateToProps)(IndexPage);
+export default connect(mapStateToProps)(LearnPage);
 
 export const query = graphql`
   query FirstChallenge {