diff --git a/server/Controllers/orderController.js b/server/Controllers/orderController.js new file mode 100644 index 0000000..fbba718 --- /dev/null +++ b/server/Controllers/orderController.js @@ -0,0 +1,34 @@ +// Connect to data (i.e. Model) +const Order = require('../Models/orderModel') + +module.exports.list = ((req,res)=>{ + Order.find().exec() + .then(orders=>{ + res.json(orders) + }) +}) + +module.exports.show = ((req, res)=>{ + console.log(req.params.id) + Order.findById(req.params.id).exec() + .then(orders=>{ + res.json(orders) + }) +}) + +module.exports.create = ((req, res)=>{ + newOrder = new Order ({ + 'Product': req.body.Product, + 'Amount': req.body.Amount, + 'ProductId': req.body.ProductId + }) + + newOrder.save() + .then(savedOrder=>{ + res.json(savedOrder) + }) +}) + +module.exports.update = ((req, res)=>res.json({theId: req.params.id})) + +module.exports.remove = ((req, res)=>res.json({})) \ No newline at end of file diff --git a/server/Models/orderModel.js b/server/Models/orderModel.js new file mode 100644 index 0000000..c7b2886 --- /dev/null +++ b/server/Models/orderModel.js @@ -0,0 +1,5 @@ +const mon = require('mongoose') + +const schema = require('../Schemas/orderSchema') + +module.exports = mon.model('Orders',schema) \ No newline at end of file diff --git a/server/Routes/orderRoute.js b/server/Routes/orderRoute.js new file mode 100644 index 0000000..f052d29 --- /dev/null +++ b/server/Routes/orderRoute.js @@ -0,0 +1,13 @@ +const express = require('express') +const router = express.Router() +// Router variables that should match the controller +const { list,show,create,update,remove } = require('../Controllers/orderController') + +// Use whatever method you need (get, post, etc) +router.get('/orders', list) +router.get('/orders/:id', show) +router.post('/orders', create) +router.put('/orders/:id', update) +router.delete('/orders/:id', remove) + +module.exports = router \ No newline at end of file diff --git a/server/Schemas/orderSchema.js b/server/Schemas/orderSchema.js new file mode 100644 index 0000000..832a8c5 --- /dev/null +++ b/server/Schemas/orderSchema.js @@ -0,0 +1,18 @@ +const mon = require('mongoose') + +const schema = new mon.Schema({ + Product:{ + required: false, + type: String + }, + Amount:{ + required: false, + type: Number + }, + ProductId:{ + required: false, + type: Number + } +}) + +module.exports = schema \ No newline at end of file diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..148f80a --- /dev/null +++ b/server/index.js @@ -0,0 +1,15 @@ +const express = require('express') +const parser = require('body-parser') +const mon = require('mongoose') + +mon.connect('mongodb://admin:admin@ds135760.mlab.com:35760/e-commerce-aca') + +const app = express() + +app.use(parser.json()) +//Input routes here + +app.use(require('./Routes/orderRoute')) + + +app.listen(3001, () => console.log('Listening on port 3001!')) \ No newline at end of file diff --git a/src/App.js b/src/App.js index b6f04e9..69bf277 100644 --- a/src/App.js +++ b/src/App.js @@ -1,235 +1,69 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +// import PropTypes from 'prop-types' import './App.css'; -function App() { - return ( -
- {/*
*/} - -{/*
*/} - -
- -
+import Header from "./components/Header" +import Carousel from "./components/Carousel" +import ProductDetail from "./components/ProductDetail" +import Footer from "./components/Footer" +import SideBar from "./components/SideBar" +import Checkout from "./components/Checkout" -
-

Shop Name

-
- Category 1 - Category 2 - Category 3 -
-
+export default class App extends Component{ + + state={ + numberOfItemsInCart: 0, + cart: [], + } + handleAddtoCart = (product)=>{ + let cartArr = [...this.state.cart] + cartArr.push({item: product.name, price: product.price, description: product.description}) + this.setState({numberOfItemsInCart: this.state.numberOfItemsInCart + 1, + cart: cartArr }) + } -
- {/**/} -
+ render(){ + const products = this.props.products.map((item, i)=>{ + return + }) -
- -
+ return ( +
+
!this.state.cartVisible ? this.setState({cartVisible:true}) : this.setState({cartVisible:false})} + cartItems={this.state.cart} + isVisible={this.state.cartVisible} + /> -
- {/**/} + +
- {/**/} -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
-
-
- {/**/} -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
+ +
+ +
+ {products}
- -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
-{/* -
-

Like this template? -

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
-*/}
-
- +
+
+
+ +
+ ); + + } +} + -
- -
-
- {/*
*/} -
-
-
-

Copyright © Your Website 2014

-
-
-
- {/*
*/} -
-
- ); -} -export default App; diff --git a/src/components/Calculations.js b/src/components/Calculations.js new file mode 100644 index 0000000..5fd19ea --- /dev/null +++ b/src/components/Calculations.js @@ -0,0 +1,12 @@ +export function cartTotal(arr){ + const myList = [] + arr.forEach((item,i)=>{ + myList.push(Number(item.price.replace("$",""))) + }) + + const reduced = myList.reduce((s,c)=>{ + return(Number(s) , Number(c)) + },0) + + return(reduced) +} \ No newline at end of file diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..99ce574 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react' + +export default class Carousel extends Component{ + render(){ + return( +
+ +
+ +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Cart.js b/src/components/Cart.js new file mode 100644 index 0000000..a4a3324 --- /dev/null +++ b/src/components/Cart.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' + +export default class Cart extends Component{ + render(){ + const item = this.props.cartItem.item + const price = this.props.cartItem.price + const description = this.props.cartItem.description + return( + + ) + } +} \ No newline at end of file diff --git a/src/components/CartItem.js b/src/components/CartItem.js new file mode 100644 index 0000000..7a3c929 --- /dev/null +++ b/src/components/CartItem.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react' + +export default class CartItem extends Component{ + render(){ + return( +
+
+
+

{this.props.order.item}

+
+
+

{this.props.order.description}

+

{this.props.order.price}

+
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/components/Checkout.js b/src/components/Checkout.js new file mode 100644 index 0000000..def840a --- /dev/null +++ b/src/components/Checkout.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react' +import CartItem from './CartItem' + +export default class Checkout extends Component{ + + handleOrder(order){ + console.log(order[0]) + const url = 'http://localhost:3001/orders'; + let data = { + 'Product': order[0].item, + 'Amount': 100, + 'ProductId': 123 + } + + fetch(url, { + method: 'POST', // or 'PUT' + headers:{ + 'Content-Type': 'application/json' + }, + mode: 'no-cors', + body: data + }) + .then(function(res){ console.log(res) }) + .catch(function(res){ console.log(res) }) + } + + render(){ + const orderPanel = this.props.order.map((x,i)=> ) + return( + + //
+ ) + } +} \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..88769f3 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react' + +export default class Footer extends Component{ + render(){ + return( +
+
+
+

Copyright © Your Website 2014

+
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..a8eee32 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import Cart from "../components/Cart" + +export default class Header extends Component{ + + // calculate the cart total + cartTotal = ()=>this.props.cartItems.map((item,i)=>{ + return item.price.replace("$","") + }).reduce((s,c)=>{ + return (Number(s)+Number(c)).toFixed(2)}) + + render(){ + //show the items in the cart + const getCart = this.props.cartItems.map((item,i)=>) + //determine if I should show a checkout button + const checkOutBttn = this.props.cartItems.length!==0 + ? + : {`Waiting on you...\n Go ahead and add something`} + return( + + ) + } +} \ No newline at end of file diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..9b2d758 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,53 @@ +import React, { Component } from "react" +import propType from "prop-types" + +export default class ProductDetail extends Component{ + render(){ + const product = this.props.product + + const ratingStar = (stars)=>{ + let starArr = [] + for (let i = 0; i < stars; i++) { + starArr.push( ) + } + for (let i = 0; i < (5-stars); i++){ + starArr.push() + } + return starArr + } + + return( +
+
+ +
+

{product.price}

+

{product.name} +

+

{product.description}Bootsnipp - http://bootsnipp.com.

+
+
+ +
+
+

{product.reviews} reviews

+

+ {ratingStar(product.rating)} + +

+
+
+
+ ) + } +} + +ProductDetail.propType = { + product: propType.object.isrequired +} \ No newline at end of file diff --git a/src/components/SideBar.js b/src/components/SideBar.js new file mode 100644 index 0000000..3dedc4b --- /dev/null +++ b/src/components/SideBar.js @@ -0,0 +1,16 @@ +import React, { Component } from "react" + +export default class SideBar extends Component{ + render(){ + return( +
+

Shop Name

+ +
+ ) + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index e58303d..83858cd 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,8 @@ import './index.css'; import state from './state'; ReactDOM.render( - , + , document.getElementById('root') );