|
|
|
@ -1,11 +1,12 @@
|
|
|
|
|
import React, { useCallback, useMemo } from 'react';
|
|
|
|
|
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 } from 'Helpers/Props';
|
|
|
|
|
import { icons, kinds } from 'Helpers/Props';
|
|
|
|
|
import { executeCommand } from 'Store/Actions/commandActions';
|
|
|
|
|
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
|
|
|
|
import createMovieClientSideCollectionItemsSelector from 'Store/Selectors/createMovieClientSideCollectionItemsSelector';
|
|
|
|
@ -25,6 +26,8 @@ function MovieIndexSearchButton(props: MovieIndexSearchButtonProps) {
|
|
|
|
|
useSelector(createMovieClientSideCollectionItemsSelector('movieIndex'));
|
|
|
|
|
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
|
|
|
|
|
|
|
|
|
|
const { isSelectMode, selectedFilterKey } = props;
|
|
|
|
|
const [selectState] = useSelect();
|
|
|
|
|
const { selectedState } = selectState;
|
|
|
|
@ -49,6 +52,8 @@ function MovieIndexSearchButton(props: MovieIndexSearchButtonProps) {
|
|
|
|
|
: translate('SearchAll');
|
|
|
|
|
|
|
|
|
|
const onPress = useCallback(() => {
|
|
|
|
|
setIsConfirmModalOpen(false);
|
|
|
|
|
|
|
|
|
|
dispatch(
|
|
|
|
|
executeCommand({
|
|
|
|
|
name: MOVIE_SEARCH,
|
|
|
|
@ -57,14 +62,36 @@ function MovieIndexSearchButton(props: MovieIndexSearchButtonProps) {
|
|
|
|
|
);
|
|
|
|
|
}, [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={onPress}
|
|
|
|
|
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}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|