Ryan

README.md

@@ -223,3 +223,6 @@ production server to be cluttered up with dev dependencies like
 git-tracking to be cluttered with production build files like
 `bundle.js`! By doing these steps, we make sure our development and
 production environments both stay nice and clean!
+
+"webpack": "^4.16.4",
+"webpack-cli": "^3.1.0",

client/app.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import {Navbar} from './components'
 import Routes from './routes'
+// import 'bootstrap/dist/css/bootstrap.min.css'
 
 const App = () => {
   return (

client/components/AdminPage.js

@@ -0,0 +1,35 @@
+import React, {useState} from 'react'
+import {connect} from 'react-redux'
+import { fetchAllUsers } from '../store/users'
+
+
+
+class AdminPage extends React.Component {
+  componentDidMount() {
+    this.props.fetchAllUsers()
+  }
+
+  render() {
+    const users = this.props.users
+
+    return (
+      <div>
+        hello
+      </div>
+    )
+  }
+}
+
+const mapState = state => {
+  return {
+    users: state.users
+  }
+}
+
+const mapDispatch = dispatch => {
+  return {
+    fetchAllUsers: () => dispatch(fetchAllUsers())
+  }
+}
+
+export default connect(mapState, mapDispatch)(AdminPage)

client/components/AllPizzas.js

@@ -0,0 +1,121 @@
+import React, {useState, useEffect} from 'react'
+import PizzaCard from './PizzaCard'
+import FilterPizzas from './FilterPizzas'
+import axios from 'axios'
+
+
+
+const AllPizzas = () => {
+  // const [loading, setLoading] = useState(true)
+  const [pizzas, setPizzas] = useState([])
+  const [typeFilter, setTypeFilter] = useState('')
+
+  useEffect(() => {
+    async function getPizzas() {
+      try {
+        const res = await axios.get('/api/pizzas')
+        const info = res.data
+        setPizzas(info)
+      } catch (error) {
+        console.log('there was a problem')
+      }
+    }
+    getPizzas()
+  }, [])
+
+  const pizzaCities = Array.from(new Set(pizzas.map((el) => {
+    return el.cityOfPizza
+  })))
+
+  const pizzasToShow = pizzas.filter((pizza) => {
+    if(typeFilter && typeFilter !== 'All') {
+      return pizza.cityOfPizza === typeFilter
+    }
+    return true
+  })
+
+  return (
+      <div>
+        <FilterPizzas pizzaCities={pizzaCities} setSelected={setTypeFilter} />
+        <div className="allpizzas">
+          {pizzasToShow.map(pizza => {
+            return <PizzaCard key={pizza.id} pizza={pizza} />
+          })}
+        </div>
+      </div>
+  )
+}
+
+ export default AllPizzas
+
+
+
+// import React, {useState, useEffect} from 'react'
+// import {connect, useDispatch, useSelector } from 'react-redux'
+// import {fetchPizzas} from '../store/pizzas'
+// import PizzaCard from './PizzaCard'
+// import FilterPizzas from './FilterPizzas'
+
+
+ // Notice that we're exporting the AllPizzas component twice. The named export
+// (below) is not connected to Redux, while the default export (at the very
+// bottom) is connected to Redux. Our tests should cover _both_ cases.
+//useDispatch, useSelector
+
+
+// export class AllPizzas extends React.Component {
+//   constructor(props) {
+//     super(props)
+
+//     this.loading = true;
+
+//   }
+
+
+//   componentDidMount() {
+
+//     this.loading = false
+//     this.props.fetchPizzas()
+//   }
+//   componentDidUpdate(prevprops) {
+//     if (prevprops.pizzas !== this.props.pizzas) {
+//       console.log('updated AllPizzas');
+//     }
+//   }
+//   render() {
+
+//     const pizzas = this.props.pizzas
+//     const pizzaCities = Array.from(new Set(pizzas.map((el) => {
+//       return el.cityOfPizza
+//     })))
+
+
+
+//     return this.loading ? (
+//       <img src="https://fullstackacademy.slack.com/files/U02CSK206LS/F034UU5EYAJ/image.png" />
+//     ) : (
+//       <div>
+//         <FilterPizzas pizzaCities={pizzaCities} />
+//         <div className="allpizzas">
+//           {pizzas.map(pizza => {
+//             return <PizzaCard key={pizza.id} pizza={pizza} />
+//           })}
+//         </div>
+//       </div>
+//     )
+//   }
+// }
+
+// const mapState = state => {
+//   return {
+//     pizzas: state.pizzas
+//   }
+// }
+
+// const mapDispatch = dispatch => {
+//   return {
+//     fetchPizzas: () => dispatch(fetchPizzas())
+//   }
+// }
+
+// export default connect(mapState, mapDispatch)(AllPizzas)

client/components/Carousel.js

@@ -0,0 +1,37 @@
+import React, {useState, useEffect } from 'react'
+import Carousel from 'react-bootstrap/Carousel'
+import { useDispatch, useSelector} from 'react-redux'
+import { Link, useHistory } from 'react-router-dom'
+
+
+const CarouselSlide = props => {
+  const {pizzas} = props
+   const history = useHistory()
+  return (
+    <div className="carousel">
+        <Carousel fade controls={false}>
+          {pizzas.map(pizza => {
+            return (
+              <Carousel.Item
+                interval={1000}
+                className="carosuelImage"
+                key={pizza.id}
+              >
+
+                <img className="carouselslide" src={pizza.imageUrl} />
+
+              </Carousel.Item>
+            )
+          })}
+        </Carousel>
+      </div>
+  )
+}
+
+export default CarouselSlide
+
+
+
+
+
+

client/components/Cart.js

@@ -0,0 +1,118 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Link} from 'react-router-dom'
+import Table from 'react-bootstrap/Table'
+import Button from 'react-bootstrap/Button';
+import {updateOrderItem, deletePizza} from '../store/cart'
+
+
+class Cart extends React.Component {
+  constructor(props) {
+    super(props)
+    this.loading = true
+    this.state = {
+      cart: this.props.cart,
+    }
+    this.changeQuantity = this.changeQuantity.bind(this)
+    this.deletePizza = this.deletePizza.bind(this)
+  }
+
+  changeQuantity(event) {
+    const pizzaId = Number(event.target.name)
+    const targetPizza = this.props.cart.filter(pizza => {
+      return pizza.id === pizzaId
+    })[0]
+    targetPizza.quantity = event.target.value
+    this.props.updateOrderItem(targetPizza)
+  }
+
+  deletePizza(id) {
+    this.props.deletePizza(id)
+  }
+
+  componentDidMount() {
+    this.loading = false
+    this.setState({
+      cart: this.props.cart
+    })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.cart !== this.props.cart) {
+      this.setState({cart: this.props.cart})
+    }
+  }
+
+  render() {
+    const pizzas = this.state.cart.length > 0 ? this.state.cart : []
+    return this.loading ? (
+      <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" />
+    ) : (
+      <div id="cart-page">
+      <div className="cart">
+        <h1>Cart</h1>
+        <Table striped border hover>
+          <thead>
+            <tr>
+              <th>Item</th>
+              <th>Quantity</th>
+              <th>Subtotal</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {pizzas.map(pizza => {
+              return (
+                <tr key={pizza.id}>
+                  <td>{pizza.name}</td>
+                  <td>
+                    <input
+                      type="number"
+                      name={pizza.id}
+                      className="cart-item-quantity"
+                      value={pizza.quantity}
+                      min="1"
+                      onChange={this.changeQuantity}
+                    />
+                  </td>
+                  <td>${Math.round(pizza.quantity * pizza.price * 100) / 100}</td>
+                  <td className="delete-pizza" onClick={() => this.deletePizza(pizza.id)}>delete</td>
+                </tr>
+              )
+            })}
+            <tr><td>Total: </td><td/><td>$
+            {pizzas.length > 0
+              ? Math.round(
+                  pizzas.reduce((prev, pizza) => {
+                    return prev + pizza.quantity * pizza.price
+                  }, 0) * 100
+                ) / 100
+              : 0}</td><td/></tr>
+          </tbody>
+        </Table>
+      </div>
+        <div id="checkout-section">
+          <div />
+          <Link to="/checkout" >
+            <Button variant="success">Checkout!</Button>
+          </Link>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    cart: state.cart
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateOrderItem: pizza => dispatch(updateOrderItem(pizza)),
+    deletePizza: id => dispatch(deletePizza(id))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Cart)