New: Reactive search button on Wanted pages

Closes #7449

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 || isSearchingForCutoffUnmetEpisodes}
+              isDisabled={isSearchingForCutoffUnmetEpisodes}
-              onPress={this.onSearchSelectedPress}
+              isSpinning={isSearchingForCutoffUnmetEpisodes}
+              onPress={itemsSelected ? this.onSearchSelectedPress : this.onSearchAllCutoffUnmetPress}
             />
 
+            <PageToolbarSeparator />
+
             <PageToolbarButton
               label={isShowingMonitored ? translate('UnmonitorSelected') : translate('MonitorSelected')}
               iconName={icons.MONITORED}
@@ -167,17 +170,6 @@ class CutoffUnmet extends Component {
               onPress={this.onToggleSelectedPress}
             />
 
-            <PageToolbarSeparator />
-
-            <PageToolbarButton
-              label={translate('SearchAll')}
-              iconName={icons.SEARCH}
-              isDisabled={!items.length}
-              isSpinning={isSearchingForCutoffUnmetEpisodes}
-              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_EPISODE_SEARCH),
-    (cutoffUnmet, isSearchingForCutoffUnmetEpisodes) => {
+    createCommandExecutingSelector(commandNames.EPISODE_SEARCH),
+    (cutoffUnmet, isSearchingForAllCutoffUnmetEpisodes, isSearchingForSelectedCutoffUnmetEpisodes) => {
       return {
-        isSearchingForCutoffUnmetEpisodes,
+        isSearchingForCutoffUnmetEpisodes: isSearchingForAllCutoffUnmetEpisodes || isSearchingForSelectedCutoffUnmetEpisodes,
         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 || isSearchingForMissingEpisodes}
+              isSpinning={isSearchingForMissingEpisodes}
-              onPress={this.onSearchSelectedPress}
+              isDisabled={isSearchingForMissingEpisodes}
+              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={isSearchingForMissingEpisodes}
-              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_EPISODE_SEARCH),
-    (missing, isSearchingForMissingEpisodes) => {
+    createCommandExecutingSelector(commandNames.EPISODE_SEARCH),
+    (missing, isSearchingForAllMissingEpisodes, isSearchingForSelectedMissingEpisodes) => {
       return {
-        isSearchingForMissingEpisodes,
+        isSearchingForMissingEpisodes: isSearchingForAllMissingEpisodes || isSearchingForSelectedMissingEpisodes,
         isSaving: missing.items.filter((m) => m.isSaving).length > 1,
         ...missing
       };