New: Custom Filtering for UI (#234)

frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getFilterValue from 'Utilities/Filter/getFilterValue';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
@@ -17,8 +18,6 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
-import MenuContent from 'Components/Menu/MenuContent';
-import FilterMenuItem from 'Components/Menu/FilterMenuItem';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import CutoffUnmetRowConnector from './CutoffUnmetRowConnector';
 
@@ -58,10 +57,6 @@ class CutoffUnmet extends Component {
   //
   // Listeners
 
-  onFilterMenuItemPress = (filterKey, filterValue) => {
-    this.props.onFilterSelect(filterKey, filterValue);
-  }
-
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }
@@ -106,13 +101,14 @@ class CutoffUnmet extends Component {
       isPopulated,
       error,
       items,
+      selectedFilterKey,
+      filters,
       columns,
       totalRecords,
       isSearchingForAlbums,
       isSearchingForCutoffUnmetAlbums,
       isSaving,
-      filterKey,
-      filterValue,
+      onFilterSelect,
       ...otherProps
     } = this.props;
 
@@ -124,6 +120,7 @@ class CutoffUnmet extends Component {
     } = this.state;
 
     const itemsSelected = !!this.getSelectedIds().length;
+    const monitoredFilterValue = getFilterValue(filters, 'monitored');
 
     return (
       <PageContent title="Cutoff Unmet">
@@ -138,7 +135,7 @@ class CutoffUnmet extends Component {
             />
 
             <PageToolbarButton
-              label={filterKey === 'monitored' && filterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
+              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
               iconName={icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
@@ -159,29 +156,13 @@ class CutoffUnmet extends Component {
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>
-            <FilterMenu alignMenu={align.RIGHT}>
-              <MenuContent>
-                <FilterMenuItem
-                  name="monitored"
-                  value={true}
-                  filterKey={filterKey}
-                  filterValue={filterValue}
-                  onPress={this.onFilterMenuItemPress}
-                >
-                  Monitored
-                </FilterMenuItem>
-
-                <FilterMenuItem
-                  name="monitored"
-                  value={false}
-                  filterKey={filterKey}
-                  filterValue={filterValue}
-                  onPress={this.onFilterMenuItemPress}
-                >
-                  Unmonitored
-                </FilterMenuItem>
-              </MenuContent>
-            </FilterMenu>
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
           </PageToolbarSection>
         </PageToolbar>
 
@@ -270,13 +251,13 @@ CutoffUnmet.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isSearchingForAlbums: PropTypes.bool.isRequired,
   isSearchingForCutoffUnmetAlbums: PropTypes.bool.isRequired,
   isSaving: PropTypes.bool.isRequired,
-  filterKey: PropTypes.string,
-  filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
   onToggleSelectedPress: PropTypes.func.isRequired,

frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js

@@ -4,6 +4,7 @@ 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 createCommandsSelector from 'Store/Selectors/createCommandsSelector';
@@ -105,8 +106,8 @@ class CutoffUnmetConnector extends Component {
     this.props.setCutoffUnmetSort({ sortKey });
   }
 
-  onFilterSelect = (filterKey, filterValue) => {
-    this.props.setCutoffUnmetFilter({ filterKey, filterValue });
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setCutoffUnmetFilter({ selectedFilterKey });
   }
 
   onTableOptionChange = (payload) => {
@@ -126,13 +127,14 @@ class CutoffUnmetConnector extends Component {
 
   onToggleSelectedPress = (selected) => {
     const {
-      filterKey,
-      filterValue
+      filters
     } = this.props;
 
+    const monitored = getFilterValue(filters, 'monitored');
+
     this.props.batchToggleCutoffUnmetAlbums({
       albumIds: selected,
-      monitored: filterKey !== 'monitored' || !filterValue
+      monitored: monitored == null || !monitored
     });
   }
 
@@ -167,8 +169,7 @@ class CutoffUnmetConnector extends Component {
 
 CutoffUnmetConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filterKey: PropTypes.string.isRequired,
-  filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchCutoffUnmet: PropTypes.func.isRequired,
   gotoCutoffUnmetFirstPage: PropTypes.func.isRequired,
   gotoCutoffUnmetPreviousPage: PropTypes.func.isRequired,

frontend/src/Wanted/Missing/Missing.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getFilterValue from 'Utilities/Filter/getFilterValue';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
@@ -17,8 +18,6 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
-import MenuContent from 'Components/Menu/MenuContent';
-import FilterMenuItem from 'Components/Menu/FilterMenuItem';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MissingRowConnector from './MissingRowConnector';
@@ -59,10 +58,6 @@ class Missing extends Component {
   //
   // Listeners
 
-  onFilterMenuItemPress = (filterKey, filterValue) => {
-    this.props.onFilterSelect(filterKey, filterValue);
-  }
-
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }
@@ -115,13 +110,14 @@ class Missing extends Component {
       isPopulated,
       error,
       items,
+      selectedFilterKey,
+      filters,
       columns,
       totalRecords,
       isSearchingForAlbums,
       isSearchingForMissingAlbums,
       isSaving,
-      filterKey,
-      filterValue,
+      onFilterSelect,
       ...otherProps
     } = this.props;
 
@@ -134,6 +130,7 @@ class Missing extends Component {
     } = this.state;
 
     const itemsSelected = !!this.getSelectedIds().length;
+    const monitoredFilterValue = getFilterValue(filters, 'monitored');
 
     return (
       <PageContent title="Missing">
@@ -148,7 +145,7 @@ class Missing extends Component {
             />
 
             <PageToolbarButton
-              label={filterKey === 'monitored' && filterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
+              label={monitoredFilterValue ? 'Unmonitor Selected' : 'Monitor Selected'}
               iconName={icons.MONITORED}
               isDisabled={!itemsSelected}
               isSpinning={isSaving}
@@ -176,29 +173,13 @@ class Missing extends Component {
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>
-            <FilterMenu alignMenu={align.RIGHT}>
-              <MenuContent>
-                <FilterMenuItem
-                  name="monitored"
-                  value={true}
-                  filterKey={filterKey}
-                  filterValue={filterValue}
-                  onPress={this.onFilterMenuItemPress}
-                >
-                  Monitored
-                </FilterMenuItem>
-
-                <FilterMenuItem
-                  name="monitored"
-                  value={false}
-                  filterKey={filterKey}
-                  filterValue={filterValue}
-                  onPress={this.onFilterMenuItemPress}
-                >
-                  Unmonitored
-                </FilterMenuItem>
-              </MenuContent>
-            </FilterMenu>
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
           </PageToolbarSection>
         </PageToolbar>
 
@@ -292,13 +273,13 @@ Missing.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isSearchingForAlbums: PropTypes.bool.isRequired,
   isSearchingForMissingAlbums: PropTypes.bool.isRequired,
   isSaving: PropTypes.bool.isRequired,
-  filterKey: PropTypes.string,
-  filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
   onFilterSelect: PropTypes.func.isRequired,
   onSearchSelectedPress: PropTypes.func.isRequired,
   onToggleSelectedPress: PropTypes.func.isRequired,

frontend/src/Wanted/Missing/MissingConnector.js

@@ -4,6 +4,7 @@ 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 createCommandsSelector from 'Store/Selectors/createCommandsSelector';
@@ -95,8 +96,8 @@ class MissingConnector extends Component {
     this.props.setMissingSort({ sortKey });
   }
 
-  onFilterSelect = (filterKey, filterValue) => {
-    this.props.setMissingFilter({ filterKey, filterValue });
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setMissingFilter({ selectedFilterKey });
   }
 
   onTableOptionChange = (payload) => {
@@ -116,13 +117,14 @@ class MissingConnector extends Component {
 
   onToggleSelectedPress = (selected) => {
     const {
-      filterKey,
-      filterValue
+      filters
     } = this.props;
 
+    const monitored = getFilterValue(filters, 'monitored');
+
     this.props.batchToggleMissingAlbums({
       albumIds: selected,
-      monitored: filterKey !== 'monitored' || !filterValue
+      monitored: monitored == null || !monitored
     });
   }
 
@@ -157,8 +159,7 @@ class MissingConnector extends Component {
 
 MissingConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filterKey: PropTypes.string.isRequired,
-  filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchMissing: PropTypes.func.isRequired,
   gotoMissingFirstPage: PropTypes.func.isRequired,
   gotoMissingPreviousPage: PropTypes.func.isRequired,