Skip to content
Permalink
Browse files

choose up to 2 frosting flavors

  • Loading branch information
scottpdawson committed Nov 17, 2019
1 parent fd51565 commit 6113e1d0f43b4c02af7b1567756d5a8e041bd68b
Showing with 130 additions and 72 deletions.
  1. +68 −16 src/App.tsx
  2. +62 −56 src/Constants.ts
@@ -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/
//

@@ -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];

0 comments on commit 6113e1d

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