Skip to content

Commit

Permalink
Merge pull request #29 from deenuy/DG-redux-dev
Browse files Browse the repository at this point in the history 
refactored the code to fix UI/Ux for cart, product create and home sc…
  • Loading branch information
@deenuy
deenuy authored Nov 13, 2020
2 parents 6d82cb8 + bbab4f1 commit 959eb90
Show file tree
Hide file tree
Showing 9 changed files with 441 additions and 148 deletions.
Binary file added frontend/public/imgs/demo-solution.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,10 @@ function App() {
<Route path="/product/:id" exact={true} component={ProductScreen} />
<Route path="/" exact={true} component={HomeScreen} />
<Route path="/cart/:id?" component={CartScreen} />
<Route path="/cart" component={CartScreen} />
</div>
</main>
<footer className="footer">
All rights reserved
Copyright © 2020 Group 3, BCS Coding, University of Toronto. All Rights Reserved.
</footer>
</div>
</BrowserRouter>
Expand Down
93 changes: 54 additions & 39 deletions frontend/src/Screens/CartScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import React, { useEffect } from 'react';
import { addToCart, removeFromCart } from '../actions/cartActions';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
// fontawesome Explicit import
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch, faTrash } from '@fortawesome/free-solid-svg-icons'

function CartScreen(props) {

const cart = useSelector(state => state.cart);
Expand All @@ -21,6 +25,8 @@ function CartScreen(props) {
}
}, []);

console.log('Cart Items: ' + cartItems.length);

const checkoutHandler = () => {
alert("Check-out");
}
Expand All @@ -30,59 +36,68 @@ function CartScreen(props) {
<div className="cart-list">
<ul className="cart-list-container">
<li>
<h3>
<h2>
Shopping Cart
</h3>
<div>
Price
</div>
</li>
{
cartItems.length === 0 ?
</h2>
</li>
{
cartItems.length === 0 ?
<div>
Cart is empty
</div>
:
cartItems.map(item =>
<li key={item._id}>
<div className="cart-image">
<img src={item.image} alt="product" />
</div>
<div className="cart-name">
<div>
<Link to={"/product/" + item.product}>
{item.name}
</Link>
<li className="cart-item" key={item._id}>
<div className="cart-container">
<div className="cart-image">
<img className="cart-item-img" src={item.image} alt="product" />
</div>
<div>
Qty:
<select value={item.qty} onChange={(e) => dispatch(addToCart(item.product, e.target.value))}>
{[...Array(item.countInStock).keys()].map(x =>
<option key={x + 1} value={x + 1}>{x + 1}</option>
)}
</select>
<button type="button" className="button" onClick={() => removeFromCartHandler(item.product)} >
Delete
</button>
<div className="cart-item-details">
<div className="cart-name">
<div>
<Link to={"/product/" + item.product}>
<h3 className="cart-item-title">{item.name}</h3>
</Link>
</div>
<div className="cart-item-stock">
{item.countInStock > 0 ? <div className="item-in-stock">In stock</div> : <div className="item-stock-empty">Unavilable</div> }
</div>
<div className="item-qty">
Qty:
<select className="item-qty-btn" value={item.qty} onChange={(e) => dispatch(addToCart(item.product, e.target.value))}>
{[...Array(item.countInStock).keys()].map(x =>
<option key={x + 1} value={x + 1}>{x + 1}</option>
)}
</select>
</div>
</div>
<div className="item-remove-icon">
<FontAwesomeIcon icon={faTrash} onClick={() => removeFromCartHandler(item.product)} style={{width: "5rem", height: "1.2rem", paddingTop: ".6rem", cursor: "pointer"}} />
{/* <button type="button" className="button-prm" onClick={() => removeFromCartHandler(item.product)} >
Delete
</button> */}
</div>
</div>
<div className="cart-price">
<h3 className="item-price">${item.price * item.qty} </h3>
</div>
</div>
<div className="cart-price">
${item.price}
</div>
</li>
)
}
</ul>
</div>
<div className="cart-action">
<h3>
Subtotal ( {cartItems.reduce((a, c) => a + c.qty, 0)} items)
:
$ {cartItems.reduce((a, c) => a + c.price * c.qty, 0)}
</h3>
<button onClick={checkoutHandler} className="button primary full-width" disabled={cartItems.length === 0}>
Proceed to Checkout
</button>
<div className="cart-checkout">
<div className="cart-action">
<h3>
Subtotal ( {cartItems.reduce((a, c) => a + c.qty, 0)} items)
:
$ {cartItems.reduce((a, c) => a + c.price * c.qty, 0)}
</h3>
<button onClick={checkoutHandler} className="button primary full-width button-prm" disabled={cartItems.length === 0}>
Proceed to Checkout
</button>
</div>
</div>
</div>
)
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/Screens/HomeScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,56 +28,56 @@ function HomeScreen (props){
<ul className="list-unstyled list-inline row">
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Dog")}>
<button className="btn-filter" onClick={() => setPetClass("Dog")}>
<img className="filter-pet" src="/imgs/shop-by-dog.jpg" alt="Dog"/>
</button>
</div>
<p className="filter-name">Dog</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Cat")}>
<button className="btn-filter" onClick={() => setPetClass("Cat")}>
<img className="filter-pet" src="/imgs/shop-by-cat.jpg" alt="Cat"/>
</button>
</div>
<p className="filter-name">Cat</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Fish")}>
<button className="btn-filter" onClick={() => setPetClass("Fish")}>
<img className="filter-pet" src="/imgs/shop-by-fish.jpg" alt="Fish"/>
</button>
</div>
<p className="filter-name">Fish</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Small Pet")}>
<button className="btn-filter" onClick={() => setPetClass("Small Pet")}>
<img className="filter-pet" src="/imgs/shop-by-small-pet.jpg" alt="Small Pet"/>
</button>
</div>
<p className="filter-name">Small Pet</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Reptile")}>
<button className="btn-filter" onClick={() => setPetClass("Reptile")}>
<img className="filter-pet" src="/imgs/shop-by-reptile.jpg" alt="Reptile"/>
</button>
</div>
<p className="filter-name">Reptile</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("Bird")}>
<button className="btn-filter" onClick={() => setPetClass("Bird")}>
<img className="filter-pet" src="/imgs/shop-by-bird.jpg" alt="Bird"/>
</button>
</div>
<p className="filter-name">Bird</p>
</li>
<li className="col-2 col-4-sm text-center">
<div>
<button onClick={() => setPetClass("")}>
All
<button className="btn-all-filter button-prm" onClick={() => setPetClass("")}>
Clear Filter
</button>
</div>
</li>
Expand Down
47 changes: 27 additions & 20 deletions frontend/src/Screens/ProductCRUD_Screen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import { saveProduct, deleteProdcut } from '../actions/productCRUD_Actions';
import {listProducts} from '../actions/productActions';
import { Discovery } from 'aws-sdk';

function ProductsCRUD_Screen(props) {
const [modalVisible, setModalVisible] = useState(false);
Expand Down Expand Up @@ -90,7 +91,7 @@ function ProductsCRUD_Screen(props) {
<div className="content content-margined">
<div className="product-header">
<h3>Products</h3>
<button className="button primary" onClick={() => openModal({})}>
<button className="button-prm" onClick={() => openModal({})}>
Create Product
</button>
</div>
Expand All @@ -99,16 +100,17 @@ function ProductsCRUD_Screen(props) {
<form onSubmit={submitHandler}>
<ul className="form-container">
<li>
<h2>Create Product</h2>
{/* <h2>Create Product</h2> */}
</li>
<li>
{loadingSave && <div>Loading...</div>}
{errorSave && <div>{errorSave}</div>}
</li>

<li>
<label htmlFor="name">Pet Class</label>
<label className="form-label" htmlFor="name">Pet Class</label>
<input
className="form-input"
type="text"
name="petClass"
value={petClass}
Expand All @@ -117,8 +119,9 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="name">Name</label>
<label className="form-label" htmlFor="name">Name</label>
<input
className="form-input"
type="text"
name="name"
value={name}
Expand All @@ -127,8 +130,9 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="price">Price</label>
<label className="form-label" htmlFor="price">Price</label>
<input
className="form-input"
type="text"
name="price"
value={price}
Expand All @@ -137,8 +141,9 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="image">Image</label>
<label className="form-label" htmlFor="image">Image</label>
<input
className="form-input"
type="text"
name="image"
value={image}
Expand All @@ -149,8 +154,9 @@ function ProductsCRUD_Screen(props) {
{uploading && <div>Uploading...</div>}
</li>
<li>
<label htmlFor="brand">Brand</label>
<label className="form-label" htmlFor="brand">Brand</label>
<input
className="form-input"
type="text"
name="brand"
value={brand}
Expand All @@ -159,8 +165,9 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="countInStock">CountInStock</label>
<label className="form-label" htmlFor="countInStock">CountInStock</label>
<input
className="form-input"
type="text"
name="countInStock"
value={countInStock}
Expand All @@ -169,8 +176,9 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="name">Category</label>
<label className="form-label" htmlFor="name">Category</label>
<input
className="form-input"
type="text"
name="category"
value={category}
Expand All @@ -179,28 +187,27 @@ function ProductsCRUD_Screen(props) {
></input>
</li>
<li>
<label htmlFor="description">Description</label>
<label className="form-label" htmlFor="description">Description</label>
<textarea
className="form-input"
name="description"
value={description}
id="description"
onChange={(e) => setDescription(e.target.value)}
></textarea>
</li>
<li>
<button type="submit" className="button primary">
<div className="form-submit">
<button type="submit" className="button-prm btns">
{id ? 'Update' : 'Create'}
</button>
</li>
<li>
<button
type="button"
onClick={() => setModalVisible(false)}
className="button secondary"
className="button-prm btns"
>
Back
</button>
</li>
</div>
</ul>
</form>
</div>
Expand All @@ -211,7 +218,7 @@ function ProductsCRUD_Screen(props) {
<table className="table">
<thead>
<tr>
<th>ID</th>
<th>Item</th>
<th>Pet Class</th>
<th>Name</th>
<th>Price</th>
Expand All @@ -223,18 +230,18 @@ function ProductsCRUD_Screen(props) {
<tbody>
{products.map((product) => (
<tr key={product._id}>
<td>{product._id}</td>
<td><img className="product-thumbnail" src={product.image} alt=""/></td>
<td>{product.petClass}</td>
<td>{product.name}</td>
<td>{product.price}</td>
<td>{product.category}</td>
<td>{product.brand}</td>
<td>
<button className="button" onClick={() => openModal(product)}>
<button className="button-prm" onClick={() => openModal(product)}>
Edit
</button>{' '}
<button
className="button"
className="button-prm"
onClick={() => deleteHandler(product)}
>
Delete
Expand Down
Loading

0 comments on commit 959eb90

Please sign in to comment.