src/BandForm.js

@@ -4,51 +4,18 @@ 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) {
-    if (formRef.current.checkValidity() === false) {
-      console.warn('Form is invalid');
-      return;
-    }
-
+    console.log(formData);
     setFormIsPending(true);
-    submitPurchase(normalizePurchaseData(formData));
   }
 
   function ticketQuantityChanged() {
@@ -114,9 +81,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"
@@ -127,10 +94,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"
@@ -138,9 +105,9 @@ function BandForm({ band }) {
         ></IMaskInput>
 
         <div className="form-row">
-          {/* TODO: regex pattern */}
           <IMaskInput
             required
+            {/* TODO: regex pattern */}
             mask="00 / 00"
             pattern="\d*"
             name="cardExpiration"
@@ -149,9 +116,9 @@ function BandForm({ band }) {
             type="text"
           ></IMaskInput>
 
-          {/* TODO: regex pattern */}
           <IMaskInput
             required
+            {/* TODO: regex pattern */}
             mask={Number}
             name="cardCVV"
             label="Card CVV"