From 82bbb93d948e0bfe593a72a1b871f5e6135548c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Choi=C5=84ski?= <marekchoinski17@gmail.com>
Date: Tue, 8 Dec 2020 14:43:12 +0100
Subject: [PATCH] Fix order behavior (#890)

* Fix order behavior

* Compare variants by id
---
 src/products/views/ProductUpdate/handlers.ts | 26 ++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/products/views/ProductUpdate/handlers.ts b/src/products/views/ProductUpdate/handlers.ts
index 5a62c6744..50f0b26d9 100644
--- a/src/products/views/ProductUpdate/handlers.ts
+++ b/src/products/views/ProductUpdate/handlers.ts
@@ -9,7 +9,10 @@ import {
   ProductChannelListingUpdate,
   ProductChannelListingUpdateVariables
 } from "@saleor/products/types/ProductChannelListingUpdate";
-import { ProductDetails_product } from "@saleor/products/types/ProductDetails";
+import {
+  ProductDetails_product,
+  ProductDetails_product_variants
+} from "@saleor/products/types/ProductDetails";
 import { ProductImageCreateVariables } from "@saleor/products/types/ProductImageCreate";
 import { ProductImageReorderVariables } from "@saleor/products/types/ProductImageReorder";
 import {
@@ -34,6 +37,7 @@ import {
 import { mapFormsetStockToStockInput } from "@saleor/products/utils/data";
 import { getAvailabilityVariables } from "@saleor/products/utils/handlers";
 import { ReorderEvent } from "@saleor/types";
+import { move } from "@saleor/utils/lists";
 import { diff } from "fast-array-diff";
 import { MutationFetchResult } from "react-apollo";
 import { arrayMove } from "react-sortable-hoc";
@@ -236,6 +240,13 @@ export function createImageReorderHandler(
   };
 }
 
+function areVariantsEqual(
+  a: ProductDetails_product_variants,
+  b: ProductDetails_product_variants
+) {
+  return a.id === b.id;
+}
+
 export function createVariantReorderHandler(
   product:
     | ProductDetails_product
@@ -244,9 +255,20 @@ export function createVariantReorderHandler(
   reorderProductVariants: (variables: ProductVariantReorderVariables) => void
 ) {
   return ({ newIndex, oldIndex }: ReorderEvent) => {
+    const oldVariantOrder = [...product.variants];
+
+    product.variants = [
+      ...(move(
+        product.variants[oldIndex],
+        product!.variants,
+        areVariantsEqual,
+        newIndex
+      ) as ProductDetails_product_variants[])
+    ];
+
     reorderProductVariants({
       move: {
-        id: product.variants[oldIndex].id,
+        id: oldVariantOrder[oldIndex].id,
         sortOrder: newIndex - oldIndex
       },
       productId: product.id