From 4c37703bec01dd0207069f3d919dfc6e8bbe9dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Thu, 19 Oct 2023 10:32:08 +0200
Subject: [PATCH] Fix sending too many request on line item update (#4343)

---
 .changeset/brown-years-wash.md                |  5 +++
 .../Datagrid/hooks/useDatagridChange.ts       | 35 ++++++++++++++++---
 .../OrderDraftDetailsDatagrid.tsx             | 18 +++++-----
 3 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/brown-years-wash.md

diff --git a/.changeset/brown-years-wash.md b/.changeset/brown-years-wash.md
new file mode 100644
index 00000000000..cf586db92ce
--- /dev/null
+++ b/.changeset/brown-years-wash.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix sending too many request on line item update
diff --git a/src/components/Datagrid/hooks/useDatagridChange.ts b/src/components/Datagrid/hooks/useDatagridChange.ts
index 4ef172f0bbd..1fd392d1d82 100644
--- a/src/components/Datagrid/hooks/useDatagridChange.ts
+++ b/src/components/Datagrid/hooks/useDatagridChange.ts
@@ -24,6 +24,7 @@ export interface DatagridChangeOpts {
   added: number[];
   removed: number[];
   updates: DatagridChange[];
+  currentUpdate?: DatagridChange;
 }
 export type OnDatagridChange = (
   opts: DatagridChangeOpts,
@@ -81,13 +82,24 @@ function useDatagridChange(
   );
 
   const notify = useCallback(
-    (updates: DatagridChange[], added: number[], removed: number[]) => {
+    ({
+      added,
+      currentUpdate,
+      removed,
+      updates,
+    }: {
+      updates: DatagridChange[];
+      added: number[];
+      removed: number[];
+      currentUpdate: DatagridChange;
+    }) => {
       if (onChange) {
         onChange(
           {
             updates,
             removed,
             added,
+            currentUpdate,
           },
           setMarkCellsDirty,
         );
@@ -105,7 +117,12 @@ function useDatagridChange(
         existingIndex === -1
           ? [...changes.current, update]
           : updateAtIndex(update, changes.current, existingIndex);
-      notify(changes.current, added, removed);
+      notify({
+        updates: changes.current,
+        added,
+        removed,
+        currentUpdate: update,
+      });
     },
     [availableColumns, notify, added, removed],
   );
@@ -132,7 +149,12 @@ function useDatagridChange(
         }));
       setAdded(newAdded);
 
-      notify(changes.current, newAdded, newRemoved);
+      notify({
+        updates: changes.current,
+        added: newAdded,
+        removed: newRemoved,
+        currentUpdate: undefined,
+      });
     },
     [added, removed, notify],
   );
@@ -140,7 +162,12 @@ function useDatagridChange(
   const onRowAdded = useCallback(() => {
     const newAdded = [...added, rows - removed.length + added.length];
     setAdded(newAdded);
-    notify(changes.current, newAdded, removed);
+    notify({
+      updates: changes.current,
+      added: newAdded,
+      removed,
+      currentUpdate: undefined,
+    });
   }, [added, notify, removed, rows]);
 
   return {
diff --git a/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx b/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
index 28222291332..622202cf917 100644
--- a/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
+++ b/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
@@ -140,19 +140,17 @@ export const OrderDraftDetailsDatagrid = ({
 
   const handleDatagridChange = useCallback(
     async (
-      { updates }: DatagridChangeOpts,
+      { currentUpdate }: DatagridChangeOpts,
       setMarkCellsDirty: (areCellsDirty: boolean) => void,
     ) => {
-      await Promise.all(
-        updates.map(({ data, column, row }) => {
-          const orderId = lines[row].id;
+      if (!currentUpdate) return;
 
-          if (column === "quantity" && data.value !== "") {
-            return onOrderLineChange(orderId, { quantity: data.value });
-          }
-          return undefined;
-        }),
-      );
+      const { data, column, row } = currentUpdate;
+      const orderId = lines[row].id;
+
+      if (column === "quantity" && data.value !== "") {
+        await onOrderLineChange(orderId, { quantity: data.value });
+      }
 
       datagrid.changes.current = [];
       setMarkCellsDirty(false);