From c7314801ed6dc9ef7de97522c8eb5265315114cd Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Wed, 13 Dec 2023 16:42:18 +0800
Subject: [PATCH] Fix crate list expansion behavior

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/js/shop/CrateList.jsx | 10 ++++++++--
 static/js/shop/shop_store.js |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/js/shop/CrateList.jsx b/static/js/shop/CrateList.jsx
index 04e49b6..e23e11c 100644
--- a/static/js/shop/CrateList.jsx
+++ b/static/js/shop/CrateList.jsx
@@ -16,10 +16,16 @@ export function CrateList() {
         setActiveCrate: state.setActiveCrate,
     }));
     return (
-        <Accordion defaultActiveKey={active_crate}>
+        <Accordion flush activeKey={active_crate} onSelect={(e) => {
+            // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
+            if (e !== null)
+                setActiveCrate(e);
+            else
+                setActiveCrate("")
+            }}>
             {crates.map((crate, index) =>
                 <Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} >
-                    <Accordion.Header onClick={() => setActiveCrate(crate.id)}>Crate #{`${index}`}</Accordion.Header>
+                    <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
                     <Accordion.Body>
                         <Crate crate_index={index}/>
                     </Accordion.Body>
diff --git a/static/js/shop/shop_store.js b/static/js/shop/shop_store.js
index a22a5fa..a205fef 100644
--- a/static/js/shop/shop_store.js
+++ b/static/js/shop/shop_store.js
@@ -356,6 +356,7 @@ const useCart = ((set, get) => ({
     setCrateMode: (id, mode) => {
         get()._setCrateMode(id, mode)
         get().fillWarnings(id);
+        get().setActiveCrate(crate_to);
     },
 
     addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => {
@@ -363,6 +364,7 @@ const useCart = ((set, get) => ({
         if (!dest) return {};
         get()._addCardFromBacklog(dest, index_from, index_to)
         get().fillWarnings(dest);
+        get().setActiveCrate(dest);
         if (!just_mounted) {
             get().cardAdded()
         }
@@ -371,6 +373,7 @@ const useCart = ((set, get) => ({
     moveCard: (crate_from, index_from, crate_to, index_to) => {
         get()._moveCard(crate_from, index_from, crate_to, index_to);
         get().fillWarnings(crate_to);
+        get().setActiveCrate(crate_to);
         if (crate_from !== crate_to) get().fillWarnings(crate_from);
     },
     deleteCard: (crate_id, index) => {