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

Convert import list exclusion row to typescript

Browse Source
pull/6533/head
CheAle14 3 months ago
parent 8d3c3daf32
commit ebadbb6a06
7 changed files with 103 additions and 110 deletions
Show Stats Download Patch File Download Diff File

2
frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalConnector.js
Unescape View File

@ -36,6 +36,8 @@ class EditImportListExclusionModalConnector extends Component {
}
EditImportListExclusionModalConnector.propTypes = {
id: PropTypes.number,
onDeleteImportListExclusionPress: PropTypes.func,
onModalClose: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
clearPendingChanges: PropTypes.func.isRequired

2
frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js
Unescape View File

@ -77,7 +77,7 @@ function EditImportListExclusionModalContent(props) {
<FormLabel>{translate('TvdbId')}</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
type={inputTypes.NUMBER}
name="tvdbId"
helpText={translate('TvdbIdExcludeHelpText')}
{...tvdbId}

104
frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.js
Unescape View File

@ -1,104 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import IconButton from 'Components/Link/IconButton';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import { icons, kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import EditImportListExclusionModalConnector from './EditImportListExclusionModalConnector';
import styles from './ImportListExclusion.css';
class ImportListExclusion extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isEditImportListExclusionModalOpen: false,
isDeleteImportListExclusionModalOpen: false
};
}
//
// Listeners
onEditImportListExclusionPress = () => {
this.setState({ isEditImportListExclusionModalOpen: true });
};
onEditImportListExclusionModalClose = () => {
this.setState({ isEditImportListExclusionModalOpen: false });
};
onDeleteImportListExclusionPress = () => {
this.setState({
isEditImportListExclusionModalOpen: false,
isDeleteImportListExclusionModalOpen: true
});
};
onDeleteImportListExclusionModalClose = () => {
this.setState({ isDeleteImportListExclusionModalOpen: false });
};
onConfirmDeleteImportListExclusion = () => {
this.props.onConfirmDeleteImportListExclusion(this.props.id);
};
//
// Render
render() {
const {
id,
title,
tvdbId
} = this.props;
return (
<TableRow>
<TableRowCell>{title}</TableRowCell>
<TableRowCell>{tvdbId}</TableRowCell>
<TableRowCell className={styles.actions}>
<IconButton name={icons.EDIT} onPress={this.onEditImportListExclusionPress} />
</TableRowCell>
<EditImportListExclusionModalConnector
id={id}
isOpen={this.state.isEditImportListExclusionModalOpen}
onModalClose={this.onEditImportListExclusionModalClose}
onDeleteImportListExclusionPress={this.onDeleteImportListExclusionPress}
/>
<ConfirmModal
isOpen={this.state.isDeleteImportListExclusionModalOpen}
kind={kinds.DANGER}
title={translate('DeleteImportListExclusion')}
message={translate('DeleteImportListExclusionMessageText')}
confirmLabel={translate('Delete')}
onConfirm={this.onConfirmDeleteImportListExclusion}
onCancel={this.onDeleteImportListExclusionModalClose}
/>
</TableRow>
);
}
}
ImportListExclusion.propTypes = {
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
tvdbId: PropTypes.number.isRequired,
onConfirmDeleteImportListExclusion: PropTypes.func.isRequired
};
ImportListExclusion.defaultProps = {
// The drag preview will not connect the drag handle.
connectDragSource: (node) => node
};
export default ImportListExclusion;

0
frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css → frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusionRow.css
Unescape View File

7
frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusionRow.css.d.ts vendored
Unescape View File

@ -0,0 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'actions': string;
}
export const cssExports: CssExports;
export default cssExports;

85
frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusionRow.tsx
Unescape View File

@ -0,0 +1,85 @@
import React, { useCallback, useState } from 'react';
import IconButton from 'Components/Link/IconButton';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import { icons, kinds } from 'Helpers/Props';
import ImportListExclusion from 'typings/ImportListExclusion';
import translate from 'Utilities/String/translate';
import EditImportListExclusionModalConnector from './EditImportListExclusionModalConnector';
import styles from './ImportListExclusionRow.css';
interface ImportListExclusionRowProps extends ImportListExclusion {
onConfirmDeleteImportListExclusion: (id: number) => void;
}
function ImportListExclusionRow(props: ImportListExclusionRowProps) {
const { id, title, tvdbId, onConfirmDeleteImportListExclusion } = props;
const [
isEditImportListExclusionModalOpen,
setIsEditImportListExclusionModalOpen,
] = useState(false);
const onEditImportListExclusionPress = useCallback(
() => setIsEditImportListExclusionModalOpen(true),
[setIsEditImportListExclusionModalOpen]
);
const onEditImportListExclusionModalClose = useCallback(
() => setIsEditImportListExclusionModalOpen(false),
[setIsEditImportListExclusionModalOpen]
);
const [
isDeleteImportListExclusionModalOpen,
setIsDeleteImportListExclusionModalOpen,
] = useState(false);
const onDeleteImportListExclusionPress = useCallback(
() => setIsDeleteImportListExclusionModalOpen(true),
[setIsDeleteImportListExclusionModalOpen]
);
const onDeleteImportListExclusionModalClose = useCallback(
() => setIsDeleteImportListExclusionModalOpen(false),
[setIsDeleteImportListExclusionModalOpen]
);
const onConfirmDeleteImportListExclusionPress = useCallback(() => {
onConfirmDeleteImportListExclusion(id);
}, [id, onConfirmDeleteImportListExclusion]);
return (
<TableRow>
<TableRowCell>{title}</TableRowCell>
<TableRowCell>{tvdbId}</TableRowCell>
<TableRowCell className={styles.actions}>
<IconButton
name={icons.EDIT}
onPress={onEditImportListExclusionPress}
/>
</TableRowCell>
<EditImportListExclusionModalConnector
id={id}
isOpen={isEditImportListExclusionModalOpen}
onModalClose={onEditImportListExclusionModalClose}
onDeleteImportListExclusionPress={onDeleteImportListExclusionPress}
/>
<ConfirmModal
isOpen={isDeleteImportListExclusionModalOpen}
kind={kinds.DANGER}
title={translate('DeleteImportListExclusion')}
message={translate('DeleteImportListExclusionMessageText')}
confirmLabel={translate('Delete')}
onConfirm={onConfirmDeleteImportListExclusionPress}
onCancel={onDeleteImportListExclusionModalClose}
/>
</TableRow>
);
}
export default ImportListExclusionRow;

13
frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.tsx
Unescape View File

@ -18,7 +18,7 @@ import {
} from 'Utilities/pagePopulator';
import translate from 'Utilities/String/translate';
import EditImportListExclusionModalConnector from './EditImportListExclusionModalConnector';
import ImportListExclusion from './ImportListExclusion';
import ImportListExclusionRow from './ImportListExclusionRow';
const COLUMNS = [
{
@ -111,6 +111,10 @@ function ImportListExclusions(props: ImportListExclusionsProps) {
dispatch(
importListExclusionActions.setImportListExclusionTableOption(payload)
);
if (payload.pageSize) {
dispatch(importListExclusionActions.gotoImportListExclusionFirstPage());
}
},
[dispatch]
);
@ -186,13 +190,11 @@ function ImportListExclusions(props: ImportListExclusionsProps) {
onTableOptionChange={setImportListTableOption}
>
<TableBody>
{items.map((item, index) => {
{items.map((item) => {
return (
<ImportListExclusion
<ImportListExclusionRow
key={item.id}
{...item}
{...otherProps}
index={index}
onConfirmDeleteImportListExclusion={
onConfirmDeleteImportListExclusion
}
@ -216,6 +218,7 @@ function ImportListExclusions(props: ImportListExclusionsProps) {
<TablePager
totalRecords={totalRecords}
pageSize={pageSize}
isFetching={isFetching}
onFirstPagePress={gotoImportListExclusionFirstPage}
onPreviousPagePress={gotoImportListExclusionPreviousPage}

Write Preview
Loading…
Cancel
Save