Wanted Monitor/Unmonitor Selected button fixed (#528)

* the button was not changing based on the filter selection

nor was it properly carrying out its function.

It should now work.

this code was ported from Sonarr:

979fc436ab

* indents/spaces/formtting

frontend/src/Components/SignalRConnector.js

@@ -202,6 +202,8 @@ class SignalRConnector extends Component {
 
     if (body.action === 'updated') {
       this.props.dispatchUpdateItem({ section, ...body.resource });
+      // Repopulate the page to handle recently imported file
+      repopulatePage('trackFileUpdated');
     } else if (body.action === 'deleted') {
       this.props.dispatchRemoveItem({ section, id: body.resource.id });
     }

frontend/src/Utilities/Filter/getFilterValue.js

@@ -1,5 +1,11 @@
-export default function getFilterValue(filters, filterKey) {
+export default function getFilterValue(filters, filterKey, filterValueKey, defaultValue) {
   const filter = filters.find((f) => f.key === filterKey);
 
-  return filter && filter.value;
+  if (!filter) {
+    return defaultValue;
+  }
+
+  const filterValue = filter.filters.find((f) => f.key === filterValueKey);
+
+  return filterValue ? filterValue.value : defaultValue;
 }

frontend/src/Utilities/pagePopulator.js

@@ -1,17 +1,27 @@
 let currentPopulator = null;
+let currentReasons = [];
 
-export function registerPagePopulator(populator) {
+export function registerPagePopulator(populator, reasons = []) {
   currentPopulator = populator;
+  currentReasons = reasons;
 }
 
 export function unregisterPagePopulator(populator) {
   if (currentPopulator === populator) {
     currentPopulator = null;
+    currentReasons = [];
   }
 }
 
-export function repopulatePage() {
-  if (currentPopulator) {
+export function repopulatePage(reason) {
+  if (!currentPopulator) {
+    return;
+  }
+  if (!reason) {
+    currentPopulator();
+  }
+
+  if (reason && currentReasons.includes(reason)) {
     currentPopulator();
   }
 }

frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js

@@ -21,6 +21,14 @@ import FilterMenu from 'Components/Menu/FilterMenu';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import CutoffUnmetRowConnector from './CutoffUnmetRowConnector';
 
+function getMonitoredValue(props) {
+  const {
+    filters,
+    selectedFilterKey
+  } = props;
+  return getFilterValue(filters, selectedFilterKey, 'monitored', false);
+}
+
 class CutoffUnmet extends Component {
 
   //
@@ -74,9 +82,12 @@ class CutoffUnmet extends Component {
   }
 
   onToggleSelectedPress = () => {
-    const selected = this.getSelectedIds();
+    const albumIds = this.getSelectedIds();
 
-    this.props.onToggleSelectedPress(selected);
+    this.props.batchToggleCutoffUnmetAlbums({
+      albumIds,
+      monitored: !getMonitoredValue(this.props)
+    });
   }
 
   onSearchAllCutoffUnmetPress = () => {
@@ -119,7 +130,7 @@ class CutoffUnmet extends Component {
     } = this.state;
 
     const itemsSelected = !!this.getSelectedIds().length;
-    const monitoredFilterValue = getFilterValue(filters, 'monitored');
+    const isShowingMonitored = getMonitoredValue(this.props);
 
     return (
       <PageContent title="Cutoff Unmet">
@@ -133,8 +144,8 @@ class CutoffUnmet extends Component {
             />
 
             <PageToolbarButton
-              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
-              iconName={icons.MONITORED}
+              label={isShowingMonitored ? 'Unmonitor Selected' : 'Monitor Selected'}
+              iconName={isShowingMonitored ? icons.UNMONITORED : icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
               onPress={this.onToggleSelectedPress}
@@ -257,7 +268,7 @@ CutoffUnmet.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
-  onToggleSelectedPress: PropTypes.func.isRequired,
+  batchToggleCutoffUnmetAlbums: PropTypes.func.isRequired,
   onSearchAllCutoffUnmetPress: PropTypes.func.isRequired
 };
 

frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
-import getFilterValue from 'Utilities/Filter/getFilterValue';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -45,7 +44,7 @@ class CutoffUnmetConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.repopulate);
+    registerPagePopulator(this.repopulate, ['trackFileUpdated']);
     this.props.gotoCutoffUnmetFirstPage();
   }
 
@@ -122,19 +121,6 @@ class CutoffUnmetConnector extends Component {
     });
   }
 
-  onToggleSelectedPress = (selected) => {
-    const {
-      filters
-    } = this.props;
-
-    const monitored = getFilterValue(filters, 'monitored');
-
-    this.props.batchToggleCutoffUnmetAlbums({
-      albumIds: selected,
-      monitored: monitored == null || !monitored
-    });
-  }
-
   onSearchAllCutoffUnmetPress = () => {
     this.props.executeCommand({
       name: commandNames.CUTOFF_UNMET_ALBUM_SEARCH
@@ -166,7 +152,6 @@ class CutoffUnmetConnector extends Component {
 
 CutoffUnmetConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchCutoffUnmet: PropTypes.func.isRequired,
   gotoCutoffUnmetFirstPage: PropTypes.func.isRequired,
   gotoCutoffUnmetPreviousPage: PropTypes.func.isRequired,
@@ -176,7 +161,6 @@ CutoffUnmetConnector.propTypes = {
   setCutoffUnmetSort: PropTypes.func.isRequired,
   setCutoffUnmetFilter: PropTypes.func.isRequired,
   setCutoffUnmetTableOption: PropTypes.func.isRequired,
-  batchToggleCutoffUnmetAlbums: PropTypes.func.isRequired,
   clearCutoffUnmet: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,

frontend/src/Wanted/Missing/Missing.js

@@ -22,6 +22,15 @@ import ConfirmModal from 'Components/Modal/ConfirmModal';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MissingRowConnector from './MissingRowConnector';
 
+function getMonitoredValue(props) {
+  const {
+    filters,
+    selectedFilterKey
+  } = props;
+
+  return getFilterValue(filters, selectedFilterKey, 'monitored', false);
+}
+
 class Missing extends Component {
 
   //
@@ -75,9 +84,12 @@ class Missing extends Component {
   }
 
   onToggleSelectedPress = () => {
-    const selected = this.getSelectedIds();
+    const albumIds = this.getSelectedIds();
 
-    this.props.onToggleSelectedPress(selected);
+    this.props.batchToggleMissingAlbums({
+      albumIds,
+      monitored: !getMonitoredValue(this.props)
+    });
   }
 
   onSearchAllMissingPress = () => {
@@ -129,7 +141,7 @@ class Missing extends Component {
     } = this.state;
 
     const itemsSelected = !!this.getSelectedIds().length;
-    const monitoredFilterValue = getFilterValue(filters, 'monitored');
+    const isShowingMonitored = getMonitoredValue(this.props);
 
     return (
       <PageContent title="Missing">
@@ -143,8 +155,8 @@ class Missing extends Component {
             />
 
             <PageToolbarButton
-              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
-              iconName={icons.MONITORED}
+              label={isShowingMonitored ? 'Unmonitor Selected' : 'Monitor Selected'}
+              iconName={isShowingMonitored ? icons.UNMONITORED : icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
               onPress={this.onToggleSelectedPress}
@@ -279,7 +291,7 @@ Missing.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
-  onToggleSelectedPress: PropTypes.func.isRequired,
+  batchToggleMissingAlbums: PropTypes.func.isRequired,
   onSearchAllMissingPress: PropTypes.func.isRequired
 };
 

frontend/src/Wanted/Missing/MissingConnector.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
-import getFilterValue from 'Utilities/Filter/getFilterValue';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -42,7 +41,7 @@ class MissingConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.repopulate);
+    registerPagePopulator(this.repopulate, ['trackFileUpdated']);
     this.props.gotoMissingFirstPage();
   }
 
@@ -112,19 +111,6 @@ class MissingConnector extends Component {
     });
   }
 
-  onToggleSelectedPress = (selected) => {
-    const {
-      filters
-    } = this.props;
-
-    const monitored = getFilterValue(filters, 'monitored');
-
-    this.props.batchToggleMissingAlbums({
-      albumIds: selected,
-      monitored: monitored == null || !monitored
-    });
-  }
-
   onSearchAllMissingPress = () => {
     this.props.executeCommand({
       name: commandNames.MISSING_ALBUM_SEARCH
@@ -156,7 +142,6 @@ class MissingConnector extends Component {
 
 MissingConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchMissing: PropTypes.func.isRequired,
   gotoMissingFirstPage: PropTypes.func.isRequired,
   gotoMissingPreviousPage: PropTypes.func.isRequired,
@@ -167,7 +152,6 @@ MissingConnector.propTypes = {
   setMissingFilter: PropTypes.func.isRequired,
   setMissingTableOption: PropTypes.func.isRequired,
   clearMissing: PropTypes.func.isRequired,
-  batchToggleMissingAlbums: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,
   clearQueueDetails: PropTypes.func.isRequired