Skip to content

Commit 6113e1d

Browse files
scottpdawsonscottpdawson
committed
choose up to 2 frosting flavors
1 parent fd51565 commit 6113e1d

2 files changed

Lines changed: 130 additions & 72 deletions

File tree

‎src/App.tsx‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import {
55
orderItem,
66
boxSize,
77
boxSizes,
8-
flavor,
98
cakeFlavors,
9+
flavor,
10+
frostingFlavors,
1011
defaultCakeFlavor,
12+
defaultFrostingFlavor,
13+
defaultNullFrostingFlavor,
1114
} from "./Constants";
1215
import { generateUniqueKey } from "./Helpers";
1316

@@ -25,6 +28,10 @@ class App extends React.Component<any, order> {
2528
return JSON.parse(JSON.stringify(this.state.orderDetails));
2629
}
2730

31+
getOrderItemFromKey(currentOrder: orderItem[], key: string): orderItem | undefined {
32+
return currentOrder.find((obj: { key: string }) => obj.key === key);
33+
}
34+
2835
updateOrderDetails(orderDetails: orderItem[]) {
2936
this.setState({
3037
orderTotal: this.calculateTotal(orderDetails),
@@ -38,7 +45,8 @@ class App extends React.Component<any, order> {
3845
key: generateUniqueKey("CC"), // key is unique
3946
name: newItem.name,
4047
cakeFlavor: defaultCakeFlavor,
41-
price: newItem.price,
48+
frostingFlavor: [defaultFrostingFlavor, defaultNullFrostingFlavor],
49+
price: newItem.price
4250
});
4351
this.updateOrderDetails(currentOrder);
4452
}
@@ -53,15 +61,28 @@ class App extends React.Component<any, order> {
5361
this.updateOrderDetails(currentOrderItemRemoved);
5462
}
5563

56-
getCakeFlavorFromString(flavor: string) {
57-
return cakeFlavors.find(obj => obj.name == flavor);
64+
getFlavorFromString(flavor: string, flavors: flavor[]) {
65+
return flavors.find(obj => obj.name == flavor);
5866
}
5967

60-
updateCakeFlavor(e: any, keyToUpdate: string) {
68+
updateCakeFlavor(e: any, orderItemToUpdate: string) {
6169
let currentOrder = this.getCurrentOrder();
62-
let thisOrderItem = currentOrder.find((obj: { key: string; }) => obj.key === keyToUpdate);
63-
thisOrderItem.cakeFlavor = this.getCakeFlavorFromString(e.target.value);
64-
this.updateOrderDetails(currentOrder);
70+
let thisOrderItem = this.getOrderItemFromKey(currentOrder, orderItemToUpdate);
71+
let cakeFlavor = this.getFlavorFromString(e.target.value, cakeFlavors);
72+
if (thisOrderItem && cakeFlavor) {
73+
thisOrderItem.cakeFlavor = cakeFlavor;
74+
this.updateOrderDetails(currentOrder);
75+
}
76+
}
77+
78+
updateFrostingFlavor(e: any, orderItemToUpdate: string, flavorIndex: number) {
79+
let currentOrder = this.getCurrentOrder();
80+
let thisOrderItem = this.getOrderItemFromKey(currentOrder, orderItemToUpdate);
81+
let frostingFlavor = this.getFlavorFromString(e.target.value, frostingFlavors);
82+
if (thisOrderItem && frostingFlavor) {
83+
thisOrderItem.frostingFlavor[flavorIndex] = frostingFlavor;
84+
this.updateOrderDetails(currentOrder);
85+
}
6586
}
6687

6788
calculateTotal(orderDetails: orderItem[]) {
@@ -95,8 +116,9 @@ class App extends React.Component<any, order> {
95116
<tr>
96117
<th></th>
97118
<th>Item</th>
98-
<th>Cake Flavor</th>
99-
<th>Frosting Flavor (choose up to 2)</th>
119+
<th>Cake</th>
120+
<th>Frosting</th>
121+
<th>2nd Frosting (optional)</th>
100122
</tr>
101123
</thead>
102124
<tbody>
@@ -112,15 +134,46 @@ class App extends React.Component<any, order> {
112134
</td>
113135
<td>{item.name}</td>
114136
<td>
115-
<select value={item.cakeFlavor.name} onChange={e => this.updateCakeFlavor(e, item.key)}>
137+
<select
138+
value={item.cakeFlavor && item.cakeFlavor.name}
139+
onChange={e => this.updateCakeFlavor(e, item.key)}
140+
>
116141
{Object.keys(cakeFlavors).map((thisFlavor, i) => (
117142
<option key={i} value={cakeFlavors[i].name}>
118143
{cakeFlavors[i].name}
119144
</option>
120145
))}
121146
</select>
122147
</td>
123-
<td></td>
148+
<td>
149+
<select
150+
value={item.frostingFlavor && item.frostingFlavor[0].name}
151+
onChange={e => this.updateFrostingFlavor(e, item.key, 0)}
152+
>
153+
{Object.keys(frostingFlavors).map((thisFlavor, i) => (
154+
<option key={i} value={frostingFlavors[i].name}>
155+
{frostingFlavors[i].name}
156+
</option>
157+
))}
158+
</select>
159+
</td>
160+
<td>
161+
<select
162+
value={
163+
item.frostingFlavor[1] && item.frostingFlavor[1].name
164+
}
165+
onChange={e => this.updateFrostingFlavor(e, item.key, 1)}
166+
>
167+
{Object.keys(frostingFlavors).map((thisFlavor, i) => (
168+
<option
169+
key={i}
170+
value={frostingFlavors[i] && frostingFlavors[i].name}
171+
>
172+
{frostingFlavors[i].name}
173+
</option>
174+
))}
175+
</select>
176+
</td>
124177
</tr>
125178
))}
126179
</tbody>
@@ -135,10 +188,9 @@ class App extends React.Component<any, order> {
135188

136189
// todo:
137190
//
138-
// 1. select frosting flavors (up to 2 per dozen)
139-
// 2. provide a message on cupcakes (custom disc color, letter color)
140-
// 3. delivery (extra charge) or pick-up
141-
// 4. send email on order quote submission, cc: to submitter
191+
// 1. provide a message on cupcakes (custom disc color, letter color)
192+
// 2. delivery (extra charge) or pick-up
193+
// 3. send email on order quote submission, cc: to submitter
142194
// https://sheelahb.com/blog/how-to-send-email-from-react-without-a-backend/
143195
//
144196

‎src/Constants.ts‎

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
export interface order {
2-
orderTotal: number,
3-
orderDetails: orderItem[],
2+
orderTotal: number;
3+
orderDetails: orderItem[];
44
}
55

66
export const initialState = {
77
orderTotal: 0,
8-
orderDetails: [],
8+
orderDetails: []
99
};
1010

1111
export interface orderItem {
12-
key: string,
13-
name: string,
14-
cakeFlavor: flavor,
15-
price: number,
16-
};
12+
key: string;
13+
name: string;
14+
cakeFlavor: flavor;
15+
frostingFlavor: flavor[];
16+
price: number;
17+
}
1718

1819
export interface boxSize {
19-
name: string,
20-
count: number,
21-
price: number,
22-
};
20+
name: string;
21+
count: number;
22+
price: number;
23+
}
2324

2425
export interface flavor {
25-
name: string,
26-
color: string,
27-
};
26+
name: string;
27+
color: string;
28+
}
2829

2930
export const boxSizes: boxSize[] = [{
3031
name: "Mini",
@@ -42,69 +43,74 @@ export const boxSizes: boxSize[] = [{
4243
];
4344

4445
export const cakeFlavors: flavor[] = [{
45-
name: "chocolate",
46-
color: "#333"
46+
color: "#333",
47+
name: "carrot"
4748
}, {
48-
name: "vanilla",
49-
color: "#333"
49+
color: "#333",
50+
name: "chocolate"
5051
}, {
51-
name: "mocha",
52-
color: "#333"
52+
color: "#333",
53+
name: "coconut"
5354
}, {
54-
name: "coffee",
55-
color: "#333"
55+
color: "#333",
56+
name: "coffee"
5657
}, {
57-
name: "spice",
58-
color: "#333"
58+
color: "#333",
59+
name: "lemon"
5960
}, {
60-
name: "carrot",
61-
color: "#333"
61+
color: "#333",
62+
name: "mocha"
6263
}, {
63-
name: "red velvet",
64-
color: "#333"
64+
color: "#333",
65+
name: "red velvet"
6566
}, {
66-
name: "coconut",
67-
color: "#333"
67+
color: "#333",
68+
name: "spice"
6869
}, {
69-
name: "lemon",
70-
color: "#333"
70+
color: "#333",
71+
name: "vanilla"
7172
}
7273
];
7374

7475
export const frostingFlavors: flavor[] = [{
75-
name: "cream cheese",
76-
color: "#333"
76+
color: "#000",
77+
name: "- none -"
78+
},{
79+
color: "#333",
80+
name: "chocolate buttercream"
7781
}, {
78-
name: "vanilla buttercream",
79-
color: "#333"
82+
color: "#333",
83+
name: "coconut"
8084
}, {
81-
name: "chocolate buttercream",
82-
color: "#333"
85+
color: "#333",
86+
name: "cookies and cream"
8387
}, {
84-
name: "cookies and cream",
85-
color: "#333"
88+
color: "#333",
89+
name: "cream cheese"
8690
}, {
87-
name: "mint chocolate cookie",
88-
color: "#333"
91+
color: "#333",
92+
name: "hazelnut"
8993
}, {
90-
name: "peanut butter",
91-
color: "#333"
94+
color: "#333",
95+
name: "lemon"
9296
}, {
93-
name: "hazelnut",
94-
color: "#333"
97+
color: "#333",
98+
name: "mint chocolate cookie"
9599
}, {
96-
name: "coconut",
97-
color: "#333"
100+
color: "#333",
101+
name: "peanut butter"
98102
}, {
99-
name: "lemon",
100-
color: "#333"
103+
color: "#333",
104+
name: "raspberry"
101105
}, {
102-
name: "raspberry",
103-
color: "#333"
106+
color: "#333",
107+
name: "strawberry"
104108
}, {
105-
name: "strawberry",
106-
color: "#333"
109+
color: "#333",
110+
name: "vanilla buttercream"
107111
}
108112
];
109113

110-
export const defaultCakeFlavor = cakeFlavors[1];
114+
export const defaultCakeFlavor = cakeFlavors[cakeFlavors.length-1];
115+
export const defaultFrostingFlavor = frostingFlavors[frostingFlavors.length-1];
116+
export const defaultNullFrostingFlavor = frostingFlavors[0];

0 commit comments

Comments
 (0)