open-source-mirrors
/
Sonarr
mirror of https://github.com/Sonarr/Sonarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Convert Delete Series Modal to TypeScript

Browse Source
pull/7640/head
Mark McDowall 1 month ago
parent 7035bb2944
commit d3153685ac
No known key found for this signature in database
6 changed files with 165 additions and 239 deletions
Show Stats Download Patch File Download Diff File

34
frontend/src/Series/Delete/DeleteSeriesModal.js
Unescape View File

@ -1,34 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import Modal from 'Components/Modal/Modal';
import { sizes } from 'Helpers/Props';
import DeleteSeriesModalContentConnector from './DeleteSeriesModalContentConnector';
function DeleteSeriesModal(props) {
const {
isOpen,
onModalClose,
...otherProps
} = props;
return (
<Modal
isOpen={isOpen}
size={sizes.MEDIUM}
onModalClose={onModalClose}
>
<DeleteSeriesModalContentConnector
{...otherProps}
onModalClose={onModalClose}
/>
</Modal>
);
}
DeleteSeriesModal.propTypes = {
...DeleteSeriesModalContentConnector.propTypes,
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default DeleteSeriesModal;

24
frontend/src/Series/Delete/DeleteSeriesModal.tsx
Unescape View File

@ -0,0 +1,24 @@
import React from 'react';
import Modal from 'Components/Modal/Modal';
import { sizes } from 'Helpers/Props';
import DeleteSeriesModalContent, {
DeleteSeriesModalContentProps,
} from './DeleteSeriesModalContent';
interface DeleteSeriesModalProps extends DeleteSeriesModalContentProps {
isOpen: boolean;
}
function DeleteSeriesModal({
isOpen,
onModalClose,
...otherProps
}: DeleteSeriesModalProps) {
return (
<Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
<DeleteSeriesModalContent {...otherProps} onModalClose={onModalClose} />
</Modal>
);
}
export default DeleteSeriesModal;

160
frontend/src/Series/Delete/DeleteSeriesModalContent.js
Unescape View File

@ -1,160 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Icon from 'Components/Icon';
import Button from 'Components/Link/Button';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { icons, inputTypes, kinds } from 'Helpers/Props';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './DeleteSeriesModalContent.css';
class DeleteSeriesModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
deleteFiles: false
};
}
//
// Listeners
onDeleteFilesChange = ({ value }) => {
this.setState({ deleteFiles: value });
};
onDeleteSeriesConfirmed = () => {
const deleteFiles = this.state.deleteFiles;
const addImportListExclusion = this.props.deleteOptions.addImportListExclusion;
this.setState({ deleteFiles: false });
this.props.onDeletePress(deleteFiles, addImportListExclusion);
};
//
// Render
render() {
const {
title,
path,
statistics = {},
deleteOptions,
onModalClose,
onDeleteOptionChange
} = this.props;
const {
episodeFileCount = 0,
sizeOnDisk = 0
} = statistics;
const deleteFiles = this.state.deleteFiles;
const addImportListExclusion = deleteOptions.addImportListExclusion;
return (
<ModalContent
onModalClose={onModalClose}
>
<ModalHeader>
{translate('DeleteSeriesModalHeader', { title })}
</ModalHeader>
<ModalBody>
<div className={styles.pathContainer}>
<Icon
className={styles.pathIcon}
name={icons.FOLDER}
/>
{path}
</div>
<FormGroup>
<FormLabel>{translate('AddListExclusion')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="addImportListExclusion"
value={addImportListExclusion}
helpText={translate('AddListExclusionSeriesHelpText')}
onChange={onDeleteOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{episodeFileCount === 0 ? translate('DeleteSeriesFolder') : translate('DeleteEpisodesFiles', { episodeFileCount })}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="deleteFiles"
value={deleteFiles}
helpText={episodeFileCount === 0 ? translate('DeleteSeriesFolderHelpText') : translate('DeleteEpisodesFilesHelpText')}
kind={kinds.DANGER}
onChange={this.onDeleteFilesChange}
/>
</FormGroup>
{
deleteFiles ?
<div className={styles.deleteFilesMessage}>
<div><InlineMarkdown data={translate('DeleteSeriesFolderConfirmation', { path })} blockClassName={styles.folderPath} /></div>
{
episodeFileCount ?
<div className={styles.deleteCount}>
{translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
</div> :
null
}
</div> :
null
}
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>
{translate('Close')}
</Button>
<Button
kind={kinds.DANGER}
onPress={this.onDeleteSeriesConfirmed}
>
{translate('Delete')}
</Button>
</ModalFooter>
</ModalContent>
);
}
}
DeleteSeriesModalContent.propTypes = {
title: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
statistics: PropTypes.object.isRequired,
deleteOptions: PropTypes.object.isRequired,
onDeleteOptionChange: PropTypes.func.isRequired,
onDeletePress: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
DeleteSeriesModalContent.defaultProps = {
statistics: {
episodeFileCount: 0
}
};
export default DeleteSeriesModalContent;

140
frontend/src/Series/Delete/DeleteSeriesModalContent.tsx
Unescape View File

@ -0,0 +1,140 @@
import React, { useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Icon from 'Components/Icon';
import Button from 'Components/Link/Button';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { icons, inputTypes, kinds } from 'Helpers/Props';
import { Statistics } from 'Series/Series';
import useSeries from 'Series/useSeries';
import { deleteSeries, setDeleteOption } from 'Store/Actions/seriesActions';
import { CheckInputChanged } from 'typings/inputs';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './DeleteSeriesModalContent.css';
export interface DeleteSeriesModalContentProps {
seriesId: number;
onModalClose: () => void;
}
function DeleteSeriesModalContent({
seriesId,
onModalClose,
}: DeleteSeriesModalContentProps) {
const dispatch = useDispatch();
const { title, path, statistics = {} as Statistics } = useSeries(seriesId)!;
const { addImportListExclusion } = useSelector(
(state: AppState) => state.series.deleteOptions
);
const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
const [deleteFiles, setDeleteFiles] = useState(false);
const handleDeleteFilesChange = useCallback(
({ value }: CheckInputChanged) => {
setDeleteFiles(value);
},
[]
);
const handleDeleteSeriesConfirmed = useCallback(() => {
dispatch(
deleteSeries({ id: seriesId, deleteFiles, addImportListExclusion })
);
}, [seriesId, addImportListExclusion, deleteFiles, dispatch]);
const handleDeleteOptionChange = useCallback(
({ name, value }: CheckInputChanged) => {
dispatch(setDeleteOption({ [name]: value }));
},
[dispatch]
);
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{translate('DeleteSeriesModalHeader', { title })}
</ModalHeader>
<ModalBody>
<div className={styles.pathContainer}>
<Icon className={styles.pathIcon} name={icons.FOLDER} />
{path}
</div>
<FormGroup>
<FormLabel>{translate('AddListExclusion')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="addImportListExclusion"
value={addImportListExclusion}
helpText={translate('AddListExclusionSeriesHelpText')}
onChange={handleDeleteOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>
{episodeFileCount === 0
? translate('DeleteSeriesFolder')
: translate('DeleteEpisodesFiles', { episodeFileCount })}
</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="deleteFiles"
value={deleteFiles}
helpText={
episodeFileCount === 0
? translate('DeleteSeriesFolderHelpText')
: translate('DeleteEpisodesFilesHelpText')
}
kind={kinds.DANGER}
onChange={handleDeleteFilesChange}
/>
</FormGroup>
{deleteFiles ? (
<div className={styles.deleteFilesMessage}>
<div>
<InlineMarkdown
data={translate('DeleteSeriesFolderConfirmation', { path })}
blockClassName={styles.folderPath}
/>
</div>
{episodeFileCount ? (
<div className={styles.deleteCount}>
{translate('DeleteSeriesFolderEpisodeCount', {
episodeFileCount,
size: formatBytes(sizeOnDisk),
})}
</div>
) : null}
</div>
) : null}
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>{translate('Close')}</Button>
<Button kind={kinds.DANGER} onPress={handleDeleteSeriesConfirmed}>
{translate('Delete')}
</Button>
</ModalFooter>
</ModalContent>
);
}
export default DeleteSeriesModalContent;

44
frontend/src/Series/Delete/DeleteSeriesModalContentConnector.js
Unescape View File

@ -1,44 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { deleteSeries, setDeleteOption } from 'Store/Actions/seriesActions';
import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
import DeleteSeriesModalContent from './DeleteSeriesModalContent';
function createMapStateToProps() {
return createSelector(
(state) => state.series.deleteOptions,
createSeriesSelector(),
(deleteOptions, series) => {
return {
...series,
deleteOptions
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onDeleteOptionChange(option) {
dispatch(
setDeleteOption({
[option.name]: option.value
})
);
},
onDeletePress(deleteFiles, addImportListExclusion) {
dispatch(
deleteSeries({
id: props.seriesId,
deleteFiles,
addImportListExclusion
})
);
props.onModalClose(true);
}
};
}
export default connect(createMapStateToProps, createMapDispatchToProps)(DeleteSeriesModalContent);

2
frontend/src/Series/Series.ts
Unescape View File

@ -90,7 +90,7 @@ interface Series extends ModelBase {
seasons: Season[]; seasons: Season[];
seriesType: SeriesType; seriesType: SeriesType;
sortTitle: string; sortTitle: string;
statistics: Statistics; statistics?: Statistics;
status: SeriesStatus; status: SeriesStatus;
tags: number[]; tags: number[];
title: string; title: string;

Write Preview
Loading…
Cancel
Save