From deeeecc7bc71941d73a9b2e15c786300c3c8b83a Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Tue, 21 Nov 2017 00:08:02 +0100 Subject: [PATCH 1/6] added classnames --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3ceee4c..dc36a68 100644 --- a/package.json +++ b/package.json @@ -24,13 +24,14 @@ }, "homepage": "https://github.com/coopcycle/coopcycle-js", "dependencies": { + "classnames": "^2.2.5", "form-data": "^2.2.0", "isomorphic-fetch": "^2.2.1", "localforage": "^1.5.0", "lodash": "^4.17.4", "lodash.groupby": "^4.6.0", - "react-scroll": "^1.6.4", - "object-hash": "^1.1.8" + "object-hash": "^1.1.8", + "react-scroll": "^1.6.4" }, "devDependencies": { "babel-core": "^6.26.0", From 39ee74b61b3a473bf59dc865e4a775875f8c4e08 Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Tue, 21 Nov 2017 00:11:47 +0100 Subject: [PATCH 2/6] added cartLastItem reducer --- src/actions/index.js | 5 ++++- src/reducers/index.js | 16 ++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 1707672..14b8c96 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -7,6 +7,10 @@ export const CART_ADDRESS_KEY = 'cartAddress'; export const DELIVERY_DATE_KEY = 'deliveryDate'; export const ORDER_KEY = 'order'; +export const removeLastCartItem = () => { + return { type: 'REMOVE_LAST_CART_ITEM' } +} + export const addToCart = (menuItem, selectedModifiers = {}) => { return { type: 'ADD_TO_CART', menuItem, selectedModifiers}; } @@ -184,4 +188,3 @@ export const checkDistance = () => (dispatch, getState) => { export const setDeliveryDate = (date) => ({ type: 'SET_DELIVERY_DATE', date }) export const resetCheckout = () => ({ type: 'RESET_CHECKOUT' }) - diff --git a/src/reducers/index.js b/src/reducers/index.js index d6000ba..9ecef8d 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,6 +2,18 @@ import { combineReducers } from 'redux' import _ from 'lodash'; import hash from 'object-hash'; +const cartLastItem = (state = null, action) => { + console.log('cdqs', action.type) + switch (action.type) { + case 'ADD_TO_CART': + return action.menuItem + case 'REMOVE_LAST_CART_ITEM': + return null + default: + return state + } +} + const cartItems = (state = [], action) => { let newState, cartItem; @@ -26,7 +38,7 @@ const cartItems = (state = [], action) => { } return newState; case 'REMOVE_FROM_CART': - return state.filter((item) => item !== action.cartItem); + return state.filter(item => item !== action.cartItem); case 'RESET_CHECKOUT': return []; default: @@ -199,7 +211,7 @@ const deliveryDate = (state = null, action) => { } } -export default combineReducers({ +export default combineReducers({ cartLastItem, cartItems, cartAddress, client, From 9d97abd999edcc26fb3866dd240ca8b6ec0aec50 Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Tue, 21 Nov 2017 00:12:25 +0100 Subject: [PATCH 3/6] added active attributes for list group items --- src/components/Cart.js | 27 +++++++++++++++++++-------- src/components/MenuItem.js | 37 ++++++++++++++++++++----------------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/src/components/Cart.js b/src/components/Cart.js index 298d145..cbbafcf 100644 --- a/src/components/Cart.js +++ b/src/components/Cart.js @@ -1,3 +1,4 @@ +import classnames from 'classnames' import React, { Component } from 'react'; import { ListGroup, ListGroupItem, Alert, Button } from 'react-bootstrap'; import { bindActionCreators } from 'redux'; @@ -36,12 +37,15 @@ class Cart extends Component { } renderCartItems() { + const { cartItems, cartLastItem } = this.props return ( - { this.props.cartItems.map((item, key) => - + { cartItems.map((item, key) => + { item.menuItem.name } - ×{ item.quantity } + ×{ item.quantity } @@ -107,15 +109,16 @@ class MenuItem extends Component { } -const mapStateToProps = state => { - return { - } -} -const mapDispatchToProps = dispatch => { - return { - onItemClick: (item, modifiers = {}) => { dispatch(addToCart(item, modifiers)) } - } -} -export default connect(mapStateToProps, mapDispatchToProps)(MenuItem); +export default connect( + ({ cartLastItem }) => ({ cartLastItem }), + dispatch => { + return { + onItemClick: (item, modifiers = {}) => { + dispatch(addToCart(item, modifiers)) + setTimeout(() => dispatch(removeLastCartItem()), 1000) + } + } + } +)(MenuItem); From b838076bf033059bf75b82db426986fe0dfbb7a4 Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Tue, 21 Nov 2017 00:12:44 +0100 Subject: [PATCH 4/6] added little transition style --- src/styles/index.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 0d4f03e..cc3de4d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -201,3 +201,15 @@ $cart-heading-height: 40px; .text-center { text-align: center; } + +.list-group-item { + transition: all 0.4s ease-out; +} + +.quantity { + transition: all 0.4s ease-out; + &--last { + color: white; + transition: all 0.4s ease-out; + } +} From b698ec227c76996de137c72705fd82a7c4bf93fa Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Tue, 21 Nov 2017 00:13:08 +0100 Subject: [PATCH 5/6] updated yarn.lock --- yarn.lock | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/yarn.lock b/yarn.lock index 75951ca..8adc8d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -42,16 +42,7 @@ ajv@^4.9.1: co "^4.6.0" json-stable-stringify "^1.0.1" -ajv@^5.0.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda" - dependencies: - co "^4.6.0" - fast-deep-equal "^1.0.0" - fast-json-stable-stringify "^2.0.0" - json-schema-traverse "^0.3.0" - -ajv@^5.1.0, ajv@^5.1.5: +ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5: version "5.2.3" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2" dependencies: @@ -225,13 +216,7 @@ async@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" -async@^2.1.2: - version "2.5.0" - resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d" - dependencies: - lodash "^4.14.0" - -async@^2.1.5: +async@^2.1.2, async@^2.1.5: version "2.6.0" resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4" dependencies: @@ -2366,10 +2351,6 @@ fast-deep-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff" -fast-json-stable-stringify@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2" - fastparse@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" @@ -3237,11 +3218,7 @@ is-binary-path@^1.0.0: dependencies: binary-extensions "^1.0.0" -is-buffer@^1.0.2: - version "1.1.6" - resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" - -is-buffer@^1.1.5: +is-buffer@^1.0.2, is-buffer@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc" From d3937e658d1cbe4d677f006de3a2b3792c6327ac Mon Sep 17 00:00:00 2001 From: erwanledoux Date: Fri, 1 Dec 2017 17:09:18 +0100 Subject: [PATCH 6/6] added add icon and disabled background-color for other menu items --- src/components/MenuItem.js | 9 +++++++-- src/styles/index.scss | 35 +++++++++++++++++++++++++++++++++++ src/utils.js | 1 - 3 files changed, 42 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 6171770..0a0c3b3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -85,8 +85,13 @@ class MenuItem extends Component { const { cartLastItem, item } = this.props const isActive = item['@id'] === (cartLastItem && cartLastItem['@id']) return ( - 0 ? () => this.showModal() : () => !cartLastItem && this.props.onItemClick(item) }> - { item.name } { item.offers.price } € + + 0 + ? () => this.showModal() + : () => !cartLastItem && this.props.onItemClick(item) }> + { item.name } { item.offers.price } € { item.modifiers.length > 0 ? this.closeModal() }>
this.stopPropagation(evt) }> diff --git a/src/styles/index.scss b/src/styles/index.scss index cc3de4d..619bf09 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -202,8 +202,43 @@ $cart-heading-height: 40px; text-align: center; } +.add-icon { + cursor: pointer; + border-radius: 50%; + border: 1px solid $main-blue-light; + color: $main-blue-light; + display: inline-block; + font-size: 20px; + margin-right: 1rem; + height: 30px; + text-align: center; + width: 30px; + &:hover { + background-color: $main-blue-light; + transition: all 0.4s ease-out; + } + &:focus { + border-color: white; + color: white; + } + &--disabled { + &:hover { + background-color: transparent; + } + cursor: not-allowed; + opacity: 0.5; + } +} + +.price { + line-height: 30px; +} + .list-group-item { transition: all 0.4s ease-out; + &.disabled { + background-color: transparent; + } } .quantity { diff --git a/src/utils.js b/src/utils.js index 9b0d838..e37b589 100644 --- a/src/utils.js +++ b/src/utils.js @@ -32,5 +32,4 @@ const cartCountItems = cartItems => { }) } - export { cartTotal, cartCountItems }