unfold loop

src/constants.js

@@ -2,19 +2,19 @@ const DEFAULT_SESSION_DURATION_SECONDS = 60 * 60 * 24 * 30;
 const DEFAULT_NOSTR_CHALLENGE_DURATION_SECONDS = 60 * 60 * 24 * 30;
 const DEFAULT_REDIRECT_DELAY = 3 * 1000; // 3seconds times milliseconds;
 
-const API_ROOT = '/api'
+const API_ROOT = '/api';
 const API_PATHS = {
   offer: API_ROOT + '/offer',
   loginNostrChallenge: API_ROOT + '/login/nostr-challenge',
   loginNostrVerify: API_ROOT + '/login/nostr-verify',
   signupNostrChallenge: API_ROOT + '/signup/nostr-challenge',
-  signupNostrVerify: API_ROOT + '/signup/nostr-verify'
+  signupNostrVerify: API_ROOT + '/signup/nostr-verify',
 };
 
 const WEB_PATHS = {
   home: '/home',
   createProfile: '/createProfile',
-}
+};
 
 module.exports = {
   DEFAULT_SESSION_DURATION_SECONDS,

src/front/pages/offers.js

@@ -12,7 +12,8 @@ const PopupNotification = require('../components/PopupNotification');
 
 const offerService = require('../services/offerService');
 
-class CreateOfferModal {  // Stop relying on IDs
+class CreateOfferModal {
+  // Stop relying on IDs
   constructor({ parentElement, onCreationCallback, offerService }) {
     this.element = null;
     this.parentElement = parentElement;
@@ -45,58 +46,75 @@ class CreateOfferModal {  // Stop relying on IDs
 
     const title = document.createElement('h2');
     title.textContent = 'Añade los detalles de tu oferta';
-
-    const sections = [
-      { id: 'buy-or-sell-area', class: 'create-offer-step', title: '' },
-      {
-        id: 'premium-area',
-        class: 'create-offer-step',
-        title: 'Premium',
-        contentId: 'premium-content-area',
-      },
-      { id: 'amount-area', class: 'create-offer-step', title: '¿Cuánto?' },
-      {
-        id: 'place-and-time-area',
-        class: 'create-offer-step',
-        title: '¿Dónde y cuándo?',
-        contentId: 'place-and-time-boxes',
-      },
-      {
-        id: 'bitcoin-methods-area',
-        class: 'create-offer-step',
-        title: '¿Cómo se mueve el Bitcoin?',
-        contentId: 'bitcoin-methods-checkboxes',
-      },
-      {
-        id: 'trust-area',
-        class: 'create-offer-step',
-        title: '¿Quién puede ver la oferta?',
-        contentId: 'trusted-checkboxes-area',
-      },
-      { id: 'other-area', class: 'create-offer-step', title: 'Extras' },
-    ];
-
     controls.appendChild(title);
 
-    sections.forEach((section) => {
+    const buyOrSellDiv = document.createElement('div');
-      const div = document.createElement('div');
+    buyOrSellDiv.id = 'buy-or-sell-area';
-      div.id = section.id;
+    buyOrSellDiv.className = 'create-offer-step';
-      div.className = section.class;
+    controls.appendChild(buyOrSellDiv);
-      if (section.title) {
+
-        const heading = document.createElement('h3');
+    const premiumDiv = document.createElement('div');
-        heading.textContent = section.title;
+    premiumDiv.id = 'premium-area';
-        div.appendChild(heading);
+    premiumDiv.className = 'create-offer-step';
-      }
+    const premiumHeading = document.createElement('h3');
-      if (section.contentId) {
+    premiumHeading.textContent = 'Premium';
-        const contentDiv = document.createElement('div');
+    premiumDiv.appendChild(premiumHeading);
-        contentDiv.id = section.contentId;
+    const premiumContentDiv = document.createElement('div');
-        div.appendChild(contentDiv);
+    premiumContentDiv.id = 'premium-content-area';
-      }
+    premiumDiv.appendChild(premiumContentDiv);
-      controls.appendChild(div);
+    controls.appendChild(premiumDiv);
-    });
+
+    const amountDiv = document.createElement('div');
+    amountDiv.id = 'amount-area';
+    amountDiv.className = 'create-offer-step';
+    const amountHeading = document.createElement('h3');
+    amountHeading.textContent = '¿Cuánto?';
+    amountDiv.appendChild(amountHeading);
+    controls.appendChild(amountDiv);
+
+    const placeTimeDiv = document.createElement('div');
+    placeTimeDiv.id = 'place-and-time-area';
+    placeTimeDiv.className = 'create-offer-step';
+    const placeTimeHeading = document.createElement('h3');
+    placeTimeHeading.textContent = '¿Dónde y cuándo?';
+    placeTimeDiv.appendChild(placeTimeHeading);
+    const placeTimeContentDiv = document.createElement('div');
+    placeTimeContentDiv.id = 'place-and-time-boxes';
+    placeTimeDiv.appendChild(placeTimeContentDiv);
+    controls.appendChild(placeTimeDiv);
+
+    const bitcoinMethodsDiv = document.createElement('div');
+    bitcoinMethodsDiv.id = 'bitcoin-methods-area';
+    bitcoinMethodsDiv.className = 'create-offer-step';
+    const bitcoinMethodsHeading = document.createElement('h3');
+    bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?';
+    bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading);
+    const bitcoinMethodsContentDiv = document.createElement('div');
+    bitcoinMethodsContentDiv.id = 'bitcoin-methods-checkboxes';
+    bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv);
+    controls.appendChild(bitcoinMethodsDiv);
+
+    const trustDiv = document.createElement('div');
+    trustDiv.id = 'trust-area';
+    trustDiv.className = 'create-offer-step';
+    const trustHeading = document.createElement('h3');
+    trustHeading.textContent = '¿Quién puede ver la oferta?';
+    trustDiv.appendChild(trustHeading);
+    const trustContentDiv = document.createElement('div');
+    trustContentDiv.id = 'trusted-checkboxes-area';
+    trustDiv.appendChild(trustContentDiv);
+    controls.appendChild(trustDiv);
+
+    const otherDiv = document.createElement('div');
+    otherDiv.id = 'other-area';
+    otherDiv.className = 'create-offer-step';
+    const otherHeading = document.createElement('h3');
+    otherHeading.textContent = 'Extras';
+    otherDiv.appendChild(otherHeading);
+    controls.appendChild(otherDiv);
 
     const submitButtonArea = document.createElement('div');
-    submitButtonArea.classList.add('submit-button-area')
+    submitButtonArea.classList.add('submit-button-area');
     this.publishOfferButton = new PublishOfferButton({
       parentElement: submitButtonArea,
       id: 'button-submit-offer',