From bba57bb4345be37096f107d8358322308cba8737 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 3 Apr 2020 08:44:58 -0700
Subject: [PATCH] Fixed: Queue not always clearing checked items when updated

---
 frontend/src/Activity/Queue/Queue.js          | 39 ++++++++-----------
 .../src/Utilities/Object/getRemovedItems.js   | 15 +++++++
 2 files changed, 31 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/Utilities/Object/getRemovedItems.js

diff --git a/frontend/src/Activity/Queue/Queue.js b/frontend/src/Activity/Queue/Queue.js
index 4a177fbc1..77a9b0cc6 100644
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/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) {
-    // Don't update when fetching has completed if items have changed,
-    // before episodes start fetching or when episodes start fetching.
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isEpisodesFetching
+    } = this.props;
 
     if (
-      this.props.isFetching &&
-      nextProps.isPopulated &&
-      hasDifferentItems(this.props.items, nextProps.items) &&
-      nextProps.items.some((e) => e.episodeId)
+      (!isEpisodesFetching && prevProps.isEpisodesFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !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;
diff --git a/frontend/src/Utilities/Object/getRemovedItems.js b/frontend/src/Utilities/Object/getRemovedItems.js
new file mode 100644
index 000000000..df7ada3a8
--- /dev/null
+++ b/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;