Skip to content
Permalink
Browse files

initial commit

  • Loading branch information
scottpdawson committed Nov 9, 2019
1 parent a3f79c2 commit 13eaa926e9e067ecf43a78f65169f572f1b069d7
Showing with 17,035 additions and 0 deletions.
  1. +16,583 −0 package-lock.json
  2. +29 −0 package.json
  3. BIN public/favicon.ico
  4. +41 −0 public/index.html
  5. +15 −0 public/manifest.json
  6. +102 −0 src/App.js
  7. +9 −0 src/App.test.js
  8. +108 −0 src/Constants.js
  9. +3 −0 src/Helpers.js
  10. +10 −0 src/index.js
  11. +135 −0 src/serviceWorker.js

Large diffs are not rendered by default.

@@ -0,0 +1,29 @@
{
"name": "cupcake-configurator",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"popper.js": "^1.15.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"typescript": "^3.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
BIN +3.78 KB public/favicon.ico
Binary file not shown.
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Emoticakes Cupcake Configurator</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "Emoticakes Cupcake Configurator",
"name": "Emoticakes Cupcake Configurator",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
@@ -0,0 +1,102 @@
import React, { Component } from "react";
import * as Constants from "./Constants";
import { generateUniqueKey } from "./Helpers";

class App extends Component {
constructor(props) {
super(props);
this.state = Constants.initialState;
this.addToOrder = this.addToOrder.bind(this);
this.removeFromOrder = this.removeFromOrder.bind(this);
}

onStartOver = () => {
this.setState({ ...Constants.initialState });
};

getCurrentOrder() {
return JSON.parse(JSON.stringify(this.state.orderDetails));
}

updateOrderDetails(orderDetails) {
this.setState({
orderTotal: this.calculateTotal(orderDetails),
orderDetails: orderDetails
});
}

addToOrder(newItem) {
let currentOrder = this.getCurrentOrder();
currentOrder.push({
key: generateUniqueKey("CC"), // key is unique
name: newItem.name,
price: newItem.price
});
this.updateOrderDetails(currentOrder);
}

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

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

render() {
return (
<div>
<h1>Cupcake Configurator</h1>
<p>lorem ipsum instructions</p>
<h4>Add to Order</h4>
<ul>
{Object.keys(Constants.boxSizes).map((item, i) => (
<li
onClick={e => this.addToOrder(Constants.boxSizes[item], e)}
key={i}
>
{Constants.boxSizes[item].name} ({Constants.boxSizes[item].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, e)}
>
remove
</button>
{item.name}
</li>
))}
</ul>
<button type="button" onClick={this.onStartOver}>
Start Over
</button>
</div>
);
}
}

// 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
// https://sheelahb.com/blog/how-to-send-email-from-react-without-a-backend/
//

export default App;
@@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
@@ -0,0 +1,108 @@
export const initialState = {
orderTotal: 0,
orderDetails: []
};

export const boxSizes = {
MINI: {
name: "Mini",
count: 24,
price: 12
},
REG: {
name: "Regular",
count: 12,
price: 34
},
REG_4: {
name: "Regular 4-pack",
count: 12,
price: 12
}
};

export const cakeFlavors = {
chocolate: {
name: "chocolate",
color: "#333"
},
vanilla: {
name: "vanilla",
color: "#333"
},
mocha: {
name: "mocha",
color: "#333"
},
coffee: {
name: "coffee",
color: "#333"
},
spice: {
name: "spice",
color: "#333"
},
carrot: {
name: "carrot",
color: "#333"
},
redVelvet: {
name: "red velvet",
color: "#333"
},
coconut: {
name: "coconut",
color: "#333"
},
lemon: {
name: "lemon",
color: "#333"
}
};

export const frostingFlavors = {
creamCheese: {
name: "cream cheese",
color: "#333"
},
vanillaButtercream: {
name: "vanilla buttercream",
color: "#333"
},
chocolateButtercream: {
name: "chocolate buttercream",
color: "#333"
},
cookiesAndCream: {
name: "cookies and cream",
color: "#333"
},
mintChocolateCookie: {
name: "mint chocolate cookie",
color: "#333"
},
peanutButter: {
name: "peanut butter",
color: "#333"
},
hazelnut: {
name: "hazelnut",
color: "#333"
},
coconut: {
name: "coconut",
color: "#333"
},
lemon: {
name: "lemon",
color: "#333"
},
raspberry: {
name: "raspberry",
color: "#333"
},
strawberry: {
name: "strawberry",
color: "#333"
}
};
@@ -0,0 +1,3 @@
export function generateUniqueKey(pre) {
return `${pre}_${new Date().getTime()}`;
}
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

0 comments on commit 13eaa92

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