add restaurants routing

src/components/app/app.js

@@ -10,7 +10,7 @@ export default class App extends PureComponent {
       <div>
         <Header />
         <Route path="/checkout" component={Basket} />
-        <Route path="/restaurants" component={Restaurants} />
+        <Route path="/restaurants/:restId" component={Restaurants} />
       </div>
     );
   }

src/components/restaurants/restaurants.js

@@ -1,41 +1,43 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
-import Tabs from '../tabs';
 import Loader from '../loader';
 import {
   restaurantsListSelector,
-  activeIdRestaurantSelector,
   restaurantsLoadingSelector,
   restaurantsLoadedSelector,
 } from '../../redux/selectors';
-import { loadRestaurants, changeRestaurant } from '../../redux/actions';
+import { loadRestaurants } from '../../redux/actions';
 
-function Restaurants({
-  restaurants,
-  activeId,
-  loading,
-  loaded,
-  loadRestaurants,
-  changeRestaurant,
-}) {
+import styles from './restaurants.module.css';
+
+function Restaurants({ restaurants, loading, loaded, loadRestaurants, match }) {
   useEffect(() => {
     if (!loading && !loaded) loadRestaurants();
   }, [loading, loaded, loadRestaurants]);
 
-  const tabs = useMemo(
-    () => restaurants.map(({ id, name }) => ({ id, label: name })),
-    [restaurants]
-  );
-
   if (loading) return <Loader />;
   if (!loaded) return 'No data :(';
 
+  const { restId } = match.params;
+
   return (
     <div>
-      <Tabs tabs={tabs} onChange={changeRestaurant} activeId={activeId} />
-      <Restaurant id={activeId} />
+      <div className={styles.tabs}>
+        {restaurants.map(({ id, name }) => (
+          <NavLink
+            key={id}
+            to={`/restaurants/${id}`}
+            className={styles.tab}
+            activeClassName={styles.active}
+          >
+            {name}
+          </NavLink>
+        ))}
+      </div>
+      <Restaurant id={restId} />
     </div>
   );
 }
@@ -50,15 +52,13 @@ Restaurants.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  activeId: activeIdRestaurantSelector(state),
   restaurants: restaurantsListSelector(state),
   loading: restaurantsLoadingSelector(state),
   loaded: restaurantsLoadedSelector(state),
 });
 
 const mapDispatchToProps = {
   loadRestaurants,
-  changeRestaurant,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Restaurants);

src/components/restaurants/restaurants.module.css

@@ -0,0 +1,19 @@
+.tabs {
+  height: auto;
+  text-align: center;
+  padding: 12px;
+  background-color: var(--grey);
+}
+
+.tabs span {
+  cursor: pointer;
+}
+
+.tab {
+  padding: 4px 12px;
+  color: var(--black);
+}
+
+.tab.active {
+  border-bottom: 1px solid var(--black);
+}