New: Reactive search button on Wanted pages

(cherry picked from commit e8c3aa20bd92701a16dcd97c5e103b79b3683105)

Closes #10750

frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js

@@ -153,12 +153,15 @@ class CutoffUnmet extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label={translate('SearchSelected')}
+              label={itemsSelected ? translate('SearchSelected') : translate('SearchAll')}
               iconName={icons.SEARCH}
-              isDisabled={!itemsSelected || isSearchingForCutoffUnmetMovies}
-              onPress={this.onSearchSelectedPress}
+              isDisabled={isSearchingForCutoffUnmetMovies}
+              isSpinning={isSearchingForCutoffUnmetMovies}
+              onPress={itemsSelected ? this.onSearchSelectedPress : this.onSearchAllCutoffUnmetPress}
             />
 
+            <PageToolbarSeparator />
+
             <PageToolbarButton
               label={isShowingMonitored ? translate('UnmonitorSelected') : translate('MonitorSelected')}
               iconName={icons.MONITORED}
@@ -166,18 +169,6 @@ class CutoffUnmet extends Component {
               isSpinning={isSaving}
               onPress={this.onToggleSelectedPress}
             />
-
-            <PageToolbarSeparator />
-
-            <PageToolbarButton
-              label={translate('SearchAll')}
-              iconName={icons.SEARCH}
-              isDisabled={!items.length}
-              isSpinning={isSearchingForCutoffUnmetMovies}
-              onPress={this.onSearchAllCutoffUnmetPress}
-            />
-
-            <PageToolbarSeparator />
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>

frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js

@@ -18,9 +18,10 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.wanted.cutoffUnmet,
     createCommandExecutingSelector(commandNames.CUTOFF_UNMET_MOVIES_SEARCH),
-    (cutoffUnmet, isSearchingForCutoffUnmetMovies) => {
+    createCommandExecutingSelector(commandNames.MOVIE_SEARCH),
+    (cutoffUnmet, isSearchingForCutoffUnmetMovies, isSearchingForSelectedCutoffUnmetMovies) => {
       return {
-        isSearchingForCutoffUnmetMovies,
+        isSearchingForCutoffUnmetMovies: isSearchingForCutoffUnmetMovies || isSearchingForSelectedCutoffUnmetMovies,
         isSaving: cutoffUnmet.items.filter((m) => m.isSaving).length > 1,
         ...cutoffUnmet
       };

frontend/src/Wanted/Missing/Missing.js

@@ -159,12 +159,15 @@ class Missing extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label={translate('SearchSelected')}
+              label={itemsSelected ? translate('SearchSelected') : translate('SearchAll')}
               iconName={icons.SEARCH}
-              isDisabled={!itemsSelected || isSearchingForMissingMovies}
-              onPress={this.onSearchSelectedPress}
+              isSpinning={isSearchingForMissingMovies}
+              isDisabled={isSearchingForMissingMovies}
+              onPress={itemsSelected ? this.onSearchSelectedPress : this.onSearchAllMissingPress}
             />
 
+            <PageToolbarSeparator />
+
             <PageToolbarButton
               label={isShowingMonitored ? translate('UnmonitorSelected') : translate('MonitorSelected')}
               iconName={icons.MONITORED}
@@ -175,16 +178,6 @@ class Missing extends Component {
 
             <PageToolbarSeparator />
 
-            <PageToolbarButton
-              label={translate('SearchAll')}
-              iconName={icons.SEARCH}
-              isDisabled={!items.length}
-              isSpinning={isSearchingForMissingMovies}
-              onPress={this.onSearchAllMissingPress}
-            />
-
-            <PageToolbarSeparator />
-
             <PageToolbarButton
               label={translate('ManualImport')}
               iconName={icons.INTERACTIVE}

frontend/src/Wanted/Missing/MissingConnector.js

@@ -17,9 +17,10 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.wanted.missing,
     createCommandExecutingSelector(commandNames.MISSING_MOVIES_SEARCH),
-    (missing, isSearchingForMissingMovies) => {
+    createCommandExecutingSelector(commandNames.MOVIE_SEARCH),
+    (missing, isSearchingForMissingMovies, isSearchingForSelectedMissingMovies) => {
       return {
-        isSearchingForMissingMovies,
+        isSearchingForMissingMovies: isSearchingForMissingMovies || isSearchingForSelectedMissingMovies,
         isSaving: missing.items.filter((m) => m.isSaving).length > 1,
         ...missing
       };