fixup! v3 UI

Missing/Cutoff Unmet monitoring

frontend/src/Components/SignalRConnector.js

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

frontend/src/Store/Actions/wantedActions.js

@@ -195,7 +195,7 @@ export const SET_MISSING_FILTER = 'wanted/missing/setMissingFilter';
 export const SET_MISSING_TABLE_OPTION = 'wanted/missing/setMissingTableOption';
 export const CLEAR_MISSING = 'wanted/missing/clearMissing';
 
-export const BATCH_TOGGLE_MISSING_EPISODES = 'wanted/missing/';
+export const BATCH_TOGGLE_MISSING_EPISODES = 'wanted/missing/batchToggleMissingEpisodes';
 
 export const FETCH_CUTOFF_UNMET = 'wanted/cutoffUnmet/fetchCutoffUnmet';
 export const GOTO_FIRST_CUTOFF_UNMET_PAGE = 'wanted/cutoffUnmet/gotoCutoffUnmetFirstPage';

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,28 @@
 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,15 @@ 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 {
 
   //
@@ -78,9 +87,12 @@ class CutoffUnmet extends Component {
   }
 
   onToggleSelectedPress = () => {
-    const selected = this.getSelectedIds();
+    const episodeIds = this.getSelectedIds();
 
-    this.props.onToggleSelectedPress(selected);
+    this.props.batchToggleCutoffUnmetEpisodes({
+      episodeIds,
+      monitored: !getMonitoredValue(this.props)
+    });
   }
 
   onSearchAllCutoffUnmetPress = () => {
@@ -123,7 +135,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">
@@ -137,7 +149,7 @@ class CutoffUnmet extends Component {
             />
 
             <PageToolbarButton
-              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
+              label={isShowingMonitored ? 'Unmonitor Selected' : 'Monitor Selected'}
               iconName={icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
@@ -261,7 +273,7 @@ CutoffUnmet.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
-  onToggleSelectedPress: PropTypes.func.isRequired,
+  batchToggleCutoffUnmetEpisodes: 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';
@@ -44,7 +43,7 @@ class CutoffUnmetConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.repopulate);
+    registerPagePopulator(this.repopulate, ['episodeFileUpdated']);
     this.props.gotoCutoffUnmetFirstPage();
   }
 
@@ -120,19 +119,6 @@ class CutoffUnmetConnector extends Component {
     });
   }
 
-  onToggleSelectedPress = (selected) => {
-    const {
-      filters
-    } = this.props;
-
-    const monitored = getFilterValue(filters, 'monitored');
-
-    this.props.batchToggleCutoffUnmetEpisodes({
-      episodeIds: selected,
-      monitored: monitored == null || !monitored
-    });
-  }
-
   onSearchAllCutoffUnmetPress = () => {
     this.props.executeCommand({
       name: commandNames.CUTOFF_UNMET_EPISODE_SEARCH
@@ -164,7 +150,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,
@@ -174,7 +159,6 @@ CutoffUnmetConnector.propTypes = {
   setCutoffUnmetSort: PropTypes.func.isRequired,
   setCutoffUnmetFilter: PropTypes.func.isRequired,
   setCutoffUnmetTableOption: PropTypes.func.isRequired,
-  batchToggleCutoffUnmetEpisodes: 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 episodeIds = this.getSelectedIds();
 
-    this.props.onToggleSelectedPress(selected);
+    this.props.batchToggleMissingEpisodes({
+      episodeIds,
+      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,7 +155,7 @@ class Missing extends Component {
             />
 
             <PageToolbarButton
-              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
+              label={isShowingMonitored ? 'Unmonitor Selected' : 'Monitor Selected'}
               iconName={icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
@@ -279,7 +291,7 @@ Missing.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
-  onToggleSelectedPress: PropTypes.func.isRequired,
+  batchToggleMissingEpisodes: 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';
@@ -41,7 +40,7 @@ class MissingConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.repopulate);
+    registerPagePopulator(this.repopulate, ['episodeFileUpdated']);
     this.props.gotoMissingFirstPage();
   }
 
@@ -111,19 +110,6 @@ class MissingConnector extends Component {
     });
   }
 
-  onToggleSelectedPress = (selected) => {
-    const {
-      filters
-    } = this.props;
-
-    const monitored = getFilterValue(filters, 'monitored');
-
-    this.props.batchToggleMissingEpisodes({
-      episodeIds: selected,
-      monitored: monitored == null || !monitored
-    });
-  }
-
   onSearchAllMissingPress = () => {
     this.props.executeCommand({
       name: commandNames.MISSING_EPISODE_SEARCH
@@ -155,7 +141,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,
@@ -166,7 +151,6 @@ MissingConnector.propTypes = {
   setMissingFilter: PropTypes.func.isRequired,
   setMissingTableOption: PropTypes.func.isRequired,
   clearMissing: PropTypes.func.isRequired,
-  batchToggleMissingEpisodes: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,
   clearQueueDetails: PropTypes.func.isRequired