From db777d914af30b10d6d3e2fae2120be1db8c225c Mon Sep 17 00:00:00 2001 From: Ismail Tlemcani <34961373+Ismailtlem@users.noreply.github.com> Date: Wed, 10 Nov 2021 17:50:02 +0100 Subject: [PATCH] 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) Co-authored-by: IsmailTlemcani Co-authored-by: Nicholas Carrigan (he/him) --- .../Challenges/classic/EditorTabs.js | 61 ------------------ .../Challenges/classic/action-row.tsx | 2 +- .../Challenges/classic/desktop-layout.tsx | 2 +- .../Challenges/classic/editor-tabs.tsx | 62 +++++++++++++++++++ .../Challenges/classic/mobile-layout.tsx | 2 +- 5 files changed, 65 insertions(+), 64 deletions(-) delete mode 100644 client/src/templates/Challenges/classic/EditorTabs.js create mode 100644 client/src/templates/Challenges/classic/editor-tabs.tsx diff --git a/client/src/templates/Challenges/classic/EditorTabs.js b/client/src/templates/Challenges/classic/EditorTabs.js deleted file mode 100644 index c7cd10671d..0000000000 --- a/client/src/templates/Challenges/classic/EditorTabs.js +++ /dev/null @@ -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 ( -
- {sortChallengeFiles(challengeFiles).map(challengeFile => ( - - ))} -
- ); - } -} - -EditorTabs.displayName = 'EditorTabs'; -EditorTabs.propTypes = propTypes; - -export default connect(mapStateToProps, mapDispatchToProps)(EditorTabs); diff --git a/client/src/templates/Challenges/classic/action-row.tsx b/client/src/templates/Challenges/classic/action-row.tsx index 41f04401a4..2a4bbd0683 100644 --- a/client/src/templates/Challenges/classic/action-row.tsx +++ b/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; diff --git a/client/src/templates/Challenges/classic/desktop-layout.tsx b/client/src/templates/Challenges/classic/desktop-layout.tsx index b3b025b561..b8112ec351 100644 --- a/client/src/templates/Challenges/classic/desktop-layout.tsx +++ b/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; diff --git a/client/src/templates/Challenges/classic/editor-tabs.tsx b/client/src/templates/Challenges/classic/editor-tabs.tsx new file mode 100644 index 0000000000..577707b53a --- /dev/null +++ b/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 { + static displayName: string; + render() { + const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props; + return ( +
+ {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */} + {sortChallengeFiles(challengeFiles).map( + (challengeFile: ChallengeFile) => ( + + ) + )} +
+ ); + } +} + +EditorTabs.displayName = 'EditorTabs'; + +export default connect(mapStateToProps, mapDispatchToProps)(EditorTabs); diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx index d6587525c0..5390b75ebd 100644 --- a/client/src/templates/Challenges/classic/mobile-layout.tsx +++ b/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;