From a3ff84b48dfe456c9002e09ec24b153923454a5f Mon Sep 17 00:00:00 2001 From: igaryok Date: Thu, 31 Oct 2019 13:48:29 +0200 Subject: [PATCH 1/8] refactored buttons in footter modal window --- src/components/Error/Error.js | 2 +- src/components/Error/Error.scss | 1 + src/components/Order/Order.js | 35 +++++------- src/components/Order/Order.scss | 49 ++++------------- src/components/Order/index.js | 11 ++-- src/components/OrderFooter/OrderFooter.js | 60 +++++++++++++++++++++ src/components/OrderFooter/OrderFooter.scss | 59 ++++++++++++++++++++ src/components/OrderFooter/index.js | 21 ++++++++ src/store/actions.js | 10 +++- src/store/rootReducer.js | 3 ++ src/store/selector.js | 16 ++++++ 11 files changed, 197 insertions(+), 70 deletions(-) create mode 100644 src/components/OrderFooter/OrderFooter.js create mode 100644 src/components/OrderFooter/OrderFooter.scss create mode 100644 src/components/OrderFooter/index.js diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js index 6a41e28..b869ab4 100644 --- a/src/components/Error/Error.js +++ b/src/components/Error/Error.js @@ -8,7 +8,7 @@ export const Error = (props) => { return (
-

Sorry, something wrong(

+

something wrong

{message}

diff --git a/src/components/Error/Error.scss b/src/components/Error/Error.scss index fbd3c17..9d5921f 100644 --- a/src/components/Error/Error.scss +++ b/src/components/Error/Error.scss @@ -3,6 +3,7 @@ .error { @extend %absolute-center; flex-flow: column nowrap; + padding: 10px; &__text { font-size: 30px; diff --git a/src/components/Order/Order.js b/src/components/Order/Order.js index fd41cba..1d512d0 100644 --- a/src/components/Order/Order.js +++ b/src/components/Order/Order.js @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import Loader from '../Loader'; import Error from '../Error'; +import { OrderFooter } from '../OrderFooter'; import './Order.scss'; export const Order = ({ - deleteOrder, + hideModalWindow, order, isLoading, error, @@ -17,7 +18,6 @@ export const Order = ({ } const { imageUrl, title, itemDescription } = order; - const countItem = 1; const srcImage = imageUrl || './images/no_image.png'; const srcTitle = title || 'no-image icon'; @@ -27,35 +27,26 @@ export const Order = ({ {error && } {!error && ( <> - {srcTitle} +
+ {srcTitle} +

{title}

{itemDescription}

-
- icon minus -
{countItem}
- icon plus -
- +
) }
({ isLoading: selectIsLoading(state), }); -const mapDispatchToProps = dispatch => ({ - deleteOrder: () => { - dispatch(setModalWindow(false)); - dispatch(setOrder(null)); - }, -}); +const mapDispatchToProps = { + hideModalWindow, +}; const Enhanced = connect( mapStateToProps, diff --git a/src/components/OrderFooter/OrderFooter.js b/src/components/OrderFooter/OrderFooter.js new file mode 100644 index 0000000..b7824a5 --- /dev/null +++ b/src/components/OrderFooter/OrderFooter.js @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +import './OrderFooter.scss'; + +export const OrderFooter = ({ hideModalWindow, orderAmount, currencyCode }) => { + const [countItem, changeCountItem] = useState(1); + + return ( + <> +
+ icon minus { + if (countItem > 1) { + changeCountItem(countItem - 1); + } + }} + onKeyPress={() => changeCountItem(countItem + 1)} + role="presentation" + /> +
{countItem}
+ icon plus changeCountItem(countItem + 1)} + onKeyPress={() => changeCountItem(countItem + 1)} + role="presentation" + /> +
+ + + ); +}; + +OrderFooter.propTypes = { + hideModalWindow: PropTypes.func.isRequired, + orderAmount: PropTypes.number.isRequired, + currencyCode: PropTypes.string.isRequired, +}; diff --git a/src/components/OrderFooter/OrderFooter.scss b/src/components/OrderFooter/OrderFooter.scss new file mode 100644 index 0000000..38071c7 --- /dev/null +++ b/src/components/OrderFooter/OrderFooter.scss @@ -0,0 +1,59 @@ +.counter { + display: flex; + align-items: center; + + &__button { + + border-radius: 50%; + + transition: box-shadow 300ms; + + margin-right: 17px; + + &:hover { + cursor: pointer; + box-shadow: 0 0 10px rgba(0,0,0,0.5); + } + + &:active { + box-shadow: inset 0 0 10px rgba(0,0,0,0.5); + } + } + + &__item { + margin-right: 17px; + } +} + +.button-order { + display: flex; + justify-content: flex-end; + + height: 55px; + width: 100%; + background: #247a00; + color: #fff; + + font-weight: 500; + + transition: box-shadow 300ms; + + &:hover { + cursor: pointer; + box-shadow: 0 0 10px rgba(36,122,0, 0.5); + } + + &:active { + box-shadow: inset 0 0 10px rgba(36,122,0, 0.5); + } + + &__amount { + margin-right: 16px; + display: block; + white-space: nowrap; + } + + &__wrapper-number { + width: 100%; + } +} diff --git a/src/components/OrderFooter/index.js b/src/components/OrderFooter/index.js new file mode 100644 index 0000000..2a91dec --- /dev/null +++ b/src/components/OrderFooter/index.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; + +import { OrderFooter } from './OrderFooter'; +import { hideModalWindow } from '../../store/actions'; +import { selectOrderAmount, selectCurencyCode } from '../../store/selector'; + +const mapStateToProps = state => ({ + orderAmount: selectOrderAmount(state), + currencyCode: selectCurencyCode(state), +}); + +const mapDispatchToProps = { + hideModalWindow, +}; + +const Enhanced = connect( + mapStateToProps, + mapDispatchToProps +)(OrderFooter); + +export { Enhanced as OrderFooter }; diff --git a/src/store/actions.js b/src/store/actions.js index a0d89aa..0eae277 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -33,16 +33,22 @@ const stopLoading = () => ({ type: ACTION_TYPES.STOP_LOADING, }); -export const setOrder = uuid => ({ +const setOrder = uuid => ({ type: ACTION_TYPES.SET_ORDER, payload: uuid, }); -export const setModalWindow = bool => ({ +const setModalWindow = bool => ({ type: ACTION_TYPES.SET_MODAL_WINDOW, payload: bool, }); +export const hideModalWindow = () => (dispatch) => { + dispatch(setModalWindow(false)); + dispatch(setOrder(null)); + dispatch(setRestaurantsError(null)); +}; + export const loadRestaurants = () => (dispatch) => { dispatch(startLoading()); fetch(`${BASE_URL}restaurants/`) diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js index 1893864..8949a18 100644 --- a/src/store/rootReducer.js +++ b/src/store/rootReducer.js @@ -7,6 +7,7 @@ const initialState = { error: null, order: null, showModalWindow: false, + orderAmount: null, }; export function rootReducer(state = initialState, action) { @@ -60,10 +61,12 @@ export function rootReducer(state = initialState, action) { case ACTION_TYPES.SET_ORDER: { const { payload } = action; + const price = payload ? payload.price : null; return ({ ...state, order: payload, + orderAmount: price, }); } diff --git a/src/store/selector.js b/src/store/selector.js index 5330065..b916b1b 100644 --- a/src/store/selector.js +++ b/src/store/selector.js @@ -92,3 +92,19 @@ export const selectStateModalWindow = createSelector( rootSelector, ({ showModalWindow }) => showModalWindow ); + +export const selectOrderAmount = createSelector( + rootSelector, + ({ orderAmount }) => orderAmount +); + +export const selectCurencyCode = createSelector( + rootSelector, + ({ restaurantPageData }) => { + if (!restaurantPageData) { + return []; + } + + return restaurantPageData.currencyCode; + } +); From 94a844d8010077d62893fb402e186b82672f2c2f Mon Sep 17 00:00:00 2001 From: igaryok Date: Thu, 31 Oct 2019 20:47:51 +0200 Subject: [PATCH 2/8] refactoring modalWindow --- src/components/CardItem/CardItem.js | 14 ++++- src/components/CardItem/index.js | 3 +- src/components/Order/Order.js | 51 +++++++++++-------- src/components/Order/Order.scss | 13 ++--- src/components/Order/index.js | 2 + .../OrderCustomizationsSection.js | 34 +++++++++++++ .../OrderCustomizationsSection.scss | 22 ++++++++ .../OrderCustomizationsSection/index.js | 1 + src/components/OrderFooter/OrderFooter.js | 15 +++++- src/store/actions.js | 6 +++ src/store/rootReducer.js | 20 ++++++-- src/store/selector.js | 5 ++ 12 files changed, 152 insertions(+), 34 deletions(-) create mode 100644 src/components/OrderCustomizationsSection/OrderCustomizationsSection.js create mode 100644 src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss create mode 100644 src/components/OrderCustomizationsSection/index.js diff --git a/src/components/CardItem/CardItem.js b/src/components/CardItem/CardItem.js index 1c30b27..a4b5286 100644 --- a/src/components/CardItem/CardItem.js +++ b/src/components/CardItem/CardItem.js @@ -11,6 +11,7 @@ export const CardItem = ({ restaurantCurency, uuid, createOrder, + setAltData, }) => { const srcImage = imageUrl || './images/no_image.png'; const srcTitle = title || 'no-image icon'; @@ -19,7 +20,17 @@ export const CardItem = ({
createOrder(event.target.id)} + onClick={ + (event) => { + createOrder(event.target.id); + setAltData({ + title, + imageUrl, + itemDescription: description, + price, + }); + } + } onKeyPress={event => createOrder(event.target.id)} role="presentation" > @@ -45,6 +56,7 @@ CardItem.propTypes = { price: PropTypes.number.isRequired, restaurantCurency: PropTypes.string, createOrder: PropTypes.func.isRequired, + setAltData: PropTypes.shape().isRequired, }; CardItem.defaultProps = { diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js index 53cd66c..c99f9b7 100644 --- a/src/components/CardItem/index.js +++ b/src/components/CardItem/index.js @@ -4,7 +4,7 @@ import { CardItem } from './CardItem'; import { selectRestaurantCurency, } from '../../store/selector'; -import { loadMenuItem } from '../../store/actions'; +import { loadMenuItem, setAltDataModalWindow } from '../../store/actions'; const mapStateToProps = state => ({ restaurantCurency: selectRestaurantCurency(state), @@ -12,6 +12,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ createOrder: uuid => dispatch(loadMenuItem(uuid)), + setAltData: data => dispatch(setAltDataModalWindow(data)), }); const Enhanced = connect( diff --git a/src/components/Order/Order.js b/src/components/Order/Order.js index 1d512d0..d4faf67 100644 --- a/src/components/Order/Order.js +++ b/src/components/Order/Order.js @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import Loader from '../Loader'; -import Error from '../Error'; import { OrderFooter } from '../OrderFooter'; +import { OrderCustomizationsSection } from '../OrderCustomizationsSection'; import './Order.scss'; @@ -12,38 +12,46 @@ export const Order = ({ order, isLoading, error, + altData, }) => { if (isLoading) { return ; } - const { imageUrl, title, itemDescription } = order; + const { + imageUrl, + title, + itemDescription, + customizationsList = [], + } = !error ? order : altData; + const srcImage = imageUrl || './images/no_image.png'; const srcTitle = title || 'no-image icon'; return (