Use react-query for Blocklist UI

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -12,11 +11,11 @@ import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds } from 'Helpers/Props';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
-import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
 import Blocklist from 'typings/Blocklist';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
 import BlocklistDetailsModal from './BlocklistDetailsModal';
+import { useRemoveBlocklistItem } from './useBlocklist';
 import styles from './BlocklistRow.css';
 
 interface BlocklistRowProps extends Blocklist {
@@ -25,26 +24,24 @@ interface BlocklistRowProps extends Blocklist {
   onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
-function BlocklistRow(props: BlocklistRowProps) {
-  const {
-    id,
-    seriesId,
-    sourceTitle,
-    languages,
-    quality,
-    customFormats,
-    date,
-    protocol,
-    indexer,
-    message,
-    source,
-    isSelected,
-    columns,
-    onSelectedChange,
-  } = props;
-
+function BlocklistRow({
+  id,
+  seriesId,
+  sourceTitle,
+  languages,
+  quality,
+  customFormats,
+  date,
+  protocol,
+  indexer,
+  message,
+  source,
+  isSelected,
+  columns,
+  onSelectedChange,
+}: BlocklistRowProps) {
   const series = useSeries(seriesId);
-  const dispatch = useDispatch();
+  const { isRemoving, removeBlocklistItem } = useRemoveBlocklistItem(id);
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
   const handleDetailsPress = useCallback(() => {
@@ -56,8 +53,8 @@ function BlocklistRow(props: BlocklistRowProps) {
   }, [setIsDetailsModalOpen]);
 
   const handleRemovePress = useCallback(() => {
-    dispatch(removeBlocklistItem({ id }));
-  }, [id, dispatch]);
+    removeBlocklistItem();
+  }, [removeBlocklistItem]);
 
   if (!series) {
     return null;
@@ -140,6 +137,7 @@ function BlocklistRow(props: BlocklistRowProps) {
                 title={translate('RemoveFromBlocklist')}
                 name={icons.REMOVE}
                 kind={kinds.DANGER}
+                isSpinning={isRemoving}
                 onPress={handleRemovePress}
               />
             </TableRowCell>