From e7cf89f3b743a798ee1da53b81a64cb8dd642379 Mon Sep 17 00:00:00 2001
From: LukeWasTaken <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Wed, 3 May 2023 13:48:48 +0200
Subject: [PATCH] fix(web): cancel drag when dragged item is moved

---
 web/src/components/inventory/InventorySlot.tsx | 18 +++++++++++++++++-
 web/src/reducers/refreshSlots.ts               |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/src/components/inventory/InventorySlot.tsx b/web/src/components/inventory/InventorySlot.tsx
index 49c497abac..b0ccaac440 100644
--- a/web/src/components/inventory/InventorySlot.tsx
+++ b/web/src/components/inventory/InventorySlot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragSource, Inventory, InventoryType, Slot, SlotWithItem } from '../../typings';
-import { useDrag, useDrop } from 'react-dnd';
+import { useDrag, useDragDropManager, useDrop } from 'react-dnd';
 import { useAppDispatch, useAppSelector } from '../../store';
 import WeightBar from '../utils/WeightBar';
 import { onDrop } from '../../dnd/onDrop';
@@ -15,6 +15,8 @@ import SlotTooltip from './SlotTooltip';
 import { setContextMenu } from '../../store/inventory';
 import { imagepath } from '../../store/imagepath';
 import { onCraft } from '../../dnd/onCraft';
+import useNuiEvent from '../../hooks/useNuiEvent';
+import { ItemsPayload } from '../../reducers/refreshSlots';
 
 interface SlotProps {
   inventory: Inventory;
@@ -22,6 +24,7 @@ interface SlotProps {
 }
 
 const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
+  const manager = useDragDropManager();
   const isBusy = useAppSelector(selectIsBusy);
   const dispatch = useAppDispatch();
 
@@ -87,6 +90,19 @@ const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
     [isBusy, inventory, item]
   );
 
+  useNuiEvent('refreshSlots', (data: { items?: ItemsPayload | ItemsPayload[] }) => {
+    if (!isDragging && !data.items) return;
+    if (!Array.isArray(data.items)) return;
+
+    const itemSlot = data.items.find(
+      (dataItem) => dataItem.item.slot === item.slot && dataItem.inventory === inventory.id
+    );
+
+    if (!itemSlot) return;
+
+    manager.dispatch({ type: 'dnd-core/END_DRAG' });
+  });
+
   const connectRef = (element: HTMLDivElement) => drag(drop(element));
 
   const handleContext = (event: React.MouseEvent<HTMLDivElement>) => {
diff --git a/web/src/reducers/refreshSlots.ts b/web/src/reducers/refreshSlots.ts
index fcfacc4fd6..45faa5f939 100644
--- a/web/src/reducers/refreshSlots.ts
+++ b/web/src/reducers/refreshSlots.ts
@@ -3,7 +3,7 @@ import { itemDurability } from '../helpers';
 import { Items } from '../store/items';
 import { InventoryType, Slot, State } from '../typings';
 
-type ItemsPayload = { item: Slot; inventory?: InventoryType };
+export type ItemsPayload = { item: Slot; inventory?: InventoryType };
 
 interface Payload {
   items?: ItemsPayload | ItemsPayload[];