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>pull/44150/head
parent
2657265a84
commit
db777d914a
|
@ -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);
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue