From ac614921a46b80ff12d4b81a6cedceafa52d5e56 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sat, 22 Mar 2025 17:11:24 +0100
Subject: [PATCH] refactor into its own file

---
 src/front/components/AmountInput.js | 120 ++++++++++++++++++++++++++++
 src/front/pages/offers.js           | 119 +--------------------------
 2 files changed, 121 insertions(+), 118 deletions(-)
 create mode 100644 src/front/components/AmountInput.js

diff --git a/src/front/components/AmountInput.js b/src/front/components/AmountInput.js
new file mode 100644
index 0000000..8364bca
--- /dev/null
+++ b/src/front/components/AmountInput.js
@@ -0,0 +1,120 @@
+const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
+
+class AmountInput {
+  constructor({ parentElement, id }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+
+    this.eurInput = null;
+    this.btcInput = null;
+  }
+
+  render() {
+    const amountArea = document.createElement('div');
+    amountArea.id = this.id;
+
+    const eurAmount = document.createElement('div');
+    eurAmount.id = 'eur-amount';
+    eurAmount.className = 'money-amount-input-area';
+
+    this.eurInput = document.createElement('input');
+    this.eurInput.id = 'input-eur-amount';
+    this.eurInput.type = 'text';
+    this.eurInput.className = 'money-input input-money-amount';
+    this.eurInput.value = '100';
+    this.eurInput.required = true;
+
+    const eurSymbol = document.createElement('div');
+    eurSymbol.id = 'eur-symbol';
+    eurSymbol.className = 'curr-symbol';
+
+    const eurCharacter = document.createElement('span');
+    eurCharacter.id = 'eur-character';
+    eurCharacter.className = 'curr-character';
+    eurCharacter.textContent = '€';
+
+    eurSymbol.appendChild(eurCharacter);
+    eurAmount.appendChild(this.eurInput);
+    eurAmount.appendChild(eurSymbol);
+
+    const btcAmount = document.createElement('div');
+    btcAmount.id = 'btc-amount';
+    btcAmount.className = 'money-amount-input-area';
+
+    this.btcInput = document.createElement('input');
+    this.btcInput.id = 'input-btc-amount';
+    this.btcInput.type = 'text';
+    this.btcInput.className = 'money-input input-money-amount';
+    this.btcInput.disabled = true;
+
+    const satsSymbol = document.createElement('div');
+    satsSymbol.id = 'sats-symbol';
+    satsSymbol.className = 'curr-symbol';
+
+    const satsCharacter = document.createElement('span');
+    satsCharacter.id = 'sats-character';
+    satsCharacter.className = 'curr-character';
+    satsCharacter.textContent = 'SAT';
+
+    satsSymbol.appendChild(satsCharacter);
+    btcAmount.appendChild(this.btcInput);
+    btcAmount.appendChild(satsSymbol);
+
+    amountArea.appendChild(eurAmount);
+    amountArea.appendChild(btcAmount);
+
+    this.eurInput.addEventListener('blur', () => {
+      this.validateAndFormatEurAmountInput();
+      this.updateBtcInput();
+    });
+
+    this.eurInput.addEventListener('input', () => {
+      this.eurInput.value = this.eurInput.value.replace(/[^0-9]/g, '');
+      this.updateBtcInput();
+    });
+
+    this.updateBtcInput();
+
+    this.element = amountArea;
+    this.parentElement.appendChild(this.element);
+  }
+
+  get intEurAmount() {
+    const eurAmountFieldValue = this.eurInput.value;
+    const regularExpression = /([\d\s]+)/;
+    const matchResult = eurAmountFieldValue.match(regularExpression);
+
+    if (!matchResult) {
+      return null;
+    }
+
+    const numberString = matchResult[1];
+    const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
+
+    return cleanInputNumber;
+  }
+
+  validateAndFormatEurAmountInput() {
+    const cleanInputNumber = this.intEurAmount;
+    this.eurInput.classList.remove('input-is-valid', 'input-is-invalid');
+    if (cleanInputNumber) {
+      this.eurInput.value = formatNumberWithSpaces(cleanInputNumber);
+      this.eurInput.classList.add('input-is-valid');
+      return;
+    }
+
+    this.eurInput.classList.add('input-is-invalid');
+  }
+
+  updateBtcInput() {
+    const eurToSatRate = 1021;
+    const cleanEurAmount = this.intEurAmount;
+
+    const satsAmount = cleanEurAmount * eurToSatRate;
+    const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
+    this.btcInput.value = formattedSatsAmount;
+  }
+}
+
+module.exports = AmountInput;
diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js
index b20ed10..88f3432 100644
--- a/src/front/pages/offers.js
+++ b/src/front/pages/offers.js
@@ -1,125 +1,8 @@
-const formatNumberWithSpaces = require('../utils/formatNumbersWithSpaces');
 const PublishOfferButton = require('../components/PublishOfferButton');
 const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
 const PremiumSelector = require('../components/PremiumSelector');
 const PriceDisplay = require('../components/PriceDisplay');
-
-class AmountInput {
-  constructor({ parentElement, id }) {
-    this.element = null;
-    this.parentElement = parentElement;
-    this.id = id;
-
-    this.eurInput = null;
-    this.btcInput = null;
-  }
-
-  render() {
-    const amountArea = document.createElement('div');
-    amountArea.id = this.id;
-
-    const eurAmount = document.createElement('div');
-    eurAmount.id = 'eur-amount';
-    eurAmount.className = 'money-amount-input-area';
-
-    this.eurInput = document.createElement('input');
-    this.eurInput.id = 'input-eur-amount';
-    this.eurInput.type = 'text';
-    this.eurInput.className = 'money-input input-money-amount';
-    this.eurInput.value = '100';
-    this.eurInput.required = true;
-
-    const eurSymbol = document.createElement('div');
-    eurSymbol.id = 'eur-symbol';
-    eurSymbol.className = 'curr-symbol';
-
-    const eurCharacter = document.createElement('span');
-    eurCharacter.id = 'eur-character';
-    eurCharacter.className = 'curr-character';
-    eurCharacter.textContent = '€';
-
-    eurSymbol.appendChild(eurCharacter);
-    eurAmount.appendChild(this.eurInput);
-    eurAmount.appendChild(eurSymbol);
-
-    const btcAmount = document.createElement('div');
-    btcAmount.id = 'btc-amount';
-    btcAmount.className = 'money-amount-input-area';
-
-    this.btcInput = document.createElement('input');
-    this.btcInput.id = 'input-btc-amount';
-    this.btcInput.type = 'text';
-    this.btcInput.className = 'money-input input-money-amount';
-    this.btcInput.disabled = true;
-
-    const satsSymbol = document.createElement('div');
-    satsSymbol.id = 'sats-symbol';
-    satsSymbol.className = 'curr-symbol';
-
-    const satsCharacter = document.createElement('span');
-    satsCharacter.id = 'sats-character';
-    satsCharacter.className = 'curr-character';
-    satsCharacter.textContent = 'SAT';
-
-    satsSymbol.appendChild(satsCharacter);
-    btcAmount.appendChild(this.btcInput);
-    btcAmount.appendChild(satsSymbol);
-
-    amountArea.appendChild(eurAmount);
-    amountArea.appendChild(btcAmount);
-
-    this.eurInput.addEventListener('blur', () => {
-      this.validateAndFormatEurAmountInput();
-      this.updateBtcInput();
-    });
-
-    this.eurInput.addEventListener('input', () => {
-      this.eurInput.value = this.eurInput.value.replace(/[^0-9]/g, '');
-      this.updateBtcInput();
-    });
-
-    this.updateBtcInput();
-
-    this.element = amountArea;
-    this.parentElement.appendChild(this.element);
-  }
-
-  get intEurAmount() {
-    const eurAmountFieldValue = this.eurInput.value;
-    const regularExpression = /([\d\s]+)/;
-    const matchResult = eurAmountFieldValue.match(regularExpression);
-
-    if (!matchResult) {
-      return null;
-    }
-
-    const numberString = matchResult[1];
-    const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
-
-    return cleanInputNumber;
-  }
-
-  validateAndFormatEurAmountInput() {
-    const cleanInputNumber = this.intEurAmount;
-    this.eurInput.classList.remove('input-is-valid', 'input-is-invalid');
-    if (cleanInputNumber) {
-      this.eurInput.value = formatNumberWithSpaces(cleanInputNumber);
-      this.eurInput.classList.add('input-is-valid');
-      return;
-    }
-
-    this.eurInput.classList.add('input-is-invalid');
-  }
-
-  updateBtcInput() {
-    const eurToSatRate = 1021;
-    const cleanEurAmount = this.intEurAmount;
-
-    const satsAmount = cleanEurAmount * eurToSatRate;
-    const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
-    this.btcInput.value = formattedSatsAmount;
-  }
-}
+const AmountInput = require('../components/AmountInput');
 
 function offersPage() {
   const createOfferEventBus = new EventTarget();