Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop UI/Ux and features for adding to cart, product create and home screen #29

Merged
merged 1 commit into from
Nov 13, 2020
Merged

Develop UI/Ux and features for adding to cart, product create and home screen #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontend/public/imgs/demo-solution.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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