From e8c3aa20bd92701a16dcd97c5e103b79b3683105 Mon Sep 17 00:00:00 2001
From: Stevie Robinson <stevie.robinson@gmail.com>
Date: Mon, 9 Dec 2024 04:36:10 +0100
Subject: [PATCH] New: Reactive search button on Wanted pages

Closes #7449
---
 .../src/Wanted/CutoffUnmet/CutoffUnmet.js     | 20 ++++++-------------
 .../CutoffUnmet/CutoffUnmetConnector.js       |  5 +++--
 frontend/src/Wanted/Missing/Missing.js        | 19 ++++++------------
 .../src/Wanted/Missing/MissingConnector.js    |  5 +++--
 4 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
index 3b2703de1..57a0242c6 100644
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
+++ b/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}
-              onPress={this.onSearchSelectedPress}
+              isDisabled={isSearchingForCutoffUnmetEpisodes}
+              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}>
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
index 6b52df496..6c4c13a74 100644
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
+++ b/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
       };
diff --git a/frontend/src/Wanted/Missing/Missing.js b/frontend/src/Wanted/Missing/Missing.js
index 734b7e6c5..2783693a1 100644
--- a/frontend/src/Wanted/Missing/Missing.js
+++ b/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}
-              onPress={this.onSearchSelectedPress}
+              isSpinning={isSearchingForMissingEpisodes}
+              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}
diff --git a/frontend/src/Wanted/Missing/MissingConnector.js b/frontend/src/Wanted/Missing/MissingConnector.js
index d6035ab11..576e4362c 100644
--- a/frontend/src/Wanted/Missing/MissingConnector.js
+++ b/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
       };