From 1e86063f04eced1d2c1f17ebdc7fc1a958acd818 Mon Sep 17 00:00:00 2001
From: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
Date: Fri, 25 Jun 2021 21:16:54 +0530
Subject: [PATCH] feat(client): ts-migrate Challenges/components/ (#42582)

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
---
 client/src/templates/Challenges/classic/Show.tsx |  3 ++-
 .../components/{Output.js => output.tsx}         | 16 ++++++----------
 .../Challenges/projects/backend/Show.tsx         |  5 ++---
 3 files changed, 10 insertions(+), 14 deletions(-)
 rename client/src/templates/Challenges/components/{Output.js => output.tsx} (68%)

diff --git a/client/src/templates/Challenges/classic/Show.tsx b/client/src/templates/Challenges/classic/Show.tsx
index b93e8200a5..e4f8a575f9 100644
--- a/client/src/templates/Challenges/classic/Show.tsx
+++ b/client/src/templates/Challenges/classic/Show.tsx
@@ -16,7 +16,7 @@ import LearnLayout from '../../../components/layouts/Learn';
 import MultifileEditor from './MultifileEditor';
 import Preview from '../components/Preview';
 import SidePanel from '../components/Side-Panel';
-import Output from '../components/Output';
+import Output from '../components/output';
 import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/HelpModal';
 import VideoModal from '../components/VideoModal';
@@ -290,6 +290,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
   renderEditor() {
     const { files } = this.props;
     const { description } = this.getChallenge();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return (
       files && (
         <MultifileEditor
diff --git a/client/src/templates/Challenges/components/Output.js b/client/src/templates/Challenges/components/output.tsx
similarity index 68%
rename from client/src/templates/Challenges/components/Output.js
rename to client/src/templates/Challenges/components/output.tsx
index 02e36a898e..10af12bf36 100644
--- a/client/src/templates/Challenges/components/Output.js
+++ b/client/src/templates/Challenges/components/output.tsx
@@ -1,17 +1,16 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import sanitizeHtml from 'sanitize-html';
 
 import './output.css';
 import { isEmpty } from 'lodash-es';
 
-const propTypes = {
-  defaultOutput: PropTypes.string,
-  output: PropTypes.arrayOf(PropTypes.string)
-};
+interface OutputProps {
+  defaultOutput: string;
+  output: string[];
+}
 
-class Output extends Component {
-  render() {
+class Output extends Component<OutputProps> {
+  render(): JSX.Element {
     const { output, defaultOutput } = this.props;
     const message = sanitizeHtml(
       !isEmpty(output) ? output.join('\n') : defaultOutput,
@@ -28,7 +27,4 @@ class Output extends Component {
   }
 }
 
-Output.displayName = 'Output';
-Output.propTypes = propTypes;
-
 export default Output;
diff --git a/client/src/templates/Challenges/projects/backend/Show.tsx b/client/src/templates/Challenges/projects/backend/Show.tsx
index 13e301f74e..94011e1367 100644
--- a/client/src/templates/Challenges/projects/backend/Show.tsx
+++ b/client/src/templates/Challenges/projects/backend/Show.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 // Package Utilities
@@ -26,7 +27,7 @@ import LearnLayout from '../../../../components/layouts/Learn';
 import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import TestSuite from '../../components/Test-Suite';
-import Output from '../../components/Output';
+import Output from '../../components/output';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';
 import ProjectToolPanel from '../Tool-Panel';
@@ -249,8 +250,6 @@ class BackEnd extends Component<BackEndProps> {
 *
 *
 */`}
-                  dimensions={this.state}
-                  height={150}
                   output={output}
                 />
                 <TestSuite tests={tests} />