RemoveTorrentsModal: convert to Functional Component

This commit is contained in:
Jesse Chan
2020-11-14 00:12:03 +08:00
parent 96315e4935
commit 5675bad221
@@ -1,5 +1,5 @@
import {Component} from 'react';
import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
import {FC, useRef} from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import {Form, FormRow} from '../../../ui';
import Modal from '../Modal';
@@ -8,16 +8,27 @@ import SettingStore from '../../../stores/SettingStore';
import TorrentActions from '../../../actions/TorrentActions';
import TorrentStore from '../../../stores/TorrentStore';
import type {ModalAction} from '../../../stores/UIStore';
const RemoveTorrentsModal: FC = () => {
const formRef = useRef<Form>(null);
const intl = useIntl();
const {selectedTorrents} = TorrentStore;
class RemoveTorrentsModal extends Component<WrappedComponentProps> {
formRef?: Form | null;
getActions(torrentCount: number): Array<ModalAction> {
const {intl} = this.props;
return torrentCount === 0
? [
if (selectedTorrents.length === 0) {
return (
<Modal
heading={intl.formatMessage({
id: 'torrents.remove',
})}
content={
<div className="modal__content inverse">
<Form>
<FormRow>
<FormattedMessage id="torrents.remove.error.no.torrents.selected" />
</FormRow>
</Form>
</div>
}
actions={[
{
clickHandler: null,
content: intl.formatMessage({
@@ -26,82 +37,65 @@ class RemoveTorrentsModal extends Component<WrappedComponentProps> {
triggerDismiss: true,
type: 'primary',
},
]
: [
{
checked: SettingStore.floodSettings.deleteTorrentData,
content: intl.formatMessage({
id: 'torrents.remove.delete.data',
}),
id: 'deleteData',
type: 'checkbox',
},
{
clickHandler: null,
content: intl.formatMessage({
id: 'button.no',
}),
triggerDismiss: true,
type: 'tertiary',
},
{
clickHandler: this.handleRemovalConfirmation,
content: intl.formatMessage({
id: 'button.yes',
}),
triggerDismiss: true,
type: 'primary',
},
];
}
getContent(torrentCount: number) {
return (
<div className="modal__content inverse">
<Form
ref={(ref) => {
this.formRef = ref;
}}>
<FormRow>
{torrentCount === 0 ? (
<FormattedMessage id="torrents.remove.error.no.torrents.selected" />
) : (
<FormattedMessage id="torrents.remove.are.you.sure" values={{count: torrentCount}} />
)}
</FormRow>
</Form>
</div>
);
}
handleRemovalConfirmation = () => {
let deleteData = false;
if (this.formRef != null && this.formRef.getFormData().deleteData) {
deleteData = true;
}
TorrentActions.deleteTorrents({
hashes: TorrentStore.selectedTorrents,
deleteData,
});
saveDeleteTorrentsUserPreferences({deleteData});
};
render() {
const {selectedTorrents} = TorrentStore;
const modalHeading = this.props.intl.formatMessage({
id: 'torrents.remove',
});
return (
<Modal
actions={this.getActions(selectedTorrents.length)}
content={this.getContent(selectedTorrents.length)}
heading={modalHeading}
]}
/>
);
}
}
export default injectIntl(RemoveTorrentsModal);
return (
<Modal
heading={intl.formatMessage({
id: 'torrents.remove',
})}
content={
<div className="modal__content inverse">
<Form ref={formRef}>
<FormRow>
<FormattedMessage id="torrents.remove.are.you.sure" values={{count: selectedTorrents.length}} />
</FormRow>
</Form>
</div>
}
actions={[
{
checked: SettingStore.floodSettings.deleteTorrentData,
content: intl.formatMessage({
id: 'torrents.remove.delete.data',
}),
id: 'deleteData',
type: 'checkbox',
},
{
clickHandler: null,
content: intl.formatMessage({
id: 'button.no',
}),
triggerDismiss: true,
type: 'tertiary',
},
{
clickHandler: () => {
let deleteData = false;
if (formRef.current != null) {
deleteData = formRef.current.getFormData().deleteData as boolean;
}
TorrentActions.deleteTorrents({
hashes: TorrentStore.selectedTorrents,
deleteData,
});
saveDeleteTorrentsUserPreferences({deleteData});
},
content: intl.formatMessage({
id: 'button.yes',
}),
triggerDismiss: true,
type: 'primary',
},
]}
/>
);
};
export default RemoveTorrentsModal;