Fixed: Queue not always clearing checked items when updated

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+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,26 @@ 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 episodes start fetching or when episodes start fetching.
+      items,
+      isEpisodesFetching
+    } = this.props;
 
     if (
-      this.props.isFetching &&
+      (!isEpisodesFetching && prevProps.isEpisodesFetching) ||
-      nextProps.isPopulated &&
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.episodeId))
-      hasDifferentItems(this.props.items, nextProps.items) &&
-      nextProps.items.some((e) => e.episodeId)
     ) {
-      return false;
-    }
-
-    if (!this.props.isEpisodesFetching && nextProps.isEpisodesFetching) {
-      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 +117,6 @@ class Queue extends Component {
       isFetching,
       isPopulated,
       error,
-      items,
       isEpisodesFetching,
       isEpisodesPopulated,
       episodesError,
@@ -142,7 +134,8 @@ class Queue extends Component {
       allUnselected,
       selectedState,
       isConfirmRemoveModalOpen,
-      isPendingSelected
+      isPendingSelected,
+      items
     } = this.state;
 
     const isRefreshing = isFetching || isEpisodesFetching || 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;