New: History custom filters

(cherry picked from commit 2fe8f3084c90688e6dd01d600796396e74f43ff9)

Closes #4213
Closes #4235
Closes #4236

frontend/src/Activity/History/History.js

@@ -15,6 +15,7 @@ import TablePager from 'Components/Table/TablePager';
 import { align, icons, kinds } from 'Helpers/Props';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
+import HistoryFilterModal from './HistoryFilterModal';
 import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
@@ -52,6 +53,7 @@ class History extends Component {
       columns,
       selectedFilterKey,
       filters,
+      customFilters,
       totalRecords,
       isArtistFetching,
       isArtistPopulated,
@@ -94,7 +96,8 @@ class History extends Component {
               alignMenu={align.RIGHT}
               selectedFilterKey={selectedFilterKey}
               filters={filters}
-              customFilters={[]}
+              customFilters={customFilters}
+              filterModalConnectorComponent={HistoryFilterModal}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>
@@ -165,8 +168,9 @@ History.propTypes = {
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selectedFilterKey: PropTypes.string.isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isArtistFetching: PropTypes.bool.isRequired,
   isArtistPopulated: PropTypes.bool.isRequired,

frontend/src/Activity/History/HistoryConnector.js

@@ -6,6 +6,7 @@ import withCurrentPage from 'Components/withCurrentPage';
 import { clearAlbums, fetchAlbums } from 'Store/Actions/albumActions';
 import * as historyActions from 'Store/Actions/historyActions';
 import { clearTracks, fetchTracks } from 'Store/Actions/trackActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
@@ -17,7 +18,8 @@ function createMapStateToProps() {
     (state) => state.artist,
     (state) => state.albums,
     (state) => state.tracks,
-    (history, artist, albums, tracks) => {
+    createCustomFiltersSelector('history'),
+    (history, artist, albums, tracks, customFilters) => {
       return {
         isArtistFetching: artist.isFetching,
         isArtistPopulated: artist.isPopulated,
@@ -27,6 +29,7 @@ function createMapStateToProps() {
         isTracksFetching: tracks.isFetching,
         isTracksPopulated: tracks.isPopulated,
         tracksError: tracks.error,
+        customFilters,
         ...history
       };
     }

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setHistoryFilter } from 'Store/Actions/historyActions';
+
+function createHistorySelector() {
+  return createSelector(
+    (state: AppState) => state.history.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.history.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface HistoryFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function HistoryFilterModal(props: HistoryFilterModalProps) {
+  const sectionItems = useSelector(createHistorySelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'history';
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: unknown) => {
+      dispatch(setHistoryFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      // TODO: Don't spread all the props
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}