button extracted

src/front/pages/offers.js

@@ -1,6 +1,38 @@
 const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
 
+class PublishOfferButton {
+  constructor({ parentElement, id, onClickCallback }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.onClickCallback = onClickCallback;
+  }
+
+  render() {
+    const button = document.createElement('button');
+    button.id = this.id;
+    button.className = 'button-primary button-large';
+    button.innerText = 'Publicar oferta';
+    button.addEventListener('click', this.onClickCallback);
+
+    this.element = button;
+    this.parentElement.appendChild(this.element);
+  }
+}
+
 function offersPage() {
+  const publishOfferButton = new PublishOfferButton({
+    parentElement: document.getElementById('submit-button-area'),
+    id: 'button-submit-offer',
+    onClickCallback: async () => {
+      await publishOffer();
+      await myOffers.getOffersFromApi();
+      await myOffers.render();
+    },
+  });
+  publishOfferButton.render();
+
+  // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');
 
@@ -58,8 +90,6 @@ function offersPage() {
     'large-bills-checkbox'
   );
 
-  const publishOfferButton = document.getElementById('button-submit-offer');
-
   const offerCreatedPopup = document.getElementById(
     'offer-created-confirmation'
   );
@@ -696,12 +726,6 @@ function offersPage() {
     applyTrustCheckboxConstraints(allMembersCheckbox);
   });
 
-  publishOfferButton.addEventListener('click', async () => {
-    await publishOffer();
-    await myOffers.getOffersFromApi();
-    await myOffers.render();
-  });
-
   updateBtcInput();
 
   const myOffers = new MyOffers(ownOffersContainer);