[MM-54820] Convert ./components/channel_header_mobile/unmute_channel_…

…button/unmute_channel_button.tsx from Class Component to Function Component (mattermost#24974) * chore: migrated UnmuteChannelButton to fun. comp. * fix: resolves type errors * feat: introduces memo to unmute_channel_button * chore: minor syntax improvement * chore: address code review suggestions * chore: address code review suggestions
devinbinnie · Nov 6, 2023 · b3c183c · b3c183c
1 parent caa87ec
commit b3c183c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 29 deletions.
diff --git a/...src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx b/...src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx
@@ -22,7 +22,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow<UnmuteChannelButton>(<UnmuteChannelButton {...baseProps}/>);
+        const wrapper = 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>(<UnmuteChannelButton {...props}/>);
+        const wrapper = shallow(<UnmuteChannelButton {...props}/>);
         wrapper.simulate('click');
 
         expect(props.actions.updateChannelNotifyProps).toBeCalledWith(

diff --git a/...nels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx b/...nels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx
@@ -8,37 +8,29 @@ import type {ChannelNotifyProps} from '@mattermost/types/channels';
 import {NotificationLevels} from 'utils/constants';
 
 type Actions = {
-    updateChannelNotifyProps: (userId: string, channelId: string, props: ChannelNotifyProps) => void;
-}
+    updateChannelNotifyProps: (userId: string, channelId: string, props: Pick<ChannelNotifyProps, 'mark_unread'>) => void;
+};
 
 type Props = {
     user: { id: string };
     channel: { id: string };
     actions: Actions;
-}
-
-export default class UnmuteChannelButton extends React.PureComponent<Props> {
-    handleClick = (): void => {
-        const {
-            user,
-            channel,
-            actions: {
-                updateChannelNotifyProps,
-            },
-        } = this.props;
-
-        updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL} as ChannelNotifyProps);
+};
+
+const UnmuteChannelButton = ({user, channel, actions}: Props) => {
+    const handleClick = () => {
+        actions.updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL});
     };
 
-    render(): JSX.Element {
-        return (
-            <button
-                type='button'
-                className='navbar-toggle icon icon__mute'
-                onClick={this.handleClick}
-            >
-                <span className='fa fa-bell-slash-o icon'/>
-            </button>
-        );
-    }
-}
+    return (
+        <button
+            type='button'
+            className='navbar-toggle icon icon__mute'
+            onClick={handleClick}
+        >
+            <span className='fa fa-bell-slash-o icon'/>
+        </button>
+    );
+};
+
+export default React.memo(UnmuteChannelButton);