Sonarr/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js

117 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-11-10 21:02:24 +00:00
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Card from 'Components/Card';
2022-05-20 04:15:43 +00:00
import FieldSet from 'Components/FieldSet';
2019-11-10 21:02:24 +00:00
import Icon from 'Components/Icon';
import PageSectionContent from 'Components/Page/PageSectionContent';
2022-05-20 04:15:43 +00:00
import { icons } from 'Helpers/Props';
import sortByName from 'Utilities/Array/sortByName';
2023-07-22 19:14:33 +00:00
import translate from 'Utilities/String/translate';
2019-11-10 21:02:24 +00:00
import AddImportListModal from './AddImportListModal';
import EditImportListModalConnector from './EditImportListModalConnector';
2022-05-20 04:15:43 +00:00
import ImportList from './ImportList';
2019-11-10 21:02:24 +00:00
import styles from './ImportLists.css';
class ImportLists extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isAddImportListModalOpen: false,
isEditImportListModalOpen: false
};
}
//
// Listeners
onAddImportListPress = () => {
this.setState({ isAddImportListModalOpen: true });
2022-05-20 04:15:43 +00:00
};
2019-11-10 21:02:24 +00:00
onAddImportListModalClose = ({ listSelected = false } = {}) => {
this.setState({
isAddImportListModalOpen: false,
isEditImportListModalOpen: listSelected
});
2022-05-20 04:15:43 +00:00
};
2019-11-10 21:02:24 +00:00
onEditImportListModalClose = () => {
this.setState({ isEditImportListModalOpen: false });
2022-05-20 04:15:43 +00:00
};
2019-11-10 21:02:24 +00:00
//
// Render
render() {
const {
items,
onConfirmDeleteImportList,
...otherProps
} = this.props;
const {
isAddImportListModalOpen,
isEditImportListModalOpen
} = this.state;
return (
2023-07-22 19:14:33 +00:00
<FieldSet legend={translate('ImportLists')} >
2019-11-10 21:02:24 +00:00
<PageSectionContent
2023-07-22 19:14:33 +00:00
errorMessage={translate('ImportListsLoadError')}
2019-11-10 21:02:24 +00:00
{...otherProps}
>
<div className={styles.lists}>
{
items.sort(sortByName).map((item) => {
return (
<ImportList
key={item.id}
{...item}
onConfirmDeleteImportList={onConfirmDeleteImportList}
/>
);
})
}
<Card
className={styles.addList}
onPress={this.onAddImportListPress}
>
<div className={styles.center}>
<Icon
name={icons.ADD}
size={45}
/>
</div>
</Card>
</div>
<AddImportListModal
isOpen={isAddImportListModalOpen}
onModalClose={this.onAddImportListModalClose}
/>
<EditImportListModalConnector
isOpen={isEditImportListModalOpen}
onModalClose={this.onEditImportListModalClose}
/>
</PageSectionContent>
</FieldSet>
);
}
}
ImportLists.propTypes = {
isFetching: PropTypes.bool.isRequired,
error: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
onConfirmDeleteImportList: PropTypes.func.isRequired
};
export default ImportLists;