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() {
@@ -81,9 +114,9 @@ function BandForm({ band }) {
             type="text"
           />
         </div>
+        {/* TODO: third party library address verification */}
         <input
           required
-          {/* TODO: third party library address verification */}
           name="address"
           label="Address"
           placeholder="Address"
@@ -94,10 +127,10 @@ function BandForm({ band }) {
       <fieldset className="payment">
         <legend>Payment Details</legend>
 
+        {/* TODO: regex pattern */}
         <IMaskInput
           required
           mask="0000 0000 0000 0000"
-          {/* TODO: regex pattern */}
           name="cardNumber"
           label="Card Number"
           placeholder="0000 0000 0000 0000"
@@ -105,9 +138,9 @@ function BandForm({ band }) {
         ></IMaskInput>
 
         <div className="form-row">
+          {/* TODO: regex pattern */}
           <IMaskInput
             required
-            {/* TODO: regex pattern */}
             mask="00 / 00"
             pattern="\d*"
             name="cardExpiration"
@@ -116,9 +149,9 @@ function BandForm({ band }) {
             type="text"
           ></IMaskInput>
 
+          {/* TODO: regex pattern */}
           <IMaskInput
             required
-            {/* TODO: regex pattern */}
             mask={Number}
             name="cardCVV"
             label="Card CVV"