MM-20415 Migrate 'components/channel_header_mobile/unmute_channel_button' module and associated tests to TypeScript

components/channel_header_mobile/unmute_channel_button/index.js → components/channel_header_mobile/unmute_channel_button/index.ts

@@ -1,13 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {bindActionCreators} from 'redux';
+import {bindActionCreators, Dispatch} from 'redux';
 import {connect} from 'react-redux';
 import {updateChannelNotifyProps} from 'mattermost-redux/actions/channels';
 
+import {GenericAction} from 'mattermost-redux/types/actions';
+
 import UnmuteChannelButton from './unmute_channel_button';
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch: Dispatch<GenericAction>) => ({
     actions: bindActionCreators({
         updateChannelNotifyProps,
     }, dispatch),

components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.js → components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, ShallowWrapper} from 'enzyme';
 
 import {NotificationLevels} from 'utils/constants';
 
@@ -22,7 +22,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow(<UnmuteChannelButton {...baseProps}/>);
+        const wrapper: ShallowWrapper<any, any, UnmuteChannelButton> = shallow(<UnmuteChannelButton {...baseProps}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
@@ -31,7 +31,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
         const props = baseProps;
         props.actions.updateChannelNotifyProps = jest.fn();
 
-        const wrapper = shallow(<UnmuteChannelButton {...props}/>);
+        const wrapper: ShallowWrapper<any, any, UnmuteChannelButton> = shallow(<UnmuteChannelButton {...props}/>);
         wrapper.simulate('click');
 
         expect(props.actions.updateChannelNotifyProps).toBeCalledWith(

components/channel_header_mobile/unmute_channel_button/unmute_channel_button.js → components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx

@@ -2,26 +2,23 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import {NotificationLevels} from 'utils/constants';
+import {ChannelNotifyProps} from 'mattermost-redux/types/channels';
 
-export default class UnmuteChannelButton extends React.PureComponent {
-    static propTypes = {
-        user: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-        }).isRequired,
+import {NotificationLevels} from 'utils/constants';
 
-        channel: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-        }).isRequired,
+type Actions = {
+    updateChannelNotifyProps: (userId:string, channelId:string, props:ChannelNotifyProps) => void
+}
 
-        actions: PropTypes.shape({
-            updateChannelNotifyProps: PropTypes.func.isRequired,
-        }).isRequired,
-    };
+type Props = {
+    user: { id: string }
+    channel: { id: string }
+    actions: Actions
+}
 
-    handleClick = () => {
+export default class UnmuteChannelButton extends React.PureComponent<Props> {
+    handleClick = (): void => {
         const {
             user,
             channel,
@@ -30,10 +27,10 @@ export default class UnmuteChannelButton extends React.PureComponent {
             },
         } = this.props;
 
-        updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL});
+        updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL} as ChannelNotifyProps);
     }
 
-    render() {
+    render(): JSX.Element {
         return (
             <button
                 type='button'