choose up to 2 frosting flavors

scottpdawson · Nov 17, 2019 · 6113e1d · 6113e1d
1 parent fd51565
commit 6113e1d
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 72 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,9 +5,12 @@ import {
   orderItem,
   boxSize,
   boxSizes,
-  flavor,
   cakeFlavors,
+  flavor,
+  frostingFlavors,
   defaultCakeFlavor,
+  defaultFrostingFlavor,
+  defaultNullFrostingFlavor,
 } from "./Constants";
 import { generateUniqueKey } from "./Helpers";
 
@@ -25,6 +28,10 @@ class App extends React.Component<any, order> {
     return JSON.parse(JSON.stringify(this.state.orderDetails));
   }
 
+  getOrderItemFromKey(currentOrder: orderItem[], key: string): orderItem | undefined {
+    return currentOrder.find((obj: { key: string }) => obj.key === key);
+  }
+
   updateOrderDetails(orderDetails: orderItem[]) {
     this.setState({
       orderTotal: this.calculateTotal(orderDetails),
@@ -38,7 +45,8 @@ class App extends React.Component<any, order> {
       key: generateUniqueKey("CC"), // key is unique
       name: newItem.name,
       cakeFlavor: defaultCakeFlavor,
-      price: newItem.price,
+      frostingFlavor: [defaultFrostingFlavor, defaultNullFrostingFlavor],
+      price: newItem.price
     });
     this.updateOrderDetails(currentOrder);
   }
@@ -53,15 +61,28 @@ class App extends React.Component<any, order> {
     this.updateOrderDetails(currentOrderItemRemoved);
   }
 
-  getCakeFlavorFromString(flavor: string) {
-    return cakeFlavors.find(obj => obj.name == flavor);
+  getFlavorFromString(flavor: string, flavors: flavor[]) {
+    return flavors.find(obj => obj.name == flavor);
   }
 
-  updateCakeFlavor(e: any, keyToUpdate: string) {
+  updateCakeFlavor(e: any, orderItemToUpdate: string) {
     let currentOrder = this.getCurrentOrder();
-    let thisOrderItem = currentOrder.find((obj: { key: string; }) => obj.key === keyToUpdate);
-    thisOrderItem.cakeFlavor = this.getCakeFlavorFromString(e.target.value);
-    this.updateOrderDetails(currentOrder);
+    let thisOrderItem = this.getOrderItemFromKey(currentOrder, orderItemToUpdate);
+    let cakeFlavor = this.getFlavorFromString(e.target.value, cakeFlavors);
+    if (thisOrderItem && cakeFlavor) {
+      thisOrderItem.cakeFlavor = cakeFlavor;
+      this.updateOrderDetails(currentOrder);
+    }
+  }
+
+  updateFrostingFlavor(e: any, orderItemToUpdate: string, flavorIndex: number) {
+    let currentOrder = this.getCurrentOrder();
+    let thisOrderItem = this.getOrderItemFromKey(currentOrder, orderItemToUpdate);
+    let frostingFlavor = this.getFlavorFromString(e.target.value, frostingFlavors);
+    if (thisOrderItem && frostingFlavor) {
+      thisOrderItem.frostingFlavor[flavorIndex] = frostingFlavor;
+      this.updateOrderDetails(currentOrder);
+    }
   }
 
   calculateTotal(orderDetails: orderItem[]) {
@@ -95,8 +116,9 @@ class App extends React.Component<any, order> {
             <tr>
               <th></th>
               <th>Item</th>
-              <th>Cake Flavor</th>
-              <th>Frosting Flavor (choose up to 2)</th>
+              <th>Cake</th>
+              <th>Frosting</th>
+              <th>2nd Frosting (optional)</th>
             </tr>
           </thead>
           <tbody>
@@ -112,15 +134,46 @@ class App extends React.Component<any, order> {
                 </td>
                 <td>{item.name}</td>
                 <td>
-                  <select value={item.cakeFlavor.name} onChange={e => this.updateCakeFlavor(e, item.key)}>
+                  <select
+                    value={item.cakeFlavor && item.cakeFlavor.name}
+                    onChange={e => this.updateCakeFlavor(e, item.key)}
+                  >
                     {Object.keys(cakeFlavors).map((thisFlavor, i) => (
                       <option key={i} value={cakeFlavors[i].name}>
                         {cakeFlavors[i].name}
                       </option>
                     ))}
                   </select>
                 </td>
-                <td></td>
+                <td>
+                  <select
+                    value={item.frostingFlavor && item.frostingFlavor[0].name}
+                    onChange={e => this.updateFrostingFlavor(e, item.key, 0)}
+                  >
+                    {Object.keys(frostingFlavors).map((thisFlavor, i) => (
+                      <option key={i} value={frostingFlavors[i].name}>
+                        {frostingFlavors[i].name}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+                <td>
+                  <select
+                    value={
+                      item.frostingFlavor[1] && item.frostingFlavor[1].name
+                    }
+                    onChange={e => this.updateFrostingFlavor(e, item.key, 1)}
+                  >
+                    {Object.keys(frostingFlavors).map((thisFlavor, i) => (
+                      <option
+                        key={i}
+                        value={frostingFlavors[i] && frostingFlavors[i].name}
+                      >
+                        {frostingFlavors[i].name}
+                      </option>
+                    ))}
+                  </select>
+                </td>
               </tr>
             ))}
           </tbody>
@@ -135,10 +188,9 @@ class App extends React.Component<any, order> {
 
 // todo:
 //
-// 1. select frosting flavors (up to 2 per dozen)
-// 2. provide a message on cupcakes (custom disc color, letter color)
-// 3. delivery (extra charge) or pick-up
-// 4. send email on order quote submission, cc: to submitter
+// 1. provide a message on cupcakes (custom disc color, letter color)
+// 2. delivery (extra charge) or pick-up
+// 3. send email on order quote submission, cc: to submitter
 // https://sheelahb.com/blog/how-to-send-email-from-react-without-a-backend/
 //
 

diff --git a/src/Constants.ts b/src/Constants.ts
@@ -1,30 +1,31 @@
 export interface order {
-  orderTotal: number,
-  orderDetails: orderItem[],
+  orderTotal: number;
+  orderDetails: orderItem[];
 }
 
 export const initialState = {
   orderTotal: 0,
-  orderDetails: [],
+  orderDetails: []
 };
 
 export interface orderItem {
-  key: string,
-  name: string,
-  cakeFlavor: flavor,
-  price: number,
-};
+  key: string;
+  name: string;
+  cakeFlavor: flavor;
+  frostingFlavor: flavor[]; 
+  price: number;
+}
 
 export interface boxSize {
-  name: string,
-  count: number,
-  price: number,
-};
+  name: string;
+  count: number;
+  price: number;
+}
 
 export interface flavor {
-  name: string,
-  color: string,
-};
+  name: string;
+  color: string;
+}
 
 export const boxSizes: boxSize[] = [{
     name: "Mini",
@@ -42,69 +43,74 @@ export const boxSizes: boxSize[] = [{
 ];
 
 export const cakeFlavors: flavor[] = [{
-    name: "chocolate",
-    color: "#333"
+    color: "#333",
+    name: "carrot"
   }, {
-    name: "vanilla",
-    color: "#333"
+    color: "#333",
+    name: "chocolate"
   }, {
-    name: "mocha",
-    color: "#333"
+    color: "#333",
+    name: "coconut"
   }, {
-    name: "coffee",
-    color: "#333"
+    color: "#333",
+    name: "coffee"
   }, {
-    name: "spice",
-    color: "#333"
+    color: "#333",
+    name: "lemon"
   }, {
-    name: "carrot",
-    color: "#333"
+    color: "#333",
+    name: "mocha"
   }, {
-    name: "red velvet",
-    color: "#333"
+    color: "#333",
+    name: "red velvet"
   }, {
-    name: "coconut",
-    color: "#333"
+    color: "#333",
+    name: "spice"
   }, {
-    name: "lemon",
-    color: "#333"
+    color: "#333",
+    name: "vanilla"
   }
 ];
 
 export const frostingFlavors: flavor[] = [{
-    name: "cream cheese",
-    color: "#333"
+    color: "#000",
+    name: "- none -"
+  },{
+    color: "#333",
+    name: "chocolate buttercream"
   }, {
-    name: "vanilla buttercream",
-    color: "#333"
+    color: "#333",
+    name: "coconut"
   }, {
-    name: "chocolate buttercream",
-    color: "#333"
+    color: "#333",
+    name: "cookies and cream"
   }, {
-    name: "cookies and cream",
-    color: "#333"
+    color: "#333",
+    name: "cream cheese"
   }, {
-    name: "mint chocolate cookie",
-    color: "#333"
+    color: "#333",
+    name: "hazelnut"
   }, {
-    name: "peanut butter",
-    color: "#333"
+    color: "#333",
+    name: "lemon"
   }, {
-    name: "hazelnut",
-    color: "#333"
+    color: "#333",
+    name: "mint chocolate cookie"
   }, {
-    name: "coconut",
-    color: "#333"
+    color: "#333",
+    name: "peanut butter"
   }, {
-    name: "lemon",
-    color: "#333"
+    color: "#333",
+    name: "raspberry"
   }, {
-    name: "raspberry",
-    color: "#333"
+    color: "#333",
+    name: "strawberry"
   }, {
-    name: "strawberry",
-    color: "#333"
+    color: "#333",
+    name: "vanilla buttercream"
   }
 ];
 
-export const defaultCakeFlavor = cakeFlavors[1];
+export const defaultCakeFlavor = cakeFlavors[cakeFlavors.length-1];
+export const defaultFrostingFlavor = frostingFlavors[frostingFlavors.length-1];
+export const defaultNullFrostingFlavor = frostingFlavors[0];