Refactor bmarket.js

pages/bmarket.html

@@ -49,10 +49,11 @@
       {{ end }}
     </div>
     {{ range .Shares }} {{ if eq .Description "YES" }}
-    <form id="yes-form" class="order-form" hidden action="/api/market/{{$.Id}}/order" method="post">
+    <form id="yes-form" class="order-form" hidden action="/api/market/order" method="post">
       <button id="yes-buy" type="button" class="order-button yes w-100p selected">BUY</button>
       <button id="yes-sell" type="button" class="order-button no w-100p">SELL</button>
-      <input hidden name="share_id" value="{{.Id}}" />
+      <input id="market-id" hidden name="market_id" value="{{$.Id}}" />
+      <input id="yes-share" hidden name="share_id" value="{{.Id}}" />
       <input id="yes-side" hidden name="side" value="BUY" />
       <label>shares</label>
       <input id="yes-quantity" type="number" name="quantity" placeholder="quantity" />
@@ -62,10 +63,11 @@
       <button type="submit">SUBMIT</button>
     </form>
     {{ else }}
-    <form id="no-form" class="order-form" hidden action="/api/market/{{$.Id}}/order" method="post">
+    <form id="no-form" class="order-form" hidden action="/api/market/order" method="post">
       <button id="no-buy" type="button" class="order-button yes w-100p selected">BUY</button>
       <button id="no-sell" type="button" class="order-button no w-100p">SELL</button>
-      <input hidden name="share_id" value="{{.Id}}" />
+      <input id="market-id" hidden name="market_id" value="{{$.Id}}" />
+      <input id="no-share" hidden name="share_id" value="{{.Id}}" />
       <input id="no-side" hidden name="side" value="BUY" />
       <label>shares</label>
       <input id="no-quantity" type="number" name="quantity" placeholder="quantity" />

public/bmarket.js

@@ -1,3 +1,7 @@
+const marketId = document.querySelector("#market-id").value
+const yesShareId = document.querySelector("#yes-share").value
+const noShareId = document.querySelector("#no-share").value
+
 const yesOrderBtn = document.querySelector("#yes-order")
 const yesForm = document.querySelector("#yes-form")
 const yesBuyBtn = document.querySelector("#yes-buy")
@@ -18,95 +22,87 @@ const noCostDisplay = document.querySelector("#no-cost")
 const noCostLabel = document.querySelector("#no-cost-label")
 const noSubmitLabel = document.querySelector("#no-submit-label")
 
-yesOrderBtn.onclick = function () {
+function resetInputs() {
+    yesQuantityInput.value = undefined
+    yesCostDisplay.value = undefined
+    noQuantityInput.value = undefined
+    noCostDisplay.value = undefined
+}
+
+function showYesForm() {
+    resetInputs()
     yesOrderBtn.classList.add("selected")
     yesForm.style.display = "grid"
     noOrderBtn.classList.remove("selected")
     noForm.style.display = "none"
 }
-yesBuyBtn.onclick = function () {
-    yesSideInput.value = "BUY"
-    yesBuyBtn.classList.add("selected")
-    yesSellBtn.classList.remove("selected")
-    yesCostLabel.textContent = 'cost [sats]'
-    yesSubmitLabel.textContent = 'BUY YES shares'
-    yesQuantityInput.value = undefined
-    yesCostDisplay.value = undefined
-}
-yesSellBtn.onclick = function () {
-    yesSideInput.value = "SELL"
-    yesBuyBtn.classList.remove("selected")
-    yesSellBtn.classList.add("selected")
-    yesCostLabel.textContent = 'payout [sats]'
-    yesSubmitLabel.textContent = 'SELL NO shares'
-    yesQuantityInput.value = undefined
-    yesCostDisplay.value = undefined
-}
-yesQuantityInput.onchange = async function (e) {
-    const quantity = parseInt(e.target.value, 10)
-    const body = {
-        share_id: "{{(index .Shares 0).Id}}",
-        quantity,
-        side: yesSideInput.value
-    }
-    const rBody = await fetch("/api/market/{{.Id}}/cost", {
-        method: "POST",
-        headers: {
-            "Content-type": "application/json"
-        },
-        body: JSON.stringify(body)
-    })
-        .then(r => r.json())
-        .catch((err) => {
-            console.error(err);
-            return null
-        })
-    if (!rBody) return null;
-    yesCostDisplay.value = parseFloat(Math.abs(rBody.cost)).toFixed(3)
-}
-noOrderBtn.onclick = function () {
+yesOrderBtn.onclick = showYesForm
+
+function showNoForm() {
+    resetInputs()
     noOrderBtn.classList.add("selected")
     noForm.style.display = "grid"
     yesOrderBtn.classList.remove("selected")
     yesForm.style.display = "none"
 }
-noBuyBtn.onclick = function () {
-    noSideInput.value = "BUY"
+noOrderBtn.onclick = showNoForm
+
+function showBuyForm() {
+    resetInputs()
+    yesBuyBtn.classList.add("selected")
+    yesSellBtn.classList.remove("selected")
+    yesCostLabel.textContent = 'cost [sats]'
+    yesSubmitLabel.textContent = 'BUY YES shares'
+    yesSideInput.value = "BUY"
+
     noBuyBtn.classList.add("selected")
     noSellBtn.classList.remove("selected")
     noCostLabel.textContent = 'cost [sats]'
-    noSubmitLabel.textContent = 'BUY NO shares'
-    noQuantityInput.value = undefined
-    noCostDisplay.value = undefined
+    noSubmitLabel.textContent = 'BUY YES shares'
+    noSideInput.value = "BUY"
 }
-noSellBtn.onclick = function () {
-    noSideInput.value = "SELL"
+function showSellForm() {
+    resetInputs()
+    yesBuyBtn.classList.remove("selected")
+    yesSellBtn.classList.add("selected")
+    yesCostLabel.textContent = 'payout [sats]'
+    yesSubmitLabel.textContent = 'SELL NO shares'
+    yesSideInput.value = "SELL"
+
     noBuyBtn.classList.remove("selected")
     noSellBtn.classList.add("selected")
     noCostLabel.textContent = 'payout [sats]'
     noSubmitLabel.textContent = 'SELL YES shares'
-    noQuantityInput.value = undefined
-    noCostDisplay.value = undefined
+    noSideInput.value = "SELL"
 }
-noQuantityInput.onchange = async function (e) {
-    const quantity = parseInt(e.target.value, 10)
-    const body = {
-        share_id: "{{(index .Shares 1).Id}}",
-        quantity,
-        side: noSideInput.value
-    }
-    const rBody = await fetch("/api/market/{{.Id}}/cost", {
-        method: "POST",
-        headers: {
-            "Content-type": "application/json"
-        },
-        body: JSON.stringify(body)
-    })
-        .then(r => r.json())
-        .catch((err) => {
-            console.error(err);
-            return null
+yesBuyBtn.onclick = showBuyForm
+yesSellBtn.onclick = showSellForm
+noBuyBtn.onclick = showBuyForm
+noSellBtn.onclick = showSellForm
+
+function updatePrice(marketId, shareId) {
+    return async function (e) {
+        const quantity = parseInt(e.target.value, 10)
+        const body = {
+            share_id: shareId,
+            quantity,
+            side: yesSideInput.value
+        }
+        const rBody = await fetch(`/api/market/${marketId}/cost`, {
+            method: "POST",
+            headers: {
+                "Content-type": "application/json"
+            },
+            body: JSON.stringify(body)
         })
-    if (!rBody) return null;
-    noCostDisplay.value = parseFloat(Math.abs(rBody.cost)).toFixed(3)
-}
+            .then(r => r.json())
+            .catch((err) => {
+                console.error(err);
+                return null
+            })
+        if (!rBody) return null;
+        yesCostDisplay.value = parseFloat(Math.abs(rBody.cost)).toFixed(3)
+    }
+}
+yesQuantityInput.onchange = updatePrice(marketId, yesShareId)
+noQuantityInput.onchange = updatePrice(marketId, noShareId)