IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-57712] Convert ./components/post_deleted_modal.tsx from Class Component to Function Component (#26731)

Browse Source 
* [MM-57712] Convert `./components/post_deleted_modal.tsx` from Class Component to Function Component

* 🎨 Improve code quality

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Syed Ali Abbas Zaidi 2024-04-15 12:46:32 +05:00 committed by GitHub
parent 870cee30c6
commit bca4535150
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 53 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
webapp/channels/src/components/post_deleted_modal.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {useState, memo, useCallback} from 'react';
import {Modal} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
@ -9,68 +9,58 @@ type Props = {
onExited: () => void;
}
type State = {
show: boolean;
}
const PostDeletedModal = ({
onExited,
}: Props) => {
const [show, setShow] = useState(true);
export default class PostDeletedModal extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const handleHide = useCallback(() => setShow(false), []);
this.state = {
show: true,
};
}
return (
<Modal
dialogClassName='a11y__modal'
show={show}
onHide={handleHide}
onExited={onExited}
role='dialog'
aria-labelledby='postDeletedModalLabel'
data-testid='postDeletedModal'
>
<Modal.Header closeButton={true}>
<Modal.Title
componentClass='h1'
id='postDeletedModalLabel'
>
<FormattedMessage
id='post_delete.notPosted'
defaultMessage='Comment could not be posted'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
<FormattedMessage
id='post_delete.someone'
defaultMessage='Someone deleted the message on which you tried to post a comment.'
/>
</p>
</Modal.Body>
<Modal.Footer>
<button
type='button'
className='btn btn-primary'
autoFocus={true}
onClick={handleHide}
data-testid='postDeletedModalOkButton'
>
<FormattedMessage
id='post_delete.okay'
defaultMessage='Okay'
/>
</button>
</Modal.Footer>
</Modal>
);
};
private handleHide = () => {
this.setState({show: false});
};
public render(): JSX.Element {
return (
<Modal
dialogClassName='a11y__modal'
show={this.state.show}
onHide={this.handleHide}
onExited={this.props.onExited}
role='dialog'
aria-labelledby='postDeletedModalLabel'
data-testid='postDeletedModal'
>
<Modal.Header closeButton={true}>
<Modal.Title
componentClass='h1'
id='postDeletedModalLabel'
>
<FormattedMessage
id='post_delete.notPosted'
defaultMessage='Comment could not be posted'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
<FormattedMessage
id='post_delete.someone'
defaultMessage='Someone deleted the message on which you tried to post a comment.'
/>
</p>
</Modal.Body>
<Modal.Footer>
<button
type='button'
className='btn btn-primary'
autoFocus={true}
onClick={this.handleHide}
data-testid='postDeletedModalOkButton'
>
<FormattedMessage
id='post_delete.okay'
defaultMessage='Okay'
/>
</button>
</Modal.Footer>
</Modal>
);
}
}
export default memo(PostDeletedModal);