Automatically open spare cards for crateless items

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop/ProductItem.jsx

@@ -6,9 +6,33 @@ import {useShopStore} from "./shop_store";
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
+
+function DatasheetLink({datasheet_file, datasheet_name}) {
+    return datasheet_file && datasheet_name && (<div className="ds">
+        <span className='doc-icon'></span>
+        <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
+            {datasheet_name}
+        </a>
+    </div>)
+}
+
+function CardSpecs({specs}) {
+    return specs && specs.length > 0 && (<ul>
+        {specs.map((spec, index) =>
+            <li key={index}>{spec}</li>
+        )}
+    </ul>)
+}
+
+function AddButton({onAdd}) {
+    return <button onClick={onAdd}>
+        <img src="/images/shop/icon-add.svg" alt="add"/>
+    </button>
+}
+
 /**
  * Component that renders a product.
- * Used in the aside (e.g catalog of product)
+ * Used in the aside (e.g catalog of products)
  */
 export function ProductItem({card_index}) {
     // #!render_count
@@ -16,33 +40,14 @@ export function ProductItem({card_index}) {
 
     const getCardDescription = useShopStore((state) => state.getCardDescription);
     const currency = useShopStore((state) => state.currency);
-    const onAddCard = useShopStore((state) => state.addCardFromCatalog);
+    const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog);
     const card = getCardDescription(card_index);
 
     // #!render_count
     console.log("ProductItem renders: ", renderCount)
 
-
-    const render_specs = (card.specs && card.specs.length > 0 && (
-        <ul>
-            {card.specs.map((spec, index) =>
-                <li key={index}>{spec}</li>
-            )}
-        </ul>
-    ));
-
-    const render_datasheet_link = (card.datasheet_file && card.datasheet_name && (
-        <div className="ds">
-            <span className='doc-icon'></span>
-            <a href={card.datasheet_file} target="_blank" rel="noopener noreferrer">
-                {card.datasheet_name}
-            </a>
-        </div>
-    ));
-
     return (
         <section className="productItem">
-
             <div className="content">
                 <h3 style={{'marginBottom': card.name_codename ? '5px' : '20px'}}>{card.name_number} {card.name}</h3>
                 {card.name_codename ? (
@@ -51,16 +56,13 @@ export function ProductItem({card_index}) {
 
                 <div className="price">{`${currency} ${formatMoney(card.price)}`}</div>
 
-                {render_specs}
+                <CardSpecs specs={card.specs}/>
 
-                {render_datasheet_link}
+                <DatasheetLink datasheet_file={card.datasheet_file} datasheet_name={card.datasheet_name}/>
             </div>
 
             <div className="content">
-
+                <AddButton onAdd={() => addCardFromCatalog(null, card_index, null)} />
-                <button onClick={() => onAddCard(null, card_index, null)}>
-                    <img src="/images/shop/icon-add.svg" alt="add"/>
-                </button>
 
                 <Draggable draggableId={card.id + card_index} index={card_index}>
                     {(provided, snapshot) => (
@@ -83,10 +85,7 @@ export function ProductItem({card_index}) {
                         </React.Fragment>
                     )}
                 </Draggable>
-
             </div>
-
         </section>
     );
-
 }

static/js/shop/shop_store.js

@@ -2,7 +2,7 @@
 
 import {createWithEqualityFn} from "zustand/traditional";
 import {DATA as shared_data, itemsUnfoldedList, API_RFQ} from "./utils";
-import {FillExtCrateData, FillExtOrderData, true_type_of} from "./options/utils";
+import {FillExtCrateData, FillExtOrderData} from "./options/utils";
 import {v4 as uuidv4} from "uuid";
 import {FillResources} from "./count_resources";
 import {FillExtCardData} from "./options/utils";
@@ -19,6 +19,10 @@ const cards_to_pn_map = (cards) => {
     return result;
 };
 
+const toArray = (arg) => {
+    return Array.isArray(arg) ? arg : [arg];
+};
+
 const useCatalog = ((set, get) => ({
     cards: shared_data.items,
     groups: shared_data.columns.catalog,
@@ -385,7 +389,7 @@ const useCart = ((set, get) => ({
     })),
     setActiveCrate: (id) => set(state => ({active_crate: id})),
     _addCardFromCatalog: (crate_to, index_from, index_to) => set(state => {
-        const take_from = (true_type_of(index_from) === "array" ? index_from : [index_from]).map((item, _i) => (state.cards_list[item]));
+        const take_from = toArray(index_from).map((item, _i) => (state.cards_list[item]));
         const dest = crate_to || state.active_crate;
         if (!dest) return {};
         return {
@@ -556,7 +560,8 @@ const useCart = ((set, get) => ({
     },
 
     addCardFromCatalog: (crate_to, index_from, index_to, just_mounted) => {
-        const dest = crate_to || get().active_crate;
+        const isCrateless = toArray(index_from).some(value => get().getCardDescription(value).crateless === true);
+        const dest = isCrateless ? "spare" : crate_to || get().active_crate;
         if (!dest) {
             console.warn("No destination");
             get().noDestinationWarning();