diff --git a/.gitignore b/.gitignore index 04c5395..63d9bd4 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ node_modules npm-debug.log* yarn-debug.log* yarn-error.log* + +.idea/ diff --git a/src/components/basket/basket-item/basket-item.js b/src/components/basket/basket-item/basket-item.js index 670e09c..8ef584b 100644 --- a/src/components/basket/basket-item/basket-item.js +++ b/src/components/basket/basket-item/basket-item.js @@ -4,11 +4,13 @@ import cn from 'classnames'; import { increment, decrement, remove } from '../../../redux/actions'; import Button from '../../button'; import styles from './basket-item.module.css'; +import { Link } from 'react-router-dom'; function BasketItem({ product, amount, subtotal, + restaurantId, increment, decrement, remove, @@ -16,7 +18,7 @@ function BasketItem({ return (
- {product.name} + {product.name}
diff --git a/src/components/basket/basket.js b/src/components/basket/basket.js index 35abbe1..1198189 100644 --- a/src/components/basket/basket.js +++ b/src/components/basket/basket.js @@ -21,12 +21,13 @@ function Basket({ title = 'Basket', total, orderProducts }) { return (

{title}

- {orderProducts.map(({ product, amount, subtotal }) => ( + {orderProducts.map(({ product, amount, subtotal, restaurantId }) => ( ))}
diff --git a/src/components/restaurant/restaurant.js b/src/components/restaurant/restaurant.js index e8b4f2b..cc1491e 100644 --- a/src/components/restaurant/restaurant.js +++ b/src/components/restaurant/restaurant.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { useRouteMatch, Switch, Route, Redirect } from 'react-router-dom'; import PropTypes from 'prop-types'; import { createStructuredSelector } from 'reselect'; @@ -11,20 +12,38 @@ import Tabs from '../tabs'; import { averageRatingSelector } from '../../redux/selectors'; const Restaurant = ({ id, name, menu, reviews, averageRating }) => { + const MENU = 'menu'; + const REVIEWS = 'reviews'; + const match = useRouteMatch(); const tabs = [ - { title: 'Menu', content: }, + { + title: 'Menu', + id: `${id}_menu`, + to: `${match.url}/${MENU}`, + }, { title: 'Reviews', - content: , + id: `${id}_reviews`, + to: `${match.url}/${REVIEWS}`, }, ]; + /*as an option, active tab can be stored at redux store*/ return (
{!!averageRating && } + + + + + + + + +
); }; diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js index be0284f..b55bb35 100644 --- a/src/components/restaurants/restaurants.js +++ b/src/components/restaurants/restaurants.js @@ -1,31 +1,25 @@ import React from 'react'; import { connect } from 'react-redux'; -import { NavLink } from 'react-router-dom'; import { createStructuredSelector } from 'reselect'; import PropTypes from 'prop-types'; import Restaurant from '../restaurant'; import { restaurantsListSelector } from '../../redux/selectors'; -import styles from './restaurants.module.css'; +import Tabs from '../tabs'; const Restaurants = ({ restaurants, match }) => { const { restId } = match.params; const restaurant = restaurants.find((restaurant) => restaurant.id === restId); + const tabs = restaurants.map((restaurant) => ({ + id: restaurant.id, + title: restaurant.name, + to: `/restaurants/${restaurant.id}`, + })); + return ( <> -
- {restaurants.map(({ id, name }) => ( - - {name} - - ))} -
+ ); diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index b96b039..71cf3e2 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,28 +1,25 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import cn from 'classnames'; - import styles from './tabs.module.css'; +import { NavLink } from 'react-router-dom'; const Tabs = ({ tabs }) => { - const [activeTab, setActiveTab] = useState(0); - - const { content } = tabs[activeTab]; - return ( <>
- {tabs.map(({ title }, index) => ( - setActiveTab(index)} - > - {title} - - ))} + {tabs.map(({ id, title, to }) => { + return ( + + {title} + + ); + })}
- {content} ); }; @@ -31,7 +28,6 @@ Tabs.propTypes = { tabs: PropTypes.arrayOf( PropTypes.shape({ title: PropTypes.string.isRequired, - content: PropTypes.element.isRequired, }).isRequired ).isRequired, }; diff --git a/src/components/tabs/tabs.module.css b/src/components/tabs/tabs.module.css index ecf138e..675101b 100644 --- a/src/components/tabs/tabs.module.css +++ b/src/components/tabs/tabs.module.css @@ -5,8 +5,10 @@ background-color: var(--grey); } -.tabs span { +.tabs a { cursor: pointer; + text-decoration: none; + color: #1d1d1d; } .tab { diff --git a/src/redux/selectors.js b/src/redux/selectors.js index 8a02dc0..50cfb62 100644 --- a/src/redux/selectors.js +++ b/src/redux/selectors.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect'; -import { getById } from './utils'; +import { findIdInListOfObjects, getById } from './utils'; const restaurantsSelector = (state) => state.restaurants.entities; const productsSelector = (state) => state.products.entities; @@ -24,10 +24,16 @@ export const reviewsLoadedSelector = (state, props) => export const usersLoadingSelector = (state) => state.users.loading; export const usersLoadedSelector = (state) => state.users.loaded; +export const restaurantsListSelector = createSelector( + restaurantsSelector, + Object.values +); + export const orderProductsSelector = createSelector( productsSelector, orderSelector, - (products, order) => { + restaurantsListSelector, + (products, order, restaurants) => { return Object.keys(order) .filter((productId) => order[productId] > 0) .map((productId) => products[productId]) @@ -35,6 +41,7 @@ export const orderProductsSelector = createSelector( product, amount: order[product.id], subtotal: order[product.id] * product.price, + restaurantId: findIdInListOfObjects(restaurants, 'menu', product.id), })); } ); @@ -45,10 +52,6 @@ export const totalSelector = createSelector( orderProducts.reduce((acc, { subtotal }) => acc + subtotal, 0) ); -export const restaurantsListSelector = createSelector( - restaurantsSelector, - Object.values -); export const productAmountSelector = getById(orderSelector, 0); export const productSelector = getById(productsSelector); const reviewSelector = getById(reviewsSelector); diff --git a/src/redux/utils.js b/src/redux/utils.js index 03f5df7..dde043e 100644 --- a/src/redux/utils.js +++ b/src/redux/utils.js @@ -9,3 +9,10 @@ export const getById = (selector, defaultValue) => (_, props) => props.id, (entity, id) => entity[id] || defaultValue ); + +export const findIdInListOfObjects = (list, prop, id) => { + const restaurant = list.find((higher) => { + return higher[prop].find((item) => item === id); + }); + return restaurant && restaurant.id; +};