|
|
@ -1,5 +1,6 @@
|
|
|
|
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
|
|
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
|
|
|
import { SelectProvider } from 'App/SelectContext';
|
|
|
|
import NoArtist from 'Artist/NoArtist';
|
|
|
|
import NoArtist from 'Artist/NoArtist';
|
|
|
|
import { REFRESH_ARTIST, RSS_SYNC } from 'Commands/commandNames';
|
|
|
|
import { REFRESH_ARTIST, RSS_SYNC } from 'Commands/commandNames';
|
|
|
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
|
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
|
@ -37,6 +38,7 @@ import ArtistIndexOverviews from './Overview/ArtistIndexOverviews';
|
|
|
|
import ArtistIndexOverviewOptionsModal from './Overview/Options/ArtistIndexOverviewOptionsModal';
|
|
|
|
import ArtistIndexOverviewOptionsModal from './Overview/Options/ArtistIndexOverviewOptionsModal';
|
|
|
|
import ArtistIndexPosters from './Posters/ArtistIndexPosters';
|
|
|
|
import ArtistIndexPosters from './Posters/ArtistIndexPosters';
|
|
|
|
import ArtistIndexPosterOptionsModal from './Posters/Options/ArtistIndexPosterOptionsModal';
|
|
|
|
import ArtistIndexPosterOptionsModal from './Posters/Options/ArtistIndexPosterOptionsModal';
|
|
|
|
|
|
|
|
import ArtistIndexSelectAllButton from './Select/ArtistIndexSelectAllButton';
|
|
|
|
import ArtistIndexTable from './Table/ArtistIndexTable';
|
|
|
|
import ArtistIndexTable from './Table/ArtistIndexTable';
|
|
|
|
import ArtistIndexTableOptions from './Table/ArtistIndexTableOptions';
|
|
|
|
import ArtistIndexTableOptions from './Table/ArtistIndexTableOptions';
|
|
|
|
import styles from './ArtistIndex.css';
|
|
|
|
import styles from './ArtistIndex.css';
|
|
|
@ -88,6 +90,7 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
|
|
|
|
const scrollerRef = useRef<HTMLDivElement>();
|
|
|
|
const scrollerRef = useRef<HTMLDivElement>();
|
|
|
|
const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
|
|
|
|
const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
|
|
|
|
const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
|
|
|
|
const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
|
|
|
|
|
|
|
|
const [isSelectMode, setIsSelectMode] = useState(false);
|
|
|
|
|
|
|
|
|
|
|
|
const onRefreshArtistPress = useCallback(() => {
|
|
|
|
const onRefreshArtistPress = useCallback(() => {
|
|
|
|
dispatch(
|
|
|
|
dispatch(
|
|
|
@ -105,6 +108,10 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}, [dispatch]);
|
|
|
|
}, [dispatch]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onSelectModePress = useCallback(() => {
|
|
|
|
|
|
|
|
setIsSelectMode(!isSelectMode);
|
|
|
|
|
|
|
|
}, [isSelectMode, setIsSelectMode]);
|
|
|
|
|
|
|
|
|
|
|
|
const onTableOptionChange = useCallback(
|
|
|
|
const onTableOptionChange = useCallback(
|
|
|
|
(payload) => {
|
|
|
|
(payload) => {
|
|
|
|
dispatch(setArtistTableOption(payload));
|
|
|
|
dispatch(setArtistTableOption(payload));
|
|
|
@ -202,131 +209,150 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
|
|
|
|
const hasNoArtist = !totalItems;
|
|
|
|
const hasNoArtist = !totalItems;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<PageContent>
|
|
|
|
<SelectProvider isSelectMode={isSelectMode} items={items}>
|
|
|
|
<PageToolbar>
|
|
|
|
<PageContent>
|
|
|
|
<PageToolbarSection>
|
|
|
|
<PageToolbar>
|
|
|
|
<PageToolbarButton
|
|
|
|
<PageToolbarSection>
|
|
|
|
label={translate('UpdateAll')}
|
|
|
|
<PageToolbarButton
|
|
|
|
iconName={icons.REFRESH}
|
|
|
|
label={translate('UpdateAll')}
|
|
|
|
spinningName={icons.REFRESH}
|
|
|
|
iconName={icons.REFRESH}
|
|
|
|
isSpinning={isRefreshingArtist}
|
|
|
|
spinningName={icons.REFRESH}
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
isSpinning={isRefreshingArtist}
|
|
|
|
onPress={onRefreshArtistPress}
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
/>
|
|
|
|
onPress={onRefreshArtistPress}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PageToolbarButton
|
|
|
|
|
|
|
|
label={translate('RSSSync')}
|
|
|
|
|
|
|
|
iconName={icons.RSS}
|
|
|
|
|
|
|
|
isSpinning={isRssSyncExecuting}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
|
|
|
|
onPress={onRssSyncPress}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</PageToolbarSection>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<PageToolbarSection alignContent={align.RIGHT} collapseButtons={false}>
|
|
|
|
|
|
|
|
{view === 'table' ? (
|
|
|
|
|
|
|
|
<TableOptionsModalWrapper
|
|
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
|
|
optionsComponent={ArtistIndexTableOptions}
|
|
|
|
|
|
|
|
onTableOptionChange={onTableOptionChange}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<PageToolbarButton
|
|
|
|
|
|
|
|
label={translate('Options')}
|
|
|
|
|
|
|
|
iconName={icons.TABLE}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</TableOptionsModalWrapper>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<PageToolbarButton
|
|
|
|
<PageToolbarButton
|
|
|
|
label={translate('Options')}
|
|
|
|
label={translate('RSSSync')}
|
|
|
|
iconName={view === 'posters' ? icons.POSTER : icons.OVERVIEW}
|
|
|
|
iconName={icons.RSS}
|
|
|
|
|
|
|
|
isSpinning={isRssSyncExecuting}
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
onPress={onOptionsPress}
|
|
|
|
onPress={onRssSyncPress}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<PageToolbarSeparator />
|
|
|
|
<PageToolbarSeparator />
|
|
|
|
|
|
|
|
|
|
|
|
<ArtistIndexViewMenu
|
|
|
|
<PageToolbarButton
|
|
|
|
view={view}
|
|
|
|
label={isSelectMode ? 'Stop Selecting' : 'Select Artists'}
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
iconName={isSelectMode ? icons.ARTIST_ENDED : icons.CHECK}
|
|
|
|
onViewSelect={onViewSelect}
|
|
|
|
onPress={onSelectModePress}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<ArtistIndexSortMenu
|
|
|
|
{isSelectMode ? <ArtistIndexSelectAllButton /> : null}
|
|
|
|
sortKey={sortKey}
|
|
|
|
</PageToolbarSection>
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
<PageToolbarSection
|
|
|
|
onSortSelect={onSortSelect}
|
|
|
|
alignContent={align.RIGHT}
|
|
|
|
/>
|
|
|
|
collapseButtons={false}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{view === 'table' ? (
|
|
|
|
|
|
|
|
<TableOptionsModalWrapper
|
|
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
|
|
optionsComponent={ArtistIndexTableOptions}
|
|
|
|
|
|
|
|
onTableOptionChange={onTableOptionChange}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<PageToolbarButton
|
|
|
|
|
|
|
|
label={translate('Options')}
|
|
|
|
|
|
|
|
iconName={icons.TABLE}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</TableOptionsModalWrapper>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<PageToolbarButton
|
|
|
|
|
|
|
|
label={translate('Options')}
|
|
|
|
|
|
|
|
iconName={view === 'posters' ? icons.POSTER : icons.OVERVIEW}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
|
|
|
|
onPress={onOptionsPress}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
<ArtistIndexFilterMenu
|
|
|
|
<PageToolbarSeparator />
|
|
|
|
selectedFilterKey={selectedFilterKey}
|
|
|
|
|
|
|
|
filters={filters}
|
|
|
|
|
|
|
|
customFilters={customFilters}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
|
|
|
|
onFilterSelect={onFilterSelect}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</PageToolbarSection>
|
|
|
|
|
|
|
|
</PageToolbar>
|
|
|
|
|
|
|
|
<div className={styles.pageContentBodyWrapper}>
|
|
|
|
|
|
|
|
<PageContentBody
|
|
|
|
|
|
|
|
ref={scrollerRef}
|
|
|
|
|
|
|
|
className={styles.contentBody}
|
|
|
|
|
|
|
|
innerClassName={styles[`${view}InnerContentBody`]}
|
|
|
|
|
|
|
|
initialScrollTop={props.initialScrollTop}
|
|
|
|
|
|
|
|
onScroll={onScroll}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{isFetching && !isPopulated ? <LoadingIndicator /> : null}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!isFetching && !!error ? (
|
|
|
|
|
|
|
|
<div className={styles.errorMessage}>
|
|
|
|
|
|
|
|
{getErrorMessage(error, 'Failed to load artist from API')}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isLoaded ? (
|
|
|
|
<ArtistIndexViewMenu
|
|
|
|
<div className={styles.contentBodyContainer}>
|
|
|
|
view={view}
|
|
|
|
<ViewComponent
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
scrollerRef={scrollerRef}
|
|
|
|
onViewSelect={onViewSelect}
|
|
|
|
items={items}
|
|
|
|
/>
|
|
|
|
sortKey={sortKey}
|
|
|
|
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
|
|
|
|
jumpToCharacter={jumpToCharacter}
|
|
|
|
|
|
|
|
isSmallScreen={isSmallScreen}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ArtistIndexFooter />
|
|
|
|
<ArtistIndexSortMenu
|
|
|
|
</div>
|
|
|
|
sortKey={sortKey}
|
|
|
|
) : null}
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
|
|
|
|
onSortSelect={onSortSelect}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
{!error && isPopulated && !items.length ? (
|
|
|
|
<ArtistIndexFilterMenu
|
|
|
|
<NoArtist totalItems={totalItems} />
|
|
|
|
selectedFilterKey={selectedFilterKey}
|
|
|
|
|
|
|
|
filters={filters}
|
|
|
|
|
|
|
|
customFilters={customFilters}
|
|
|
|
|
|
|
|
isDisabled={hasNoArtist}
|
|
|
|
|
|
|
|
onFilterSelect={onFilterSelect}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</PageToolbarSection>
|
|
|
|
|
|
|
|
</PageToolbar>
|
|
|
|
|
|
|
|
<div className={styles.pageContentBodyWrapper}>
|
|
|
|
|
|
|
|
<PageContentBody
|
|
|
|
|
|
|
|
ref={scrollerRef}
|
|
|
|
|
|
|
|
className={styles.contentBody}
|
|
|
|
|
|
|
|
innerClassName={styles[`${view}InnerContentBody`]}
|
|
|
|
|
|
|
|
initialScrollTop={props.initialScrollTop}
|
|
|
|
|
|
|
|
onScroll={onScroll}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{isFetching && !isPopulated ? <LoadingIndicator /> : null}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!isFetching && !!error ? (
|
|
|
|
|
|
|
|
<div className={styles.errorMessage}>
|
|
|
|
|
|
|
|
{getErrorMessage(error, 'Failed to load artist from API')}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isLoaded ? (
|
|
|
|
|
|
|
|
<div className={styles.contentBodyContainer}>
|
|
|
|
|
|
|
|
<ViewComponent
|
|
|
|
|
|
|
|
scrollerRef={scrollerRef}
|
|
|
|
|
|
|
|
items={items}
|
|
|
|
|
|
|
|
sortKey={sortKey}
|
|
|
|
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
|
|
|
|
jumpToCharacter={jumpToCharacter}
|
|
|
|
|
|
|
|
isSelectMode={isSelectMode}
|
|
|
|
|
|
|
|
isSmallScreen={isSmallScreen}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ArtistIndexFooter />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!error && isPopulated && !items.length ? (
|
|
|
|
|
|
|
|
<NoArtist totalItems={totalItems} />
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
</PageContentBody>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isLoaded && !!jumpBarItems.order.length ? (
|
|
|
|
|
|
|
|
<PageJumpBar
|
|
|
|
|
|
|
|
items={jumpBarItems}
|
|
|
|
|
|
|
|
onItemPress={onJumpBarItemPress}
|
|
|
|
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
) : null}
|
|
|
|
</PageContentBody>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{view === 'posters' ? (
|
|
|
|
{isLoaded && !!jumpBarItems.order.length ? (
|
|
|
|
<ArtistIndexPosterOptionsModal
|
|
|
|
<PageJumpBar items={jumpBarItems} onItemPress={onJumpBarItemPress} />
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{view === 'banners' ? (
|
|
|
|
|
|
|
|
<ArtistIndexBannerOptionsModal
|
|
|
|
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{view === 'overview' ? (
|
|
|
|
|
|
|
|
<ArtistIndexOverviewOptionsModal
|
|
|
|
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</PageContent>
|
|
|
|
{view === 'posters' ? (
|
|
|
|
</SelectProvider>
|
|
|
|
<ArtistIndexPosterOptionsModal
|
|
|
|
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{view === 'banners' ? (
|
|
|
|
|
|
|
|
<ArtistIndexBannerOptionsModal
|
|
|
|
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{view === 'overview' ? (
|
|
|
|
|
|
|
|
<ArtistIndexOverviewOptionsModal
|
|
|
|
|
|
|
|
isOpen={isOptionsModalOpen}
|
|
|
|
|
|
|
|
onModalClose={onOptionsModalClose}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
</PageContent>
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}, 'artistIndex');
|
|
|
|
}, 'artistIndex');
|
|
|
|
|
|
|
|
|
|
|
|