normalize and output data for server

src/BandForm.js

@@ -4,18 +4,51 @@ import { IMaskInput } from 'react-imask';
 const CentsInADollar = 100;
 const DefaultTotal = 0;
 
+function deepClone(data) {
+  // TODO: replace with structuredClone?
+  return JSON.parse(
+    JSON.stringify(
+      data
+    )
+  );
+}
+
 function costToReadable(cost) {
   return cost / CentsInADollar;
 }
 
+function submitPurchase(data) {
+  // TODO: Send to backend
+  console.log(data);
+}
+
 function BandForm({ band }) {
   const formRef = useRef(null);
   const [total, setTotal] = useState(DefaultTotal);
   const [formIsPending, setFormIsPending] = useState(false);
 
+  function normalizePurchaseData(formData) {
+    const data = deepClone(Object.fromEntries(formData));
+    delete data.ticketQuantity;
+    data.tickets = formData.getAll('ticketQuantity').map((quantity, index) => {
+      const {cost, name} = band.ticketTypes[index];
+      return {
+        name,
+        quantity,
+        totalCost: cost * quantity,
+      }
+    });
+    return data;
+  }
+
   function purchase(formData) {
-    console.log(formData);
+    if (formRef.current.checkValidity() === false) {
+      console.warn('Form is invalid');
+      return;
+    }
+
     setFormIsPending(true);
+    submitPurchase(normalizePurchaseData(formData));
   }
 
   function ticketQuantityChanged() {