From cf0286dd36348743474956fe31457b7261e22a9f Mon Sep 17 00:00:00 2001
From: Maciek Sitkowski <58401630+sitek94@users.noreply.github.com>
Date: Tue, 26 Oct 2021 18:00:17 +0200
Subject: [PATCH] chore(client): migrate Tool-Panel component to ts  (#43790)

* chore: rename Tool-Panel.js to tool-panel.tsx

* feat: migrate tool-panel to ts

* chore: remove unused ts-expect-error

* chore: improve videoUrl and guideUrl types

* chore: update executeChallenge prop type
---
 .../Challenges/classic/MobileLayout.js        |  2 +-
 .../Challenges/components/side-panel.tsx      |  7 +++--
 .../{Tool-Panel.js => tool-panel.tsx}         | 26 +++++++++----------
 3 files changed, 16 insertions(+), 19 deletions(-)
 rename client/src/templates/Challenges/components/{Tool-Panel.js => tool-panel.tsx} (84%)

diff --git a/client/src/templates/Challenges/classic/MobileLayout.js b/client/src/templates/Challenges/classic/MobileLayout.js
index 476020e54e..05426e3740 100644
--- a/client/src/templates/Challenges/classic/MobileLayout.js
+++ b/client/src/templates/Challenges/classic/MobileLayout.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import envData from '../../../../../config/env.json';
-import ToolPanel from '../components/Tool-Panel';
+import ToolPanel from '../components/tool-panel';
 import { currentTabSelector, moveToTab } from '../redux';
 import EditorTabs from './EditorTabs';
 
diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx
index 7ebd46abf3..767b61fb56 100644
--- a/client/src/templates/Challenges/components/side-panel.tsx
+++ b/client/src/templates/Challenges/components/side-panel.tsx
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import { mathJaxScriptLoader } from '../../../utils/script-loaders';
 import { challengeTestsSelector } from '../redux';
 import TestSuite from './Test-Suite';
-import ToolPanel from './Tool-Panel';
+import ToolPanel from './tool-panel';
 
 import './side-panel.css';
 
@@ -19,11 +19,11 @@ interface SidePanelProps {
   block: string;
   challengeDescription: ReactElement;
   challengeTitle: ReactElement;
-  guideUrl?: string;
+  guideUrl: string;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   showToolPanel: boolean;
   tests?: Record<string, unknown>[];
-  videoUrl?: string;
+  videoUrl: string;
 }
 
 export function SidePanel({
@@ -74,7 +74,6 @@ export function SidePanel({
     >
       {challengeTitle}
       {challengeDescription}
-      {/* @ts-expect-error ToolPanel's redux props are being inferred here, but we don't need to provide them here */}
       {showToolPanel && <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />}
       <TestSuite tests={tests} />
     </div>
diff --git a/client/src/templates/Challenges/components/Tool-Panel.js b/client/src/templates/Challenges/components/tool-panel.tsx
similarity index 84%
rename from client/src/templates/Challenges/components/Tool-Panel.js
rename to client/src/templates/Challenges/components/tool-panel.tsx
index b6c2aa0a46..5e8b3b67f5 100644
--- a/client/src/templates/Challenges/components/Tool-Panel.js
+++ b/client/src/templates/Challenges/components/tool-panel.tsx
@@ -3,17 +3,16 @@ import {
   DropdownButton,
   MenuItem
 } from '@freecodecamp/react-bootstrap';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 
 import './tool-panel.css';
 import { openModal, executeChallenge } from '../redux';
 
 const mapStateToProps = () => ({});
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       executeChallenge,
@@ -24,15 +23,15 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const propTypes = {
-  executeChallenge: PropTypes.func.isRequired,
-  guideUrl: PropTypes.string,
-  isMobile: PropTypes.bool,
-  openHelpModal: PropTypes.func.isRequired,
-  openResetModal: PropTypes.func.isRequired,
-  openVideoModal: PropTypes.func.isRequired,
-  videoUrl: PropTypes.string
-};
+interface ToolPanelProps {
+  executeChallenge: (options?: { showCompletionModal: boolean }) => void;
+  isMobile?: boolean;
+  openHelpModal: () => void;
+  openVideoModal: () => void;
+  openResetModal: () => void;
+  guideUrl: string;
+  videoUrl: string;
+}
 
 function ToolPanel({
   executeChallenge,
@@ -42,7 +41,7 @@ function ToolPanel({
   openResetModal,
   guideUrl,
   videoUrl
-}) {
+}: ToolPanelProps) {
   const handleRunTests = () => {
     executeChallenge({ showCompletionModal: true });
   };
@@ -108,6 +107,5 @@ function ToolPanel({
 }
 
 ToolPanel.displayName = 'ToolPanel';
-ToolPanel.propTypes = propTypes;
 
 export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);