From 8c7cc2e53294fb6f3cdad4faa89d1027de849f99 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Fri, 25 Jun 2021 10:05:34 -0500
Subject: [PATCH] feat(client): ts-migrate challenge templates- challengeTitle
 + breadCrumbs (#42586)

---
 .../Challenges/components/Side-Panel.js       |  2 +-
 ....js.snap => challenge-title.test.tsx.snap} |  0
 .../{BreadCrumb.js => bread-crumb.tsx}        | 16 ++++----
 ...Title.test.js => challenge-title.test.tsx} |  2 +-
 ...Challenge-Title.js => challenge-title.tsx} | 40 ++++++++++---------
 .../Challenges/projects/backend/Show.tsx      |  2 +-
 .../Challenges/projects/frontend/Show.tsx     |  2 +-
 .../src/templates/Challenges/video/Show.tsx   |  2 +-
 8 files changed, 36 insertions(+), 30 deletions(-)
 rename client/src/templates/Challenges/components/__snapshots__/{ChallengeTitle.test.js.snap => challenge-title.test.tsx.snap} (100%)
 rename client/src/templates/Challenges/components/{BreadCrumb.js => bread-crumb.tsx} (70%)
 rename client/src/templates/Challenges/components/{ChallengeTitle.test.js => challenge-title.test.tsx} (89%)
 rename client/src/templates/Challenges/components/{Challenge-Title.js => challenge-title.tsx} (57%)

diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js
index f28b151e76..32f2244de8 100644
--- a/client/src/templates/Challenges/components/Side-Panel.js
+++ b/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';
diff --git a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
similarity index 100%
rename from client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
rename to client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
diff --git a/client/src/templates/Challenges/components/BreadCrumb.js b/client/src/templates/Challenges/components/bread-crumb.tsx
similarity index 70%
rename from client/src/templates/Challenges/components/BreadCrumb.js
rename to client/src/templates/Challenges/components/bread-crumb.tsx
index 1c7d6c505f..ad510ceec4 100644
--- a/client/src/templates/Challenges/components/BreadCrumb.js
+++ b/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 = {
-  block: PropTypes.string,
-  superBlock: PropTypes.string
-};
+interface BreadCrumbProps {
+  block: 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;
diff --git a/client/src/templates/Challenges/components/ChallengeTitle.test.js b/client/src/templates/Challenges/components/challenge-title.test.tsx
similarity index 89%
rename from client/src/templates/Challenges/components/ChallengeTitle.test.js
rename to client/src/templates/Challenges/components/challenge-title.test.tsx
index 6a63f09a8a..dd0e9f42e4 100644
--- a/client/src/templates/Challenges/components/ChallengeTitle.test.js
+++ b/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',
diff --git a/client/src/templates/Challenges/components/Challenge-Title.js b/client/src/templates/Challenges/components/challenge-title.tsx
similarity index 57%
rename from client/src/templates/Challenges/components/Challenge-Title.js
rename to client/src/templates/Challenges/components/challenge-title.tsx
index fcecdb4287..a263102093 100644
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/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 = {
-  block: PropTypes.string,
-  children: PropTypes.string,
-  isCompleted: PropTypes.bool,
-  superBlock: PropTypes.string,
-  translationPending: PropTypes.bool.isRequired
-};
+import GreenPass from '../../../assets/icons/green-pass';
+import BreadCrumb from './bread-crumb';
+
+interface ChallengeTitleProps {
+  block: string;
+  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'
-          to={i18next.t('links:help-translate-link-url')}
-        >
-          {i18next.t('misc.translation-pending')}
-        </Link>
+        <>
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore */}
+          <Link
+            className='title-translation-cta'
+            // 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;
diff --git a/client/src/templates/Challenges/projects/backend/Show.tsx b/client/src/templates/Challenges/projects/backend/Show.tsx
index 36dc5c79ae..8f6f02b55d 100644
--- a/client/src/templates/Challenges/projects/backend/Show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/projects/frontend/Show.tsx b/client/src/templates/Challenges/projects/frontend/Show.tsx
index 8a5204eed3..b374b34929 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx
index 805f1d829e..8fdc9a4ebe 100644
--- a/client/src/templates/Challenges/video/Show.tsx
+++ b/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';