feat(client): ts-migration for Introduction templates (#43752)

* chore: rename the file CertificationCard.js to tsx

* refactor: refactor the file CertificationCard to tsx

refactor: refactor the file CertificationCard to tsx

refactor: refactor the file CertificationCard to tsx

* chore: rename the file ClaimCertSteps.js to tsx

* refactor: refactor the file ClaimCertSteps to TS

* chore: rename the file SuperBlockIntro.js to tsx

* refactor: refactor the file SuperBlockIntro to TS

* chore: rename the file Block.js to tsx

* refactor: refactor the file Block to TS

refactor: refactor the file Block to TS

refactor: refactor the file Block to TS

* chore: rename the file CertChallenge.js to tsx

* refactor: refactor the file CertChallenge to TS

* fix typing

* ignore missing redux store connection

Co-authored-by: ismail <i.tlemcani@quinten-maroc.com>
Co-authored-by: Ismail Tlemcani <ismail.tlemcani@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/redux/prop-types.ts

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { HandlerProps } from 'react-reflex';
 import { SuperBlocks } from '../../../config/certification-settings';
+import { certMap } from '../resources/cert-and-project-map';
 
 export const UserPropType = PropTypes.shape({
   about: PropTypes.string,
@@ -63,12 +64,13 @@ export const CurrentCertsPropType = PropTypes.arrayOf(
   })
 );
 
-export const StepsPropType = PropTypes.shape({
+export type Steps = {
-  currentCerts: CurrentCertsPropType,
+  isHonest?: boolean;
-  isShowCerts: PropTypes.bool,
+  currentCerts?: Array<CurrentCert>;
-  isShowName: PropTypes.bool,
+  isShowCerts?: boolean;
-  isShowProfile: PropTypes.bool
+  isShowName?: boolean;
-});
+  isShowProfile?: boolean;
+};
 
 export type CurrentCert = {
   show: boolean;
@@ -83,7 +85,7 @@ export type MarkdownRemark = {
     block: string;
     isBeta: boolean;
     superBlock: SuperBlocks;
-    title: string;
+    title: typeof certMap[number]['title'];
   };
   headings: [
     {

client/src/templates/Introduction/components/block.tsx

@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { withTranslation } from 'react-i18next';
+import { withTranslation, TFunction } from 'react-i18next';
 import { connect } from 'react-redux';
 import ScrollableAnchor from 'react-scrollable-anchor';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import store from 'store';
 
@@ -12,60 +11,69 @@ import { isAuditedCert } from '../../../../../utils/is-audited';
 import Caret from '../../../assets/icons/caret';
 import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import GreenPass from '../../../assets/icons/green-pass';
-import { Link } from '../../../components/helpers/';
+import { Link } from '../../../components/helpers';
 import { completedChallengesSelector, executeGA } from '../../../redux';
+import { ChallengeNode, CompletedChallenge } from '../../../redux/prop-types';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import Challenges from './Challenges';
 
 const { curriculumLocale } = envData;
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (
+  state: unknown,
+  ownProps: { blockDashedName: string } & unknown
+) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
 
   return createSelector(
     expandedSelector,
     completedChallengesSelector,
-    (isExpanded, completedChallenges) => ({
+    (isExpanded: boolean, completedChallenges: CompletedChallenge[]) => ({
       isExpanded,
-      completedChallenges: completedChallenges.map(({ id }) => id)
+      completedChallengeIds: completedChallenges.map(({ id }) => id)
     })
   )(state);
 };
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators({ toggleBlock, executeGA }, dispatch);
 
-const propTypes = {
+interface BlockProps {
-  blockDashedName: PropTypes.string,
+  blockDashedName: string;
-  challenges: PropTypes.array,
+  challenges: ChallengeNode[];
-  completedChallenges: PropTypes.arrayOf(PropTypes.string),
+  completedChallengeIds: string[];
-  executeGA: PropTypes.func,
+  executeGA: typeof executeGA;
-  isExpanded: PropTypes.bool,
+  isExpanded: boolean;
-  superBlock: PropTypes.string,
+  superBlock: string;
-  t: PropTypes.func,
+  t: TFunction;
-  toggleBlock: PropTypes.func.isRequired
+  toggleBlock: typeof toggleBlock;
-};
+}
 
 const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
 
-export class Block extends Component {
+export class Block extends Component<BlockProps> {
-  constructor(...props) {
+  static displayName: string;
-    super(...props);
+  constructor(props: BlockProps) {
+    super(props);
 
     this.handleBlockClick = this.handleBlockClick.bind(this);
   }
 
-  handleBlockClick() {
+  handleBlockClick(): void {
     const { blockDashedName, toggleBlock, executeGA } = this.props;
-    const playSound = store.get('fcc-sound');
+    const playSound = store.get('fcc-sound') as boolean;
     if (playSound) {
-      void import('tone').then(tone => {
+      void (async () => {
+        const tone = await import('tone');
+
         const player = new tone.Player(
           'https://tonejs.github.io/audio/berklee/guitar_chord1.mp3'
         ).toDestination();
-        if (tone.context.state !== 'running') tone.context.resume();
+        if (tone.context.state !== 'running') {
+          void tone.context.resume();
+        }
         player.autostart = playSound;
-      });
+      })();
     }
     executeGA({
       type: 'event',
@@ -74,10 +82,10 @@ export class Block extends Component {
         action: blockDashedName
       }
     });
-    return toggleBlock(blockDashedName);
+    toggleBlock(blockDashedName);
   }
 
-  renderCheckMark(isCompleted) {
+  renderCheckMark(isCompleted: boolean): JSX.Element {
     return isCompleted ? (
       <GreenPass style={mapIconStyle} />
     ) : (
@@ -85,7 +93,7 @@ export class Block extends Component {
     );
   }
 
-  renderBlockIntros(arr) {
+  renderBlockIntros(arr: string[]): JSX.Element {
     return (
       <div className='block-description'>
         {arr.map((str, i) => (
@@ -95,10 +103,10 @@ export class Block extends Component {
     );
   }
 
-  render() {
+  render(): JSX.Element {
     const {
       blockDashedName,
-      completedChallenges,
+      completedChallengeIds,
       challenges,
       isExpanded,
       superBlock,
@@ -108,8 +116,8 @@ export class Block extends Component {
     let completedCount = 0;
     const challengesWithCompleted = challenges.map(challenge => {
       const { id } = challenge;
-      const isCompleted = completedChallenges.some(
+      const isCompleted = completedChallengeIds.some(
-        completedId => id === completedId
+        (completedChallengeId: string) => completedChallengeId === id
       );
       if (isCompleted) {
         completedCount++;
@@ -134,13 +142,19 @@ export class Block extends Component {
       );
     });
 
-    const blockIntroObj = t(`intro:${superBlock}.blocks.${blockDashedName}`);
+    const blockIntroObj: { title?: string; intro: string[] } = t(
+      `intro:${superBlock}.blocks.${blockDashedName}`
+    );
     const blockTitle = blockIntroObj ? blockIntroObj.title : null;
     const blockIntroArr = blockIntroObj ? blockIntroObj.intro : [];
     const {
       expand: expandText,
       collapse: collapseText,
       courses: coursesText
+    }: {
+      expand: string;
+      collapse: string;
+      courses: string;
     } = t('intro:misc-text');
 
     return isProjectBlock ? (
@@ -196,7 +210,9 @@ export class Block extends Component {
           <button
             aria-expanded={isExpanded}
             className='map-title'
-            onClick={this.handleBlockClick}
+            onClick={() => {
+              this.handleBlockClick();
+            }}
           >
             <Caret />
             <h4 className='course-title'>
@@ -224,7 +240,6 @@ export class Block extends Component {
 }
 
 Block.displayName = 'Block';
-Block.propTypes = propTypes;
 
 export default connect(
   mapStateToProps,

client/src/templates/Introduction/components/cert-challenge.tsx

@@ -1,13 +1,13 @@
 import { Button } from '@freecodecamp/react-bootstrap';
 import { navigate } from 'gatsby-link';
-import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
   certSlugTypeMap,
-  superBlockCertTypeMap
+  superBlockCertTypeMap,
+  SuperBlocks
 } from '../../../../../config/certification-settings';
 import { createFlashMessage } from '../../../components/Flash/redux';
 import {
@@ -15,41 +15,40 @@ import {
   stepsToClaimSelector,
   isSignedInSelector
 } from '../../../redux';
-
+import { User, Steps } from '../../../redux/prop-types';
-import { StepsPropType, UserPropType } from '../../../redux/prop-types';
 import { verifyCert } from '../../../redux/settings';
-
 import { certMap } from '../../../resources/cert-and-project-map';
 import { getVerifyCanClaimCert } from '../../../utils/ajax';
-import CertificationCard from './CertificationCard';
+import CertificationCard from './certification-card';
 
-const propTypes = {
+interface CertChallengeProps {
-  createFlashMessage: PropTypes.func.isRequired,
+  createFlashMessage: typeof createFlashMessage;
-  fetchState: PropTypes.shape({
+  fetchState: {
-    pending: PropTypes.bool,
+    pending: boolean;
-    complete: PropTypes.bool,
+    complete: boolean;
-    errored: PropTypes.bool
+    errored: boolean;
-  }),
+    error: null | string;
-  isSignedIn: PropTypes.bool,
-  steps: StepsPropType,
-  superBlock: PropTypes.string,
-  t: PropTypes.func,
-  title: PropTypes.string,
-  user: UserPropType,
-  verifyCert: PropTypes.func.isRequired
   };
+  isSignedIn: boolean;
+  steps: Steps;
+  superBlock: SuperBlocks;
+  t: TFunction;
+  title: typeof certMap[number]['title'];
+  user: User;
+  verifyCert: typeof verifyCert;
+}
 
 const honestyInfoMessage = {
   type: 'info',
   message: 'flash.honest-first'
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: unknown) => {
   return createSelector(
     stepsToClaimSelector,
     userFetchStateSelector,
     isSignedInSelector,
-    (steps, fetchState, isSignedIn) => ({
+    (steps, fetchState: CertChallengeProps['fetchState'], isSignedIn) => ({
       steps,
       fetchState,
       isSignedIn
@@ -72,7 +71,7 @@ const CertChallenge = ({
   fetchState,
   isSignedIn,
   user: { isHonest, username }
-}) => {
+}: CertChallengeProps): JSX.Element => {
   const [canClaimCert, setCanClaimCert] = useState(false);
   const [certVerificationMessage, setCertVerificationMessage] = useState('');
   const [isCertified, setIsCertified] = useState(false);
@@ -88,7 +87,7 @@ const CertChallenge = ({
 
   useEffect(() => {
     if (username) {
-      (async () => {
+      void (async () => {
         try {
           const data = await getVerifyCanClaimCert(username, superBlock);
           const { status, result } = data?.response?.message;
@@ -103,7 +102,8 @@ const CertChallenge = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [username]);
 
-  const { certSlug } = certMap.find(x => x.title === title);
+  // @ts-expect-error Typescript is confused
+  const certSlug = certMap.find(x => x.title === title).certSlug;
 
   useEffect(() => {
     const { pending, complete } = fetchState;
@@ -113,20 +113,26 @@ const CertChallenge = ({
     }
   }, [fetchState]);
 
+  const certSlugTypeMapTyped: { [key: string]: string } = certSlugTypeMap;
+  const superBlockCertTypeMapTyped: { [key: string]: string } =
+    superBlockCertTypeMap;
+
   useEffect(() => {
     setIsCertified(
       steps?.currentCerts?.find(
-        cert =>
+        (cert: { certSlug: string }) =>
-          certSlugTypeMap[cert.certSlug] === superBlockCertTypeMap[superBlock]
+          certSlugTypeMapTyped[cert.certSlug] ===
+          superBlockCertTypeMapTyped[superBlock]
       )?.show ?? false
     );
 
     const projectsCompleted =
       canClaimCert || certVerificationMessage === 'projects-completed';
+    const projectsCompletedNumber = projectsCompleted ? 1 : 0;
     const completedCount =
       Object.values(steps).filter(
         stepVal => typeof stepVal === 'boolean' && stepVal
-      ).length + projectsCompleted;
+      ).length + projectsCompletedNumber;
     const numberOfSteps = Object.keys(steps).length;
     setHasCompletedRequiredSteps(completedCount === numberOfSteps);
     setStepState({ numberOfSteps, completedCount });
@@ -145,7 +151,8 @@ const CertChallenge = ({
     isSignedIn &&
     (!isCertified || (!hasCompletedRequiredSteps && verificationComplete));
 
-  const createClickHandler = certSlug => e => {
+  const createClickHandler =
+    (certSlug: string | undefined) => (e: { preventDefault: () => void }) => {
       e.preventDefault();
       if (isCertified) {
         return navigate(certLocation);
@@ -188,7 +195,6 @@ const CertChallenge = ({
 };
 
 CertChallenge.displayName = 'CertChallenge';
-CertChallenge.propTypes = propTypes;
 
 export { CertChallenge };
 

client/src/templates/Introduction/components/certification-card.tsx

@@ -1,26 +1,24 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import ScrollableAnchor from 'react-scrollable-anchor';
+import { SuperBlocks } from '../../../../../config/certification-settings';
 import Caret from '../../../assets/icons/caret';
 import GreenNotCompleted from '../../../assets/icons/green-not-completed';
-// import { navigate } from 'gatsby';
 import GreenPass from '../../../assets/icons/green-pass';
-import { StepsPropType } from '../../../redux/prop-types';
+import { Steps } from '../../../redux/prop-types';
-import ClaimCertSteps from './ClaimCertSteps';
+import ClaimCertSteps from './claim-cert-steps';
 
-const propTypes = {
+interface CertificationCardProps {
-  i18nCertText: PropTypes.string,
+  i18nCertText: string;
-  isProjectsCompleted: PropTypes.bool,
+  isProjectsCompleted: boolean;
-  stepState: PropTypes.shape({
+  stepState: {
-    numberOfSteps: PropTypes.number,
+    numberOfSteps: number;
-    completedCount: PropTypes.number
+    completedCount: number;
-  }),
-  steps: StepsPropType,
-  superBlock: PropTypes.string
   };
-
+  steps: Steps;
+  superBlock: SuperBlocks;
+}
 const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
 
 const CertificationCard = ({
@@ -29,7 +27,7 @@ const CertificationCard = ({
   i18nCertText,
   stepState: { completedCount, numberOfSteps },
   steps
-}) => {
+}: CertificationCardProps): JSX.Element => {
   const { t } = useTranslation();
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -41,6 +39,10 @@ const CertificationCard = ({
     expand: expandText,
     collapse: collapseText,
     courses: coursesText
+  }: {
+    expand: string;
+    collapse: string;
+    courses: string;
   } = t('intro:misc-text');
   return (
     <ScrollableAnchor id='claim-cert-block'>
@@ -90,6 +92,5 @@ const CertificationCard = ({
 };
 
 CertificationCard.displayName = 'CertStatus';
-CertificationCard.propTypes = propTypes;
 
 export default CertificationCard;

client/src/templates/Introduction/components/claim-cert-steps.tsx

@@ -1,28 +1,28 @@
 import { Link } from 'gatsby';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation, useTranslation } from 'react-i18next';
+import { SuperBlocks } from '../../../../../config/certification-settings';
 import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import GreenPass from '../../../assets/icons/green-pass';
-import { StepsPropType } from '../../../redux/prop-types';
+import { Steps } from '../../../redux/prop-types';
 
 const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
 
-const propTypes = {
+interface ClaimCertStepsProps {
-  i18nCertText: PropTypes.string,
+  i18nCertText: string;
-  isProjectsCompleted: PropTypes.bool,
+  isProjectsCompleted: boolean;
-  steps: StepsPropType,
+  steps: Steps;
-  superBlock: PropTypes.string
+  superBlock: SuperBlocks;
-};
+}
 
 const ClaimCertSteps = ({
   isProjectsCompleted,
   i18nCertText,
   steps,
   superBlock
-}) => {
+}: ClaimCertStepsProps): JSX.Element => {
   const { t } = useTranslation();
-  const renderCheckMark = isCompleted => {
+  const renderCheckMark = (isCompleted: boolean) => {
     return isCompleted ? (
       <GreenPass style={mapIconStyle} />
     ) : (
@@ -84,6 +84,5 @@ const ClaimCertSteps = ({
 };
 
 ClaimCertSteps.displayName = 'ClaimCertSteps';
-ClaimCertSteps.propTypes = propTypes;
 
 export default withTranslation()(ClaimCertSteps);

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -1,19 +1,22 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { SuperBlocks } from '../../../../../config/certification-settings';
 import { generateIconComponent } from '../../../assets/icons';
 import { Spacer } from '../../../components/helpers';
 
-const propTypes = {
+interface SuperBlockIntroProps {
-  superBlock: PropTypes.string
+  superBlock: SuperBlocks;
-};
+}
 
-function SuperBlockIntro(props) {
+function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
   const { t } = useTranslation();
   const { superBlock } = props;
 
-  const superBlockIntroObj = t(`intro:${superBlock}`);
+  const superBlockIntroObj: {
+    title: string;
+    intro: string[];
+    note: string[];
+  } = t(`intro:${superBlock}`);
   const {
     title: i18nSuperBlock,
     intro: superBlockIntroText,
@@ -39,6 +42,5 @@ function SuperBlockIntro(props) {
 }
 
 SuperBlockIntro.displayName = 'SuperBlockIntro';
-SuperBlockIntro.propTypes = propTypes;
 
 export default SuperBlockIntro;

client/src/templates/Introduction/super-block-intro.tsx

@@ -25,9 +25,9 @@ import {
   userSelector
 } from '../../redux';
 import { MarkdownRemark, AllChallengeNode, User } from '../../redux/prop-types';
-import Block from './components/Block';
+import Block from './components/block';
-import CertChallenge from './components/CertChallenge';
+import CertChallenge from './components/cert-challenge';
-import SuperBlockIntro from './components/SuperBlockIntro';
+import SuperBlockIntro from './components/super-block-intro';
 import { resetExpansion, toggleBlock } from './redux';
 
 import './intro.css';

client/src/utils/ajax.ts

@@ -3,6 +3,7 @@ import envData from '../../../config/env.json';
 
 import type {
   ChallengeFile,
+  ClaimedCertifications,
   CompletedChallenge,
   User
 } from '../redux/prop-types';
@@ -158,11 +159,25 @@ export function getUsernameExists(username: string): Promise<boolean> {
   return get(`/api/users/exists?username=${username}`);
 }
 
-// TODO: Does a GET return a bolean?
+export interface GetVerifyCanClaimCert {
+  response: {
+    type: string;
+    message: {
+      status: boolean;
+      result: string;
+    };
+    variables: {
+      name: string;
+    };
+  };
+  isCertMap: ClaimedCertifications;
+  completedChallenges: CompletedChallenge[];
+}
+
 export function getVerifyCanClaimCert(
   username: string,
   superBlock: string
-): Promise<boolean> {
+): Promise<GetVerifyCanClaimCert> {
   return get(
     `/certificate/verify-can-claim-cert?username=${username}&superBlock=${superBlock}`
   );