feat(client): ts-migrate Map component (#42845)

* feat(client) Renamed index.js to index.tsx

* feat(client): ts-migrate Map component

client/src/assets/icons/index.tsx

@@ -39,4 +39,4 @@ const generateIconComponent = (
   return <Icon className={className} />;
 };
 
-export { generateIconComponent };
+export { generateIconComponent, SuperBlock };

client/src/components/Map/index.tsx

@@ -1,24 +1,30 @@
 import { graphql, useStaticQuery } from 'gatsby';
 import i18next from 'i18next';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import envData from '../../../../config/env.json';
 import { isAuditedCert } from '../../../../utils/is-audited';
-import { generateIconComponent } from '../../assets/icons';
-
+import { generateIconComponent, SuperBlock } from '../../assets/icons';
 import LinkButton from '../../assets/icons/link-button';
+import { ChallengeNodeType } from '../../redux/prop-types';
 import { Link, Spacer } from '../helpers';
+
 import './map.css';
 
 const { curriculumLocale } = envData;
 
-const propTypes = {
-  currentSuperBlock: PropTypes.string,
-  forLanding: PropTypes.bool
-};
+interface MapProps {
+  currentSuperBlock?: string;
+  forLanding?: boolean;
+}
 
-function createSuperBlockTitle(superBlock) {
+interface MapData {
+  allChallengeNode: {
+    nodes: ChallengeNodeType[];
+  };
+}
+
+function createSuperBlockTitle(superBlock: string) {
   const superBlockTitle = i18next.t(`intro:${superBlock}.title`);
   return superBlock === 'coding-interview-prep'
     ? i18next.t('learn.cert-map-estimates.coding-prep', {
@@ -33,7 +39,7 @@ const linkSpacingStyle = {
   alignItems: 'center'
 };
 
-function renderLandingMap(nodes) {
+function renderLandingMap(nodes: ChallengeNodeType[]) {
   nodes = nodes.filter(node => node.superBlock !== 'coding-interview-prep');
   return (
     <ul data-test-label='certifications'>
@@ -44,7 +50,7 @@ function renderLandingMap(nodes) {
             to={`/learn/${node.superBlock}/`}
           >
             <div style={linkSpacingStyle}>
-              {generateIconComponent(node.superBlock, 'map-icon')}
+              {generateIconComponent(node.superBlock as SuperBlock, 'map-icon')}
               {i18next.t(`intro:${node.superBlock}.title`)}
             </div>
             <LinkButton />
@@ -55,7 +61,7 @@ function renderLandingMap(nodes) {
   );
 }
 
-function renderLearnMap(nodes, currentSuperBlock = '') {
+function renderLearnMap(nodes: ChallengeNodeType[], currentSuperBlock = '') {
   nodes = nodes.filter(node => node.superBlock !== currentSuperBlock);
   return curriculumLocale === 'english' ? (
     <ul data-test-label='learn-curriculum-map'>
@@ -66,7 +72,7 @@ function renderLearnMap(nodes, currentSuperBlock = '') {
             to={`/learn/${node.superBlock}/`}
           >
             <div style={linkSpacingStyle}>
-              {generateIconComponent(node.superBlock, 'map-icon')}
+              {generateIconComponent(node.superBlock as SuperBlock, 'map-icon')}
               {createSuperBlockTitle(node.superBlock)}
             </div>
           </Link>
@@ -84,7 +90,10 @@ function renderLearnMap(nodes, currentSuperBlock = '') {
               to={`/learn/${node.superBlock}/`}
             >
               <div style={linkSpacingStyle}>
-                {generateIconComponent(node.superBlock, 'map-icon')}
+                {generateIconComponent(
+                  node.superBlock as SuperBlock,
+                  'map-icon'
+                )}
                 {createSuperBlockTitle(node.superBlock)}
               </div>
             </Link>
@@ -111,7 +120,10 @@ function renderLearnMap(nodes, currentSuperBlock = '') {
               to={`/learn/${node.superBlock}/`}
             >
               <div style={linkSpacingStyle}>
-                {generateIconComponent(node.superBlock, 'map-icon')}
+                {generateIconComponent(
+                  node.superBlock as SuperBlock,
+                  'map-icon'
+                )}
                 {createSuperBlockTitle(node.superBlock)}
               </div>
             </Link>
@@ -121,13 +133,16 @@ function renderLearnMap(nodes, currentSuperBlock = '') {
   );
 }
 
-export function Map({ forLanding = false, currentSuperBlock = '' }) {
+export function Map({
+  forLanding = false,
+  currentSuperBlock = ''
+}: MapProps): React.ReactElement {
   /*
    * this query gets the first challenge from each block and the second block
    * from each superblock, leaving you with one challenge from each
    * superblock
    */
-  const data = useStaticQuery(graphql`
+  const data: MapData = useStaticQuery(graphql`
     query SuperBlockNodes {
       allChallengeNode(
         sort: { fields: [superOrder] }
@@ -141,7 +156,7 @@ export function Map({ forLanding = false, currentSuperBlock = '' }) {
     }
   `);
 
-  let nodes = data.allChallengeNode.nodes;
+  const nodes = data.allChallengeNode.nodes;
 
   return (
     <div className='map-ui' data-test-label='learn-curriculum-map'>
@@ -153,6 +168,5 @@ export function Map({ forLanding = false, currentSuperBlock = '' }) {
 }
 
 Map.displayName = 'Map';
-Map.propTypes = propTypes;
 
 export default Map;