feat(client): ts-migration for EditorTabs component (#44006)

* chore: rename the file EditorTabs.js to tsx

* refactor: refactor the file EditorTabs to tsx

refactor: refactor the file EditorTabs to tsx

refactor: refactor the file EditorTabs to tsx

* Update client/src/templates/Challenges/classic/desktop-layout.tsx

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

Co-authored-by: IsmailTlemcani <ismail.tlemcani@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

client/src/templates/Challenges/classic/EditorTabs.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-
-import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
-import {
-  toggleVisibleEditor,
-  visibleEditorsSelector,
-  challengeFilesSelector
-} from '../redux';
-
-const propTypes = {
-  challengeFiles: PropTypes.array.isRequired,
-  toggleVisibleEditor: PropTypes.func.isRequired,
-  visibleEditors: PropTypes.shape({
-    indexjs: PropTypes.bool,
-    indexjsx: PropTypes.bool,
-    indexcss: PropTypes.bool,
-    indexhtml: PropTypes.bool
-  })
-};
-
-const mapStateToProps = createSelector(
-  visibleEditorsSelector,
-  challengeFilesSelector,
-  (visibleEditors, challengeFiles) => ({
-    visibleEditors,
-    challengeFiles
-  })
-);
-
-const mapDispatchToProps = {
-  toggleVisibleEditor
-};
-
-class EditorTabs extends Component {
-  render() {
-    const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props;
-    return (
-      <div className='monaco-editor-tabs'>
-        {sortChallengeFiles(challengeFiles).map(challengeFile => (
-          <button
-            aria-selected={visibleEditors[challengeFile.fileKey]}
-            className='monaco-editor-tab'
-            key={challengeFile.fileKey}
-            onClick={() => toggleVisibleEditor(challengeFile.fileKey)}
-            role='tab'
-          >
-            {challengeFile.path}
-          </button>
-        ))}
-      </div>
-    );
-  }
-}
-
-EditorTabs.displayName = 'EditorTabs';
-EditorTabs.propTypes = propTypes;
-
-export default connect(mapStateToProps, mapDispatchToProps)(EditorTabs);

client/src/templates/Challenges/classic/action-row.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import BreadCrumb from '../components/bread-crumb';
 import { resetChallenge } from '../redux';
-import EditorTabs from './EditorTabs';
+import EditorTabs from './editor-tabs';
 
 interface ActionRowProps {
   block: string;

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -8,8 +8,8 @@ import {
   ChallengeFiles,
   ResizeProps
 } from '../../../redux/prop-types';
-import EditorTabs from './EditorTabs';
 import ActionRow from './action-row';
+import EditorTabs from './editor-tabs';
 
 const { showUpcomingChanges } = envData;
 

client/src/templates/Challenges/classic/editor-tabs.tsx

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
+import { ChallengeFile, ChallengeFiles } from '../../../redux/prop-types';
+import {
+  toggleVisibleEditor,
+  visibleEditorsSelector,
+  challengeFilesSelector
+} from '../redux';
+
+type VisibleEditors = {
+  [key: string]: boolean;
+};
+interface EditorTabsProps {
+  challengeFiles: ChallengeFiles;
+  toggleVisibleEditor: typeof toggleVisibleEditor;
+  visibleEditors: VisibleEditors;
+}
+
+const mapStateToProps = createSelector(
+  visibleEditorsSelector,
+  challengeFilesSelector,
+  (visibleEditors: VisibleEditors, challengeFiles: ChallengeFiles) => ({
+    visibleEditors,
+    challengeFiles
+  })
+);
+
+const mapDispatchToProps = {
+  toggleVisibleEditor
+};
+
+class EditorTabs extends Component<EditorTabsProps> {
+  static displayName: string;
+  render() {
+    const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props;
+    return (
+      <div className='monaco-editor-tabs'>
+        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */}
+        {sortChallengeFiles(challengeFiles).map(
+          (challengeFile: ChallengeFile) => (
+            <button
+              aria-selected={visibleEditors[challengeFile.fileKey]}
+              className='monaco-editor-tab'
+              key={challengeFile.fileKey}
+              onClick={() => toggleVisibleEditor(challengeFile.fileKey)}
+              role='tab'
+            >
+              {challengeFile.path}
+            </button>
+          )
+        )}
+      </div>
+    );
+  }
+}
+
+EditorTabs.displayName = 'EditorTabs';
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditorTabs);

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -8,7 +8,7 @@ import { createStructuredSelector } from 'reselect';
 import envData from '../../../../../config/env.json';
 import ToolPanel from '../components/tool-panel';
 import { currentTabSelector, moveToTab } from '../redux';
-import EditorTabs from './EditorTabs';
+import EditorTabs from './editor-tabs';
 
 const { showUpcomingChanges } = envData;