Fix UI issues with no indexers exist

This commit is contained in:
Qstick
2020-10-23 14:57:54 -04:00
parent d041b152d6
commit 2006ce42d0
6 changed files with 52 additions and 11 deletions

View File

@@ -429,7 +429,10 @@ class IndexerIndex extends Component {
{
!error && isPopulated && !items.length &&
<NoIndexer totalItems={totalItems} />
<NoIndexer
totalItems={totalItems}
onAddIndexerPress={this.onAddIndexerPress}
/>
}
</PageContentBody>

View File

@@ -6,7 +6,10 @@ import translate from 'Utilities/String/translate';
import styles from './NoIndexer.css';
function NoIndexer(props) {
const { totalItems } = props;
const {
totalItems,
onAddIndexerPress
} = props;
if (totalItems > 0) {
return (
@@ -26,7 +29,7 @@ function NoIndexer(props) {
<div className={styles.buttonContainer}>
<Button
to="/add/new"
onPress={onAddIndexerPress}
kind={kinds.PRIMARY}
>
{translate('AddNewIndexer')}
@@ -37,7 +40,8 @@ function NoIndexer(props) {
}
NoIndexer.propTypes = {
totalItems: PropTypes.number.isRequired
totalItems: PropTypes.number.isRequired,
onAddIndexerPress: PropTypes.func.isRequired
};
export default NoIndexer;

View File

@@ -51,7 +51,8 @@ class SearchFooter extends Component {
render() {
const {
isFetching
isFetching,
hasIndexers
} = this.props;
const {
@@ -97,7 +98,7 @@ class SearchFooter extends Component {
<SpinnerButton
className={styles.deleteSelectedButton}
isSpinning={isFetching}
isDisabled={isFetching}
isDisabled={isFetching || !hasIndexers}
onPress={this.onSearchPress}
>
Search
@@ -113,6 +114,7 @@ class SearchFooter extends Component {
SearchFooter.propTypes = {
isFetching: PropTypes.bool.isRequired,
onSearchPress: PropTypes.func.isRequired,
hasIndexers: PropTypes.bool.isRequired,
searchError: PropTypes.object
};

View File

@@ -12,6 +12,8 @@ import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import { align, icons, sortDirections } from 'Helpers/Props';
import NoIndexer from 'Indexer/NoIndexer';
import AddIndexerModal from 'Settings/Indexers/Indexers/AddIndexerModal';
import EditIndexerModalConnector from 'Settings/Indexers/Indexers/EditIndexerModalConnector';
import * as keyCodes from 'Utilities/Constants/keyCodes';
import getErrorMessage from 'Utilities/Object/getErrorMessage';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
@@ -39,6 +41,8 @@ class SearchIndex extends Component {
scroller: null,
jumpBarItems: { order: [] },
jumpToCharacter: null,
isAddIndexerModalOpen: false,
isEditIndexerModalOpen: false,
searchType: null,
lastToggled: null
};
@@ -123,6 +127,21 @@ class SearchIndex extends Component {
//
// Listeners
onAddIndexerPress = () => {
this.setState({ isAddIndexerModalOpen: true });
}
onAddIndexerModalClose = ({ indexerSelected = false } = {}) => {
this.setState({
isAddIndexerModalOpen: false,
isEditIndexerModalOpen: indexerSelected
});
}
onEditIndexerModalClose = () => {
this.setState({ isEditIndexerModalOpen: false });
}
onJumpBarItemPress = (jumpToCharacter) => {
this.setState({ jumpToCharacter });
}
@@ -169,6 +188,8 @@ class SearchIndex extends Component {
const {
scroller,
jumpBarItems,
isAddIndexerModalOpen,
isEditIndexerModalOpen,
jumpToCharacter
} = this.state;
@@ -248,7 +269,10 @@ class SearchIndex extends Component {
{
!error && !isFetching && !hasIndexers &&
<NoIndexer />
<NoIndexer
totalItems={0}
onAddIndexerPress={this.onAddIndexerPress}
/>
}
{
@@ -268,8 +292,19 @@ class SearchIndex extends Component {
<SearchFooter
isFetching={isFetching}
hasIndexers={hasIndexers}
onSearchPress={this.onSearchPress}
/>
<AddIndexerModal
isOpen={isAddIndexerModalOpen}
onModalClose={this.onAddIndexerModalClose}
/>
<EditIndexerModalConnector
isOpen={isEditIndexerModalOpen}
onModalClose={this.onEditIndexerModalClose}
/>
</PageContent>
);
}

View File

@@ -6,13 +6,12 @@ import withScrollPosition from 'Components/withScrollPosition';
import { fetchReleases, setReleasesFilter, setReleasesSort, setReleasesTableOption } from 'Store/Actions/releaseActions';
import scrollPositions from 'Store/scrollPositions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createIndexerClientSideCollectionItemsSelector from 'Store/Selectors/createIndexerClientSideCollectionItemsSelector';
import createReleaseClientSideCollectionItemsSelector from 'Store/Selectors/createReleaseClientSideCollectionItemsSelector';
import SearchIndex from './SearchIndex';
function createMapStateToProps() {
return createSelector(
createIndexerClientSideCollectionItemsSelector('indexerIndex'),
(state) => state.indexers,
createReleaseClientSideCollectionItemsSelector('releases'),
createDimensionsSelector(),
(

View File

@@ -30,7 +30,6 @@ class AddIndexerItem extends Component {
const {
name,
implementation,
implementationName,
infoLink,
presets,
onIndexerSelect
@@ -105,7 +104,6 @@ class AddIndexerItem extends Component {
AddIndexerItem.propTypes = {
name: PropTypes.string.isRequired,
implementation: PropTypes.string.isRequired,
implementationName: PropTypes.string.isRequired,
infoLink: PropTypes.string.isRequired,
presets: PropTypes.arrayOf(PropTypes.object),
onIndexerSelect: PropTypes.func.isRequired