Fixed: Queue not always clearing checked items when updated

frontend/src/Activity/Queue/Queue.js

@@ -13,6 +13,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import { align, icons } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
@@ -36,34 +37,28 @@ class Queue extends Component {
       lastToggled: null,
       selectedState: {},
       isPendingSelected: false,
-      isConfirmRemoveModalOpen: false
+      isConfirmRemoveModalOpen: false,
+      items: props.items
     };
   }
 
-  shouldComponentUpdate(nextProps) {
+  componentDidUpdate(prevProps) {
-    // Don't update when fetching has completed if items have changed,
+    const {
-    // before albums start fetching or when albums start fetching.
+      items,
+      isFetching,
+      isAlbumsFetching
+    } = this.props;
 
     if (
-      this.props.isFetching &&
+      (!isAlbumsFetching && prevProps.isAlbumsFetching) ||
-      nextProps.isPopulated &&
+      (!isFetching && prevProps.isFetching) ||
-      hasDifferentItems(this.props.items, nextProps.items) &&
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.albumId))
-      nextProps.items.some((e) => e.albumId)
     ) {
-      return false;
-    }
-
-    if (!this.props.isAlbumsFetching && nextProps.isAlbumsFetching) {
-      return false;
-    }
-
-    return true;
-  }
-
-  componentDidUpdate(prevProps) {
-    if (hasDifferentItems(prevProps.items, this.props.items)) {
       this.setState((state) => {
-        return removeOldSelectedState(state, prevProps.items);
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
       });
 
       return;
@@ -124,7 +119,6 @@ class Queue extends Component {
       isFetching,
       isPopulated,
       error,
-      items,
       isArtistFetching,
       isArtistPopulated,
       isAlbumsFetching,
@@ -144,7 +138,8 @@ class Queue extends Component {
       allUnselected,
       selectedState,
       isConfirmRemoveModalOpen,
-      isPendingSelected
+      isPendingSelected,
+      items
     } = this.state;
 
     const isRefreshing = isFetching || isArtistFetching || isAlbumsFetching || isRefreshMonitoredDownloadsExecuting;

frontend/src/Utilities/Object/getRemovedItems.js

@@ -0,0 +1,15 @@
+function getRemovedItems(prevItems, currentItems, idProp = 'id') {
+  if (prevItems === currentItems) {
+    return [];
+  }
+
+  const currentItemIds = new Set();
+
+  currentItems.forEach((currentItem) => {
+    currentItemIds.add(currentItem[idProp]);
+  });
+
+  return prevItems.filter((prevItem) => !currentItemIds.has(prevItem[idProp]));
+}
+
+export default getRemovedItems;