You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.2 KiB
99 lines
3.2 KiB
import React, { useCallback, useMemo, useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useSelect } from 'App/SelectContext';
|
|
import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
|
|
import MoviesAppState, { MovieIndexAppState } from 'App/State/MoviesAppState';
|
|
import { MOVIE_SEARCH } from 'Commands/commandNames';
|
|
import ConfirmModal from 'Components/Modal/ConfirmModal';
|
|
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
|
import { icons, kinds } from 'Helpers/Props';
|
|
import { executeCommand } from 'Store/Actions/commandActions';
|
|
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
|
import createMovieClientSideCollectionItemsSelector from 'Store/Selectors/createMovieClientSideCollectionItemsSelector';
|
|
import translate from 'Utilities/String/translate';
|
|
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
|
|
|
interface MovieIndexSearchButtonProps {
|
|
isSelectMode: boolean;
|
|
selectedFilterKey: string;
|
|
}
|
|
|
|
function MovieIndexSearchButton(props: MovieIndexSearchButtonProps) {
|
|
const isSearching = useSelector(createCommandExecutingSelector(MOVIE_SEARCH));
|
|
const {
|
|
items,
|
|
}: MoviesAppState & MovieIndexAppState & ClientSideCollectionAppState =
|
|
useSelector(createMovieClientSideCollectionItemsSelector('movieIndex'));
|
|
|
|
const dispatch = useDispatch();
|
|
const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
|
|
|
|
const { isSelectMode, selectedFilterKey } = props;
|
|
const [selectState] = useSelect();
|
|
const { selectedState } = selectState;
|
|
|
|
const selectedMovieIds = useMemo(() => {
|
|
return getSelectedIds(selectedState);
|
|
}, [selectedState]);
|
|
|
|
const moviesToSearch =
|
|
isSelectMode && selectedMovieIds.length > 0
|
|
? selectedMovieIds
|
|
: items.map((m) => m.id);
|
|
|
|
const searchIndexLabel =
|
|
selectedFilterKey === 'all'
|
|
? translate('SearchAll')
|
|
: translate('SearchFiltered');
|
|
|
|
const searchSelectLabel =
|
|
selectedMovieIds.length > 0
|
|
? translate('SearchSelected')
|
|
: translate('SearchAll');
|
|
|
|
const onPress = useCallback(() => {
|
|
setIsConfirmModalOpen(false);
|
|
|
|
dispatch(
|
|
executeCommand({
|
|
name: MOVIE_SEARCH,
|
|
movieIds: moviesToSearch,
|
|
})
|
|
);
|
|
}, [dispatch, moviesToSearch]);
|
|
|
|
const onConfirmPress = useCallback(() => {
|
|
setIsConfirmModalOpen(true);
|
|
}, [setIsConfirmModalOpen]);
|
|
|
|
const onConfirmModalClose = useCallback(() => {
|
|
setIsConfirmModalOpen(false);
|
|
}, [setIsConfirmModalOpen]);
|
|
|
|
return (
|
|
<>
|
|
<PageToolbarButton
|
|
label={isSelectMode ? searchSelectLabel : searchIndexLabel}
|
|
isSpinning={isSearching}
|
|
isDisabled={!items.length}
|
|
iconName={icons.SEARCH}
|
|
onPress={moviesToSearch.length > 5 ? onConfirmPress : onPress}
|
|
/>
|
|
|
|
<ConfirmModal
|
|
isOpen={isConfirmModalOpen}
|
|
kind={kinds.DANGER}
|
|
title={isSelectMode ? searchSelectLabel : searchIndexLabel}
|
|
message={translate('SearchMoviesConfirmationMessageText', {
|
|
count: moviesToSearch.length,
|
|
})}
|
|
confirmLabel={isSelectMode ? searchSelectLabel : searchIndexLabel}
|
|
onConfirm={onPress}
|
|
onCancel={onConfirmModalClose}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MovieIndexSearchButton;
|