From dfbf9cbfe79a8e60e519148286bfd5c4092a5081 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Tue, 12 Sep 2023 17:38:58 +0800
Subject: [PATCH] Fix scroll issue and found another bug

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/js/shop.jsx            | 30 +++++++++++++++++++++++++-----
 static/js/shop_components.jsx | 16 ++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index 12adf3f..dc95982 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -708,18 +708,23 @@ class ProductCartItem extends React.PureComponent {
                   big={data.size === "big"}
                   target={{
                     construct: ((outvar, value) => {
-                      //console.log("construct", outvar, value, options_data);
+                      console.log("construct", outvar, value, options_data);
                       options_data[outvar] = value;
                       this.setState(options_data);
                     }),
                     update: ((outvar, value) => {
-                      //console.log("update", outvar, value, options_data);
+                      console.log("update", outvar, value, options_data);
                       if (outvar in options_data) options_data[outvar] = value;
                       this.setState(options_data);
                     }),
                     unmount: ((outvar) => {
-                      //console.log("delete", outvar);
-                      delete options_data[outvar];
+                      console.log("delete", outvar, this.state.alive);
+                      //let opt_data = this.state;
+                      //delete opt_data[outvar];
+                      //this.setState(opt_data);
+                      // TODO this needs to be stopped when the whole card getting unmounted
+                      if (this.state.alive)
+                        delete options_data[outvar];
                     })
                   }}
               />) : null) }
@@ -1720,8 +1725,12 @@ class Shop extends React.PureComponent {
   }
 
   handleDeleteItem(index) {
-    const cloned = Array.from(this.state.columns.cart.items);
+    console.log(this.state.columns.cart.items)
+    let cloned = Array.from(this.state.columns.cart.items);
+    let cloned_data = Array.from(this.state.columns.cart.itemsData);
     cloned.splice(index, 1);
+    cloned_data.splice(index, 1);
+
     this.setState({
       ...this.state,
       columns: {
@@ -1729,6 +1738,7 @@ class Shop extends React.PureComponent {
         cart: {
           ...this.state.columns.cart,
           items: cloned,
+          itemsData: cloned_data,
         },
       },
     });
@@ -1742,6 +1752,7 @@ class Shop extends React.PureComponent {
         cart: {
           ...this.state.columns.cart,
           items: [],
+          itemsData: []
         },
       },
     });
@@ -1976,6 +1987,10 @@ class Shop extends React.PureComponent {
                 this.state.columns[source.droppableId].items,
                 source.index,
               ),
+              itemsData: remove(
+                  this.state.columns[source.droppableId].itemsData,
+                  source.index,
+              )
             },
           },
         });
@@ -2021,6 +2036,11 @@ class Shop extends React.PureComponent {
                 source.index,
                 destination.index,
               ),
+              itemsData: reorder(
+                  this.state.columns[destination.droppableId].itemsData,
+                  source.index,
+                  destination.index,
+              ),
             },
           },
         });
diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx
index b074edc..1657e89 100644
--- a/static/js/shop_components.jsx
+++ b/static/js/shop_components.jsx
@@ -376,18 +376,20 @@ export function OptionsSummaryPopup({id, data}) {
     const [size, setSize] = useState({w: 0, h: 0});
     const close = () => {
         setShow(false);
-        document.removeEventListener("scroll", reposition, true);
+        document.removeEventListener("scroll", handleScroll, true);
     }
 
     const ref = useClickAway(close);
 
     const reposition = () => {
-        console.trace("reposition")
         let popup_button = document.getElementById(id + "img");
+        if (!popup_button) {
+            document.removeEventListener("scroll", handleScroll, true);
+            return;
+        }
         let rect = popup_button.getBoundingClientRect()
         let pos_x = (rect.left + rect.right) / 2;
         let pos_y = (rect.top + rect.bottom) / 2;
-        console.trace("reposition", pos_x, pos_y)
         if (pos_x + size.w > window.innerWidth) {
             setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
         } else {
@@ -395,6 +397,12 @@ export function OptionsSummaryPopup({id, data}) {
         }
     }
 
+    const handleScroll = (e) => {
+        if (e.target !== document.getElementById(id)) {
+            close();
+        }
+    }
+
     useEffect(() => {
         if (show) {
             let popup = document.getElementById(id);
@@ -415,7 +423,7 @@ export function OptionsSummaryPopup({id, data}) {
     const handleClick = (event) => {
         setShow(!show);
         if (!show) {
-            document.addEventListener("scroll", reposition, true);
+            document.addEventListener("scroll", handleScroll, true);
         }
     };