fix(learn): remove cta and add current challenge button (#38807)

client/src/components/Intro/index.js

@@ -4,11 +4,13 @@ import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
 import { apiLocation } from '../../../config/env.json';
 import { randomQuote } from '../../utils/get-words';
+import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
 
 import './intro.css';
 
 const propTypes = {
   complete: PropTypes.bool,
+  completedChallengeCount: PropTypes.number,
   isSignedIn: PropTypes.bool,
   name: PropTypes.string,
   navigate: PropTypes.func,
@@ -24,6 +26,7 @@ function Intro({
   navigate,
   pending,
   complete,
+  completedChallengeCount,
   slug
 }) {
   if (pending && !complete) {
@@ -57,6 +60,13 @@ function Intro({
           <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
             Update my account settings
           </Link>
+          {completedChallengeCount > 0 ? (
+            <CurrentChallengeLink isLargeBtn={true}>
+              Go to current challenge
+            </CurrentChallengeLink>
+          ) : (
+            ''
+          )}
         </FullWidthRow>
         <Spacer />
         <Row className='text-center quote-partial'>
@@ -72,13 +82,17 @@ function Intro({
           </Col>
         </Row>
         <Row>
-          <Col sm={10} smOffset={1} xs={12}>
+          {completedChallengeCount < 15 ? (
-            <Spacer />
+            <Col sm={10} smOffset={1} xs={12}>
-            <h4>
+              <Spacer />
-              If you are new to coding, we recommend you{' '}
+              <h4>
-              <Link to={slug}>start at the beginning</Link>.
+                If you are new to coding, we recommend you{' '}
-            </h4>
+                <Link to={slug}>start at the beginning</Link>.
-          </Col>
+              </h4>
+            </Col>
+          ) : (
+            ''
+          )}
         </Row>
       </>
     );

client/src/components/helpers/CurrentChallengeLink.js

@@ -11,7 +11,8 @@ const currentChallengeApi = '/challenges/current-challenge';
 
 const propTypes = {
   children: PropTypes.any,
-  hardGoTo: PropTypes.func.isRequired
+  hardGoTo: PropTypes.func.isRequired,
+  isLargeBtn: PropTypes.bool
 };
 
 const mapStateToProps = () => ({});
@@ -23,10 +24,16 @@ const createClickHandler = hardGoTo => e => {
   return hardGoTo(`${apiLocation}${currentChallengeApi}`);
 };
 
-function CurrentChallengeLink({ children, hardGoTo }) {
+function CurrentChallengeLink({ children, hardGoTo, isLargeBtn }) {
+  let classNames;
+  if (isLargeBtn) {
+    classNames = 'btn btn-lg btn-primary btn-block';
+  } else {
+    classNames = 'btn btn-cta-big btn-primary btn-block';
+  }
   return (
     <a
-      className='btn-cta-big btn btn-primary btn-block'
+      className={classNames}
       href={currentChallengeApi}
       onClick={createClickHandler(hardGoTo)}
     >

client/src/pages/learn.js

@@ -51,7 +51,8 @@ const propTypes = {
   state: PropTypes.object,
   user: PropTypes.shape({
     name: PropTypes.string,
-    username: PropTypes.string
+    username: PropTypes.string,
+    completedChallengeCount: PropTypes.number
   })
 };
 
@@ -70,7 +71,7 @@ export const LearnPage = ({
   isSignedIn,
   navigate,
   fetchState: { pending, complete },
-  user: { name = '', username = '' },
+  user: { name = '', username = '', completedChallengeCount = 0 },
   data: {
     challengeNode: {
       fields: { slug }
@@ -86,6 +87,7 @@ export const LearnPage = ({
       <Grid>
         <Intro
           complete={complete}
+          completedChallengeCount={completedChallengeCount}
           isSignedIn={isSignedIn}
           name={name}
           navigate={navigate}