From 0c768921b50a5d5d8efc3a45723a5a879fe073d5 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 3 Feb 2022 03:28:08 -0800
Subject: [PATCH] Optimize list drag/drop - Move array slice logic outside of
 redux

---
 src/components/viewtypes/ListViewTable.tsx | 14 ++++++++++----
 src/shared/utils.ts                        | 13 +++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx
index d81bbd0..82d8b34 100644
--- a/src/components/viewtypes/ListViewTable.tsx
+++ b/src/components/viewtypes/ListViewTable.tsx
@@ -21,6 +21,7 @@ import {
   isCached,
   formatDate,
   convertByteToMegabyte,
+  sliceRangeByUniqueId,
 } from '../../shared/utils';
 import cacheImage from '../shared/cacheImage';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
@@ -43,10 +44,8 @@ import {
   setCurrentMouseOverId,
   setIsDragging,
   setIsSelectDragging,
-  setRangeSelected,
   setSelected,
   setSelectedSingle,
-  toggleRangeSelected,
   toggleSelected,
 } from '../../redux/multiSelectSlice';
 import CustomTooltip from '../shared/CustomTooltip';
@@ -242,8 +241,15 @@ const ListViewTable = ({
   // mousing over a row will set the range selection from the initial mousedown location
   // to the mouse-entered row
   const debouncedMouseEnterFn = _.debounce((rowData: any) => {
-    dispatch(setRangeSelected(rowData));
-    dispatch(toggleRangeSelected(sortColumn && !nowPlaying ? sortedData : data));
+    dispatch(
+      setSelected(
+        sliceRangeByUniqueId(
+          sortColumn && !nowPlaying ? sortedData : data,
+          multiSelect.lastSelected.uniqueId,
+          rowData.uniqueId
+        )
+      )
+    );
   }, 200);
 
   const handleSelectMouseEnter = (rowData: any) => {
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index b083c1a..3f08ad4 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -254,6 +254,19 @@ export const consecutiveRanges = (a: number[]) => {
   return list;
 };
 
+export const sliceRangeByUniqueId = (data: any, startUniqueId: string, endUniqueId: string) => {
+  const beginningIndex = data.findIndex((e: any) => e.uniqueId === startUniqueId);
+  const endingIndex = data.findIndex((e: any) => e.uniqueId === endUniqueId);
+
+  // Handle both selection directions
+  const newSlice =
+    beginningIndex < endingIndex
+      ? data.slice(beginningIndex, endingIndex + 1)
+      : data.slice(endingIndex, beginningIndex + 1);
+
+  return newSlice;
+};
+
 export const moveSelectedUp = (entryData: any[], selectedEntries: any[]) => {
   // Ascending index is needed to move the indexes in order
   const selectedIndices = selectedEntries.map((selected: any) => {