buy or sell button group

src/front/components/BuyOrSellButtonGroup.js

@@ -0,0 +1,56 @@
+class BuyOrSellButtonGroup {
+  constructor({ parentElement, id }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+
+    this.buyButton = null;
+    this.sellButton = null;
+  }
+
+  render() {
+    const groupDiv = document.createElement('div');
+    groupDiv.className = 'button-group';
+    groupDiv.id = this.id;
+
+    const buyButton = document.createElement('button');
+    buyButton.dataset.value = 'buy-bitcoin';
+    buyButton.id = 'button-buy-bitcoin';
+    buyButton.className = 'selected';
+    buyButton.textContent = 'Quiero comprar Bitcoin';
+    this.buyButton = buyButton;
+
+    const sellButton = document.createElement('button');
+    sellButton.dataset.value = 'sell-bitcoin';
+    sellButton.id = 'button-sell-bitcoin';
+    sellButton.textContent = 'Quiero vender Bitcoin';
+    this.sellButton = sellButton;
+
+    groupDiv.appendChild(this.buyButton);
+    groupDiv.appendChild(this.sellButton);
+
+    for (const button of [this.buyButton, this.sellButton]) {
+      button.addEventListener('click', () => {
+        [this.buyButton, this.sellButton].forEach((aButton) => {
+          if (aButton.classList.contains('selected')) {
+            aButton.classList.remove('selected');
+          } else {
+            aButton.classList.add('selected');
+          }
+        });
+      });
+    }
+
+    this.element = groupDiv;
+    this.parentElement.appendChild(this.element);
+  }
+
+  wants() {
+    if (this.buyButton.classList.contains('selected')) {
+      return 'BTC';
+    }
+    if (this.sellButton.classList.contains('selected')) {
+      return 'EUR';
+    }
+  }
+}

src/front/pages/offers.js

@@ -1,5 +1,6 @@
 const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
 const PublishOfferButton = require('../components/PublishOfferButton');
+const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
 
 function offersPage() {
   const publishOfferButton = new PublishOfferButton({
@@ -13,6 +14,12 @@ function offersPage() {
   });
   publishOfferButton.render();
 
+  const buyOrSellButtonGroup = new BuyOrSellButtonGroup({
+    parentElement: document.getElementById('buy-or-sell-area'),
+    id: 'button-group-buy-or-sell',
+  });
+  buyOrSellButtonGroup.render();
+
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -34,12 +41,6 @@ function offersPage() {
     'create-offer-modal-root'
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
-  const buyOrSellButtonGroup = document.getElementById(
-    'button-group-buy-or-sell'
-  );
-  const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button');
-  const buyButton = document.getElementById('button-buy-bitcoin');
-  const sellButton = document.getElementById('button-sell-bitcoin');
 
   const premiumValue = document.getElementById('premium-value');
   const buttonIncreasePremium = document.getElementById(
@@ -98,16 +99,6 @@ function offersPage() {
     premiumValue.innerText = newValue;
   }
 
-  function toggleBuyOrSellButtonGroup() {
-    buyOrSellButtons.forEach((button) => {
-      if (button.classList.contains('selected')) {
-        button.classList.remove('selected');
-      } else {
-        button.classList.add('selected');
-      }
-    });
-  }
-
   function readIntFromEurAmountInput() {
     const eurAmountFieldValue = eurAmountInput.value;
     const regularExpression = /([\d\s]+)/;
@@ -168,13 +159,7 @@ function offersPage() {
   }
 
   async function publishOffer() {
-    let wants;
-    if (buyButton.classList.contains('selected')) {
-      wants = 'BTC';
-    }
-    if (sellButton.classList.contains('selected')) {
-      wants = 'EUR';
-    }
+    const wants = buyOrSellButtonGroup.wants();
 
     const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100;
     const trade_amount_eur = eurAmountInput.value;
@@ -669,12 +654,6 @@ function offersPage() {
     toggleCreateOfferModal();
   });
 
-  buyOrSellButtons.forEach((button) => {
-    button.addEventListener('click', () => {
-      toggleBuyOrSellButtonGroup();
-    });
-  });
-
   buttonIncreasePremium.addEventListener('click', () => {
     modifyPremiumValue(1);
   });

src/views/offers.ejs

@@ -36,17 +36,6 @@
         <div id="create-offer-controls">
           <h2>Añade los detalles de tu oferta</h2>
           <div id="buy-or-sell-area" class="create-offer-step">
-            <div id="button-group-buy-or-sell" class="button-group">
-              <button
-                data-value="buy-bitcoin"
-                id="button-buy-bitcoin"
-                class="selected"
-              >
-                Quiero comprar Bitcoin</button
-              ><button data-value="sell-bitcoin" id="button-sell-bitcoin">
-                Quiero vender Bitcoin
-              </button>
-            </div>
           </div>
           <div id="premium-area" class="create-offer-step">
             <h3>Premium</h3>