From 8d43d5d7b0c7a39adec48b622cd9f1dcdbb2a42a Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Fri, 2 Oct 2020 22:07:27 -0400
Subject: [PATCH] Fixed: Queue not always clearing checked items when updated

Signed-off-by: Robin Dadswell <robin@dadswell.email>
---
 frontend/src/Activity/Queue/Queue.js          | 41 ++++++++-----------
 .../src/Utilities/Object/getRemovedItems.js   | 15 +++++++
 2 files changed, 33 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 627679925..4e25b9ed1 100644
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/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) {
-    // Don't update when fetching has completed if items have changed,
-    // before books start fetching or when books start fetching.
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isFetching,
+      isBooksFetching
+    } = this.props;
 
     if (
-      this.props.isFetching &&
-      nextProps.isPopulated &&
-      hasDifferentItems(this.props.items, nextProps.items) &&
-      nextProps.items.some((e) => e.bookId)
+      (!isBooksFetching && prevProps.isBooksFetching) ||
+      (!isFetching && prevProps.isFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.bookId))
     ) {
-      return false;
-    }
-
-    if (!this.props.isBooksFetching && nextProps.isBooksFetching) {
-      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,
       isAuthorFetching,
       isAuthorPopulated,
       isBooksFetching,
@@ -144,7 +138,8 @@ class Queue extends Component {
       allUnselected,
       selectedState,
       isConfirmRemoveModalOpen,
-      isPendingSelected
+      isPendingSelected,
+      items
     } = this.state;
 
     const isRefreshing = isFetching || isAuthorFetching || isBooksFetching || 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;