New: Refresh only selected or filtered artists

(cherry picked from commit bf90c3cbddffca4f7ad07c3ae51fa705988cd80b)

Closes #3717

frontend/src/App/State/ClientSideCollectionAppState.ts

@@ -0,0 +1,8 @@
+import { CustomFilter } from './AppState';
+
+interface ClientSideCollectionAppState {
+  totalItems: number;
+  customFilters: CustomFilter[];
+}
+
+export default ClientSideCollectionAppState;

frontend/src/Artist/Index/ArtistIndex.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SelectProvider } from 'App/SelectContext';
 import NoArtist from 'Artist/NoArtist';
-import { REFRESH_ARTIST, 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';
@@ -29,6 +29,7 @@ import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import ArtistIndexFooter from './ArtistIndexFooter';
+import ArtistIndexRefreshArtistsButton from './ArtistIndexRefreshArtistsButton';
 import ArtistIndexBanners from './Banners/ArtistIndexBanners';
 import ArtistIndexBannerOptionsModal from './Banners/Options/ArtistIndexBannerOptionsModal';
 import ArtistIndexFilterMenu from './Menus/ArtistIndexFilterMenu';
@@ -83,9 +84,6 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
     view,
   } = useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
 
-  const isRefreshingArtist = useSelector(
-    createCommandExecutingSelector(REFRESH_ARTIST)
-  );
   const isRssSyncExecuting = useSelector(
     createCommandExecutingSelector(RSS_SYNC)
   );
@@ -96,14 +94,6 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
   const [isSelectMode, setIsSelectMode] = useState(false);
 
-  const onRefreshArtistPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: REFRESH_ARTIST,
-      })
-    );
-  }, [dispatch]);
-
   const onRssSyncPress = useCallback(() => {
     dispatch(
       executeCommand({
@@ -217,13 +207,9 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
       <PageContent>
         <PageToolbar>
           <PageToolbarSection>
-            <PageToolbarButton
-              label={translate('UpdateAll')}
-              iconName={icons.REFRESH}
-              spinningName={icons.REFRESH}
-              isSpinning={isRefreshingArtist}
-              isDisabled={hasNoArtist}
-              onPress={onRefreshArtistPress}
+            <ArtistIndexRefreshArtistsButton
+              isSelectMode={isSelectMode}
+              selectedFilterKey={selectedFilterKey}
             />
 
             <PageToolbarButton

frontend/src/Artist/Index/ArtistIndexRefreshArtistsButton.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useSelect } from 'App/SelectContext';
+import ArtistAppState, { ArtistIndexAppState } from 'App/State/ArtistAppState';
+import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
+import { REFRESH_ARTIST } from 'Commands/commandNames';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import { icons } from 'Helpers/Props';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createArtistClientSideCollectionItemsSelector from 'Store/Selectors/createArtistClientSideCollectionItemsSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+
+interface ArtistIndexRefreshArtistsButtonProps {
+  isSelectMode: boolean;
+  selectedFilterKey: string;
+}
+
+function ArtistIndexRefreshArtistsButton(
+  props: ArtistIndexRefreshArtistsButtonProps
+) {
+  const isRefreshing = useSelector(
+    createCommandExecutingSelector(REFRESH_ARTIST)
+  );
+  const {
+    items,
+    totalItems,
+  }: ArtistAppState & ArtistIndexAppState & ClientSideCollectionAppState =
+    useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
+
+  const dispatch = useDispatch();
+  const { isSelectMode, selectedFilterKey } = props;
+  const [selectState] = useSelect();
+  const { selectedState } = selectState;
+
+  const selectedArtistIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const artistsToRefresh =
+    isSelectMode && selectedArtistIds.length > 0
+      ? selectedArtistIds
+      : items.map((m) => m.id);
+
+  let refreshLabel = translate('UpdateAll');
+
+  if (selectedArtistIds.length > 0) {
+    refreshLabel = translate('UpdateSelected');
+  } else if (selectedFilterKey !== 'all') {
+    refreshLabel = translate('UpdateFiltered');
+  }
+
+  const onPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_ARTIST,
+        artistIds: artistsToRefresh,
+      })
+    );
+  }, [dispatch, artistsToRefresh]);
+
+  return (
+    <PageToolbarButton
+      label={refreshLabel}
+      isSpinning={isRefreshing}
+      isDisabled={!totalItems}
+      iconName={icons.REFRESH}
+      onPress={onPress}
+    />
+  );
+}
+
+export default ArtistIndexRefreshArtistsButton;