From ca9edfe1a6ca7a5429565851356a1335358889f4 Mon Sep 17 00:00:00 2001
From: SuperSimpleDev <simon@supersimple.dev>
Date: Wed, 1 May 2024 00:14:18 -0400
Subject: [PATCH] 18m Solution

---
 2-copy-of-code/lesson-18/scripts/orders.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/2-copy-of-code/lesson-18/scripts/orders.js b/2-copy-of-code/lesson-18/scripts/orders.js
index af92c5a..9f8bb8f 100644
--- a/2-copy-of-code/lesson-18/scripts/orders.js
+++ b/2-copy-of-code/lesson-18/scripts/orders.js
@@ -2,6 +2,7 @@ import {getProduct, loadProductsFetch} from '../data/products.js';
 import {orders} from '../data/orders.js';
 import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';
 import formatCurrency from './utils/money.js';
+import {addToCart} from '../data/cart.js';
 
 async function loadPage() {
   await loadProductsFetch();
@@ -61,7 +62,8 @@ async function loadPage() {
           <div class="product-quantity">
             Quantity: ${productDetails.quantity}
           </div>
-          <button class="buy-again-button button-primary">
+          <button class="buy-again-button button-primary js-buy-again"
+            data-product-id="${product.id}">
             <img class="buy-again-icon" src="images/icons/buy-again.png">
             <span class="buy-again-message">Buy it again</span>
           </button>
@@ -81,6 +83,22 @@ async function loadPage() {
   }
 
   document.querySelector('.js-orders-grid').innerHTML = ordersHTML;
+
+  document.querySelectorAll('.js-buy-again').forEach((button) => {
+    button.addEventListener('click', () => {
+      addToCart(button.dataset.productId);
+
+      // (Optional) display a message that the product was added,
+      // then change it back after a second.
+      button.innerHTML = 'Added';
+      setTimeout(() => {
+        button.innerHTML = `
+          <img class="buy-again-icon" src="images/icons/buy-again.png">
+          <span class="buy-again-message">Buy it again</span>
+        `;
+      }, 1000);
+    });
+  });
 }
 
 loadPage();