feat(client): ts-migrate LearnLayout component (#42644)

* feat(client) Renamed Learn.js to learn.tsx

* feat(client) ts-migrate LearnLayout Component

* rename types for convention

* fix(client) disable ts error for DonationModal usage

- DonationModal migration required typescript to fix error hence disable ts error in LearnLayout component

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/components/layouts/index.js

@@ -1,3 +1,3 @@
 export { default as CertificationLayout } from './Certification';
 export { default as DefaultLayout } from './Default';
-export { default as LearnLayout } from './Learn';
+export { default as LearnLayout } from './learn';

client/src/components/layouts/learn.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment, Component } from 'react';
-import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
@@ -18,11 +17,21 @@ import './prism-night.css';
 import 'react-reflex/styles.css';
 import './learn.css';
 
+type FetchState = {
+  pending: boolean;
+  complete: boolean;
+  errored: boolean;
+};
+
+type User = {
+  acceptedPrivacyTerms: boolean;
+};
+
 const mapStateToProps = createSelector(
   userFetchStateSelector,
   isSignedInSelector,
   userSelector,
-  (fetchState, isSignedIn, user) => ({
+  (fetchState: FetchState, isSignedIn, user: User) => ({
     fetchState,
     isSignedIn,
     user
@@ -35,7 +44,17 @@ const mapDispatchToProps = {
 
 const RedirectEmailSignUp = createRedirect('/email-sign-up');
 
-class LearnLayout extends Component {
+type LearnLayoutProps = {
+  isSignedIn?: boolean;
+  fetchState: FetchState;
+  user: User;
+  tryToShowDonationModal: () => void;
+  children?: React.ReactNode;
+};
+
+class LearnLayout extends Component<LearnLayoutProps> {
+  static displayName = 'LearnLayout';
+
   componentDidMount() {
     this.props.tryToShowDonationModal();
   }
@@ -69,25 +88,12 @@ class LearnLayout extends Component {
           <meta content='noindex' name='robots' />
         </Helmet>
         <main id='learn-app-wrapper'>{children}</main>
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+        /* @ts-ignore  */}
         <DonateModal />
       </Fragment>
     );
   }
 }
 
-LearnLayout.displayName = 'LearnLayout';
-LearnLayout.propTypes = {
-  children: PropTypes.any,
-  fetchState: PropTypes.shape({
-    pending: PropTypes.bool,
-    complete: PropTypes.bool,
-    errored: PropTypes.bool
-  }),
-  isSignedIn: PropTypes.bool,
-  tryToShowDonationModal: PropTypes.func.isRequired,
-  user: PropTypes.shape({
-    acceptedPrivacyTerms: PropTypes.bool
-  })
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(LearnLayout);

client/src/pages/learn.tsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import { Spacer } from '../components/helpers';
-import LearnLayout from '../components/layouts/Learn';
+import LearnLayout from '../components/layouts/learn';
 import Map from '../components/Map';
 import Intro from '../components/Intro';
 import {

client/src/templates/Challenges/classic/Show.tsx

@@ -12,7 +12,7 @@ import Media from 'react-responsive';
 import { withTranslation } from 'react-i18next';
 
 // Local Utilities
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import MultifileEditor from './MultifileEditor';
 import Preview from '../components/Preview';
 import SidePanel from '../components/Side-Panel';

client/src/templates/Challenges/codeally/show.tsx

@@ -9,7 +9,7 @@ import { graphql } from 'gatsby';
 import type { Dispatch } from 'redux';
 
 // Local Utilities
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import {
   ChallengeNodeType,
   ChallengeMetaType

client/src/templates/Challenges/projects/backend/Show.tsx

@@ -23,7 +23,7 @@ import {
   updateSolutionFormValues
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../../components/layouts/Learn';
+import LearnLayout from '../../../../components/layouts/learn';
 import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import TestSuite from '../../components/Test-Suite';

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -24,7 +24,7 @@ import {
   updateSolutionFormValues
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../../components/layouts/Learn';
+import LearnLayout from '../../../../components/layouts/learn';
 import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import Spacer from '../../../../components/helpers/spacer';

client/src/templates/Challenges/video/Show.tsx

@@ -17,7 +17,7 @@ import {
   ChallengeNodeType,
   ChallengeMetaType
 } from '../../../redux/prop-types';
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
 import ChallengeDescription from '../components/Challenge-Description';
 import Spacer from '../../../components/helpers/spacer';

client/src/templates/Introduction/Intro.js

@@ -5,7 +5,7 @@ import Helmet from 'react-helmet';
 import { Grid, ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import LearnLayout from '../../components/layouts/Learn';
+import LearnLayout from '../../components/layouts/learn';
 import FullWidthRow from '../../components/helpers/full-width-row';
 import ButtonSpacer from '../../components/helpers/button-spacer';
 import { MarkdownRemark, AllChallengeNode } from '../../redux/prop-types';