From 8d6d210d825fa6b5b3ae04298c4232d40ebf55f7 Mon Sep 17 00:00:00 2001
From: Ismail Tlemcani <34961373+Ismailtlem@users.noreply.github.com>
Date: Wed, 10 Nov 2021 09:29:19 +0100
Subject: [PATCH] feat(client): ts-migration for the Mobile Layout component
 (#44082)

* chore: rename the file MobileLayout.js to tsx

* refactor: refactor the file MobileLayout to TS

Co-authored-by: IsmailTlemcani <ismail.tlemcani@gmail.com>
---
 .../{MobileLayout.js => mobile-layout.tsx}    | 33 +++++++++----------
 .../src/templates/Challenges/classic/show.tsx |  2 +-
 2 files changed, 16 insertions(+), 19 deletions(-)
 rename client/src/templates/Challenges/classic/{MobileLayout.js => mobile-layout.tsx} (81%)

diff --git a/client/src/templates/Challenges/classic/MobileLayout.js b/client/src/templates/Challenges/classic/mobile-layout.tsx
similarity index 81%
rename from client/src/templates/Challenges/classic/MobileLayout.js
rename to client/src/templates/Challenges/classic/mobile-layout.tsx
index 05426e3740..d6587525c0 100644
--- a/client/src/templates/Challenges/classic/MobileLayout.js
+++ b/client/src/templates/Challenges/classic/mobile-layout.tsx
@@ -1,10 +1,9 @@
 import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
 import i18next from 'i18next';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import envData from '../../../../../config/env.json';
 import ToolPanel from '../components/tool-panel';
@@ -17,27 +16,26 @@ const mapStateToProps = createStructuredSelector({
   currentTab: currentTabSelector
 });
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       moveToTab
     },
     dispatch
   );
-
-const propTypes = {
-  currentTab: PropTypes.number,
-  editor: PropTypes.element,
-  guideUrl: PropTypes.string,
-  hasPreview: PropTypes.bool,
-  instructions: PropTypes.element,
-  moveToTab: PropTypes.func,
-  preview: PropTypes.element,
-  testOutput: PropTypes.element,
-  videoUrl: PropTypes.string
-};
-
-class MobileLayout extends Component {
+interface MobileLayoutProps {
+  currentTab: number;
+  editor: JSX.Element | null;
+  guideUrl: string;
+  hasPreview: boolean;
+  instructions: JSX.Element;
+  moveToTab: typeof moveToTab;
+  preview: JSX.Element;
+  testOutput: JSX.Element;
+  videoUrl: string;
+}
+class MobileLayout extends Component<MobileLayoutProps> {
+  static displayName: string;
   componentDidMount() {
     if (this.props.currentTab !== 1) this.props.moveToTab(1);
   }
@@ -101,6 +99,5 @@ class MobileLayout extends Component {
 }
 
 MobileLayout.displayName = 'MobileLayout';
-MobileLayout.propTypes = propTypes;
 
 export default connect(mapStateToProps, mapDispatchToProps)(MobileLayout);
diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index 82d4e13f07..2b7dc13a66 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -44,9 +44,9 @@ import {
   updateChallengeMeta
 } from '../redux';
 import { getGuideUrl } from '../utils';
-import MobileLayout from './MobileLayout';
 import MultifileEditor from './MultifileEditor';
 import DesktopLayout from './desktop-layout';
+import MobileLayout from './mobile-layout';
 
 import './classic.css';
 import '../components/test-frame.css';