[MM-54820] Convert ./components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx from Class Component to Function Component (#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
This commit is contained in:
Sudhanshu Pandey 2023-11-06 07:24:18 -05:00 committed by GitHub
parent caa87ec7f6
commit b3c183cdf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 28 deletions

View File

@ -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(

View File

@ -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);