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);

src/views/offers.ejs

@@ -179,12 +179,6 @@
             </div>
           </div>
           <div id="submit-button-area">
-            <button
-              id="button-submit-offer"
-              class="button-primary button-large"
-            >
-              Publicar oferta
-            </button>
           </div>
           <div id="close-offer-controls-area">
             <button id="close-offer" class="button-secondary button-medium">
@@ -209,7 +203,6 @@
       <p>¡Oferta eliminada!</p>
     </div>
 
-    <%- include("partials/appCommonScripts") %>
     <script src="/javascript/offers.bundle.js"></script>
   </body>
 </html>