From ad91b128794b6afbe77f6669889dbcea0bba28de Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Tue, 18 Jul 2023 10:35:11 +0800
Subject: [PATCH] Fix react-beautiful-dnd warning in development

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/js/shop.jsx | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index dcdddb1..116160e 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -406,6 +406,7 @@ class ProductItem extends React.PureComponent {
   static get propTypes() {
     return {
       id: PropTypes.string.isRequired,
+      index: PropTypes.number.isRequired,
       name: PropTypes.string.isRequired,
       name_codename: PropTypes.string,
       price: PropTypes.number.isRequired,
@@ -433,6 +434,7 @@ class ProductItem extends React.PureComponent {
   render() {
     const {
       id,
+      index,
       name,
       name_codename,
       price,
@@ -482,7 +484,7 @@ class ProductItem extends React.PureComponent {
             <img src="/images/shop/icon-add.svg" alt="add" />
           </button>
 
-          <Draggable draggableId={id}>
+          <Draggable draggableId={id} index={index}>
             {(provided, snapshot) => (
               <React.Fragment>
                 <img
@@ -1510,7 +1512,8 @@ class Backlog extends React.PureComponent {
     const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
         items: groupItem.itemIds.map(itemId => items[itemId])
     }));
-   const groups = ordered_groups.map((group, g_index) => {
+    let item_index = -1;
+    const groups = ordered_groups.map((group, g_index) => {
           return (
               <div className="accordion-item" key={`${group.name}`}>
                 <h2 className="accordion-header">
@@ -1522,21 +1525,24 @@ class Backlog extends React.PureComponent {
                 <div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
                      data-bs-parent="#accordion_categories">
                   <div className="accordion-body">
-                    {group.items.map(item => (
-                        <ProductItem
-                            key={item.id}
-                            id={item.id}
-                            name={`${item.name_number} ${item.name}`}
-                            name_codename={item.name_codename}
-                            price={item.price}
-                            currency={currency}
-                            image={`/images/${item.image}`}
-                            specs={item.specs}
-                            datasheet_file={item.datasheet_file}
-                            datasheet_name={item.datasheet_name}
-                            onClickAddItem={onClickAddItem}
-                        ></ProductItem>
-                    ))}
+                    {group.items.map(item => {
+                      item_index++;
+                      return (
+                      <ProductItem
+                          key={item.id}
+                          id={item.id}
+                          index={item_index}
+                          name={`${item.name_number} ${item.name}`}
+                          name_codename={item.name_codename}
+                          price={item.price}
+                          currency={currency}
+                          image={`/images/${item.image}`}
+                          specs={item.specs}
+                          datasheet_file={item.datasheet_file}
+                          datasheet_name={item.datasheet_name}
+                          onClickAddItem={onClickAddItem}
+                      ></ProductItem>
+                    )})}
                   </div>
                 </div>
               </div>