New: refresh only selected or filtered series

Closes #5611

frontend/src/Series/Index/SeriesIndex.tsx

@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { SelectProvider } from 'App/SelectContext';
 import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import SeriesAppState, { SeriesIndexAppState } from 'App/State/SeriesAppState';
-import { REFRESH_SERIES, RSS_SYNC } from 'Commands/commandNames';
+import { RSS_SYNC } from 'Commands/commandNames';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -49,6 +49,7 @@ import SeriesIndexSelectFooter from './Select/SeriesIndexSelectFooter';
 import SeriesIndexSelectModeButton from './Select/SeriesIndexSelectModeButton';
 import SeriesIndexSelectModeMenuItem from './Select/SeriesIndexSelectModeMenuItem';
 import SeriesIndexFooter from './SeriesIndexFooter';
+import SeriesIndexRefreshSeriesButton from './SeriesIndexRefreshSeriesButton';
 import SeriesIndexTable from './Table/SeriesIndexTable';
 import SeriesIndexTableOptions from './Table/SeriesIndexTableOptions';
 import styles from './SeriesIndex.css';
@@ -86,9 +87,6 @@ const SeriesIndex = withScrollPosition((props: SeriesIndexProps) => {
   }: SeriesAppState & SeriesIndexAppState & ClientSideCollectionAppState =
     useSelector(createSeriesClientSideCollectionItemsSelector('seriesIndex'));
 
-  const isRefreshingSeries = useSelector(
-    createCommandExecutingSelector(REFRESH_SERIES)
-  );
   const isRssSyncExecuting = useSelector(
     createCommandExecutingSelector(RSS_SYNC)
   );
@@ -106,14 +104,6 @@ const SeriesIndex = withScrollPosition((props: SeriesIndexProps) => {
     dispatch(fetchQueueDetails({ all: true }));
   }, [dispatch]);
 
-  const onRefreshSeriesPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: REFRESH_SERIES,
-      })
-    );
-  }, [dispatch]);
-
   const onRssSyncPress = useCallback(() => {
     dispatch(
       executeCommand({
@@ -227,13 +217,9 @@ const SeriesIndex = withScrollPosition((props: SeriesIndexProps) => {
       <PageContent>
         <PageToolbar>
           <PageToolbarSection>
-            <PageToolbarButton
-              label="Update all"
-              iconName={icons.REFRESH}
-              spinningName={icons.REFRESH}
-              isSpinning={isRefreshingSeries}
-              isDisabled={hasNoSeries}
-              onPress={onRefreshSeriesPress}
+            <SeriesIndexRefreshSeriesButton
+              isSelectMode={isSelectMode}
+              selectedFilterKey={selectedFilterKey}
             />
 
             <PageToolbarButton

frontend/src/Series/Index/SeriesIndexRefreshSeriesButton.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useSelect } from 'App/SelectContext';
+import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
+import SeriesAppState, { SeriesIndexAppState } from 'App/State/SeriesAppState';
+import { REFRESH_SERIES } from 'Commands/commandNames';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import { icons } from 'Helpers/Props';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createSeriesClientSideCollectionItemsSelector from 'Store/Selectors/createSeriesClientSideCollectionItemsSelector';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+
+interface SeriesIndexRefreshSeriesButtonProps {
+  isSelectMode: boolean;
+  selectedFilterKey: string;
+}
+
+function SeriesIndexRefreshSeriesButton(
+  props: SeriesIndexRefreshSeriesButtonProps
+) {
+  const isRefreshing = useSelector(
+    createCommandExecutingSelector(REFRESH_SERIES)
+  );
+  const {
+    items,
+    totalItems,
+  }: SeriesAppState & SeriesIndexAppState & ClientSideCollectionAppState =
+    useSelector(createSeriesClientSideCollectionItemsSelector('seriesIndex'));
+
+  const dispatch = useDispatch();
+  const { isSelectMode, selectedFilterKey } = props;
+  const [selectState] = useSelect();
+  const { selectedState } = selectState;
+
+  const selectedSeriesIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const seriesToRefresh =
+    isSelectMode && selectedSeriesIds.length > 0
+      ? selectedSeriesIds
+      : items.map((m) => m.id);
+
+  let refreshLabel = 'Update All';
+
+  if (selectedSeriesIds.length > 0) {
+    refreshLabel = 'Update Selected';
+  } else if (selectedFilterKey !== 'all') {
+    refreshLabel = 'Update Filtered';
+  }
+
+  const onPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_SERIES,
+        seriesIds: seriesToRefresh,
+      })
+    );
+  }, [dispatch, seriesToRefresh]);
+
+  return (
+    <PageToolbarButton
+      label={refreshLabel}
+      isSpinning={isRefreshing}
+      isDisabled={!totalItems}
+      iconName={icons.REFRESH}
+      onPress={onPress}
+    />
+  );
+}
+
+export default SeriesIndexRefreshSeriesButton;