[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', () => { it('should match snapshot', () => {
const wrapper = shallow<UnmuteChannelButton>(<UnmuteChannelButton {...baseProps}/>); const wrapper = shallow(<UnmuteChannelButton {...baseProps}/>);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -31,7 +31,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
const props = baseProps; const props = baseProps;
props.actions.updateChannelNotifyProps = jest.fn(); props.actions.updateChannelNotifyProps = jest.fn();
const wrapper = shallow<UnmuteChannelButton>(<UnmuteChannelButton {...props}/>); const wrapper = shallow(<UnmuteChannelButton {...props}/>);
wrapper.simulate('click'); wrapper.simulate('click');
expect(props.actions.updateChannelNotifyProps).toBeCalledWith( expect(props.actions.updateChannelNotifyProps).toBeCalledWith(

View File

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