From 99e0faf8acef59c19c8835daaeebcf2e7e5471d4 Mon Sep 17 00:00:00 2001
From: koretskiyav <koretskiyav@gmail.com>
Date: Fri, 29 Oct 2021 20:08:55 +0300
Subject: [PATCH 1/5] add checkout page

---
 package.json                    |  1 +
 src/components/app/app.js       |  5 +-
 src/components/basket/basket.js |  9 ++--
 src/components/header/header.js |  5 +-
 src/index.js                    |  5 +-
 yarn.lock                       | 91 +++++++++++++++++++++++++++++++--
 6 files changed, 105 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index c4bee90..7769a7d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.5",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.1",
     "redux-devtools-extension": "^2.13.9",
diff --git a/src/components/app/app.js b/src/components/app/app.js
index b10a175..5e460dd 100644
--- a/src/components/app/app.js
+++ b/src/components/app/app.js
@@ -1,13 +1,16 @@
 import { PureComponent } from 'react';
+import { Route } from 'react-router-dom';
 import Restaurants from '../restaurants';
 import Header from '../header';
+import Basket from '../basket';
 
 export default class App extends PureComponent {
   render() {
     return (
       <div>
         <Header />
-        <Restaurants />
+        <Route path="/checkout" component={Basket} />
+        <Route path="/restaurants" component={Restaurants} />
       </div>
     );
   }
diff --git a/src/components/basket/basket.js b/src/components/basket/basket.js
index 4b6e320..ac2f8e0 100644
--- a/src/components/basket/basket.js
+++ b/src/components/basket/basket.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import styles from './basket.module.css';
 import itemStyles from './basket-item/basket-item.module.css';
@@ -35,9 +36,11 @@ function Basket({ title = 'Basket', total, orderProducts }) {
           <p>{`${total} $`}</p>
         </div>
       </div>
-      <Button primary block>
-        checkout
-      </Button>
+      <Link to="/checkout">
+        <Button primary block>
+          checkout
+        </Button>
+      </Link>
     </div>
   );
 }
diff --git a/src/components/header/header.js b/src/components/header/header.js
index 8d5c5c3..c0e8fce 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -1,9 +1,12 @@
+import { Link } from 'react-router-dom';
 import { ReactComponent as Logo } from '../../icons/logo.svg';
 import styles from './header.module.css';
 
 const Header = () => (
   <header className={styles.header}>
-    <Logo />
+    <Link to="/restaurants">
+      <Logo />
+    </Link>
   </header>
 );
 
diff --git a/src/index.js b/src/index.js
index 8eb413e..9543dee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 
 import App from './components/app';
@@ -10,7 +11,9 @@ window.store = store;
 
 ReactDOM.render(
   <Provider store={store}>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </Provider>,
   document.getElementById('root')
 );
diff --git a/yarn.lock b/yarn.lock
index c9b0f17..4f34631 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1157,7 +1157,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -5580,6 +5580,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5589,7 +5601,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6322,6 +6334,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7159,7 +7176,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7355,6 +7372,14 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8157,6 +8182,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -9030,7 +9062,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.0, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9263,7 +9295,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9285,6 +9317,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.1"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9622,6 +9683,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
@@ -10741,6 +10807,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -11158,6 +11234,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 1ae3e10819bc2595ff58ee0479fdb06f0a427293 Mon Sep 17 00:00:00 2001
From: koretskiyav <koretskiyav@gmail.com>
Date: Fri, 29 Oct 2021 20:24:48 +0300
Subject: [PATCH 2/5] add restaurants routing

---
 src/components/app/app.js                     |  2 +-
 src/components/restaurants/restaurants.js     | 42 +++++++++----------
 .../restaurants/restaurants.module.css        | 19 +++++++++
 3 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 src/components/restaurants/restaurants.module.css

diff --git a/src/components/app/app.js b/src/components/app/app.js
index 5e460dd..fe20519 100644
--- a/src/components/app/app.js
+++ b/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>
     );
   }
diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js
index 79ed192..7d9fe2c 100644
--- a/src/components/restaurants/restaurants.js
+++ b/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,7 +52,6 @@ Restaurants.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  activeId: activeIdRestaurantSelector(state),
   restaurants: restaurantsListSelector(state),
   loading: restaurantsLoadingSelector(state),
   loaded: restaurantsLoadedSelector(state),
@@ -58,7 +59,6 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
   loadRestaurants,
-  changeRestaurant,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Restaurants);
diff --git a/src/components/restaurants/restaurants.module.css b/src/components/restaurants/restaurants.module.css
new file mode 100644
index 0000000..f93fc10
--- /dev/null
+++ b/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);
+}

From 36ee8d76404ee1299156161921e7e0f6ee9a456e Mon Sep 17 00:00:00 2001
From: koretskiyav <koretskiyav@gmail.com>
Date: Fri, 29 Oct 2021 20:32:09 +0300
Subject: [PATCH 3/5] add Switch

---
 src/components/app/app.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/app/app.js b/src/components/app/app.js
index fe20519..a04bc54 100644
--- a/src/components/app/app.js
+++ b/src/components/app/app.js
@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import Restaurants from '../restaurants';
 import Header from '../header';
 import Basket from '../basket';
@@ -9,8 +9,12 @@ export default class App extends PureComponent {
     return (
       <div>
         <Header />
-        <Route path="/checkout" component={Basket} />
-        <Route path="/restaurants/:restId" component={Restaurants} />
+        <Switch>
+          <Route path="/" exact component={() => <h2>Home page</h2>} />
+          <Route path="/checkout" component={Basket} />
+          <Route path="/restaurants/:restId" component={Restaurants} />
+          <Route component={() => <h2>404 - Not found :(</h2>} />
+        </Switch>
       </div>
     );
   }

From f2562b2b2f60cec8423434ba56e64dcbd412bccf Mon Sep 17 00:00:00 2001
From: koretskiyav <koretskiyav@gmail.com>
Date: Fri, 29 Oct 2021 20:43:32 +0300
Subject: [PATCH 4/5] add Redirect

---
 src/components/app/app.js                 |  2 +-
 src/components/restaurants/restaurants.js | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/app/app.js b/src/components/app/app.js
index a04bc54..eebabc8 100644
--- a/src/components/app/app.js
+++ b/src/components/app/app.js
@@ -12,7 +12,7 @@ export default class App extends PureComponent {
         <Switch>
           <Route path="/" exact component={() => <h2>Home page</h2>} />
           <Route path="/checkout" component={Basket} />
-          <Route path="/restaurants/:restId" component={Restaurants} />
+          <Route path="/restaurants" component={Restaurants} />
           <Route component={() => <h2>404 - Not found :(</h2>} />
         </Switch>
       </div>
diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js
index 7d9fe2c..bf17a3c 100644
--- a/src/components/restaurants/restaurants.js
+++ b/src/components/restaurants/restaurants.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Loader from '../loader';
@@ -13,7 +13,7 @@ import { loadRestaurants } from '../../redux/actions';
 
 import styles from './restaurants.module.css';
 
-function Restaurants({ restaurants, loading, loaded, loadRestaurants, match }) {
+function Restaurants({ restaurants, loading, loaded, loadRestaurants }) {
   useEffect(() => {
     if (!loading && !loaded) loadRestaurants();
   }, [loading, loaded, loadRestaurants]);
@@ -21,8 +21,6 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants, match }) {
   if (loading) return <Loader />;
   if (!loaded) return 'No data :(';
 
-  const { restId } = match.params;
-
   return (
     <div>
       <div className={styles.tabs}>
@@ -37,7 +35,12 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants, match }) {
           </NavLink>
         ))}
       </div>
-      <Restaurant id={restId} />
+      <Switch>
+        <Route path="/restaurants/:restId">
+          {({ match }) => <Restaurant id={match.params.restId} />}
+        </Route>
+        <Redirect to={`/restaurants/${restaurants[0]?.id}`} />
+      </Switch>
     </div>
   );
 }

From 0bb656bf9d8516f1bc0316217391359b988a0d9b Mon Sep 17 00:00:00 2001
From: koretskiyav <koretskiyav@gmail.com>
Date: Fri, 29 Oct 2021 20:52:36 +0300
Subject: [PATCH 5/5] add HT6

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index d11fdd6..c52dcfa 100644
--- a/README.md
+++ b/README.md
@@ -50,3 +50,9 @@
 5. При загрузках показывать лоадеры, все грузить максимально низко, там где эти данные нужны
 6. Все данные грузить только один раз (не загружать повторно данные, которые уже есть)
 7. (Опционально) переписать все на **immer**
+
+## HT6
+
+1. Сделать reviews/menu отдельными роутами (**/restaurants/:id/reviews**)
+2. Сделать редиректы со **/** и с **/restaurants/:id** на страницу ресторана с меню
+3. В корзине сделать продукты линками на их ресторан