From 32688ef7a3488f32499c3bd5e8c3f969c0ac94c3 Mon Sep 17 00:00:00 2001 From: sowmiyamuthuraman <32141844+sowmiyamuthuraman@users.noreply.github.com> Date: Fri, 16 Oct 2020 16:25:22 +0530 Subject: [PATCH] Migrate team_settings_modal to typescript (#6591) --- components/team_settings/team_settings.jsx | 2 +- ...snap => team_settings_modal.test.tsx.snap} | 0 .../{index.js => index.ts} | 6 ++-- ....test.jsx => team_settings_modal.test.tsx} | 6 ++-- ...ings_modal.jsx => team_settings_modal.tsx} | 32 ++++++++++++------- 5 files changed, 28 insertions(+), 18 deletions(-) rename components/team_settings_modal/__snapshots__/{team_settings_modal.test.jsx.snap => team_settings_modal.test.tsx.snap} (100%) rename components/team_settings_modal/{index.js => index.ts} (75%) rename components/team_settings_modal/{team_settings_modal.test.jsx => team_settings_modal.test.tsx} (80%) rename components/team_settings_modal/{team_settings_modal.jsx => team_settings_modal.tsx} (86%) diff --git a/components/team_settings/team_settings.jsx b/components/team_settings/team_settings.jsx index 2d23df5921b7..0fd479a362dd 100644 --- a/components/team_settings/team_settings.jsx +++ b/components/team_settings/team_settings.jsx @@ -61,7 +61,7 @@ TeamSettings.propTypes = { updateSection: PropTypes.func.isRequired, closeModal: PropTypes.func.isRequired, collapseModal: PropTypes.func.isRequired, - team: PropTypes.object.isRequired, + team: PropTypes.object, }; export default TeamSettings; diff --git a/components/team_settings_modal/__snapshots__/team_settings_modal.test.jsx.snap b/components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap similarity index 100% rename from components/team_settings_modal/__snapshots__/team_settings_modal.test.jsx.snap rename to components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap diff --git a/components/team_settings_modal/index.js b/components/team_settings_modal/index.ts similarity index 75% rename from components/team_settings_modal/index.js rename to components/team_settings_modal/index.ts index 16bd8a4b3867..95a0349c6ff2 100644 --- a/components/team_settings_modal/index.js +++ b/components/team_settings_modal/index.ts @@ -6,9 +6,11 @@ import {connect} from 'react-redux'; import {ModalIdentifiers} from 'utils/constants'; import {isModalOpen} from 'selectors/views/modals'; -import TeamSettingsModal from './team_settings_modal.jsx'; +import {GlobalState} from 'types/store'; -function mapStateToProps(state) { +import TeamSettingsModal from './team_settings_modal'; + +function mapStateToProps(state: GlobalState) { const modalId = ModalIdentifiers.TEAM_SETTINGS; return { show: isModalOpen(state, modalId), diff --git a/components/team_settings_modal/team_settings_modal.test.jsx b/components/team_settings_modal/team_settings_modal.test.tsx similarity index 80% rename from components/team_settings_modal/team_settings_modal.test.jsx rename to components/team_settings_modal/team_settings_modal.test.tsx index 90a6e9e4204b..af7023b3d36e 100644 --- a/components/team_settings_modal/team_settings_modal.test.jsx +++ b/components/team_settings_modal/team_settings_modal.test.tsx @@ -5,11 +5,11 @@ import {shallow} from 'enzyme'; import React from 'react'; -import TeamSettingsModal from 'components/team_settings_modal/team_settings_modal.jsx'; +import TeamSettingsModal from 'components/team_settings_modal/team_settings_modal'; describe('components/team_settings_modal', () => { test('should match snapshot', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,7 +22,7 @@ describe('components/team_settings_modal', () => { />, ); - wrapper.instance().handleHidden(); + (wrapper.instance() as TeamSettingsModal).handleHidden(); expect(onHide).toHaveBeenCalledTimes(1); }); }); diff --git a/components/team_settings_modal/team_settings_modal.jsx b/components/team_settings_modal/team_settings_modal.tsx similarity index 86% rename from components/team_settings_modal/team_settings_modal.jsx rename to components/team_settings_modal/team_settings_modal.tsx index ed7fbb8f45e6..98634dbd3182 100644 --- a/components/team_settings_modal/team_settings_modal.jsx +++ b/components/team_settings_modal/team_settings_modal.tsx @@ -3,22 +3,29 @@ import $ from 'jquery'; import React from 'react'; -import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import {Modal} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import * as Utils from 'utils/utils.jsx'; -const SettingsSidebar = React.lazy(() => import('components/settings_sidebar.tsx')); +const SettingsSidebar = React.lazy(() => import('components/settings_sidebar')); import TeamSettings from 'components/team_settings'; -export default class TeamSettingsModal extends React.PureComponent { - static propTypes = { - onHide: PropTypes.func, - }; +type Props = { + onHide: () => void +} + +export type State = { + activeTab: string, + activeSection: string, + show: boolean, +} - constructor(props) { +export default class TeamSettingsModal extends React.PureComponent { + modalBodyRef: React.RefObject; + + constructor(props:Props) { super(props); this.state = { @@ -30,23 +37,24 @@ export default class TeamSettingsModal extends React.PureComponent { this.modalBodyRef = React.createRef(); } - updateTab = (tab) => { + updateTab = (tab: string) => { this.setState({ activeTab: tab, activeSection: '', }); } - updateSection = (section) => { + updateSection = (section:string) => { this.setState({activeSection: section}); } collapseModal = () => { - $(ReactDOM.findDOMNode(this.modalBodyRef.current)).closest('.modal-dialog').removeClass('display--content'); // eslint-disable-line jquery/no-closest, jquery/no-class + const el = ReactDOM.findDOMNode(this.modalBodyRef.current) as HTMLDivElement; + $(el).closest('.modal-dialog').removeClass('display--content'); // eslint-disable-line jquery/no-closest, jquery/no-class this.setState({ - active_tab: '', - active_section: '', + activeTab: '', + activeSection: '', }); }