Refactor cart controller to consolidate quantity button event listene…

…r setup and removal
binos30 · Feb 22, 2025 · 5ab1171 · 5ab1171
1 parent d00208c
commit 5ab1171
Showing 1 changed file with 28 additions and 20 deletions.
diff --git a/app/javascript/controllers/site/cart_controller.js b/app/javascript/controllers/site/cart_controller.js
@@ -29,16 +29,7 @@ export default class extends Controller {
    */
   disconnect() {
     this.element.querySelectorAll("[data-input-quantity]").forEach((targetEl) => {
-      const targetId = targetEl.id;
-      const incrementEl = this.element.querySelector('[data-input-quantity-increment="' + targetId + '"]');
-      const decrementEl = this.element.querySelector('[data-input-quantity-decrement="' + targetId + '"]');
-      let minValue = targetEl.getAttribute("data-input-quantity-min");
-      let maxValue = targetEl.getAttribute("data-input-quantity-max");
-      minValue = minValue ? parseInt(minValue) : null;
-      maxValue = maxValue ? parseInt(maxValue) : null;
-
-      incrementEl.removeEventListener("click", this.incrementClickHandler.bind(this, targetEl, maxValue), false);
-      decrementEl.removeEventListener("click", this.decrementClickHandler.bind(this, targetEl, minValue), false);
+      this.setupQuantityButtons(targetEl, "remove");
     });
     if (window.cart?.length) {
       for (let i = 0; i < window.cart.length; i++) {
@@ -137,16 +128,7 @@ export default class extends Controller {
 
   initInputQuantity() {
     this.element.querySelectorAll("[data-input-quantity]").forEach((targetEl) => {
-      const targetId = targetEl.id;
-      const incrementEl = this.element.querySelector('[data-input-quantity-increment="' + targetId + '"]');
-      const decrementEl = this.element.querySelector('[data-input-quantity-decrement="' + targetId + '"]');
-      let minValue = targetEl.getAttribute("data-input-quantity-min");
-      let maxValue = targetEl.getAttribute("data-input-quantity-max");
-      minValue = minValue ? parseInt(minValue) : null;
-      maxValue = maxValue ? parseInt(maxValue) : null;
-
-      incrementEl.addEventListener("click", this.incrementClickHandler.bind(this, targetEl, maxValue), false);
-      decrementEl.addEventListener("click", this.decrementClickHandler.bind(this, targetEl, minValue), false);
+      this.setupQuantityButtons(targetEl, "add");
     });
   }
 
@@ -187,6 +169,32 @@ export default class extends Controller {
     }
   }
 
+  /**
+   * Sets up or removes event listeners for quantity increment and decrement buttons.
+   *
+   * @param {HTMLElement} targetEl - The target element representing the quantity input.
+   * @param {string} action - The action to perform, either "add" to add event listeners or "remove" to remove them.
+   */
+  setupQuantityButtons(targetEl, action) {
+    const targetId = targetEl.id;
+    const incrementEl = this.element.querySelector(`[data-input-quantity-increment="${targetId}"]`);
+    const decrementEl = this.element.querySelector(`[data-input-quantity-decrement="${targetId}"]`);
+    let minValue = targetEl.getAttribute("data-input-quantity-min");
+    let maxValue = targetEl.getAttribute("data-input-quantity-max");
+    minValue = minValue ? parseInt(minValue) : null;
+    maxValue = maxValue ? parseInt(maxValue) : null;
+    const incrementHandler = this.incrementClickHandler.bind(this, targetEl, maxValue);
+    const decrementHandler = this.decrementClickHandler.bind(this, targetEl, minValue);
+
+    if (action === "add") {
+      incrementEl.addEventListener("click", incrementHandler);
+      decrementEl.addEventListener("click", decrementHandler);
+    } else if (action === "remove") {
+      incrementEl.removeEventListener("click", incrementHandler);
+      decrementEl.removeEventListener("click", decrementHandler);
+    }
+  }
+
   emptyCartContent() {
     return `
       <div class="flex flex-col items-center justify-center gap-2">