Fix & reactify according to James's review

web/pages/simulator/entries.ts

@@ -13,8 +13,8 @@ export type Entry = {
   prob: number
 }
 
-export function makeEntries(bids: Bid[]): Entry[] {
+function makeWeights(bids: Bid[]) {
-  const entries: Entry[] = []
+  const weights = []
   let yesPot = 0
   let noPot = 0
   // First pass: calculate all the weights
@@ -28,33 +28,36 @@ export function makeEntries(bids: Bid[]): Entry[] {
     noPot += noBid
     const prob = yesPot / (yesPot + noPot)
 
-    entries.push({
+    weights.push({
       yesBid,
       noBid,
       yesWeight,
       noWeight,
       prob,
-      // To be filled in below
-      yesPayout: 0,
-      noPayout: 0,
-      yesReturn: 0,
-      noReturn: 0,
     })
   }
+  return weights
+}
 
+export function makeEntries(bids: Bid[]): Entry[] {
   const YES_SEED = bids[0].yesBid
   const NO_SEED = bids[0].noBid
-  const yesWeightsSum = entries.reduce((sum, entry) => sum + entry.yesWeight, 0)
+  const weights = makeWeights(bids)
-  const noWeightsSum = entries.reduce((sum, entry) => sum + entry.noWeight, 0)
+  const yesPot = weights.reduce((sum, { yesBid }) => sum + yesBid, 0)
+  const noPot = weights.reduce((sum, { noBid }) => sum + noBid, 0)
+  const yesWeightsSum = weights.reduce((sum, entry) => sum + entry.yesWeight, 0)
+  const noWeightsSum = weights.reduce((sum, entry) => sum + entry.noWeight, 0)
   // Second pass: calculate all the payouts
-  for (const entry of entries) {
+  const entries: Entry[] = []
-    const { yesBid, noBid, yesWeight, noWeight } = entry
+  for (const weight of weights) {
+    const { yesBid, noBid, yesWeight, noWeight } = weight
     // Payout: You get your initial bid back, as well as your share of the
     // (noPot - seed) according to your yesWeight
-    entry.yesPayout = yesBid + (yesWeight / yesWeightsSum) * (noPot - NO_SEED)
+    const yesPayout = yesBid + (yesWeight / yesWeightsSum) * (noPot - NO_SEED)
-    entry.noPayout = noBid + (noWeight / noWeightsSum) * (yesPot - YES_SEED)
+    const noPayout = noBid + (noWeight / noWeightsSum) * (yesPot - YES_SEED)
-    entry.yesReturn = (entry.yesPayout - yesBid) / yesBid
+    const yesReturn = (yesPayout - yesBid) / yesBid
-    entry.noReturn = (entry.noPayout - noBid) / noBid
+    const noReturn = (noPayout - noBid) / noBid
+    entries.push({ ...weight, yesPayout, noPayout, yesReturn, noReturn })
   }
   return entries
 }

web/pages/simulator/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
   CategoryScale,
   Chart,
@@ -26,97 +26,102 @@ Chart.register(
   Legend
 )
 
-function toTable(entries: Entry[]) {
+function TableBody(props: { entries: Entry[] }) {
-  return entries.map((entry, i) => {
   return (
+    <tbody>
+      {props.entries.map((entry, i) => (
         <tr key={i}>
           <th>{i + 1}</th>
-        {toRowStart(entry)}
+          <TableRowStart entry={entry} />
-        {toRowEnd(entry)}
+          <TableRowEnd entry={entry} />
         </tr>
+      ))}
+    </tbody>
   )
-  })
 }
 
-function toRowStart(entry: Entry) {
+function TableRowStart(props: { entry: Entry }) {
+  const { entry } = props
   if (entry.yesBid && entry.noBid) {
     return (
-      <Fragment>
+      <>
         <td>
           <div className="badge">SEED</div>
         </td>
         <td>
           {entry.yesBid} / {entry.noBid}
         </td>
-      </Fragment>
+      </>
     )
   } else if (entry.yesBid) {
     return (
-      <Fragment>
+      <>
         <td>
           <div className="badge badge-success">YES</div>
         </td>
         <td>{entry.yesBid}</td>
-      </Fragment>
+      </>
     )
-  } else if (entry.noBid) {
+  } else {
     return (
-      <Fragment>
+      <>
         <td>
           <div className="badge badge-error">NO</div>
         </td>
         <td>{entry.noBid}</td>
-      </Fragment>
+      </>
     )
   }
 }
 
-function toRowEnd(entry: Entry | null) {
+function TableRowEnd(props: { entry: Entry | null }) {
+  const { entry } = props
   if (!entry) {
     return (
-      <Fragment>
+      <>
         <td>N/A</td>
         <td>N/A</td>
         <td>N/A</td>
         <td>N/A</td>
-      </Fragment>
+      </>
     )
   } else if (entry.yesBid && entry.noBid) {
     return (
-      <Fragment>
+      <>
         <td>N/A</td>
         <td>{entry.prob.toFixed(2)}</td>
         <td>N/A</td>
         <td>N/A</td>
-      </Fragment>
+      </>
     )
   } else if (entry.yesBid) {
     return (
-      <Fragment>
+      <>
         <td>{entry.yesWeight.toFixed(2)}</td>
         <td>{entry.prob.toFixed(2)}</td>
         <td>{entry.yesPayout.toFixed(2)}</td>
         <td>{(entry.yesReturn * 100).toFixed(2)}%</td>
-      </Fragment>
+      </>
     )
   } else {
     return (
-      <Fragment>
+      <>
         <td>{entry.noWeight.toFixed(2)}</td>
         <td>{entry.prob.toFixed(2)}</td>
         <td>{entry.noPayout.toFixed(2)}</td>
         <td>{(entry.noReturn * 100).toFixed(2)}%</td>
-      </Fragment>
+      </>
     )
   }
 }
 
-function newBidTable(
+function NewBidTable(props: {
-  steps: number,
+  steps: number
-  bids: any[],
+  bids: any[]
-  setSteps: (steps: number) => void,
+  setSteps: (steps: number) => void
   setBids: (bids: any[]) => void
-) {
+}) {
+  const { steps, bids, setSteps, setBids } = props
   // Prepare for new bids
   const [newBid, setNewBid] = useState(0)
   const [newBidType, setNewBidType] = useState('YES')
@@ -204,7 +209,7 @@ function newBidTable(
               onFocus={(e) => e.target.select()}
             />
           </td>
-          {toRowEnd(nextEntry)}
+          <TableRowEnd entry={nextEntry} />
           <td>
             <button
               className="btn btn-primary"
@@ -267,8 +272,7 @@ export default function Simulator() {
             onChange={(e) => setSteps(parseInt(e.target.value))}
           />
 
-          {/* New bid table */}
+          <NewBidTable {...{ steps, bids, setSteps, setBids }} />
-          {newBidTable(steps, bids, setSteps, setBids)}
 
           {/* History of bids */}
           <div className="overflow-x-auto">
@@ -284,7 +288,8 @@ export default function Simulator() {
                   <th>Return</th>
                 </tr>
               </thead>
-              <tbody>{toTable(entries)}</tbody>
+
+              <TableBody entries={entries} />
             </table>
           </div>
         </div>