Skip to content
Permalink
Browse files

choose cake flavor

  • Loading branch information
scottpdawson committed Nov 17, 2019
1 parent fded313 commit fd515655b2ca53462feb42280083aabea44d9969
Showing with 79 additions and 33 deletions.
  1. +75 −32 src/App.tsx
  2. +4 −1 src/Constants.ts
@@ -1,9 +1,16 @@
import * as React from 'react';
import { initialState, order, orderItem, boxSize, boxSizes } from './Constants'
import * as React from "react";
import {
initialState,
order,
orderItem,
boxSize,
boxSizes,
flavor,
cakeFlavors,
defaultCakeFlavor,
} from "./Constants";
import { generateUniqueKey } from "./Helpers";



class App extends React.Component<any, order> {
constructor(props: any) {
super(props);
@@ -30,23 +37,41 @@ class App extends React.Component<any, order> {
currentOrder.push({
key: generateUniqueKey("CC"), // key is unique
name: newItem.name,
price: newItem.price
cakeFlavor: defaultCakeFlavor,
price: newItem.price,
});
this.updateOrderDetails(currentOrder);
}

removeFromOrder(itemToRemove: string) {
removeFromOrder(keyToRemove: string) {
let currentOrder = this.getCurrentOrder();
let currentOrderItemRemoved = currentOrder.filter(function(item: orderItem) {
return item.key !== itemToRemove;
let currentOrderItemRemoved = currentOrder.filter(function(
item: orderItem
) {
return item.key !== keyToRemove;
});
this.updateOrderDetails(currentOrderItemRemoved);
}

getCakeFlavorFromString(flavor: string) {
return cakeFlavors.find(obj => obj.name == flavor);
}

updateCakeFlavor(e: any, keyToUpdate: 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);
}

calculateTotal(orderDetails: orderItem[]) {
var totalPrice = orderDetails.reduce(function(accumulator: number, order: orderItem) {
var totalPrice = orderDetails.reduce(function(
accumulator: number,
order: orderItem
) {
return accumulator + order.price;
}, 0);
},
0);
return totalPrice;
}

@@ -58,29 +83,48 @@ class App extends React.Component<any, order> {
<h4>Add to Order</h4>
<ul>
{Object.keys(boxSizes).map((item, i) => (
<li
onClick={e => this.addToOrder(boxSizes[i])}
key={i}
>
<li onClick={e => this.addToOrder(boxSizes[i])} key={i}>
{boxSizes[i].name} ({boxSizes[i].count})
</li>
))}
</ul>
<h4>Your Order</h4>
<h5>Order Total: ${this.state.orderTotal}</h5>
<ul>
{this.state.orderDetails.map(item => (
<li key={item.key}>
<button
type="button"
onClick={e => this.removeFromOrder(item.key)}
>
remove
</button>
{item.name}
</li>
))}
</ul>
<table>
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Cake Flavor</th>
<th>Frosting Flavor (choose up to 2)</th>
</tr>
</thead>
<tbody>
{this.state.orderDetails.map(item => (
<tr key={item.key}>
<td>
<button
type="button"
onClick={e => this.removeFromOrder(item.key)}
>
remove
</button>
</td>
<td>{item.name}</td>
<td>
<select value={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>
</tr>
))}
</tbody>
</table>
<button type="button" onClick={this.onStartOver}>
Start Over
</button>
@@ -91,11 +135,10 @@ class App extends React.Component<any, order> {

// todo:
//
// 1. select cake flavor (1 per dozen)
// 2. select frosting flavors (up to 2 per dozen)
// 3. provide a message on cupcakes (custom disc color, letter color)
// 4. delivery (extra charge) or pick-up
// 5. send email on order quote submission, cc: to submitter
// 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
// https://sheelahb.com/blog/how-to-send-email-from-react-without-a-backend/
//

@@ -11,6 +11,7 @@ export const initialState = {
export interface orderItem {
key: string,
name: string,
cakeFlavor: flavor,
price: number,
};

@@ -104,4 +105,6 @@ export const frostingFlavors: flavor[] = [{
name: "strawberry",
color: "#333"
}
];
];

export const defaultCakeFlavor = cakeFlavors[1];

0 comments on commit fd51565

Please sign in to comment.
You can’t perform that action at this time.