From 0a2ed6dd945fa7e3185437b66fe2819c542108b2 Mon Sep 17 00:00:00 2001
From: thomas girod <thgirod@hotmail.com>
Date: Wed, 7 Aug 2024 20:15:46 +0200
Subject: [PATCH] fix crash when basket contains not existing product

---
 eboutic/static/eboutic/js/eboutic.js         | 54 +++++++-------------
 eboutic/templates/eboutic/eboutic_main.jinja |  8 ++-
 2 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/eboutic/static/eboutic/js/eboutic.js b/eboutic/static/eboutic/js/eboutic.js
index 7ca1300b..ba1e0f68 100644
--- a/eboutic/static/eboutic/js/eboutic.js
+++ b/eboutic/static/eboutic/js/eboutic.js
@@ -30,25 +30,17 @@ function getCookie(name) {
  */
 function get_starting_items() {
     const cookie = getCookie(BASKET_ITEMS_COOKIE_NAME);
-    let output = [];
-
-    try {
-        // Django cookie backend converts `,` to `\054`
-        let parsed = JSON.parse(cookie.replace(/\\054/g, ','));
-        if (typeof parsed === "string") {
-            // In some conditions, a second parsing is needed
-            parsed = JSON.parse(parsed);
-        }
-        output = Array.isArray(parsed) ? parsed : [];
-    } catch (e) {
-        console.error(e);
+    if (!cookie) {
+        return []
     }
-    output.forEach(item => {
-        let el = document.getElementById(item.id);
-        el.classList.add("selected");
-    });
-
-    return output;
+    // Django cookie backend converts `,` to `\054`
+    let parsed = JSON.parse(cookie.replace(/\\054/g, ','));
+    if (typeof parsed === "string") {
+        // In some conditions, a second parsing is needed
+        parsed = JSON.parse(parsed);
+    }
+    const res = Array.isArray(parsed) ? parsed : [];
+    return res.filter((i) => !!document.getElementById(i.id))
 }
 
 document.addEventListener('alpine:init', () => {
@@ -84,9 +76,6 @@ document.addEventListener('alpine:init', () => {
             this.items[index].quantity -= 1;
 
             if (this.items[index].quantity === 0) {
-                let el = document.getElementById(this.items[index].id);
-                el.classList.remove("selected");
-
                 this.items = this.items.filter((e) => e.id !== this.items[index].id);
             }
             this.set_cookies();
@@ -96,12 +85,6 @@ document.addEventListener('alpine:init', () => {
          * Remove all the items from the basket & cleans the catalog CSS classes
          */
         clear_basket() {
-            // We remove the class "selected" from all the items in the catalog
-            this.items.forEach(item => {
-                let el = document.getElementById(item.id);
-                el.classList.remove("selected");
-            })
-
             this.items = [];
             this.set_cookies();
         },
@@ -111,8 +94,11 @@ document.addEventListener('alpine:init', () => {
          * ! the cookie survives an hour
          */
         set_cookies() {
-            if (this.items.length === 0) document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=;Max-Age=0`;
-            else document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=${encodeURIComponent(JSON.stringify(this.items))};Max-Age=3600`;
+            if (this.items.length === 0) {
+                document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=;Max-Age=0`;
+            } else {
+                document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=${encodeURIComponent(JSON.stringify(this.items))};Max-Age=3600`;
+            }
         },
 
         /**
@@ -148,12 +134,10 @@ document.addEventListener('alpine:init', () => {
 
             // if the item is not in the basket, we create it
             // else we add + 1 to it
-            if (item === undefined) item = this.create_item(id, name, price);
-            else this.add(item);
-
-            if (item.quantity > 0) {
-                let el = document.getElementById(item.id);
-                el.classList.add("selected");
+            if (!item) {
+                item = this.create_item(id, name, price);
+            } else {
+                this.add(item);
             }
         },
     }))
diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja
index f372938e..a0b600bb 100644
--- a/eboutic/templates/eboutic/eboutic_main.jinja
+++ b/eboutic/templates/eboutic/eboutic_main.jinja
@@ -102,8 +102,12 @@
               </div>
               <div class="product-group">
                 {% for p in items %}
-                  <button id="{{ p.id }}" class="product-button"
-                          @click='add_from_catalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'>
+                  <button
+                    id="{{ p.id }}"
+                    class="product-button"
+                    :class="{selected: items.some((i) => i.id === {{ p.id }})}"
+                    @click='add_from_catalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'
+                  >
                     {% if p.icon %}
                       <img class="product-image" src="{{ p.icon.url }}"
                            alt="image de {{ p.name }}">