Skip to content

Commit

Permalink
Merge pull request #148 from DIM-Squad/registerd-user-cart-#113
Browse files Browse the repository at this point in the history
Registered user cart #113
  • Loading branch information
Ezugworie08 authored Sep 18, 2018
2 parents 821f9e5 + 74ddcf5 commit 8df1b2f
Show file tree
Hide file tree
Showing 16 changed files with 1,469 additions and 1,854 deletions.
1 change: 0 additions & 1 deletion client/components/Cart.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import CartItem from './CartItem'

class Cart extends Component {
render() {
//console.log('PROPS', this.props)
return (
<Container>
<Table padded>
Expand Down
9 changes: 8 additions & 1 deletion client/components/CartItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {Table, Header, Button, Image} from 'semantic-ui-react'
import {removeFromCartAction, updateQuantityAction} from '../store/cart'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {formatPrice} from '../utils/formatPrice'

class CartItem extends Component {
constructor(props) {
Expand Down Expand Up @@ -32,6 +33,7 @@ class CartItem extends Component {
}
render() {
const {item} = this.props
//console.log('ITEM', item)
return (
<Table.Row>
<Table.Cell>
Expand All @@ -42,7 +44,7 @@ class CartItem extends Component {
</Header.Content>
</Header>
</Table.Cell>
<Table.Cell singleLine>${item.price}</Table.Cell>
<Table.Cell singleLine>{formatPrice(item.price)}</Table.Cell>
<Table.Cell>
<form onSubmit={this.changeQuantity}>
<input
Expand Down Expand Up @@ -82,3 +84,8 @@ const styles = {
}

export default connect(null, mapDispatchToProps)(CartItem)

// flower pizza http://www.chattanoogasciencefair.org/wp-content/uploads/flower-art-prints-floral-pizza-art-print-paulfuentes-society6.jpg
// ananas http://www.chattanoogasciencefair.org/wp-content/uploads/food-art-prints-food-art-prints-society6.jpg
//beach http://www.chattanoogasciencefair.org/wp-content/uploads/art-prints-com-photography-art-prints-society6.jpg
// https://images-na.ssl-images-amazon.com/images/I/81oxnWrMihL._SY500_.jpg
281 changes: 206 additions & 75 deletions client/components/navbar.js
Original file line number Diff line number Diff line change
@@ -1,92 +1,223 @@
import React from 'react'
import PropTypes from 'prop-types'
import React, {Component} from 'react'
//import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {logout} from '../store'
import store, {logout, postCart, emptyCart} from '../store'
import {SearchBar} from './'
import CategoryDropdown from './CategoryDropdown'
import {Menu, Icon, Button} from 'semantic-ui-react'
//import {postCart} from '../store/cart'

const Navbar = ({handleClick, isLoggedIn, userId}) => (
<Menu attached="top" stackable>
<Menu.Item as="h1">
<span>I </span>
<span>
<Link to="/products">
{' '}
<Icon name="heart" />
</Link>
</span>{' '}
<span> Art</span>
</Menu.Item>
<Menu.Item as={SearchBar} type="products" />
<Menu.Item as={CategoryDropdown} />
<Menu.Menu position="right">
<Menu.Item as={Link} to="/home">
Home
</Menu.Item>
{isLoggedIn ? (
<React.Fragment>
<Menu.Item as={Link} to={`/users/${userId}`}>
My Account
</Menu.Item>
<Menu.Item as="a" href="#" onClick={handleClick}>
Logout
</Menu.Item>
<Menu.Item>
<Link to="/cart">
<Button color="pink">
<Icon name="shopping cart" />
</Button>
</Link>
</Menu.Item>
</React.Fragment>
) : (
<React.Fragment>
{/* The navbar will show these links before you log in */}
<Menu.Item as={Link} to="/login">
Login
</Menu.Item>
<Menu.Item as={Link} to="/signup">
Sign Up
</Menu.Item>
<Menu.Item>
<Link to="/cart">
<Button color="pink">
<Icon name="shopping cart" />
</Button>
</Link>
</Menu.Item>
</React.Fragment>
)}
</Menu.Menu>
</Menu>
)
class Navbar extends Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
}

handleClick() {
this.props.logout()
this.props.postCart(this.props.cart, this.props.user.id)
this.props.emptyCart()
}
render() {
return (
<Menu attached="top" stackable>
<Menu.Item as="h1">
<span>I </span>
<span>
<Icon name="heart" />
</span>{' '}
<span> Art</span>
</Menu.Item>
<Menu.Item as={SearchBar} type="products" />
<Menu.Item as={CategoryDropdown} />
<Menu.Menu position="right">
{this.props.isLoggedIn ? (
<React.Fragment>
<Menu.Item as={Link} to="/home">
{/* The navbar will show these links after you log in */}
Home
</Menu.Item>
<Menu.Item as={Link} to={`/users/${this.props.user.id}`}>
My Account
</Menu.Item>
<Menu.Item as="a" href="#" onClick={this.handleClick}>
Logout
</Menu.Item>
<Menu.Item>
<Link to="/cart">
<Button color="pink">
<Icon name="shopping cart" />
</Button>
</Link>
</Menu.Item>
</React.Fragment>
) : (
<React.Fragment>
{/* The navbar will show these links before you log in */}
<Menu.Item as={Link} to="/login">
Login
</Menu.Item>
<Menu.Item as={Link} to="/signup">
Sign Up
</Menu.Item>
<Menu.Item>
<Link to="/cart">
<Button color="pink">
<Icon name="shopping cart" />
</Button>
</Link>
</Menu.Item>
</React.Fragment>
)}
</Menu.Menu>
</Menu>
)
}
}
// const Navbar = ({handleClick, isLoggedIn, userId}) => (
// <Menu attached="top" stackable>
// <Menu.Item as="h1">
// <span>I </span>
// <span>
// <Link to="/products">
// {' '}
// <Icon name="heart" />
// </Link>
// </span>{' '}
// <span> Art</span>
// </Menu.Item>
// <Menu.Item as={SearchBar} type="products" />
// <Menu.Item as={CategoryDropdown} />
// <Menu.Menu position="right">
// <Menu.Item as={Link} to="/home">
// Home
// </Menu.Item>
// {isLoggedIn ? (
// <React.Fragment>
// <Menu.Item as={Link} to={`/users/${userId}`}>
// My Account
// </Menu.Item>
// <Menu.Item as="a" href="#" onClick={handleClick}>
// Logout
// </Menu.Item>
// <Menu.Item>
// <Link to="/cart">
// <Button color="pink">
// <Icon name="shopping cart" />
// </Button>
// </Link>
// </Menu.Item>
// </React.Fragment>
// ) : (
// <React.Fragment>
// {/* The navbar will show these links before you log in */}
// <Menu.Item as={Link} to="/login">
// Login
// </Menu.Item>
// <Menu.Item as={Link} to="/signup">
// Sign Up
// </Menu.Item>
// <Menu.Item>
// <Link to="/cart">
// <Button color="pink">
// <Icon name="shopping cart" />
// </Button>
// </Link>
// </Menu.Item>
// </React.Fragment>
// )}
// </Menu.Menu>
// </Menu>
// )

/**
* CONTAINER
*/
const mapState = state => {
return {
isLoggedIn: !!state.user.id,
userId: state.user.id
}
}
const mapState = state => ({
isLoggedIn: !!state.user.id,
cart: state.cart,
user: state.user,
userId: state.user.id
})

const mapDispatch = dispatch => {
return {
handleClick() {
dispatch(logout())
}
}
}
const mapDispatch = dispatch => ({
logout: () => dispatch(logout()),
postCart: (cartItems, userId) => dispatch(postCart(cartItems, userId)),
emptyCart: () => dispatch(emptyCart())
// dispatch(postCart(cartItems))
//dispatch(logout())
})

export default connect(mapState, mapDispatch)(Navbar)

/**
* PROP TYPES
*/
Navbar.propTypes = {
handleClick: PropTypes.func.isRequired,
isLoggedIn: PropTypes.bool.isRequired
}
// Navbar.propTypes = {
// handleClick: PropTypes.func.isRequired,
// isLoggedIn: PropTypes.bool.isRequired
// }

// const Navbar = ({ handleClick, isLoggedIn, cart }) => (
// <Menu attached="top" stackable>
// <Menu.Item as="h1">
// <span>I </span>
// <span>
// <Icon name="heart" />
// </span>{' '}
// <span> Art</span>
// </Menu.Item>
// <Menu.Item as={SearchBar} type="products" />
// <Menu.Item as={CategoryDropdown} />
// <Menu.Menu position="right">
// {isLoggedIn ? (
// <React.Fragment>
// <Menu.Item as={Link} to="/home">
// {/* The navbar will show these links after you log in */}
// Home
// </Menu.Item>
// <Menu.Item as="a" href="#" onClick={handleClick}>
// Logout
// </Menu.Item>
// <Menu.Item>
// <Link to="/cart">
// <Button color="pink">
// <Icon name="shopping cart" />
// </Button>
// </Link>
// </Menu.Item>
// </React.Fragment>
// ) : (
// <React.Fragment>
// {/* The navbar will show these links before you log in */}
// <Menu.Item as={Link} to="/login">
// Login
// </Menu.Item>
// <Menu.Item as={Link} to="/signup">
// Sign Up
// </Menu.Item>
// </React.Fragment>
// )}
// </Menu.Menu>
// </Menu>
// )

// /**
// * CONTAINER
// */
// const mapState = state => {
// return {
// isLoggedIn: !!state.user.id,
// cart: state.cart
// }
// }

// const mapDispatch = dispatch => {
// return {
// handleClick() {
// // dispatch(postCart(cartItems))
// dispatch(logout())
// }
// }
// }
1 change: 0 additions & 1 deletion client/components/user-home.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {ProductCollection, AdminHome} from './'
export const UserHome = props => {
const {firstName, isAdmin} = props

console.log(props)
return (
<Container>
<Divider hidden />
Expand Down
Loading

0 comments on commit 8df1b2f

Please sign in to comment.