feat(client): ts-migrate challenge templates- challengeTitle + breadCrumbs (#42586)

client/src/templates/Challenges/components/Side-Panel.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import ChallengeTitle from './Challenge-Title';
+import ChallengeTitle from './challenge-title';
 import ChallengeDescription from './Challenge-Description';
 import ToolPanel from './Tool-Panel';
 import TestSuite from './Test-Suite';

client/src/templates/Challenges/components/bread-crumb.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from '../../../components/helpers/index';
 
 import './challenge-title.css';
 import i18next from 'i18next';
 
-const propTypes = {
+interface BreadCrumbProps {
-  block: PropTypes.string,
+  block: string;
-  superBlock: PropTypes.string
+  superBlock: string;
-};
+}
 
-function BreadCrumb({ block, superBlock }) {
+function BreadCrumb({ block, superBlock }: BreadCrumbProps): JSX.Element {
   return (
     <div className='challenge-title-breadcrumbs'>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
       <Link
         className='breadcrumb-left'
         state={{ breadcrumbBlockClick: block }}
@@ -23,6 +24,8 @@ function BreadCrumb({ block, superBlock }) {
         </span>
       </Link>
       <div className='breadcrumb-center' />
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
       <Link
         className='breadcrumb-right'
         state={{ breadcrumbBlockClick: block }}
@@ -35,6 +38,5 @@ function BreadCrumb({ block, superBlock }) {
 }
 
 BreadCrumb.displayName = 'BreadCrumb';
-BreadCrumb.propTypes = propTypes;
 
 export default BreadCrumb;

client/src/templates/Challenges/components/challenge-title.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import ChallengeTitle from './Challenge-Title';
+import ChallengeTitle from './challenge-title';
 
 const baseProps = {
   block: 'fake-block',

client/src/templates/Challenges/components/challenge-title.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from '../../../components/helpers/index';
 import i18next from 'i18next';
 
 import './challenge-title.css';
-import GreenPass from '../../../assets/icons/green-pass';
-import BreadCrumb from './BreadCrumb';
 
-const propTypes = {
+import GreenPass from '../../../assets/icons/green-pass';
-  block: PropTypes.string,
+import BreadCrumb from './bread-crumb';
-  children: PropTypes.string,
+
-  isCompleted: PropTypes.bool,
+interface ChallengeTitleProps {
-  superBlock: PropTypes.string,
+  block: string;
-  translationPending: PropTypes.bool.isRequired
+  children: string;
-};
+  isCompleted: boolean;
+  superBlock: string;
+  translationPending: boolean;
+}
 
 function ChallengeTitle({
   block,
@@ -21,16 +21,21 @@ function ChallengeTitle({
   isCompleted,
   superBlock,
   translationPending
-}) {
+}: ChallengeTitleProps): JSX.Element {
   return (
     <div className='challenge-title-wrap'>
       {translationPending && (
-        <Link
+        <>
-          className='title-translation-cta'
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          to={i18next.t('links:help-translate-link-url')}
+          {/* @ts-ignore */}
-        >
+          <Link
-          {i18next.t('misc.translation-pending')}
+            className='title-translation-cta'
-        </Link>
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            to={i18next.t('links:help-translate-link-url')}
+          >
+            {i18next.t('misc.translation-pending')}
+          </Link>
+        </>
       )}
       <BreadCrumb block={block} superBlock={superBlock} />
       <div className='challenge-title'>
@@ -48,6 +53,5 @@ function ChallengeTitle({
 }
 
 ChallengeTitle.displayName = 'ChallengeTitle';
-ChallengeTitle.propTypes = propTypes;
 
 export default ChallengeTitle;

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

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

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

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

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

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