From 4737d96084feaeabdd317687202694dd90af2048 Mon Sep 17 00:00:00 2001
From: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
Date: Mon, 28 Jun 2021 22:18:49 +0530
Subject: [PATCH] feat(client): ts-migrate /client/src/.../Tool-Panel.js
 (#42646)

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
---
 .../Challenges/projects/backend/Show.tsx      |  2 +-
 .../Challenges/projects/frontend/Show.tsx     |  2 +-
 .../{Tool-Panel.js => tool-panel.tsx}         | 21 +++++++++----------
 3 files changed, 12 insertions(+), 13 deletions(-)
 rename client/src/templates/Challenges/projects/{Tool-Panel.js => tool-panel.tsx} (77%)

diff --git a/client/src/templates/Challenges/projects/backend/Show.tsx b/client/src/templates/Challenges/projects/backend/Show.tsx
index 94011e1367..a3b8181831 100644
--- a/client/src/templates/Challenges/projects/backend/Show.tsx
+++ b/client/src/templates/Challenges/projects/backend/Show.tsx
@@ -30,7 +30,7 @@ import TestSuite from '../../components/Test-Suite';
 import Output from '../../components/output';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';
-import ProjectToolPanel from '../Tool-Panel';
+import ProjectToolPanel from '../tool-panel';
 import SolutionForm from '../SolutionForm';
 import Spacer from '../../../../components/helpers/spacer';
 import {
diff --git a/client/src/templates/Challenges/projects/frontend/Show.tsx b/client/src/templates/Challenges/projects/frontend/Show.tsx
index 728495955c..9fcb69edb8 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/Show.tsx
@@ -29,7 +29,7 @@ import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import Spacer from '../../../../components/helpers/spacer';
 import SolutionForm from '../SolutionForm';
-import ProjectToolPanel from '../Tool-Panel';
+import ProjectToolPanel from '../tool-panel';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';
 import Hotkeys from '../../components/Hotkeys';
diff --git a/client/src/templates/Challenges/projects/Tool-Panel.js b/client/src/templates/Challenges/projects/tool-panel.tsx
similarity index 77%
rename from client/src/templates/Challenges/projects/Tool-Panel.js
rename to client/src/templates/Challenges/projects/tool-panel.tsx
index 7835a5ba48..eca63f2a2a 100644
--- a/client/src/templates/Challenges/projects/Tool-Panel.js
+++ b/client/src/templates/Challenges/projects/tool-panel.tsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { withTranslation } from 'react-i18next';
@@ -11,7 +10,7 @@ import './tool-panel.css';
 
 const mapStateToProps = () => ({});
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       openHelpModal: () => openModal('help')
@@ -19,14 +18,15 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const propTypes = {
-  guideUrl: PropTypes.string,
-  openHelpModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
-};
+interface ToolPanelProps {
+  guideUrl?: string;
+  openHelpModal: () => void;
+  t: (args: string) => void;
+}
 
-export class ToolPanel extends Component {
-  render() {
+export class ToolPanel extends Component<ToolPanelProps> {
+  static displayName: string;
+  render(): JSX.Element {
     const { guideUrl, openHelpModal, t } = this.props;
     return (
       <div className='tool-panel-group project-tool-panel'>
@@ -55,7 +55,6 @@ export class ToolPanel extends Component {
 }
 
 ToolPanel.displayName = 'ProjectToolPanel';
-ToolPanel.propTypes = propTypes;
 
 export default connect(
   mapStateToProps,