From 8a879c670ededc9967b73c090feef8043db754d5 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 15 Oct 2019 14:31:38 +0300
Subject: [PATCH 01/34] part solution

---
 .eslintrc.js                                  |   3 +
 package.json                                  |   8 +-
 public/images/app-store.png                   | Bin 0 -> 3658 bytes
 public/images/arrow-down.svg                  |   3 +
 public/images/fb.svg                          |   3 +
 public/images/google-play.png                 | Bin 0 -> 4109 bytes
 public/images/ig.svg                          |   5 +
 public/images/logo-white.svg                  |   4 +
 public/images/logo.svg                        |   4 +
 public/images/place.svg                       |   4 +
 public/images/search.svg                      |   3 +
 public/images/tw.svg                          |   3 +
 public/images/world.svg                       |   3 +
 public/index.html                             |  10 ++
 src/App.css                                   |   1 -
 src/App.js                                    |  19 ++-
 src/App.scss                                  |   6 +
 src/components/Error/Error.js                 |  27 +++++
 src/components/Error/Error.scss               |  20 ++++
 src/components/Error/index.js                 |   3 +
 src/components/Footer/Footer.js               | 110 ++++++++++++++++++
 src/components/Footer/Footer.scss             |  86 ++++++++++++++
 src/components/Footer/index.js                |   3 +
 src/components/Header/Header.js               |  88 ++++++++++++++
 src/components/Header/Header.scss             |  66 +++++++++++
 src/components/Header/index.js                |   3 +
 src/components/Input/Input.js                 |  81 +++++++++++++
 src/components/Input/Input.scss               |  34 ++++++
 src/components/Input/index.js                 |   3 +
 src/components/Loader/Loader.js               |  21 ++++
 src/components/Loader/Loader.scss             | 105 +++++++++++++++++
 src/components/Loader/index.js                |   3 +
 .../RestaurantCard/RestaurantCard.js          |  39 +++++++
 .../RestaurantCard/RestaurantCard.scss        |  34 ++++++
 src/components/RestaurantCard/index.js        |   3 +
 .../RestaurantListPage.scss                   |   5 +
 .../RestaurantsListPage.js                    |  70 +++++++++++
 src/components/RestaurantsListPage/index.js   |  25 ++++
 src/components/Select/Select.js               |  60 ++++++++++
 src/components/Select/Select.scss             |  40 +++++++
 src/components/Select/index.js                |   3 +
 src/index.js                                  |   6 +-
 src/store/actions.js                          |  33 ++++++
 src/store/index.js                            |  11 ++
 src/store/rootReducer.js                      |  48 ++++++++
 src/store/selector.js                         |  26 +++++
 src/styles/extends.scss                       |  17 +++
 src/styles/index.scss                         |  37 ++++++
 src/styles/utils.scss                         |   2 +
 src/styles/variables.scss                     |   5 +
 50 files changed, 1189 insertions(+), 7 deletions(-)
 create mode 100644 public/images/app-store.png
 create mode 100644 public/images/arrow-down.svg
 create mode 100644 public/images/fb.svg
 create mode 100644 public/images/google-play.png
 create mode 100644 public/images/ig.svg
 create mode 100644 public/images/logo-white.svg
 create mode 100644 public/images/logo.svg
 create mode 100644 public/images/place.svg
 create mode 100644 public/images/search.svg
 create mode 100644 public/images/tw.svg
 create mode 100644 public/images/world.svg
 delete mode 100644 src/App.css
 create mode 100644 src/App.scss
 create mode 100644 src/components/Error/Error.js
 create mode 100644 src/components/Error/Error.scss
 create mode 100644 src/components/Error/index.js
 create mode 100644 src/components/Footer/Footer.js
 create mode 100644 src/components/Footer/Footer.scss
 create mode 100644 src/components/Footer/index.js
 create mode 100644 src/components/Header/Header.js
 create mode 100644 src/components/Header/Header.scss
 create mode 100644 src/components/Header/index.js
 create mode 100644 src/components/Input/Input.js
 create mode 100644 src/components/Input/Input.scss
 create mode 100644 src/components/Input/index.js
 create mode 100644 src/components/Loader/Loader.js
 create mode 100644 src/components/Loader/Loader.scss
 create mode 100644 src/components/Loader/index.js
 create mode 100644 src/components/RestaurantCard/RestaurantCard.js
 create mode 100644 src/components/RestaurantCard/RestaurantCard.scss
 create mode 100644 src/components/RestaurantCard/index.js
 create mode 100644 src/components/RestaurantsListPage/RestaurantListPage.scss
 create mode 100644 src/components/RestaurantsListPage/RestaurantsListPage.js
 create mode 100644 src/components/RestaurantsListPage/index.js
 create mode 100644 src/components/Select/Select.js
 create mode 100644 src/components/Select/Select.scss
 create mode 100644 src/components/Select/index.js
 create mode 100644 src/store/actions.js
 create mode 100644 src/store/index.js
 create mode 100644 src/store/rootReducer.js
 create mode 100644 src/store/selector.js
 create mode 100644 src/styles/extends.scss
 create mode 100644 src/styles/index.scss
 create mode 100644 src/styles/utils.scss
 create mode 100644 src/styles/variables.scss

diff --git a/.eslintrc.js b/.eslintrc.js
index b377e14..83d6f4b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,6 @@
 module.exports = {
   extends: '@mate-academy/eslint-config-react',
+  "rules": {
+    "import/prefer-default-export": 0,
+  },
 };
diff --git a/package.json b/package.json
index 7bd01de..d537744 100755
--- a/package.json
+++ b/package.json
@@ -7,11 +7,17 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "classnames": "^2.2.6",
+    "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.1",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",
diff --git a/public/images/app-store.png b/public/images/app-store.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c1ddae8277dfe0e40641beb52a726c5a614deb1
GIT binary patch
diff --git a/public/images/arrow-down.svg b/public/images/arrow-down.svg
new file mode 100644
index 0000000..2576a2a
--- /dev/null
+++ b/public/images/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4175 0L0 1.34583L7 8L14 1.34583L12.5825 0L7 5.30417L1.4175 0Z" fill="white"/>
+</svg>
diff --git a/public/images/fb.svg b/public/images/fb.svg
new file mode 100644
index 0000000..22565b3
--- /dev/null
+++ b/public/images/fb.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1164 0H0.883093C0.395706 0 0 0.394915 0 0.883093V15.1164C0 15.6046 0.395706 16 0.883093 16H8.54587V9.80386H6.46091V7.38879H8.54587V5.60785C8.54587 3.54159 9.80755 2.41586 11.6512 2.41586C12.5351 2.41586 13.293 2.48199 13.5141 2.5107V4.67049L12.2353 4.67101C11.2328 4.67101 11.0395 5.1476 11.0395 5.84654V7.388H13.4311L13.1184 9.80281H11.0392V15.9992H15.1161C15.604 15.9992 16 15.6032 16 15.1164V0.882566C15.9997 0.394915 15.6043 0 15.1164 0Z" fill="white"/>
+</svg>
diff --git a/public/images/google-play.png b/public/images/google-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e527dbf1b8e82d56b0f91cc756c6ca217a5457
GIT binary patch
diff --git a/public/images/ig.svg b/public/images/ig.svg
new file mode 100644
index 0000000..7c3e6a0
--- /dev/null
+++ b/public/images/ig.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9175 0H4.74833C2.31372 0 0.333008 1.98081 0.333008 4.41542V11.5846C0.333008 14.0193 2.31372 16 4.74833 16H11.9175C14.3523 16 16.333 14.0192 16.333 11.5846V4.41542C16.3331 1.98081 14.3523 0 11.9175 0ZM14.9135 11.5846C14.9135 13.2365 13.5695 14.5804 11.9176 14.5804H4.74833C3.09649 14.5805 1.75261 13.2365 1.75261 11.5846V4.41542C1.75261 2.76358 3.09649 1.4196 4.74833 1.4196H11.9175C13.5694 1.4196 14.9134 2.76358 14.9134 4.41542V11.5846H14.9135Z" fill="white"/>
+<path d="M8.33276 3.87734C6.05941 3.87734 4.20996 5.72679 4.20996 8.00014C4.20996 10.2734 6.05941 12.1227 8.33276 12.1227C10.6061 12.1227 12.4556 10.2734 12.4556 8.00014C12.4556 5.72679 10.6061 3.87734 8.33276 3.87734ZM8.33276 10.7031C6.84227 10.7031 5.62956 9.49053 5.62956 8.00004C5.62956 6.50947 6.84218 5.29685 8.33276 5.29685C9.82333 5.29685 11.036 6.50947 11.036 8.00004C11.036 9.49053 9.82324 10.7031 8.33276 10.7031Z" fill="white"/>
+<path d="M12.6289 2.67383C12.3554 2.67383 12.0867 2.78456 11.8936 2.97857C11.6995 3.17163 11.5879 3.44041 11.5879 3.71487C11.5879 3.98847 11.6996 4.25715 11.8936 4.45116C12.0866 4.64423 12.3554 4.7559 12.6289 4.7559C12.9034 4.7559 13.1712 4.64423 13.3652 4.45116C13.5592 4.25715 13.67 3.98838 13.67 3.71487C13.67 3.44041 13.5592 3.17163 13.3652 2.97857C13.1722 2.78456 12.9034 2.67383 12.6289 2.67383Z" fill="white"/>
+</svg>
diff --git a/public/images/logo-white.svg b/public/images/logo-white.svg
new file mode 100644
index 0000000..c3894d1
--- /dev/null
+++ b/public/images/logo-white.svg
@@ -0,0 +1,4 @@
+<svg width="145" height="24" viewBox="0 0 145 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.8341 9.17115C64.682 9.17115 63.1554 10.8551 63.1554 13.44V22.922H59.8702V6.23213H63.1161V8.27016C63.5164 7.59468 64.0902 7.03857 64.7778 6.65947C65.4655 6.28037 66.242 6.09207 67.0269 6.1141H68.2072V9.17115H66.8341ZM57.6 14.5771C57.6 9.6 54.059 5.87803 49.2669 5.87803C48.1346 5.88572 47.0151 6.11721 45.9726 6.55919C44.9301 7.00117 43.9854 7.64491 43.1926 8.45338C42.3999 9.26185 41.7748 10.2191 41.3534 11.27C40.932 12.321 40.7225 13.4449 40.737 14.5771C40.737 19.5502 44.5731 23.3115 49.5777 23.3115C50.9757 23.3379 52.3595 23.0278 53.6125 22.4075C54.8656 21.7871 55.9511 20.8746 56.7777 19.7469L54.3934 18C53.8464 18.7634 53.1227 19.383 52.284 19.8058C51.4453 20.2285 50.5168 20.4419 49.5777 20.4275C48.2402 20.4212 46.9493 19.936 45.9388 19.0597C44.9283 18.1835 44.2651 16.9743 44.0695 15.6511H57.6079L57.6 14.5771ZM44.1403 13.0466C44.7266 10.501 46.7607 8.7777 49.2275 8.7777C51.6944 8.7777 53.7246 10.501 54.2754 13.0466H44.1403ZM30.3305 5.87803C29.2326 5.87896 28.1458 6.09744 27.1328 6.52086C26.1198 6.94428 25.2008 7.56424 24.4289 8.34492V0H21.1436V22.922H24.3895V20.8052C25.962 22.396 28.1016 23.2974 30.3384 23.3115C31.4986 23.3361 32.6522 23.1289 33.7313 22.7019C34.8104 22.2749 35.7935 21.6368 36.6228 20.8249C37.4521 20.0131 38.1109 19.0438 38.5607 17.974C39.0106 16.9042 39.2423 15.7553 39.2423 14.5948C39.2423 13.4342 39.0106 12.2854 38.5607 11.2155C38.1109 10.1457 37.4521 9.17644 36.6228 8.36458C35.7935 7.55271 34.8104 6.91458 33.7313 6.4876C32.6522 6.06062 31.4986 5.85338 30.3384 5.87803H30.3305ZM30.0944 20.3764C28.9493 20.3818 27.8284 20.047 26.8739 19.4144C25.9194 18.7818 25.1743 17.8798 24.7332 16.8231C24.2921 15.7663 24.1749 14.6024 24.3964 13.4789C24.6179 12.3554 25.1681 11.323 25.9773 10.5127C26.7864 9.70246 27.8181 9.15082 28.9413 8.92779C30.0644 8.70477 31.2286 8.82042 32.2859 9.26007C33.3433 9.69972 34.2462 10.4435 34.8801 11.3972C35.5141 12.3508 35.8504 13.4713 35.8466 14.6164C35.8476 15.3717 35.6995 16.1198 35.4107 16.8177C35.1219 17.5156 34.6981 18.1496 34.1636 18.6833C33.6292 19.217 32.9946 19.6399 32.2963 19.9278C31.598 20.2156 30.8497 20.3627 30.0944 20.3607V20.3764ZM9.04525 20.219C12.2164 20.219 14.6793 17.7875 14.6793 14.1443V0H18.0826V22.922H14.7187V20.7541C13.9328 21.5664 12.9902 22.2107 11.9481 22.6483C10.906 23.0858 9.78596 23.3074 8.65574 23.2997C3.76525 23.2997 0 19.7351 0 14.3292V0H3.46623V14.1639C3.46623 17.8269 5.82689 20.219 9.04525 20.219Z" fill="white"/>
+<path d="M76.3789 0H92.4589V3.93443H80.7225V9.52131H92.1323V13.322H80.7225V19.0033H92.4589V22.9377H76.3789V0ZM136.867 23.3508C141.797 23.3508 144.574 20.9902 144.574 17.7482C144.574 15.4387 142.93 13.7154 139.487 12.9679L135.848 12.2243C133.735 11.8308 133.07 11.4374 133.07 10.6505C133.07 9.63148 134.089 9.0059 135.966 9.0059C138 9.0059 139.507 9.55279 139.9 11.4334H144.165C143.933 7.89246 141.387 5.55541 136.225 5.55541C131.764 5.55541 128.632 7.39672 128.632 10.9652C128.632 13.4321 130.355 15.0374 134.073 15.8203L138.142 16.7607C139.747 17.0754 140.176 17.5082 140.176 18.1731C140.176 19.2315 138.964 19.8964 137.004 19.8964C134.542 19.8964 133.133 19.3495 132.586 17.4689H128.298C128.923 21.002 131.543 23.3508 136.867 23.3508ZM127.058 22.922H122.443C119.547 22.922 117.942 21.12 117.942 18.8459V9.83607H114.696V5.99606H117.958V1.17639H122.246V5.99606H127.058V9.83607H122.246V17.7482C122.246 18.6492 122.872 19.082 123.852 19.082H127.058V22.922ZM108.566 6.00394V7.53049C107.057 6.25411 105.142 5.55677 103.164 5.56328C101.981 5.53838 100.804 5.75002 99.7032 6.18579C98.6024 6.62156 97.5996 7.27269 96.7537 8.10102C95.9077 8.92935 95.2357 9.91821 94.7768 11.0096C94.318 12.1011 94.0817 13.2731 94.0817 14.4571C94.0817 15.641 94.318 16.813 94.7768 17.9045C95.2357 18.9959 95.9077 19.9848 96.7537 20.8131C97.5996 21.6414 98.6024 22.2925 99.7032 22.7283C100.804 23.1641 101.981 23.3757 103.164 23.3508C105.142 23.3594 107.058 22.6618 108.566 21.3836V22.9141H112.843V5.99606L108.566 6.00394ZM103.519 19.6367C102.493 19.6484 101.487 19.3549 100.628 18.7933C99.7692 18.2318 99.0969 17.4277 98.6964 16.4832C98.2958 15.5387 98.1852 14.4964 98.3784 13.4888C98.5716 12.4812 99.0601 11.5539 99.7816 10.8245C100.503 10.0952 101.425 9.59686 102.431 9.39285C103.436 9.18883 104.48 9.28834 105.428 9.67875C106.377 10.0691 107.188 10.7328 107.759 11.5854C108.33 12.438 108.634 13.4409 108.633 14.4669C108.64 15.1432 108.512 15.814 108.257 16.4405C108.002 17.0671 107.626 17.6369 107.149 18.1169C106.673 18.597 106.106 18.9778 105.481 19.2373C104.857 19.4968 104.187 19.6299 103.511 19.6289L103.519 19.6367Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..7418753
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,4 @@
+<svg width="145" height="24" viewBox="0 0 145 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.8341 9.17115C64.682 9.17115 63.1554 10.8551 63.1554 13.44V22.922H59.8702V6.23213H63.1161V8.27016C63.5164 7.59468 64.0902 7.03857 64.7778 6.65947C65.4655 6.28037 66.242 6.09207 67.0269 6.1141H68.2072V9.17115H66.8341ZM57.6 14.5771C57.6 9.6 54.059 5.87803 49.2669 5.87803C48.1346 5.88572 47.0151 6.11721 45.9726 6.55919C44.9301 7.00117 43.9854 7.64491 43.1926 8.45338C42.3999 9.26185 41.7748 10.2191 41.3534 11.27C40.932 12.321 40.7225 13.4449 40.737 14.5771C40.737 19.5502 44.5731 23.3115 49.5777 23.3115C50.9757 23.3379 52.3595 23.0278 53.6125 22.4075C54.8656 21.7871 55.9511 20.8746 56.7777 19.7469L54.3934 18C53.8464 18.7634 53.1227 19.383 52.284 19.8058C51.4453 20.2285 50.5168 20.4419 49.5777 20.4275C48.2402 20.4212 46.9493 19.936 45.9388 19.0597C44.9283 18.1835 44.2651 16.9743 44.0695 15.6511H57.6079L57.6 14.5771ZM44.1403 13.0466C44.7266 10.501 46.7607 8.7777 49.2275 8.7777C51.6944 8.7777 53.7246 10.501 54.2754 13.0466H44.1403ZM30.3305 5.87803C29.2326 5.87896 28.1458 6.09744 27.1328 6.52086C26.1198 6.94428 25.2008 7.56424 24.4289 8.34492V0H21.1436V22.922H24.3895V20.8052C25.962 22.396 28.1016 23.2974 30.3384 23.3115C31.4986 23.3361 32.6522 23.1289 33.7313 22.7019C34.8104 22.2749 35.7935 21.6368 36.6228 20.8249C37.4521 20.0131 38.1109 19.0438 38.5607 17.974C39.0106 16.9042 39.2423 15.7553 39.2423 14.5948C39.2423 13.4342 39.0106 12.2854 38.5607 11.2155C38.1109 10.1457 37.4521 9.17644 36.6228 8.36458C35.7935 7.55271 34.8104 6.91458 33.7313 6.4876C32.6522 6.06062 31.4986 5.85338 30.3384 5.87803H30.3305ZM30.0944 20.3764C28.9493 20.3818 27.8284 20.047 26.8739 19.4144C25.9194 18.7818 25.1743 17.8798 24.7332 16.8231C24.2921 15.7663 24.1749 14.6024 24.3964 13.4789C24.6179 12.3554 25.1681 11.323 25.9773 10.5127C26.7864 9.70246 27.8181 9.15082 28.9413 8.92779C30.0644 8.70477 31.2286 8.82042 32.2859 9.26007C33.3433 9.69972 34.2462 10.4435 34.8801 11.3972C35.5141 12.3508 35.8504 13.4713 35.8466 14.6164C35.8476 15.3717 35.6995 16.1198 35.4107 16.8177C35.1219 17.5156 34.6981 18.1496 34.1636 18.6833C33.6292 19.217 32.9946 19.6399 32.2963 19.9278C31.598 20.2156 30.8497 20.3627 30.0944 20.3607V20.3764ZM9.04525 20.219C12.2164 20.219 14.6793 17.7875 14.6793 14.1443V0H18.0826V22.922H14.7187V20.7541C13.9328 21.5664 12.9902 22.2107 11.9481 22.6483C10.906 23.0858 9.78596 23.3074 8.65574 23.2997C3.76525 23.2997 0 19.7351 0 14.3292V0H3.46623V14.1639C3.46623 17.8269 5.82689 20.219 9.04525 20.219Z" fill="#262626"/>
+<path d="M76.3789 0H92.4589V3.93443H80.7225V9.52131H92.1323V13.322H80.7225V19.0033H92.4589V22.9377H76.3789V0ZM136.867 23.3508C141.797 23.3508 144.574 20.9902 144.574 17.7482C144.574 15.4387 142.93 13.7154 139.487 12.9679L135.848 12.2243C133.735 11.8308 133.07 11.4374 133.07 10.6505C133.07 9.63148 134.089 9.0059 135.966 9.0059C138 9.0059 139.507 9.55279 139.9 11.4334H144.165C143.933 7.89246 141.387 5.55541 136.225 5.55541C131.764 5.55541 128.632 7.39672 128.632 10.9652C128.632 13.4321 130.355 15.0374 134.073 15.8203L138.142 16.7607C139.747 17.0754 140.176 17.5082 140.176 18.1731C140.176 19.2315 138.964 19.8964 137.004 19.8964C134.542 19.8964 133.133 19.3495 132.586 17.4689H128.298C128.923 21.002 131.543 23.3508 136.867 23.3508ZM127.058 22.922H122.443C119.547 22.922 117.942 21.12 117.942 18.8459V9.83607H114.696V5.99606H117.958V1.17639H122.246V5.99606H127.058V9.83607H122.246V17.7482C122.246 18.6492 122.872 19.082 123.852 19.082H127.058V22.922ZM108.566 6.00394V7.53049C107.057 6.25411 105.142 5.55677 103.164 5.56328C101.981 5.53838 100.804 5.75002 99.7032 6.18579C98.6024 6.62156 97.5996 7.27269 96.7537 8.10102C95.9077 8.92935 95.2357 9.91821 94.7768 11.0096C94.318 12.1011 94.0817 13.2731 94.0817 14.4571C94.0817 15.641 94.318 16.813 94.7768 17.9045C95.2357 18.9959 95.9077 19.9848 96.7537 20.8131C97.5996 21.6414 98.6024 22.2925 99.7032 22.7283C100.804 23.1641 101.981 23.3757 103.164 23.3508C105.142 23.3594 107.058 22.6618 108.566 21.3836V22.9141H112.843V5.99606L108.566 6.00394ZM103.519 19.6367C102.493 19.6484 101.487 19.3549 100.628 18.7933C99.7692 18.2318 99.0969 17.4277 98.6964 16.4832C98.2958 15.5387 98.1852 14.4964 98.3784 13.4888C98.5716 12.4812 99.0601 11.5539 99.7816 10.8245C100.503 10.0952 101.425 9.59686 102.431 9.39285C103.436 9.18883 104.48 9.28834 105.428 9.67875C106.377 10.0691 107.188 10.7328 107.759 11.5854C108.33 12.438 108.634 13.4409 108.633 14.4669C108.64 15.1432 108.512 15.814 108.257 16.4405C108.002 17.0671 107.626 17.6369 107.149 18.1169C106.673 18.597 106.106 18.9778 105.481 19.2373C104.857 19.4968 104.187 19.6299 103.511 19.6289L103.519 19.6367Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/place.svg b/public/images/place.svg
new file mode 100644
index 0000000..a2f570f
--- /dev/null
+++ b/public/images/place.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 15.7859L11.2392 11.4636C13.5869 9.06988 13.5869 5.18495 11.2392 2.79123C8.89684 0.402923 5.10316 0.402923 2.76077 2.79123C0.413075 5.18495 0.413075 9.06988 2.76077 11.4636L7 15.7859Z" stroke="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z" stroke="#262626"/>
+</svg>
diff --git a/public/images/search.svg b/public/images/search.svg
new file mode 100644
index 0000000..7e37c73
--- /dev/null
+++ b/public/images/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9217 11.0417L15 15M12.8788 6.76471C12.8788 9.94847 10.2196 12.5294 6.93939 12.5294C3.65916 12.5294 1 9.94847 1 6.76471C1 3.58095 3.65916 1 6.93939 1C10.2196 1 12.8788 3.58095 12.8788 6.76471Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/public/images/tw.svg b/public/images/tw.svg
new file mode 100644
index 0000000..9c8b7bd
--- /dev/null
+++ b/public/images/tw.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3333 1.89305C18.6218 2.21429 17.8582 2.43216 17.056 2.52942C17.8751 2.02968 18.5022 1.23702 18.7993 0.295398C18.031 0.758193 17.1829 1.09424 16.2792 1.27641C15.5556 0.489895 14.5262 0 13.3846 0C11.1943 0 9.41835 1.80937 9.41835 4.03969C9.41835 4.35601 9.45338 4.66496 9.52105 4.96039C6.22534 4.79174 3.30294 3.18301 1.34702 0.738495C1.00511 1.33425 0.810611 2.02842 0.810611 2.76943C0.810611 4.1714 1.51132 5.40841 2.57446 6.13213C1.92449 6.10999 1.31318 5.92782 0.77801 5.62502V5.67549C0.77801 7.63256 2.14559 9.2659 3.95895 9.63764C3.62671 9.72873 3.27637 9.7792 2.91394 9.7792C2.65783 9.7792 2.41016 9.75335 2.16733 9.70411C2.6723 11.3104 4.13655 12.4785 5.8714 12.5105C4.51469 13.5937 2.804 14.2374 0.945945 14.2374C0.625807 14.2374 0.310471 14.2177 0 14.182C1.75539 15.3304 3.83938 16 6.07921 16C13.375 16 17.3629 9.84321 17.3629 4.50374L17.3496 3.98063C18.1289 3.41439 18.803 2.70297 19.3333 1.89305Z" fill="white"/>
+</svg>
diff --git a/public/images/world.svg b/public/images/world.svg
new file mode 100644
index 0000000..b8806c7
--- /dev/null
+++ b/public/images/world.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5251 0.99999L10.5251 0.999987C10.4415 0.989444 10.3578 0.978882 10.2729 0.978882C10.2552 0.978882 10.2378 0.981238 10.2205 0.983588C10.2054 0.985622 10.1904 0.987652 10.1754 0.988148C10.1481 0.987651 10.1211 0.985616 10.094 0.98358C10.0628 0.981232 10.0316 0.978882 10 0.978882C4.48607 0.978882 0 5.45581 0 10.9577C0 16.4603 4.48607 20.9365 10 20.9365C10.0317 20.9365 10.0631 20.9342 10.0944 20.932L10.0945 20.932C10.1213 20.93 10.1481 20.9281 10.175 20.9276C10.1902 20.9281 10.2053 20.93 10.2204 20.932C10.2378 20.9343 10.2552 20.9365 10.2729 20.9365C10.3623 20.9365 10.4503 20.9253 10.5382 20.914C10.561 20.9111 10.5837 20.9082 10.6064 20.9055C15.8379 20.5905 20 16.2561 20 10.9577C20 5.6593 15.8379 1.32529 10.6064 1.00989C10.5793 1.00683 10.5522 1.00341 10.5251 0.99999ZM7.00617 2.75938C5.99331 3.92619 5.17045 5.60156 4.71867 7.58022C3.31367 7.42804 2.46581 7.25092 2.12402 7.16895C3.11692 5.12304 4.86741 3.542 7.00617 2.75938ZM1.65096 8.33105C1.38846 9.16001 1.24561 10.0424 1.24561 10.9576C1.24708 12.0328 1.44885 13.0983 1.84061 14.0999C2.24096 14.0033 3.13311 13.8183 4.58132 13.6615C4.42775 12.803 4.33739 11.8995 4.33739 10.9576C4.33817 10.2381 4.38913 9.5196 4.48989 8.80718C2.80168 8.62008 1.88953 8.3952 1.65096 8.33105ZM2.38499 15.2518C2.83785 15.1556 3.64928 15.0099 4.84856 14.8848C5.32035 16.6268 6.08785 18.099 7.00713 19.1568C5.05128 18.4427 3.41303 17.0588 2.38428 15.2518H2.38499ZM5.98828 14.7785C6.63507 17.2782 8.21292 19.1325 9.28435 19.5801V14.6477C8.21292 14.6605 6.91828 14.7097 5.98828 14.7785ZM9.2846 13.4052C8.21318 13.4187 6.75496 13.4736 5.76068 13.5506C5.62389 12.7273 5.58496 11.8563 5.58496 10.9579C5.58496 10.2594 5.59853 9.57939 5.68318 8.92257C6.69282 9.0024 8.21318 9.05978 9.2846 9.07403V13.4048V13.4052ZM5.854 7.69091C6.81186 7.76397 8.21257 7.81814 9.284 7.83133V7.83097V2.33621C8.21257 2.81662 6.45222 4.91288 5.854 7.69091ZM17.8435 7.10074C17.6482 7.16061 16.8567 7.38086 15.2914 7.56582C14.9382 5.69123 14.3007 4.09391 13.4692 2.94064C15.3753 3.76496 16.9253 5.24895 17.8435 7.10038V7.10074ZM14.1368 7.68891C13.55 4.87631 11.7843 2.76115 10.7129 2.31745V7.83146C11.7843 7.81827 13.1943 7.76375 14.1368 7.68891ZM10.7129 9.07406C11.7843 9.06016 13.2861 9.00135 14.2832 8.91867C14.3654 9.57656 14.3861 10.2576 14.3861 10.9579C14.3861 11.8574 14.354 12.7299 14.2211 13.5542C13.2393 13.4751 11.7843 13.418 10.7129 13.4052V9.07406ZM10.7129 14.6477V19.5986V19.599C11.7843 19.1849 13.3707 17.3146 14.0065 14.7814C13.0886 14.7108 11.7843 14.6605 10.7129 14.6477ZM13.4692 18.9757C14.2185 17.9365 14.8153 16.5416 15.1835 14.9033C16.415 15.0448 17.1907 15.2094 17.5817 15.3078C16.6401 16.9385 15.1984 18.2242 13.4692 18.9757ZM15.4803 8.79411C15.6682 10.4179 15.643 12.0593 15.4053 13.6766L15.4056 13.6762C16.9256 13.8544 17.7903 14.069 18.1342 14.1691C18.5306 13.1741 18.7556 12.0925 18.7556 10.9581C18.7551 9.83681 18.5368 8.72626 18.1128 7.68789L18.3138 8.25454C18.2574 8.2745 17.4053 8.56353 15.4803 8.79411Z" fill="white"/>
+</svg>
diff --git a/public/index.html b/public/index.html
index 4269d67..bda5938 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,16 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
+      integrity="sha256-gvEnj2axkqIj4wbYhPjbWV7zttgpzBVEgHub9AAZQD4="
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
+      rel="stylesheet"
+    >
     <title>React Uber eats</title>
   </head>
   <body>
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 8b13789..0000000
--- a/src/App.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/App.js b/src/App.js
index d494a99..11a3c2d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,21 @@
 import React from 'react';
-import './App.css';
+import { Provider } from 'react-redux';
+import './App.scss';
+import { store } from './store';
+import { RestaurantsListPage } from './components/RestaurantsListPage';
+import Header from './components/Header';
+import Footer from './components/Footer';
 
 const App = () => (
-  <div className="App">
-    <h1>React Uber eats</h1>
-  </div>
+  <Provider store={store}>
+    <Header />
+    <main className="page">
+      <div className="content">
+        <RestaurantsListPage />
+      </div>
+    </main>
+    <Footer />
+  </Provider>
 );
 
 export default App;
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..44896fc
--- /dev/null
+++ b/src/App.scss
@@ -0,0 +1,6 @@
+.page {
+  position: relative;
+  padding-top: 40px;
+  margin-bottom: 40px;
+  min-height: 100vh;
+}
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
new file mode 100644
index 0000000..ec4ee1c
--- /dev/null
+++ b/src/components/Error/Error.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Error.scss';
+
+export const Error = (props) => {
+  const { message } = props;
+
+  return (
+    <div className="error">
+      <p className="error__text">
+        {message}
+      </p>
+      <a href="/" className="error__link">
+        Go to Home
+      </a>
+
+    </div>
+  );
+};
+
+Error.propTypes = {
+  message: PropTypes.string,
+};
+
+Error.defaultProps = {
+  message: 'Sorry, something went wrong',
+};
diff --git a/src/components/Error/Error.scss b/src/components/Error/Error.scss
new file mode 100644
index 0000000..fbd3c17
--- /dev/null
+++ b/src/components/Error/Error.scss
@@ -0,0 +1,20 @@
+@import "../../styles/utils.scss";
+
+.error {
+  @extend %absolute-center;
+  flex-flow: column nowrap;
+
+  &__text {
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  &__link {
+    font-size: 24px;
+    color: $color-green;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/components/Error/index.js b/src/components/Error/index.js
new file mode 100644
index 0000000..4b5c243
--- /dev/null
+++ b/src/components/Error/index.js
@@ -0,0 +1,3 @@
+import { Error } from './Error';
+
+export default Error;
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 0000000..135322c
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import Select from '../Select';
+import './Footer.scss';
+
+const Footer = () => (
+  <footer className="footer">
+    <div className="content">
+      <div className="footer__top-part">
+        <div className="footer__main">
+          <div className="footer__logo-container">
+            <img
+              className="footer__logo"
+              src="./images/logo-white.svg"
+              alt="Uber Eats"
+            />
+
+            <Select
+              name="language"
+              options={[
+                { value: 'en', label: 'English' },
+                { value: 'ua', label: 'Ukrainian' },
+              ]}
+              value="en"
+              iconUrl="./images/world.svg"
+            />
+          </div>
+
+          <div className="footer__mobile-apps">
+            <a
+              className="footer__mobile-app"
+              href="# "
+            >
+              <img
+                src="./images/app-store.png"
+                alt="App Store"
+              />
+            </a>
+            <a
+              className="footer__mobile-app"
+              href="# "
+            >
+              <img
+                src="./images/google-play.png"
+                alt="Google Play"
+              />
+            </a>
+          </div>
+
+        </div>
+        <div className="footer__top-links links">
+          <a href="# " className="links__link links__link--intended">
+            About UberEats
+          </a>
+          <a href="# " className="links__link">
+            Read our blog
+          </a>
+          <a href="# " className="links__link">
+            Sign up to deliver
+          </a>
+          <a href="# " className="links__link">
+            Add your restaurant
+          </a>
+        </div>
+        <div className="footer__top-links">
+          <a href="# " className="links__link links__link--intended">
+            Get help
+          </a>
+          <a href="# " className="links__link">
+            Read FAQs
+          </a>
+          <a href="# " className="links__link">
+            View all cities
+          </a>
+        </div>
+      </div>
+      <div className="footer__bottom-part">
+        <p className="footer__copyright">
+          © 2019 Uber Technologies Inc.
+        </p>
+        <div className="footer__misc">
+          <div className="footer__bottom-links links">
+            <a href="# " className="links__link">
+              Privacy policy
+            </a>
+            <a href="# " className="links__link">
+              Terms of  use
+            </a>
+            <a href="# " className="links__link">
+              Pricing
+            </a>
+          </div>
+
+          <div className="footer__social social">
+            <a href="# " className="social__link">
+              <img src="./images/fb.svg" alt="facebook" />
+            </a>
+            <a href="# " className="social__link">
+              <img src="./images/tw.svg" alt="twitter" />
+            </a>
+            <a href="# " className="social__link">
+              <img src="./images/ig.svg" alt="instagram" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
new file mode 100644
index 0000000..43f914a
--- /dev/null
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,86 @@
+@import "../../styles/extends.scss";
+
+.footer {
+  padding: 64px 0;
+  background-color: #262626;
+
+  &__top-part {
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #c4c4c4;
+  }
+
+  &__main {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+  }
+
+  &__logo-container {
+    @extend %flex-row-center;
+
+    margin-bottom: 40px;
+  }
+
+  &__mobile-app {
+    display: inline-block;
+
+    &:first-of-type {
+      margin-right: 20px;
+    }
+  }
+
+  &__logo {
+    margin-right: 40px;
+  }
+
+  &__top-part,
+  &__bottom-part {
+    @extend %flex-row-center;
+
+    align-items: flex-start;
+  }
+
+  &__main,
+  &__copyright {
+    flex-basis: 45vw;
+    padding-right: 40px;
+  }
+
+  &__copyright {
+    font-size: 14px;
+    color: #fff;
+  }
+
+  &__bottom-links {
+    @extend %flex-row-center;
+
+    margin-bottom: 40px;
+
+    .links__link:not(:last-of-type) {
+      margin-right: 40px;
+    }
+  }
+
+  &__top-links:last-of-type {
+    margin-left: 10vw;
+  }
+}
+
+.links {
+  &__link {
+    display: block;
+    margin-bottom: 16px;
+
+    color: #fff;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.social__link {
+  margin-right: 20px;
+}
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
new file mode 100644
index 0000000..ced11e5
--- /dev/null
+++ b/src/components/Footer/index.js
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..61cd244
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import Input from '../Input';
+import './Header.scss';
+
+export class Header extends Component {
+  state={
+    address: '',
+    time: '',
+    search: '',
+  }
+
+  handleChange = ({ target }) => {
+    this.setState({
+      [target.name]: target.value,
+    });
+  }
+
+  render() {
+    const {
+      address,
+      time,
+      search,
+    } = this.state;
+
+    return (
+      <header className="header">
+        <div className="content">
+          <div className="header__inner">
+            <img src="./images/logo.svg" alt="Uber Eats" />
+
+            <div className="header__delivery-info">
+              <Input
+                name="address"
+                value={address}
+                onChange={this.handleChange}
+                placeholder="Address"
+                iconUrl="./images/place.svg"
+              />
+
+              <Input
+                name="time"
+                value={time}
+                onChange={this.handleChange}
+                placeholder="Time"
+                iconUrl=""
+                type="time"
+              />
+            </div>
+
+            <Input
+              name="search"
+              value={search}
+              onChange={this.handleChange}
+              placeholder="Search"
+              iconUrl="./images/search.svg"
+              className="header__search"
+            />
+
+            <div className="header__toogle-buttons">
+              <button type="button" className="header__toogle-btn">
+                <img
+                  src="./images/place.svg"
+                  alt="place icon"
+                  className="control__icon"
+                />
+              </button>
+              <button type="button" className="header__toogle-btn">
+                <img
+                  src="./images/search.svg"
+                  alt="search icon"
+                  className="control__icon"
+                />
+              </button>
+            </div>
+
+            <a
+              className="header__link"
+              href="/sign-in"
+            >
+              Sign In
+            </a>
+
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
new file mode 100644
index 0000000..089499d
--- /dev/null
+++ b/src/components/Header/Header.scss
@@ -0,0 +1,66 @@
+@import "../../styles/utils.scss";
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 16px 0;
+
+  background: #fff;
+
+  &__inner {
+    @extend %flex-row-center;
+  }
+
+  &__delivery-info {
+    @extend %flex-row-center;
+
+    margin-left: 7vw;
+
+    @media (max-width: $breack-point-tablet) {
+      display: none;
+    }
+  }
+
+  &__search {
+    margin-left: auto;
+
+    @media (max-width: $breack-point-tablet) {
+      display: none;
+    }
+  }
+
+  &__link {
+    margin-left: 40px;
+    padding: 12px 0;
+
+    white-space: nowrap;
+    color: #1f1f1f;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__toogle-buttons {
+    display: none;
+    margin-left: auto;
+
+    @media (max-width: $breack-point-tablet) {
+      display: flex;
+    }
+  }
+
+  &__toogle-btn {
+    padding: 12px 0;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      margin-right: 20px;
+    }
+
+    &:focus {
+      border: 1px solid $color-gray;
+    }
+  }
+}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 0000000..130dd06
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1,3 @@
+import { Header } from './Header';
+
+export default Header;
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
new file mode 100644
index 0000000..517ac82
--- /dev/null
+++ b/src/components/Input/Input.js
@@ -0,0 +1,81 @@
+import React, { PureComponent, createRef } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import './Input.scss';
+
+export class Input extends PureComponent {
+  state = {
+    isFocused: false,
+  }
+
+  inputRef = createRef();
+
+  handleFocus = () => this.setState({ isFocused: true });
+
+  handleBlur = () => this.setState({ isFocused: false });
+
+  focus = () => this.inputRef.current.focus();
+
+  render() {
+    const {
+      iconUrl,
+      value,
+      onChange,
+      type,
+      placeholder,
+      name,
+      className,
+    } = this.props;
+    const { isFocused } = this.state;
+
+    const rootClass = cx('control', {
+      'control--focused': isFocused,
+      [className]: !!className,
+    });
+
+    return (
+      <div
+        className={rootClass}
+        onClick={this.focus}
+        role="presentation"
+      >
+        {!!iconUrl && (
+          <img
+            src={iconUrl}
+            alt={placeholder}
+            className="control__icon"
+          />
+        )}
+
+        <input
+          ref={this.inputRef}
+          type={type}
+          value={value}
+          onChange={onChange}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          name={name}
+          placeholder={placeholder}
+          className="control__input"
+        />
+      </div>
+    );
+  }
+}
+
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  iconUrl: PropTypes.string,
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+};
+
+Input.defaultProps = {
+  iconUrl: '',
+  type: 'text',
+  placeholder: '',
+  className: '',
+};
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
new file mode 100644
index 0000000..a0dd60a
--- /dev/null
+++ b/src/components/Input/Input.scss
@@ -0,0 +1,34 @@
+@import "../../styles/utils.scss";
+
+.control {
+  @extend %flex-row-center;
+
+  padding: 11px 16px;
+  border: 1px solid $color-gray;
+  transition: border-color 300ms;
+
+  &--focused {
+    border-color: darken($color-gray, 20);
+  }
+
+  &__icon {
+    width: 14px;
+    height: 14px;
+
+    margin-right: 10px;
+  }
+
+  &__input {
+    max-height: 24px;
+    line-height: 24px;
+
+    @media (max-width: $breack-point-tablet-lg) {
+      max-width: 75px;
+    }
+
+  }
+
+  & + & {
+    margin-left: 20px;
+  }
+}
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
new file mode 100644
index 0000000..0f8213f
--- /dev/null
+++ b/src/components/Input/index.js
@@ -0,0 +1,3 @@
+import { Input } from './Input';
+
+export default Input;
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
new file mode 100644
index 0000000..e07f821
--- /dev/null
+++ b/src/components/Loader/Loader.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './Loader.scss';
+
+export const Loader = () => (
+  <div className="loader-container">
+    <div className="lds-default">
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+);
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss
new file mode 100644
index 0000000..126bfe4
--- /dev/null
+++ b/src/components/Loader/Loader.scss
@@ -0,0 +1,105 @@
+@import '../../styles/utils.scss';
+
+.loader-container {
+  @extend %absolute-center;
+}
+
+.lds-default {
+  display: inline-block;
+  position: relative;
+  width: 64px * 2;
+  height: 64px * 2;
+}
+
+.lds-default div {
+  position: absolute;
+  width: 5px * 2;
+  height: 5px * 2;
+  background: $color-green;
+  border-radius: 50%;
+  animation: lds-default 1.2s linear infinite;
+}
+
+.lds-default div:nth-child(1) {
+  animation-delay: 0s;
+  top: 29px * 2;
+  left: 53px * 2;
+}
+
+.lds-default div:nth-child(2) {
+  animation-delay: -0.1s;
+  top: 18px * 2;
+  left: 50px * 2;
+}
+
+.lds-default div:nth-child(3) {
+  animation-delay: -0.2s;
+  top: 9px * 2;
+  left: 41px * 2;
+}
+
+.lds-default div:nth-child(4) {
+  animation-delay: -0.3s;
+  top: 6px * 2;
+  left: 29px * 2;
+}
+
+.lds-default div:nth-child(5) {
+  animation-delay: -0.4s;
+  top: 9px * 2;
+  left: 18px * 2;
+}
+
+.lds-default div:nth-child(6) {
+  animation-delay: -0.5s;
+  top: 18px * 2;
+  left: 9px * 2;
+}
+
+.lds-default div:nth-child(7) {
+  animation-delay: -0.6s;
+  top: 29px * 2;
+  left: 6px * 2;
+}
+
+.lds-default div:nth-child(8) {
+  animation-delay: -0.7s;
+  top: 41px * 2;
+  left: 9px * 2;
+}
+
+.lds-default div:nth-child(9) {
+  animation-delay: -0.8s;
+  top: 50px * 2;
+  left: 18px * 2;
+}
+
+.lds-default div:nth-child(10) {
+  animation-delay: -0.9s;
+  top: 53px * 2;
+  left: 29px * 2;
+}
+
+.lds-default div:nth-child(11) {
+  animation-delay: -1s;
+  top: 50px * 2;
+  left: 41px * 2;
+}
+
+.lds-default div:nth-child(12) {
+  animation-delay: -1.1s;
+  top: 41px * 2;
+  left: 50px * 2;
+}
+
+@keyframes lds-default {
+  0%,
+  20%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
new file mode 100644
index 0000000..e7231c2
--- /dev/null
+++ b/src/components/Loader/index.js
@@ -0,0 +1,3 @@
+import { Loader } from './Loader';
+
+export default Loader;
diff --git a/src/components/RestaurantCard/RestaurantCard.js b/src/components/RestaurantCard/RestaurantCard.js
new file mode 100644
index 0000000..dd0aaf1
--- /dev/null
+++ b/src/components/RestaurantCard/RestaurantCard.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RestaurantCard.scss';
+
+export const RestaurantCard = (props) => {
+  const {
+    imageUrl,
+    title,
+    categories,
+    etaRange,
+    // uuid,
+  } = props;
+
+  return (
+    <div className="restaurant-card">
+      <img src={imageUrl} alt={title} className="restaurant-card__img" />
+      <h2 className="restaurant-card__title">{title}</h2>
+      <div className="restaurant-card__categories">
+        {categories.join(' • ')}
+      </div>
+      <div className="restaurant-card__eta">
+        {etaRange}
+      </div>
+    </div>
+  );
+};
+
+RestaurantCard.propTypes = {
+  // uuid: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  categories: PropTypes.arrayOf(PropTypes.string),
+  etaRange: PropTypes.string,
+};
+
+RestaurantCard.defaultProps = {
+  categories: [],
+  etaRange: '',
+};
diff --git a/src/components/RestaurantCard/RestaurantCard.scss b/src/components/RestaurantCard/RestaurantCard.scss
new file mode 100644
index 0000000..d51810b
--- /dev/null
+++ b/src/components/RestaurantCard/RestaurantCard.scss
@@ -0,0 +1,34 @@
+.restaurant-card {
+  $height: 367px;
+  height: $height;
+  width: 100%;
+
+  &__img {
+    height: $height * 0.7;
+    width: 100%;
+
+    object-fit: cover;
+  }
+
+  &__title {
+    margin: 12px 0 4px;
+  }
+
+  &__categories {
+    font-size: 14px;
+    color: #757575;
+
+    margin-bottom: 4px;
+  }
+
+  &__eta {
+    font-size: 14px;
+
+    display: inline-block;
+    padding: 2px 8px;
+    
+    background-color: #f5f5f5;
+  }
+
+  cursor: pointer;
+}
diff --git a/src/components/RestaurantCard/index.js b/src/components/RestaurantCard/index.js
new file mode 100644
index 0000000..41f249e
--- /dev/null
+++ b/src/components/RestaurantCard/index.js
@@ -0,0 +1,3 @@
+import { RestaurantCard } from './RestaurantCard';
+
+export default RestaurantCard;
diff --git a/src/components/RestaurantsListPage/RestaurantListPage.scss b/src/components/RestaurantsListPage/RestaurantListPage.scss
new file mode 100644
index 0000000..9cd09e1
--- /dev/null
+++ b/src/components/RestaurantsListPage/RestaurantListPage.scss
@@ -0,0 +1,5 @@
+.restaurant-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(348px, 1fr));
+  gap: 40px 20px;
+}
diff --git a/src/components/RestaurantsListPage/RestaurantsListPage.js b/src/components/RestaurantsListPage/RestaurantsListPage.js
new file mode 100644
index 0000000..4ee1f01
--- /dev/null
+++ b/src/components/RestaurantsListPage/RestaurantsListPage.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RestaurantCard from '../RestaurantCard';
+import './RestaurantListPage.scss';
+import Loader from '../Loader';
+import Error from '../Error';
+
+const DEFAULT_ETA_RANGE = '20 - 30 min';
+
+export class RestaurantsListPage extends Component {
+  componentDidMount() {
+    const { loadRestaurants } = this.props;
+
+    loadRestaurants();
+  }
+
+  render() {
+    const {
+      restaurantsListData,
+      error,
+      isLoading,
+    } = this.props;
+
+    if (isLoading) {
+      return <Loader />;
+    }
+
+    if (error) {
+      return <Error message={error} />;
+    }
+
+    return (
+      <div className="restaurant-list">
+        {restaurantsListData.map((restoraunt) => {
+          const {
+            uuid,
+            title,
+            heroImageUrl,
+            categories,
+            etaRange,
+          } = restoraunt;
+
+          return (
+            <RestaurantCard
+              key={uuid}
+              uuid={uuid}
+              title={title}
+              imageUrl={heroImageUrl}
+              categories={categories}
+              etaRange={etaRange ? etaRange.text : DEFAULT_ETA_RANGE}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+RestaurantsListPage.propTypes = {
+  restaurantsListData: PropTypes.arrayOf(PropTypes.shape()),
+  loadRestaurants: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  isLoading: PropTypes.bool,
+};
+
+RestaurantsListPage.defaultProps = {
+  restaurantsListData: [],
+  error: null,
+  isLoading: false,
+};
diff --git a/src/components/RestaurantsListPage/index.js b/src/components/RestaurantsListPage/index.js
new file mode 100644
index 0000000..591eebc
--- /dev/null
+++ b/src/components/RestaurantsListPage/index.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { RestaurantsListPage } from './RestaurantsListPage';
+import { loadRestaurants } from '../../store/actions';
+import {
+  selectRestaurantsList,
+  selectRestaurantsListError,
+  selectIsLoading,
+} from '../../store/selector';
+
+const mapState2Props = state => ({
+  restaurantsListData: selectRestaurantsList(state),
+  error: selectRestaurantsListError(state),
+  isLoading: selectIsLoading(state),
+});
+
+const mapDispatch2Props = {
+  loadRestaurants,
+};
+
+const Enhanced = connect(
+  mapState2Props,
+  mapDispatch2Props
+)(RestaurantsListPage);
+
+export { Enhanced as RestaurantsListPage };
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
new file mode 100644
index 0000000..59dcafd
--- /dev/null
+++ b/src/components/Select/Select.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Select.scss';
+
+export const Select = (props) => {
+  const {
+    name,
+    value,
+    onSelect,
+    options,
+    iconUrl,
+  } = props;
+
+  return (
+    <div className="select">
+      <select
+        name={name}
+        value={value}
+        onChange={onSelect}
+        className="select__input"
+      >
+        {options.map(({ value: optionValue, label }) => (
+          <option value={optionValue} selected={value === optionValue}>
+            {label}
+          </option>
+        ))}
+      </select>
+      {!!iconUrl && (
+        <img
+          className="select__icon"
+          src={iconUrl}
+          alt="select icon"
+        />
+      )}
+
+      <img
+        className="select__arrow"
+        src="./images/arrow-down.svg"
+        alt="arrow down"
+      />
+    </div>
+  );
+};
+
+Select.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onSelect: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+  iconUrl: PropTypes.string,
+};
+
+Select.defaultProps = {
+  onSelect: () => {},
+  options: [],
+  iconUrl: '',
+};
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
new file mode 100644
index 0000000..f7a9334
--- /dev/null
+++ b/src/components/Select/Select.scss
@@ -0,0 +1,40 @@
+.select {
+  position: relative;
+
+  &__input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    color: #fff;
+
+    padding: 10px 40px;
+
+    background-color: #262626;
+    border: 1px solid #979797;
+    border-radius: 0;
+    cursor: pointer;
+
+    // option {
+    //   background-color: transparent;
+    // }
+  }
+
+
+  &__icon {
+    position: absolute;
+    top: 12px;
+    left: 10px;
+
+    width: 20px;
+    height: 20px;
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+
+    width: 14px;
+    height: 8px;
+  }
+}
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
new file mode 100644
index 0000000..cad5b21
--- /dev/null
+++ b/src/components/Select/index.js
@@ -0,0 +1,3 @@
+import { Select } from './Select';
+
+export default Select;
diff --git a/src/index.js b/src/index.js
index b597a44..7e8df49 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './styles/index.scss';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..1698a34
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,33 @@
+export const ACTION_TYPES = {
+  SAVE_RESTAURANTS: 'SAVE_RESTAURANTS',
+  SET_LOAD_RESTAURANTS_ERROR: 'SET_LOAD_RESTAURANTS_ERROR',
+  START_LOADING: 'START_LOADING',
+  STOP_LOADING: 'STOP_LOADING',
+};
+
+const saveRestaurants = data => ({
+  type: ACTION_TYPES.SAVE_RESTAURANTS,
+  payload: data,
+});
+
+const setRestaurantsError = error => ({
+  type: ACTION_TYPES.SET_LOAD_RESTAURANTS_ERROR,
+  payload: error,
+});
+
+const startLoading = () => ({
+  type: ACTION_TYPES.START_LOADING,
+});
+
+const stopLoading = () => ({
+  type: ACTION_TYPES.STOP_LOADING,
+});
+
+export const loadRestaurants = () => (dispatch) => {
+  dispatch(startLoading());
+  fetch('https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants')
+    .then(response => response.json())
+    .then(({ data }) => dispatch(saveRestaurants(data)))
+    .catch(error => dispatch(setRestaurantsError(error.message)))
+    .finally(() => dispatch(stopLoading()));
+};
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..e6b904f
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,11 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { rootReducer } from './rootReducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const middleWares = [thunk];
+
+export const store = createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(...middleWares))
+);
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
new file mode 100644
index 0000000..ed1015a
--- /dev/null
+++ b/src/store/rootReducer.js
@@ -0,0 +1,48 @@
+import { ACTION_TYPES } from './actions';
+
+const initialState = {
+  restaurantsListData: null,
+  isLoading: false,
+  error: null,
+};
+
+export function rootReducer(state = initialState, action) {
+  switch (action.type) {
+    case ACTION_TYPES.SAVE_RESTAURANTS: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        error: null,
+        restaurantsListData: payload,
+      });
+    }
+
+    case ACTION_TYPES.SET_LOAD_RESTAURANTS_ERROR: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        error: payload,
+        restaurantsListData: null,
+      });
+    }
+
+    case ACTION_TYPES.START_LOADING: {
+      return ({
+        ...state,
+        isLoading: true,
+      });
+    }
+
+    case ACTION_TYPES.STOP_LOADING: {
+      return ({
+        ...state,
+        isLoading: false,
+      });
+    }
+
+    default:
+      return state;
+  }
+}
diff --git a/src/store/selector.js b/src/store/selector.js
new file mode 100644
index 0000000..f2e85bc
--- /dev/null
+++ b/src/store/selector.js
@@ -0,0 +1,26 @@
+import { createSelector } from 'reselect';
+
+const rootSelector = state => state;
+
+export const selectRestaurantsList = createSelector(
+  rootSelector,
+  ({ restaurantsListData }) => {
+    if (!restaurantsListData) {
+      return [];
+    }
+
+    const { feedItems, storesMap } = restaurantsListData;
+
+    return feedItems.map(({ uuid }) => storesMap[uuid]);
+  }
+);
+
+export const selectRestaurantsListError = createSelector(
+  rootSelector,
+  ({ error }) => error
+);
+
+export const selectIsLoading = createSelector(
+  rootSelector,
+  ({ isLoading }) => isLoading
+);
diff --git a/src/styles/extends.scss b/src/styles/extends.scss
new file mode 100644
index 0000000..e89b780
--- /dev/null
+++ b/src/styles/extends.scss
@@ -0,0 +1,17 @@
+%flex-row-center {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+%absolute-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..b3b26fb
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,37 @@
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+body,
+button,
+a,
+select,
+input {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+input {
+  border: 0;
+  background: transparent;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  border: none;
+  background: none;
+  outline: none;
+}
+
+.content {
+  max-width: 1160px;
+  padding: 0 34px;
+  margin: 0 auto;
+}
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..8e9efb3
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "./extends.scss";
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..449e586
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,5 @@
+$color-green: #5eb707;
+$color-gray: #e0e0e0;
+
+$breack-point-tablet-lg: 956px;
+$breack-point-tablet: 768px;

From b6ef4a7025700924fc326bb5c1def24a8fbb74b0 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 16 Oct 2019 15:09:03 +0300
Subject: [PATCH 02/34] part solution

---
 public/images/close.svg                       |  3 +
 src/components/Footer/Footer.scss             | 52 +++++++++-
 src/components/Header/Header.js               | 94 ++++++++++++++++++-
 src/components/Header/Header.scss             | 35 ++++++-
 src/components/Input/Input.js                 | 67 ++++++++-----
 src/components/Input/Input.scss               | 26 ++++-
 .../RestaurantCard/RestaurantCard.scss        | 17 +++-
 .../RestaurantListPage.scss                   | 17 +++-
 src/styles/index.scss                         | 10 ++
 src/styles/variables.scss                     |  3 +
 10 files changed, 282 insertions(+), 42 deletions(-)
 create mode 100644 public/images/close.svg

diff --git a/public/images/close.svg b/public/images/close.svg
new file mode 100644
index 0000000..c784d0c
--- /dev/null
+++ b/public/images/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="black"/>
+</svg>
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index 43f914a..4bc5de1 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -1,9 +1,13 @@
-@import "../../styles/extends.scss";
+@import "../../styles/utils.scss";
 
 .footer {
   padding: 64px 0;
   background-color: #262626;
 
+  @media (max-width: $breack-point-tablet) {
+    padding: 40px 0;
+  }
+
   &__top-part {
     margin-bottom: 40px;
     padding-bottom: 40px;
@@ -20,11 +24,21 @@
     @extend %flex-row-center;
 
     margin-bottom: 40px;
+
+    @media (max-width: $breack-point-tablet) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
   &__mobile-app {
     display: inline-block;
 
+    @media (max-width: $breack-point-tablet) {
+      display: block;
+      margin-bottom: 20px;
+    }
+
     &:first-of-type {
       margin-right: 20px;
     }
@@ -32,24 +46,39 @@
 
   &__logo {
     margin-right: 40px;
+
+    @media (max-width: $breack-point-tablet) {
+      margin-bottom: 40px;
+    }
   }
 
   &__top-part,
   &__bottom-part {
     @extend %flex-row-center;
-
     align-items: flex-start;
+
+    @media (max-width: $breack-point-phone-lg) {
+      flex-direction: column;
+    }
   }
 
   &__main,
   &__copyright {
     flex-basis: 45vw;
     padding-right: 40px;
+
+    @media (max-width: $breack-point-phone-lg) {
+      flex-basis: initial;
+    }
   }
 
   &__copyright {
     font-size: 14px;
     color: #fff;
+
+    @media (max-width: $breack-point-phone-lg) {
+      order: 1;
+    }
   }
 
   &__bottom-links {
@@ -57,6 +86,13 @@
 
     margin-bottom: 40px;
 
+    @media (max-width: $breack-point-phone-lg) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 20px;
+      order: 1;
+    }
+
     .links__link:not(:last-of-type) {
       margin-right: 40px;
     }
@@ -64,6 +100,18 @@
 
   &__top-links:last-of-type {
     margin-left: 10vw;
+
+    @media (max-width: $breack-point-phone-lg) {
+      margin-left: 0;
+    }
+  }
+
+  &__misc {
+    @media (max-width: $breack-point-phone-lg) {
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+    }
   }
 }
 
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 61cd244..0662841 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -7,6 +7,8 @@ export class Header extends Component {
     address: '',
     time: '',
     search: '',
+    isMobileSearchVisible: false,
+    isMobileDeliveryInfoVisible: false,
   }
 
   handleChange = ({ target }) => {
@@ -15,18 +17,43 @@ export class Header extends Component {
     });
   }
 
+  toggleSearch = () => this.setState(({ isMobileSearchVisible }) => ({
+    isMobileSearchVisible: !isMobileSearchVisible,
+    isMobileDeliveryInfoVisible: false,
+  }));
+
+  toggleDeliveryInfo = () => this.setState((prevState) => {
+    const { isMobileDeliveryInfoVisible } = prevState;
+
+    return ({
+      isMobileDeliveryInfoVisible: !isMobileDeliveryInfoVisible,
+      isMobileSearchVisible: false,
+    });
+  });
+
+  closeMobile = () => this.setState({
+    isMobileDeliveryInfoVisible: false,
+    isMobileSearchVisible: false,
+  });
+
   render() {
     const {
       address,
       time,
       search,
+      isMobileDeliveryInfoVisible,
+      isMobileSearchVisible,
     } = this.state;
 
     return (
       <header className="header">
         <div className="content">
           <div className="header__inner">
-            <img src="./images/logo.svg" alt="Uber Eats" />
+            <img
+              className="header__logo"
+              src="./images/logo.svg"
+              alt="Uber Eats"
+            />
 
             <div className="header__delivery-info">
               <Input
@@ -57,14 +84,22 @@ export class Header extends Component {
             />
 
             <div className="header__toogle-buttons">
-              <button type="button" className="header__toogle-btn">
+              <button
+                onClick={this.toggleDeliveryInfo}
+                type="button"
+                className="header__toogle-btn"
+              >
                 <img
                   src="./images/place.svg"
                   alt="place icon"
                   className="control__icon"
                 />
               </button>
-              <button type="button" className="header__toogle-btn">
+              <button
+                onClick={this.toggleSearch}
+                type="button"
+                className="header__toogle-btn"
+              >
                 <img
                   src="./images/search.svg"
                   alt="search icon"
@@ -81,6 +116,59 @@ export class Header extends Component {
             </a>
 
           </div>
+
+          {(isMobileSearchVisible || isMobileDeliveryInfoVisible) && (
+            <div className="header__mobile-controls mobile-controls">
+              {isMobileSearchVisible && (
+                <Input
+                  label="Find"
+                  name="search"
+                  value={search}
+                  onChange={this.handleChange}
+                  placeholder="Search"
+                  iconUrl="./images/search.svg"
+                  isSmall={false}
+                />
+              )}
+
+              {isMobileDeliveryInfoVisible && (
+                <>
+                  <Input
+                    label="Where"
+                    name="address"
+                    value={address}
+                    onChange={this.handleChange}
+                    placeholder="Address"
+                    iconUrl="./images/place.svg"
+                    isSmall={false}
+                  />
+
+                  <Input
+                    label="To"
+                    name="time"
+                    value={time}
+                    onChange={this.handleChange}
+                    placeholder="Time"
+                    iconUrl=""
+                    type="time"
+                    isSmall={false}
+                  />
+                </>
+              )}
+
+              <button
+                onClick={this.closeMobile}
+                type="button"
+                className="mobile-controls__close"
+              >
+                <img
+                  src="./images/close.svg"
+                  alt="search icon"
+                />
+              </button>
+
+            </div>
+          )}
         </div>
       </header>
     );
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 089499d..93910ad 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -4,6 +4,8 @@
   position: sticky;
   top: 0;
   z-index: 1;
+
+  width: 100%;
   padding: 16px 0;
 
   background: #fff;
@@ -12,6 +14,15 @@
     @extend %flex-row-center;
   }
 
+  &__logo {
+    height: 24px;
+    width: auto;
+
+    @media (max-width: $breack-point-phone) {
+      height: 14px;
+    }
+  }
+
   &__delivery-info {
     @extend %flex-row-center;
 
@@ -52,15 +63,35 @@
   }
 
   &__toogle-btn {
-    padding: 12px 0;
+    display: flex;
+    align-items: center;
+    padding: 11px 5px;
+
     cursor: pointer;
+    border: 1px solid transparent;
 
     &:not(:last-of-type) {
       margin-right: 20px;
     }
 
     &:focus {
-      border: 1px solid $color-gray;
+      border-color: $color-gray;
     }
   }
 }
+
+.mobile-controls {
+  display: none;
+  position: relative;
+  padding-top: 30px;
+
+  @media (max-width: $breack-point-tablet) {
+    display: flex;
+  }
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 0;
+  }
+}
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index 517ac82..a95e52c 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { PureComponent, createRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -25,40 +26,52 @@ export class Input extends PureComponent {
       placeholder,
       name,
       className,
+      isSmall,
+      label,
     } = this.props;
     const { isFocused } = this.state;
 
-    const rootClass = cx('control', {
-      'control--focused': isFocused,
+    const inputWrapperClass = cx('control__input-wrapper', {
+      'control__input-wrapper--focused': isFocused,
       [className]: !!className,
     });
 
+    const inputClass = cx('control__input', {
+      'control__input--small': isSmall,
+      'control__input--time': type === 'time',
+    });
+
     return (
-      <div
-        className={rootClass}
-        onClick={this.focus}
-        role="presentation"
-      >
-        {!!iconUrl && (
-          <img
-            src={iconUrl}
-            alt={placeholder}
-            className="control__icon"
-          />
+      <label className="control">
+        {label && (
+          <p className="control__label">
+            {label}
+          </p>
         )}
+        <div
+          className={inputWrapperClass}
+        >
+          {!!iconUrl && (
+            <img
+              src={iconUrl}
+              alt={placeholder}
+              className="control__icon"
+            />
+          )}
 
-        <input
-          ref={this.inputRef}
-          type={type}
-          value={value}
-          onChange={onChange}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-          name={name}
-          placeholder={placeholder}
-          className="control__input"
-        />
-      </div>
+          <input
+            ref={this.inputRef}
+            type={type}
+            value={value}
+            onChange={onChange}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            name={name}
+            placeholder={placeholder}
+            className={inputClass}
+          />
+        </div>
+      </label>
     );
   }
 }
@@ -71,6 +84,8 @@ Input.propTypes = {
   type: PropTypes.string,
   placeholder: PropTypes.string,
   className: PropTypes.string,
+  isSmall: PropTypes.bool,
+  label: PropTypes.string,
 };
 
 Input.defaultProps = {
@@ -78,4 +93,6 @@ Input.defaultProps = {
   type: 'text',
   placeholder: '',
   className: '',
+  isSmall: true,
+  label: '',
 };
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
index a0dd60a..b3e3c94 100644
--- a/src/components/Input/Input.scss
+++ b/src/components/Input/Input.scss
@@ -1,11 +1,15 @@
 @import "../../styles/utils.scss";
 
 .control {
-  @extend %flex-row-center;
 
-  padding: 11px 16px;
-  border: 1px solid $color-gray;
-  transition: border-color 300ms;
+  &__input-wrapper{
+    @extend %flex-row-center;
+
+    padding: 11px 16px;
+    border: 1px solid $color-gray;
+    transition: border-color 300ms;
+  }
+
 
   &--focused {
     border-color: darken($color-gray, 20);
@@ -22,10 +26,22 @@
     max-height: 24px;
     line-height: 24px;
 
-    @media (max-width: $breack-point-tablet-lg) {
+    &--time {
       max-width: 75px;
     }
 
+    &--small {
+      @media (max-width: $breack-point-tablet-lg) {
+        max-width: 75px;
+      }
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    color: #626262;
+
+    margin-bottom: 8px;
   }
 
   & + & {
diff --git a/src/components/RestaurantCard/RestaurantCard.scss b/src/components/RestaurantCard/RestaurantCard.scss
index d51810b..ac37e56 100644
--- a/src/components/RestaurantCard/RestaurantCard.scss
+++ b/src/components/RestaurantCard/RestaurantCard.scss
@@ -1,10 +1,19 @@
+@import "../../styles/utils.scss";
+
 .restaurant-card {
-  $height: 367px;
-  height: $height;
+  --height: 367px;
+
+  height: var(--height);
   width: 100%;
 
+  cursor: pointer;
+
+  @media (max-width: $breack-point-phone) {
+    --height: 330px;
+  }
+
   &__img {
-    height: $height * 0.7;
+    height: calc(var(--height) * 0.7);
     width: 100%;
 
     object-fit: cover;
@@ -26,7 +35,7 @@
 
     display: inline-block;
     padding: 2px 8px;
-    
+
     background-color: #f5f5f5;
   }
 
diff --git a/src/components/RestaurantsListPage/RestaurantListPage.scss b/src/components/RestaurantsListPage/RestaurantListPage.scss
index 9cd09e1..84ec0ce 100644
--- a/src/components/RestaurantsListPage/RestaurantListPage.scss
+++ b/src/components/RestaurantsListPage/RestaurantListPage.scss
@@ -1,5 +1,20 @@
+@import "../../styles/utils.scss";
+
 .restaurant-list {
+  --card-width: 348px;
+
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(348px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
   gap: 40px 20px;
+
+  @media (max-width: $breack-point-tablet-lg) {
+    --card-width: 340px;
+
+    row-gap: 20px;
+  }
+
+  @media (max-width: $breack-point-phone) {
+    --card-width: 280px;
+  }
+
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b3b26fb..b2bdace 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,5 @@
+@import "./utils.scss";
+
 *,
 ::after,
 ::before {
@@ -34,4 +36,12 @@ button {
   max-width: 1160px;
   padding: 0 34px;
   margin: 0 auto;
+
+  @media (max-width: $breack-point-phone) {
+    padding: 0 20px;
+  }
+
+  @media (min-width: $breack-point-large) {
+    max-width: 1520px;
+  }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 449e586..30f92c4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,5 +1,8 @@
 $color-green: #5eb707;
 $color-gray: #e0e0e0;
 
+$breack-point-large: 1281px;
 $breack-point-tablet-lg: 956px;
 $breack-point-tablet: 768px;
+$breack-point-phone-lg: 620px;
+$breack-point-phone: 550px;

From 1db94851c8632ed689c84c6043eadf5a52cf7497 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Mon, 21 Oct 2019 22:33:52 +0300
Subject: [PATCH 03/34] partial solution

---
 src/App.js                                    |  11 +-
 src/components/CardItem/CardItem.js           |  36 +++++++
 src/components/CardItem/CardItem.scss         |  33 ++++++
 src/components/CardItem/index.js              |  15 +++
 src/components/Header/Header.js               |  12 ++-
 src/components/Header/Header.scss             |   4 +
 .../RestaurantPage/RestaurantPage.js          | 101 +++++++++++++++++
 .../RestaurantPage/RestaurantPage.scss        | 102 ++++++++++++++++++
 src/components/RestaurantPage/index.js        |  23 ++++
 .../RestaurantsListPage.js                    |  45 ++++----
 src/components/Section/Section.js             |  24 +++++
 src/components/Section/Section.scss           |  16 +++
 src/components/Section/index.js               |  15 +++
 src/components/Select/Select.js               |   4 +-
 src/store/actions.js                          |  15 +++
 src/store/rootReducer.js                      |  13 +++
 src/store/selector.js                         |  58 ++++++++++
 src/styles/index.scss                         |   1 +
 18 files changed, 498 insertions(+), 30 deletions(-)
 create mode 100644 src/components/CardItem/CardItem.js
 create mode 100644 src/components/CardItem/CardItem.scss
 create mode 100644 src/components/CardItem/index.js
 create mode 100644 src/components/RestaurantPage/RestaurantPage.js
 create mode 100644 src/components/RestaurantPage/RestaurantPage.scss
 create mode 100644 src/components/RestaurantPage/index.js
 create mode 100644 src/components/Section/Section.js
 create mode 100644 src/components/Section/Section.scss
 create mode 100644 src/components/Section/index.js

diff --git a/src/App.js b/src/App.js
index 11a3c2d..da7a0c3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,23 @@
 import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import './App.scss';
 import { store } from './store';
 import { RestaurantsListPage } from './components/RestaurantsListPage';
 import Header from './components/Header';
 import Footer from './components/Footer';
+import { RestaurantPage } from './components/RestaurantPage';
 
 const App = () => (
   <Provider store={store}>
     <Header />
     <main className="page">
-      <div className="content">
-        <RestaurantsListPage />
-      </div>
+      <BrowserRouter>
+        <Switch>
+          <Route path="/" exact component={RestaurantsListPage} />
+          <Route path="/:uuid" component={RestaurantPage} />
+        </Switch>
+      </BrowserRouter>
     </main>
     <Footer />
   </Provider>
diff --git a/src/components/CardItem/CardItem.js b/src/components/CardItem/CardItem.js
new file mode 100644
index 0000000..1c16dcc
--- /dev/null
+++ b/src/components/CardItem/CardItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CardItem.scss';
+
+export const CardItem = ({
+  title,
+  imageUrl,
+  description,
+  price,
+  restaurantCurency,
+}) => (
+  <div className="card">
+    <div className="card__description">
+      <div className="card__description-wrapper">
+        <p>{title}</p>
+        <p className="card__description-info">{description}</p>
+      </div>
+      <p>{`${restaurantCurency}${price}`}</p>
+    </div>
+    {imageUrl && <img className="card__img" src={imageUrl} alt={title} />}
+  </div>
+);
+
+CardItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string,
+  description: PropTypes.string,
+  price: PropTypes.string.isRequired,
+  restaurantCurency: PropTypes.string,
+};
+
+CardItem.defaultProps = {
+  imageUrl: '',
+  description: '',
+  restaurantCurency: '',
+};
diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
new file mode 100644
index 0000000..290eed9
--- /dev/null
+++ b/src/components/CardItem/CardItem.scss
@@ -0,0 +1,33 @@
+.card {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  height: 160px;
+
+  line-height: 21px;
+  border: 1px solid #e0e0e0;
+
+  &__img {
+    width: 50%;
+  }
+
+  &__description {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px;
+
+    &-wrapper {
+      overflow-y: auto;
+      max-height: 90px;
+    }
+
+    &-info {
+      font-size: 14px;
+      color: #626262;
+      margin-top: 4px;
+
+    }
+  }
+}
diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
new file mode 100644
index 0000000..4afc887
--- /dev/null
+++ b/src/components/CardItem/index.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { CardItem } from './CardItem';
+import {
+  selectRestaurantCurency,
+} from '../../store/selector';
+
+const mapState2Props = state => ({
+  restaurantCurency: selectRestaurantCurency(state),
+});
+
+const Enhanced = connect(
+  mapState2Props,
+)(CardItem);
+
+export { Enhanced as CardItem };
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 0662841..3081336 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -49,11 +49,13 @@ export class Header extends Component {
       <header className="header">
         <div className="content">
           <div className="header__inner">
-            <img
-              className="header__logo"
-              src="./images/logo.svg"
-              alt="Uber Eats"
-            />
+            <a href="/">
+              <img
+                className="header__logo"
+                src="./images/logo.svg"
+                alt="Uber Eats"
+              />
+            </a>
 
             <div className="header__delivery-info">
               <Input
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 93910ad..0430e18 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -95,3 +95,7 @@
     right: 0;
   }
 }
+
+.control {
+  margin-left: auto;
+}
diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
new file mode 100644
index 0000000..cd7bac9
--- /dev/null
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -0,0 +1,101 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Loader from '../Loader';
+import './RestaurantPage.scss';
+import { Section } from '../Section';
+
+const DEFAULT_ETA_RANGE = '20 - 30 min';
+
+export class RestaurantPage extends PureComponent {
+  componentDidMount() {
+    const { loadRestaurantPage } = this.props;
+    const { match: { params } } = this.props;
+
+    loadRestaurantPage(params.uuid);
+  }
+
+  render() {
+    const { restaurantPageData, restaurantSections } = this.props;
+    const {
+      uuid,
+      title,
+      heroImageUrls,
+      categories,
+      etaRange,
+      location,
+    } = restaurantPageData;
+
+    if (restaurantPageData.length === 0) {
+      return <Loader />;
+    }
+
+    const heroImageUrl = heroImageUrls[heroImageUrls.length - 1].url;
+
+    const heroImageUrlSrcSet = heroImageUrls.reduce((acc, item, index) => {
+      let str = `${item.url} ${item.width}w`;
+
+      (index !== heroImageUrls.length - 1) && (str = `${str},`);
+
+      return `${acc}${str}`;
+    }, '');
+
+    return (
+      <>
+        <div className="hero">
+          <img
+            className="hero__img"
+            srcSet={heroImageUrlSrcSet}
+            sizes="(max-width: 320px) 240px,
+              (max-width: 768px) 550px,
+              (max-width: 1280px) 750px,
+              (max-width: 1980px) 1080px,
+              750px"
+            src={heroImageUrl}
+            alt={title}
+          />
+          <div className="title">
+            <h1 id={uuid} className="title__name">{title}</h1>
+            <div className="title__categories">
+              {categories.join(' • ')}
+            </div>
+            <div className="title__eta">
+              {etaRange || DEFAULT_ETA_RANGE}
+            </div>
+            <div className="title__address">
+              {`${location.address} • `}
+              <a href="# " className="title__more">More info</a>
+            </div>
+          </div>
+        </div>
+        <div className="content">
+          <nav className="restoraunt-menu">
+            {restaurantSections
+              .map(item => (
+                <a
+                  href={`#${item.uuid}`}
+                  className="restoraunt-menu__item"
+                >
+                  {item.title}
+                </a>
+              ))
+            }
+          </nav>
+
+          {restaurantSections.map(item => <Section category={item} />)}
+        </div>
+      </>
+    );
+  }
+}
+
+RestaurantPage.propTypes = {
+  loadRestaurantPage: PropTypes.func.isRequired,
+  restaurantPageData: PropTypes.shape(),
+  restaurantSections: PropTypes.arrayOf(PropTypes.shape()),
+  match: PropTypes.shape().isRequired,
+};
+
+RestaurantPage.defaultProps = {
+  restaurantPageData: [],
+  restaurantSections: [],
+};
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
new file mode 100644
index 0000000..2675ce9
--- /dev/null
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -0,0 +1,102 @@
+.hero {
+  position: relative;
+  height: 380px;
+  margin-top: -40px;
+  margin-bottom: 30px;
+
+  overflow: hidden;
+
+  &__img {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+}
+
+.title {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  font-size: 14px;
+
+  background: #fff;
+  padding-left: 100px;
+  padding-right: 40px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+
+  &__name {
+    color: #1d1d1d;
+    font-size: 36px;
+    font-weight: 500;
+
+    margin-bottom: 16px;
+  }
+
+  &__categories {
+    color: #757575;
+
+    margin-bottom: 16px;
+  }
+
+  &__eta {
+    width: 86px;
+    background-color: #f5f5f5;
+
+    margin-bottom: 18px;
+  }
+
+  &__more {
+    color: #247a00;
+    font-size: inherit;
+  }
+}
+
+.restoraunt-menu {
+  display: flex;
+  justify-content: space-between;
+
+  overflow-x: auto;
+  overflow-anchor: none;
+  position: sticky;
+  top: 0;
+
+  font-size: 14px;
+  height: 40px;
+
+  margin-bottom: 40px;
+  white-space: nowrap;
+
+  &__item {
+    font-size: 14px;
+    line-height: 21px;
+    position: relative;
+
+    &:not(:last-of-type) {
+      margin-right: 20px;
+    }
+
+    &::after {
+      content: "";
+      height: 1px;
+      background-color: #000;
+      width: 100%;
+      display: none;
+      position: absolute;
+      bottom: 0;
+    }
+
+    &:hover::after {
+      display: block;
+    }
+
+  }
+}
+
diff --git a/src/components/RestaurantPage/index.js b/src/components/RestaurantPage/index.js
new file mode 100644
index 0000000..1f414dc
--- /dev/null
+++ b/src/components/RestaurantPage/index.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import { RestaurantPage } from './RestaurantPage';
+import { loadRestaurantPage } from '../../store/actions';
+import {
+  selectRestaurantPageData,
+  selectResorauntSections,
+} from '../../store/selector';
+
+const mapState2Props = state => ({
+  restaurantPageData: selectRestaurantPageData(state),
+  restaurantSections: selectResorauntSections(state),
+});
+
+const mapDispatch2Props = {
+  loadRestaurantPage,
+};
+
+const Enhanced = connect(
+  mapState2Props,
+  mapDispatch2Props
+)(RestaurantPage);
+
+export { Enhanced as RestaurantPage };
diff --git a/src/components/RestaurantsListPage/RestaurantsListPage.js b/src/components/RestaurantsListPage/RestaurantsListPage.js
index 4ee1f01..ef4e876 100644
--- a/src/components/RestaurantsListPage/RestaurantsListPage.js
+++ b/src/components/RestaurantsListPage/RestaurantsListPage.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import RestaurantCard from '../RestaurantCard';
 import './RestaurantListPage.scss';
@@ -30,27 +31,31 @@ export class RestaurantsListPage extends Component {
     }
 
     return (
-      <div className="restaurant-list">
-        {restaurantsListData.map((restoraunt) => {
-          const {
-            uuid,
-            title,
-            heroImageUrl,
-            categories,
-            etaRange,
-          } = restoraunt;
+      <div className="content">
+        <div className="restaurant-list">
+          {restaurantsListData.map((restoraunt) => {
+            const {
+              uuid,
+              title,
+              heroImageUrl,
+              categories,
+              etaRange,
+            } = restoraunt;
 
-          return (
-            <RestaurantCard
-              key={uuid}
-              uuid={uuid}
-              title={title}
-              imageUrl={heroImageUrl}
-              categories={categories}
-              etaRange={etaRange ? etaRange.text : DEFAULT_ETA_RANGE}
-            />
-          );
-        })}
+            return (
+              <Link to={uuid} key={uuid}>
+                <RestaurantCard
+                  key={uuid}
+                  uuid={uuid}
+                  title={title}
+                  imageUrl={heroImageUrl}
+                  categories={categories}
+                  etaRange={etaRange ? etaRange.text : DEFAULT_ETA_RANGE}
+                />
+              </Link>
+            );
+          })}
+        </div>
       </div>
     );
   }
diff --git a/src/components/Section/Section.js b/src/components/Section/Section.js
new file mode 100644
index 0000000..8a3a76e
--- /dev/null
+++ b/src/components/Section/Section.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Section.scss';
+import { CardItem } from '../CardItem';
+
+export const Section = ({ category, restaurantItems }) => {
+  const { title, uuid } = category;
+  const items = restaurantItems
+    .find(item => item.uuid === category.uuid).itemUuids;
+
+  return (
+    <>
+      <h2 className="title-categories">{title}</h2>
+      <section id={uuid} className="section">
+        {items.map(item => <CardItem {...item} />)}
+      </section>
+    </>
+  );
+};
+
+Section.propTypes = {
+  category: PropTypes.shape().isRequired,
+  restaurantItems: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+};
diff --git a/src/components/Section/Section.scss b/src/components/Section/Section.scss
new file mode 100644
index 0000000..471bf2a
--- /dev/null
+++ b/src/components/Section/Section.scss
@@ -0,0 +1,16 @@
+.section {
+  --card-width: 348px;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  gap: 40px 20px;
+
+  margin-bottom: 40px;
+}
+
+.title-categories {
+  font-size: 20px;
+  font-weight: 500;
+
+  margin-bottom: 20px;
+}
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
new file mode 100644
index 0000000..6d8745c
--- /dev/null
+++ b/src/components/Section/index.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { Section } from './Section';
+import {
+  selectRestorauntItems,
+} from '../../store/selector';
+
+const mapState2Props = state => ({
+  restaurantItems: selectRestorauntItems(state),
+});
+
+const Enhanced = connect(
+  mapState2Props,
+)(Section);
+
+export { Enhanced as Section };
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 59dcafd..3a4eb70 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -15,12 +15,12 @@ export const Select = (props) => {
     <div className="select">
       <select
         name={name}
-        value={value}
+        defaultValue={value}
         onChange={onSelect}
         className="select__input"
       >
         {options.map(({ value: optionValue, label }) => (
-          <option value={optionValue} selected={value === optionValue}>
+          <option value={optionValue} key={optionValue}>
             {label}
           </option>
         ))}
diff --git a/src/store/actions.js b/src/store/actions.js
index 1698a34..4a169cd 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,5 +1,6 @@
 export const ACTION_TYPES = {
   SAVE_RESTAURANTS: 'SAVE_RESTAURANTS',
+  SAVE_RESTAURANT_PAGE: 'SAVE_RESTAURANT_PAGE',
   SET_LOAD_RESTAURANTS_ERROR: 'SET_LOAD_RESTAURANTS_ERROR',
   START_LOADING: 'START_LOADING',
   STOP_LOADING: 'STOP_LOADING',
@@ -10,6 +11,11 @@ const saveRestaurants = data => ({
   payload: data,
 });
 
+const saveRestaurantPage = data => ({
+  type: ACTION_TYPES.SAVE_RESTAURANT_PAGE,
+  payload: data,
+});
+
 const setRestaurantsError = error => ({
   type: ACTION_TYPES.SET_LOAD_RESTAURANTS_ERROR,
   payload: error,
@@ -31,3 +37,12 @@ export const loadRestaurants = () => (dispatch) => {
     .catch(error => dispatch(setRestaurantsError(error.message)))
     .finally(() => dispatch(stopLoading()));
 };
+
+export const loadRestaurantPage = id => (dispatch) => {
+  dispatch(startLoading());
+  fetch(`https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/${id}`)
+    .then(response => response.json())
+    .then(({ data }) => dispatch(saveRestaurantPage(data)))
+    .catch(error => dispatch(setRestaurantsError(error.message)))
+    .finally(() => dispatch(stopLoading()));
+};
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index ed1015a..28d0987 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -2,6 +2,7 @@ import { ACTION_TYPES } from './actions';
 
 const initialState = {
   restaurantsListData: null,
+  restaurantPageData: null,
   isLoading: false,
   error: null,
 };
@@ -15,6 +16,17 @@ export function rootReducer(state = initialState, action) {
         ...state,
         error: null,
         restaurantsListData: payload,
+        restaurantPageData: null,
+      });
+    }
+
+    case ACTION_TYPES.SAVE_RESTAURANT_PAGE: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        error: null,
+        restaurantPageData: payload,
       });
     }
 
@@ -25,6 +37,7 @@ export function rootReducer(state = initialState, action) {
         ...state,
         error: payload,
         restaurantsListData: null,
+        restaurantPage: null,
       });
     }
 
diff --git a/src/store/selector.js b/src/store/selector.js
index f2e85bc..3bbcde0 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -15,6 +15,64 @@ export const selectRestaurantsList = createSelector(
   }
 );
 
+export const selectResorauntSections = createSelector(
+  rootSelector,
+  ({ restaurantPageData }) => {
+    if (!restaurantPageData) {
+      return [];
+    }
+
+    const { sectionsMap, sections } = restaurantPageData;
+
+    return sections.map(id => sectionsMap[id]);
+  }
+);
+
+export const selectRestorauntItems = createSelector(
+  rootSelector,
+  selectResorauntSections,
+  ({ restaurantPageData }, resorauntSections) => {
+    if (!restaurantPageData) {
+      return [];
+    }
+
+    const { entitiesMap } = restaurantPageData;
+
+    return resorauntSections
+      .map(item => ({
+        ...item,
+        itemUuids: item.itemUuids.map(uid => entitiesMap[uid]),
+      }));
+  }
+);
+
+export const selectEtaRange = (
+  state,
+  props
+) => state.storesMap[props.uuid].etaRange.text;
+
+export const selectRestaurantPageData = createSelector(
+  rootSelector,
+  ({ restaurantPageData }) => {
+    if (!restaurantPageData) {
+      return [];
+    }
+
+    return restaurantPageData;
+  }
+);
+
+export const selectRestaurantCurency = createSelector(
+  rootSelector,
+  ({ restaurantPageData }) => {
+    if (!restaurantPageData) {
+      return [];
+    }
+
+    return restaurantPageData.priceBucket;
+  }
+);
+
 export const selectRestaurantsListError = createSelector(
   rootSelector,
   ({ error }) => error
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b2bdace..ee2a470 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,6 +24,7 @@ input {
 
 a {
   text-decoration: none;
+  color: #000;
 }
 
 button {

From fb4b635b25f077a3d70ecaf81bb116d4e39aa083 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Mon, 21 Oct 2019 22:51:25 +0300
Subject: [PATCH 04/34] partial solution

---
 src/App.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index da7a0c3..0434db3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import './App.scss';
 import { store } from './store';
@@ -12,12 +12,12 @@ const App = () => (
   <Provider store={store}>
     <Header />
     <main className="page">
-      <BrowserRouter>
+      <HashRouter>
         <Switch>
           <Route path="/" exact component={RestaurantsListPage} />
           <Route path="/:uuid" component={RestaurantPage} />
         </Switch>
-      </BrowserRouter>
+      </HashRouter>
     </main>
     <Footer />
   </Provider>

From 4dc3bcdb8fb4cf17af348d70edb0e5062e0e452b Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 15:07:30 +0300
Subject: [PATCH 05/34] partial solution

---
 src/components/CardItem/CardItem.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
index 290eed9..6a34b48 100644
--- a/src/components/CardItem/CardItem.scss
+++ b/src/components/CardItem/CardItem.scss
@@ -7,7 +7,8 @@
   line-height: 21px;
   border: 1px solid #e0e0e0;
 
-  &__img {
+  &__img,
+  &__description {
     width: 50%;
   }
 
@@ -19,8 +20,9 @@
     padding: 16px;
 
     &-wrapper {
-      overflow-y: auto;
+      overflow: hidden;
       max-height: 90px;
+      line-clamp: 4;
     }
 
     &-info {

From 1f1a68929e1854dd891594c55c1afd4f0068c7b1 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 15:11:13 +0300
Subject: [PATCH 06/34] partial solution

---
 src/components/Header/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 3081336..702a699 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -49,7 +49,7 @@ export class Header extends Component {
       <header className="header">
         <div className="content">
           <div className="header__inner">
-            <a href="/">
+            <a href="/#">
               <img
                 className="header__logo"
                 src="./images/logo.svg"

From 783c92512bfab7c4525cf1542f0f2c7b15a44933 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 15:26:32 +0300
Subject: [PATCH 07/34] partial solution

---
 src/App.js                      | 12 ++++++------
 src/components/Header/Header.js |  5 +++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0434db3..c132728 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,16 +10,16 @@ import { RestaurantPage } from './components/RestaurantPage';
 
 const App = () => (
   <Provider store={store}>
-    <Header />
-    <main className="page">
-      <HashRouter>
+    <HashRouter>
+      <Header />
+      <main className="page">
         <Switch>
           <Route path="/" exact component={RestaurantsListPage} />
           <Route path="/:uuid" component={RestaurantPage} />
         </Switch>
-      </HashRouter>
-    </main>
-    <Footer />
+      </main>
+      <Footer />
+    </HashRouter>
   </Provider>
 );
 
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 702a699..9b8d654 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import Input from '../Input';
 import './Header.scss';
 
@@ -49,13 +50,13 @@ export class Header extends Component {
       <header className="header">
         <div className="content">
           <div className="header__inner">
-            <a href="/#">
+            <Link to="/">
               <img
                 className="header__logo"
                 src="./images/logo.svg"
                 alt="Uber Eats"
               />
-            </a>
+            </Link>
 
             <div className="header__delivery-info">
               <Input

From bb9480c67b758bc8bb539684b433031472db7e3d Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 15:28:51 +0300
Subject: [PATCH 08/34] added demo

---
 README.md | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index dfe2840..5a132c0 100644
--- a/README.md
+++ b/README.md
@@ -13,13 +13,13 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
   - use `redux-thunk` to handle async actions
   - create separate component for restaurant card
   - use https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants endpoint to fetch data
-    - accept optional query parameter `location`: `london|kyiv` 
-  - `RestaurantCard` should be clickable fully (not only the image) 
+    - accept optional query parameter `location`: `london|kyiv`
+  - `RestaurantCard` should be clickable fully (not only the image)
 2. Implement basic header markup
 3. Implement footer
 4. Add functionality and styles for mobile and tablet versions
     - `Location`, `Deliver now` and `Search` should be replaced whith buttons on the small screens.
-    Block with inputs should apper below the header after click on the button. 
+    Block with inputs should apper below the header after click on the button.
 5. Implement `RestaurantPage`
     - use `uuid` in the URL
     - fetch data from https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/:uuid
@@ -37,29 +37,31 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
 
 ## Workflow
 - Fork the repository with task
-- Clone forked repository 
+- Clone forked repository
     ```bash
     git clone git@github.com:<user_name>/<task_repository>.git
     ```
 - Run `npm install` to install dependencies.
 - Then develop
 
-## Development mode 
+## Development mode
 - Run `npm start` to start development server on `http://localhost:3000`
-    When you run server the command line window will no longer be available for 
-    writing commands until you stop server (`ctrl + c`). All other commands you 
+    When you run server the command line window will no longer be available for
+    writing commands until you stop server (`ctrl + c`). All other commands you
     need to run in new command line window.
 - Follow [HTML, CSS styleguide](https://mate-academy.github.io/style-guides/htmlcss.html)
 - Follow [the simplified JS styleguide](https://mate-academy.github.io/style-guides/javascript-standard-modified)
 - run `npm run lint` to check code style
-- When you finished add correct `homepage` to `package.json` and run `npm run deploy` 
+- When you finished add correct `homepage` to `package.json` and run `npm run deploy`
 - Add links to your demo in readme.md.
-  - `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)` - this will be a 
+  - `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)` - this will be a
   link to your index.html
 - Commit and push all recent changes.
-- Create `Pull Request` from forked repo `(<branch_name>)` to original repo 
+- Create `Pull Request` from forked repo `(<branch_name>)` to original repo
 (`master`).
 - Add a link at `PR` to Google Spreadsheets.
 
 ## Project structure
 You should be writing your code in `src/` directory.
+
+-[DEMO](https://igaryok.github.io/react_uber-eats/)

From 77ba95aad2a0f711264c83a887b02d9258fb55d9 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 16:27:03 +0300
Subject: [PATCH 09/34] Update src/components/RestaurantPage/index.js

Co-Authored-By: Iryna Holovko <33497431+irenhh@users.noreply.github.com>
---
 src/components/RestaurantPage/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RestaurantPage/index.js b/src/components/RestaurantPage/index.js
index 1f414dc..e6f9d2d 100644
--- a/src/components/RestaurantPage/index.js
+++ b/src/components/RestaurantPage/index.js
@@ -16,7 +16,7 @@ const mapDispatch2Props = {
 };
 
 const Enhanced = connect(
-  mapState2Props,
+  mapStateToProps,
   mapDispatch2Props
 )(RestaurantPage);
 

From bdd4f8c770cfb487f32946244573821f588709b9 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 22 Oct 2019 16:27:42 +0300
Subject: [PATCH 10/34] Update src/components/CardItem/index.js

Co-Authored-By: Iryna Holovko <33497431+irenhh@users.noreply.github.com>
---
 src/components/CardItem/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
index 4afc887..6747e7d 100644
--- a/src/components/CardItem/index.js
+++ b/src/components/CardItem/index.js
@@ -4,7 +4,7 @@ import {
   selectRestaurantCurency,
 } from '../../store/selector';
 
-const mapState2Props = state => ({
+const mapStateToProps = state => ({
   restaurantCurency: selectRestaurantCurency(state),
 });
 

From 0744373726c1ff826379637ddac65962fce1f958 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 23 Oct 2019 18:41:03 +0300
Subject: [PATCH 11/34] partial solution

---
 src/components/CardItem/index.js                  | 2 +-
 src/components/Header/Header.js                   | 6 +++---
 src/components/Header/Header.scss                 | 3 ++-
 src/components/RestaurantCard/RestaurantCard.scss | 6 +++++-
 src/components/RestaurantPage/RestaurantPage.js   | 1 +
 src/components/RestaurantPage/index.js            | 2 +-
 src/styles/index.scss                             | 3 ++-
 7 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
index 6747e7d..4afc887 100644
--- a/src/components/CardItem/index.js
+++ b/src/components/CardItem/index.js
@@ -4,7 +4,7 @@ import {
   selectRestaurantCurency,
 } from '../../store/selector';
 
-const mapStateToProps = state => ({
+const mapState2Props = state => ({
   restaurantCurency: selectRestaurantCurency(state),
 });
 
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9b8d654..09c0501 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -111,12 +111,12 @@ export class Header extends Component {
               </button>
             </div>
 
-            <a
+            <Link
+              to="/"
               className="header__link"
-              href="/sign-in"
             >
               Sign In
-            </a>
+            </Link>
 
           </div>
 
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 0430e18..f848222 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -85,6 +85,7 @@
   position: relative;
   padding-top: 30px;
 
+
   @media (max-width: $breack-point-tablet) {
     display: flex;
   }
@@ -97,5 +98,5 @@
 }
 
 .control {
-  margin-left: auto;
+  // margin-left: auto;
 }
diff --git a/src/components/RestaurantCard/RestaurantCard.scss b/src/components/RestaurantCard/RestaurantCard.scss
index ac37e56..053cd2c 100644
--- a/src/components/RestaurantCard/RestaurantCard.scss
+++ b/src/components/RestaurantCard/RestaurantCard.scss
@@ -39,5 +39,9 @@
     background-color: #f5f5f5;
   }
 
-  cursor: pointer;
+  transition: transform 500ms;
+
+  &:hover {
+    transform: scale(1.1,1.1);
+  }
 }
diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index cd7bac9..01de5a6 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -12,6 +12,7 @@ export class RestaurantPage extends PureComponent {
     const { match: { params } } = this.props;
 
     loadRestaurantPage(params.uuid);
+    window.scrollTo(0, 0);
   }
 
   render() {
diff --git a/src/components/RestaurantPage/index.js b/src/components/RestaurantPage/index.js
index e6f9d2d..1f414dc 100644
--- a/src/components/RestaurantPage/index.js
+++ b/src/components/RestaurantPage/index.js
@@ -16,7 +16,7 @@ const mapDispatch2Props = {
 };
 
 const Enhanced = connect(
-  mapStateToProps,
+  mapState2Props,
   mapDispatch2Props
 )(RestaurantPage);
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ee2a470..8922856 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,7 +16,8 @@ input {
   line-height: 1.6;
 }
 
-input {
+input,
+select {
   border: 0;
   background: transparent;
   outline: none;

From 443d96b6b87bb490734dad397b0cffd117838f64 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 23 Oct 2019 21:22:37 +0300
Subject: [PATCH 12/34] partial solution

---
 package.json                                  |  3 +-
 src/components/CardItem/CardItem.js           |  2 +-
 src/components/Error/Error.js                 |  1 -
 src/components/Header/Header.js               |  1 -
 src/components/Header/Header.scss             |  2 +-
 src/components/Input/Input.js                 |  4 +-
 .../RestaurantCard/RestaurantCard.js          |  2 -
 .../RestaurantPage/RestaurantPage.js          | 46 ++++++++++++++-----
 src/components/Section/Section.js             | 15 ++++--
 src/store/actions.js                          |  6 ++-
 src/store/selector.js                         |  8 +---
 11 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index d537744..ebce6b5 100755
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "react-scripts": "3.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0"
+    "reselect": "^4.0.0",
+    "uuidv4": "^5.0.1"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",
diff --git a/src/components/CardItem/CardItem.js b/src/components/CardItem/CardItem.js
index 1c16dcc..4f2f76d 100644
--- a/src/components/CardItem/CardItem.js
+++ b/src/components/CardItem/CardItem.js
@@ -25,7 +25,7 @@ CardItem.propTypes = {
   title: PropTypes.string.isRequired,
   imageUrl: PropTypes.string,
   description: PropTypes.string,
-  price: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
   restaurantCurency: PropTypes.string,
 };
 
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
index ec4ee1c..23be283 100644
--- a/src/components/Error/Error.js
+++ b/src/components/Error/Error.js
@@ -13,7 +13,6 @@ export const Error = (props) => {
       <a href="/" className="error__link">
         Go to Home
       </a>
-
     </div>
   );
 };
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 09c0501..caa6389 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -169,7 +169,6 @@ export class Header extends Component {
                   alt="search icon"
                 />
               </button>
-
             </div>
           )}
         </div>
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index f848222..3c7af23 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -98,5 +98,5 @@
 }
 
 .control {
-  // margin-left: auto;
+  margin-left: auto;
 }
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index a95e52c..f70032d 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { PureComponent, createRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -42,7 +41,7 @@ export class Input extends PureComponent {
     });
 
     return (
-      <label className="control">
+      <label htmlFor="control" className="control">
         {label && (
           <p className="control__label">
             {label}
@@ -60,6 +59,7 @@ export class Input extends PureComponent {
           )}
 
           <input
+            id="control"
             ref={this.inputRef}
             type={type}
             value={value}
diff --git a/src/components/RestaurantCard/RestaurantCard.js b/src/components/RestaurantCard/RestaurantCard.js
index dd0aaf1..c527808 100644
--- a/src/components/RestaurantCard/RestaurantCard.js
+++ b/src/components/RestaurantCard/RestaurantCard.js
@@ -8,7 +8,6 @@ export const RestaurantCard = (props) => {
     title,
     categories,
     etaRange,
-    // uuid,
   } = props;
 
   return (
@@ -26,7 +25,6 @@ export const RestaurantCard = (props) => {
 };
 
 RestaurantCard.propTypes = {
-  // uuid: PropTypes.string.isRequired,
   imageUrl: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   categories: PropTypes.arrayOf(PropTypes.string),
diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index 01de5a6..3bf8fed 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -17,6 +17,11 @@ export class RestaurantPage extends PureComponent {
 
   render() {
     const { restaurantPageData, restaurantSections } = this.props;
+
+    if (!restaurantPageData) {
+      return <Loader />;
+    }
+
     const {
       uuid,
       title,
@@ -26,10 +31,6 @@ export class RestaurantPage extends PureComponent {
       location,
     } = restaurantPageData;
 
-    if (restaurantPageData.length === 0) {
-      return <Loader />;
-    }
-
     const heroImageUrl = heroImageUrls[heroImageUrls.length - 1].url;
 
     const heroImageUrlSrcSet = heroImageUrls.reduce((acc, item, index) => {
@@ -46,11 +47,13 @@ export class RestaurantPage extends PureComponent {
           <img
             className="hero__img"
             srcSet={heroImageUrlSrcSet}
-            sizes="(max-width: 320px) 240px,
+            sizes="
+              (max-width: 320px) 240px,
               (max-width: 768px) 550px,
               (max-width: 1280px) 750px,
               (max-width: 1980px) 1080px,
-              750px"
+              750px
+            "
             src={heroImageUrl}
             alt={title}
           />
@@ -75,6 +78,7 @@ export class RestaurantPage extends PureComponent {
                 <a
                   href={`#${item.uuid}`}
                   className="restoraunt-menu__item"
+                  key={item.uuid}
                 >
                   {item.title}
                 </a>
@@ -82,21 +86,41 @@ export class RestaurantPage extends PureComponent {
             }
           </nav>
 
-          {restaurantSections.map(item => <Section category={item} />)}
+          {restaurantSections
+            .map(item => <Section category={item} key={item.uuid} />)
+          }
         </div>
       </>
     );
   }
 }
 
+const restorauntShape = {
+  title: PropTypes.string,
+  uuid: PropTypes.string,
+  categories: PropTypes.arrayOf(PropTypes.string),
+  etaRange: PropTypes.string,
+  location: PropTypes.shape({
+    address: PropTypes.string,
+    city: PropTypes.string,
+  }),
+};
+
 RestaurantPage.propTypes = {
   loadRestaurantPage: PropTypes.func.isRequired,
-  restaurantPageData: PropTypes.shape(),
-  restaurantSections: PropTypes.arrayOf(PropTypes.shape()),
-  match: PropTypes.shape().isRequired,
+  restaurantPageData: PropTypes.shape(restorauntShape),
+  restaurantSections: PropTypes.arrayOf(PropTypes.shape({
+    uuid: PropTypes.string,
+    tittle: PropTypes.string,
+  })),
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      uuid: PropTypes.string,
+    }),
+  }).isRequired,
 };
 
 RestaurantPage.defaultProps = {
-  restaurantPageData: [],
+  restaurantPageData: null,
   restaurantSections: [],
 };
diff --git a/src/components/Section/Section.js b/src/components/Section/Section.js
index 8a3a76e..9aa60f2 100644
--- a/src/components/Section/Section.js
+++ b/src/components/Section/Section.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import uuidGen from 'uuidv4';
 import './Section.scss';
 import { CardItem } from '../CardItem';
 
@@ -12,13 +13,21 @@ export const Section = ({ category, restaurantItems }) => {
     <>
       <h2 className="title-categories">{title}</h2>
       <section id={uuid} className="section">
-        {items.map(item => <CardItem {...item} />)}
+        {items.map(item => <CardItem {...item} key={uuidGen()} />)}
       </section>
     </>
   );
 };
 
 Section.propTypes = {
-  category: PropTypes.shape().isRequired,
-  restaurantItems: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  category: PropTypes.shape({
+    uuid: PropTypes.string,
+    tittle: PropTypes.string,
+  }).isRequired,
+  restaurantItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    imageUrl: PropTypes.string,
+    description: PropTypes.string,
+    price: PropTypes.number,
+  })).isRequired,
 };
diff --git a/src/store/actions.js b/src/store/actions.js
index 4a169cd..2414512 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,3 +1,5 @@
+const BASE_URL = 'https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/';
+
 export const ACTION_TYPES = {
   SAVE_RESTAURANTS: 'SAVE_RESTAURANTS',
   SAVE_RESTAURANT_PAGE: 'SAVE_RESTAURANT_PAGE',
@@ -31,7 +33,7 @@ const stopLoading = () => ({
 
 export const loadRestaurants = () => (dispatch) => {
   dispatch(startLoading());
-  fetch('https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants')
+  fetch(BASE_URL)
     .then(response => response.json())
     .then(({ data }) => dispatch(saveRestaurants(data)))
     .catch(error => dispatch(setRestaurantsError(error.message)))
@@ -40,7 +42,7 @@ export const loadRestaurants = () => (dispatch) => {
 
 export const loadRestaurantPage = id => (dispatch) => {
   dispatch(startLoading());
-  fetch(`https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/${id}`)
+  fetch(`${BASE_URL}${id}`)
     .then(response => response.json())
     .then(({ data }) => dispatch(saveRestaurantPage(data)))
     .catch(error => dispatch(setRestaurantsError(error.message)))
diff --git a/src/store/selector.js b/src/store/selector.js
index 3bbcde0..8070529 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -53,13 +53,7 @@ export const selectEtaRange = (
 
 export const selectRestaurantPageData = createSelector(
   rootSelector,
-  ({ restaurantPageData }) => {
-    if (!restaurantPageData) {
-      return [];
-    }
-
-    return restaurantPageData;
-  }
+  ({ restaurantPageData }) => restaurantPageData
 );
 
 export const selectRestaurantCurency = createSelector(

From c44a7f1450494e241a6befe6e68abac7c87654e1 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 23 Oct 2019 23:41:28 +0300
Subject: [PATCH 13/34] partial solution

---
 src/components/Header/Header.js               | 25 +++++++++----------
 src/components/Header/Header.scss             | 22 ++++++++++++++++
 src/components/Input/Input.js                 |  7 +-----
 src/components/Input/Input.scss               |  6 ++++-
 .../RestaurantPage/RestaurantPage.js          |  2 +-
 .../RestaurantPage/RestaurantPage.scss        | 12 ++++-----
 .../RestaurantsListPage.js                    |  1 +
 src/styles/variables.scss                     |  1 +
 8 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index caa6389..e1c3d28 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -111,12 +111,11 @@ export class Header extends Component {
               </button>
             </div>
 
-            <Link
-              to="/"
+            <span
               className="header__link"
             >
               Sign In
-            </Link>
+            </span>
 
           </div>
 
@@ -137,23 +136,23 @@ export class Header extends Component {
               {isMobileDeliveryInfoVisible && (
                 <>
                   <Input
-                    label="Where"
-                    name="address"
-                    value={address}
+                    label="When"
+                    name="time"
+                    value={time}
                     onChange={this.handleChange}
-                    placeholder="Address"
-                    iconUrl="./images/place.svg"
+                    placeholder="Time"
+                    iconUrl=""
+                    type="time"
                     isSmall={false}
                   />
 
                   <Input
                     label="To"
-                    name="time"
-                    value={time}
+                    name="address"
+                    value={address}
                     onChange={this.handleChange}
-                    placeholder="Time"
-                    iconUrl=""
-                    type="time"
+                    placeholder="Address"
+                    iconUrl="./images/place.svg"
                     isSmall={false}
                   />
                 </>
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 3c7af23..4597a9f 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -50,6 +50,7 @@
 
     &:hover {
       text-decoration: underline;
+      cursor: pointer;
     }
   }
 
@@ -90,6 +91,10 @@
     display: flex;
   }
 
+  @media (max-width: $breack-point-phone) {
+    justify-content: center;
+  }
+
   &__close {
     position: absolute;
     top: 10px;
@@ -99,4 +104,21 @@
 
 .control {
   margin-left: auto;
+
+  @media (max-width: $breack-point-tablet) {
+    margin-left: 0;
+  }
+
+  @media (max-width: $breack-point-phone) {
+    width: 100%;
+    &:not(:last-of-type) {
+      width: 25%;
+    }
+  }
+
+  @media (max-width: $breack-point-phone-sm) {
+    &:not(:first-of-type) {
+      max-width: 195px;
+    }
+  }
 }
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index f70032d..f99e1f8 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,4 +1,4 @@
-import React, { PureComponent, createRef } from 'react';
+import React, { PureComponent } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import './Input.scss';
@@ -8,14 +8,10 @@ export class Input extends PureComponent {
     isFocused: false,
   }
 
-  inputRef = createRef();
-
   handleFocus = () => this.setState({ isFocused: true });
 
   handleBlur = () => this.setState({ isFocused: false });
 
-  focus = () => this.inputRef.current.focus();
-
   render() {
     const {
       iconUrl,
@@ -60,7 +56,6 @@ export class Input extends PureComponent {
 
           <input
             id="control"
-            ref={this.inputRef}
             type={type}
             value={value}
             onChange={onChange}
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
index b3e3c94..8b06fdc 100644
--- a/src/components/Input/Input.scss
+++ b/src/components/Input/Input.scss
@@ -20,6 +20,10 @@
     height: 14px;
 
     margin-right: 10px;
+
+    @media (max-width: $breack-point-tablet) {
+      margin-right: 0;
+    }
   }
 
   &__input {
@@ -32,7 +36,7 @@
 
     &--small {
       @media (max-width: $breack-point-tablet-lg) {
-        max-width: 75px;
+        max-width: 90px;
       }
     }
   }
diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index 3bf8fed..de52f03 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -67,7 +67,7 @@ export class RestaurantPage extends PureComponent {
             </div>
             <div className="title__address">
               {`${location.address} • `}
-              <a href="# " className="title__more">More info</a>
+              <span className="title__more">More info</span>
             </div>
           </div>
         </div>
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 2675ce9..38056d2 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -56,6 +56,8 @@
   &__more {
     color: #247a00;
     font-size: inherit;
+
+    cursor: pointer;
   }
 }
 
@@ -64,9 +66,6 @@
   justify-content: space-between;
 
   overflow-x: auto;
-  overflow-anchor: none;
-  position: sticky;
-  top: 0;
 
   font-size: 14px;
   height: 40px;
@@ -86,15 +85,16 @@
     &::after {
       content: "";
       height: 1px;
+      width: 0;
       background-color: #000;
-      width: 100%;
-      display: none;
+      display: block;
       position: absolute;
       bottom: 0;
+      transition: 500ms;
     }
 
     &:hover::after {
-      display: block;
+      width: 100%;
     }
 
   }
diff --git a/src/components/RestaurantsListPage/RestaurantsListPage.js b/src/components/RestaurantsListPage/RestaurantsListPage.js
index ef4e876..f7e946a 100644
--- a/src/components/RestaurantsListPage/RestaurantsListPage.js
+++ b/src/components/RestaurantsListPage/RestaurantsListPage.js
@@ -13,6 +13,7 @@ export class RestaurantsListPage extends Component {
     const { loadRestaurants } = this.props;
 
     loadRestaurants();
+    window.scrollTo(0, 0);
   }
 
   render() {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 30f92c4..054ab01 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,3 +6,4 @@ $breack-point-tablet-lg: 956px;
 $breack-point-tablet: 768px;
 $breack-point-phone-lg: 620px;
 $breack-point-phone: 550px;
+$breack-point-phone-sm: 400px;

From e567c7bd15a600473c9369fc970cfe86d95310cb Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 24 Oct 2019 09:57:24 +0300
Subject: [PATCH 14/34] Update src/components/Section/index.js

Co-Authored-By: Iryna Holovko <33497431+irenhh@users.noreply.github.com>
---
 src/components/Section/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Section/index.js b/src/components/Section/index.js
index 6d8745c..1df7911 100644
--- a/src/components/Section/index.js
+++ b/src/components/Section/index.js
@@ -4,7 +4,7 @@ import {
   selectRestorauntItems,
 } from '../../store/selector';
 
-const mapState2Props = state => ({
+const mapStateToProps = state => ({
   restaurantItems: selectRestorauntItems(state),
 });
 

From f71bfb8bb583a2d0c1912ffc9c24d963334840de Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 24 Oct 2019 10:10:52 +0300
Subject: [PATCH 15/34] partial solution

---
 src/components/CardItem/index.js       | 4 ++--
 src/components/RestaurantPage/index.js | 8 ++++----
 src/components/Section/index.js        | 2 +-
 src/components/Select/Select.scss      | 4 ----
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
index 4afc887..24ab6bd 100644
--- a/src/components/CardItem/index.js
+++ b/src/components/CardItem/index.js
@@ -4,12 +4,12 @@ import {
   selectRestaurantCurency,
 } from '../../store/selector';
 
-const mapState2Props = state => ({
+const mapStateToProps = state => ({
   restaurantCurency: selectRestaurantCurency(state),
 });
 
 const Enhanced = connect(
-  mapState2Props,
+  mapStateToProps,
 )(CardItem);
 
 export { Enhanced as CardItem };
diff --git a/src/components/RestaurantPage/index.js b/src/components/RestaurantPage/index.js
index 1f414dc..116b7c9 100644
--- a/src/components/RestaurantPage/index.js
+++ b/src/components/RestaurantPage/index.js
@@ -6,18 +6,18 @@ import {
   selectResorauntSections,
 } from '../../store/selector';
 
-const mapState2Props = state => ({
+const mapStateToProps = state => ({
   restaurantPageData: selectRestaurantPageData(state),
   restaurantSections: selectResorauntSections(state),
 });
 
-const mapDispatch2Props = {
+const mapDispatchToProps = {
   loadRestaurantPage,
 };
 
 const Enhanced = connect(
-  mapState2Props,
-  mapDispatch2Props
+  mapStateToProps,
+  mapDispatchToProps
 )(RestaurantPage);
 
 export { Enhanced as RestaurantPage };
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
index 1df7911..fe79e06 100644
--- a/src/components/Section/index.js
+++ b/src/components/Section/index.js
@@ -9,7 +9,7 @@ const mapStateToProps = state => ({
 });
 
 const Enhanced = connect(
-  mapState2Props,
+  mapStateToProps,
 )(Section);
 
 export { Enhanced as Section };
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index f7a9334..1898b00 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -13,10 +13,6 @@
     border: 1px solid #979797;
     border-radius: 0;
     cursor: pointer;
-
-    // option {
-    //   background-color: transparent;
-    // }
   }
 
 

From 55a9b2533360777c456cb4e98284afe6996ef963 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 24 Oct 2019 11:14:58 +0300
Subject: [PATCH 16/34] partial solution

---
 src/components/Footer/Footer.scss                 | 4 +++-
 src/components/RestaurantPage/RestaurantPage.scss | 4 ++--
 src/styles/index.scss                             | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index 4bc5de1..ba1b041 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -123,8 +123,10 @@
     color: #fff;
     white-space: nowrap;
 
+    transition: color 300ms;
+
     &:hover {
-      text-decoration: underline;
+      color: $color-green;
     }
   }
 }
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 38056d2..50d903f 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -82,7 +82,7 @@
       margin-right: 20px;
     }
 
-    &::after {
+    &:after {
       content: "";
       height: 1px;
       width: 0;
@@ -93,7 +93,7 @@
       transition: 500ms;
     }
 
-    &:hover::after {
+    &:hover:after {
       width: 100%;
     }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8922856..3bc36f7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -26,6 +26,7 @@ select {
 a {
   text-decoration: none;
   color: #000;
+  outline: none;
 }
 
 button {

From a904cccafe202b8383572f2fd5cb4bbe79e5dd93 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 26 Oct 2019 14:56:04 +0300
Subject: [PATCH 17/34] partial solution

---
 .../RestaurantPage/RestaurantPage.js          | 38 ++++++---
 .../RestaurantPage/RestaurantPage.scss        | 82 +++++++++++++++++--
 2 files changed, 103 insertions(+), 17 deletions(-)

diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index de52f03..d94fbcd 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -57,18 +57,34 @@ export class RestaurantPage extends PureComponent {
             src={heroImageUrl}
             alt={title}
           />
-          <div className="title">
-            <h1 id={uuid} className="title__name">{title}</h1>
-            <div className="title__categories">
-              {categories.join(' • ')}
-            </div>
-            <div className="title__eta">
-              {etaRange || DEFAULT_ETA_RANGE}
-            </div>
-            <div className="title__address">
-              {`${location.address} • `}
-              <span className="title__more">More info</span>
+
+          <div className="wrapper-title">
+            <div className="content">
+              <div className="title">
+                <h1 id={uuid} className="title__name">{title}</h1>
+                <div className="title__categories">
+                  {categories.join(' • ')}
+                </div>
+                <div className="title__eta">
+                  {etaRange || DEFAULT_ETA_RANGE}
+                </div>
+                <div className="title__address">
+                  {`${location.address} • `}
+                  <span className="title__more">More info</span>
+                </div>
+              </div>
             </div>
+            <div className="left-margin-block" />
+          </div>
+        </div>
+
+        <div className="title-mobile">
+          <h1 id={uuid} className="title-mobile__name">{title}</h1>
+          <div className="title-mobile__categories">
+            {categories.join(' • ')}
+          </div>
+          <div className="title-mobile__eta">
+            {etaRange || DEFAULT_ETA_RANGE}
           </div>
         </div>
         <div className="content">
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 50d903f..82957c4 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -1,3 +1,5 @@
+@import '../../styles/utils.scss';
+
 .hero {
   position: relative;
   height: 380px;
@@ -6,6 +8,10 @@
 
   overflow: hidden;
 
+  @media (max-width: $breack-point-tablet-lg) {
+    margin-bottom: 90px;
+  }
+
   &__img {
     position: absolute;
     top: 50%;
@@ -15,19 +21,18 @@
 }
 
 .title {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 
   font-size: 14px;
 
+  @media (max-width: $breack-point-tablet-lg) {
+    display: none;
+  }
+
+  width: fit-content;
   background: #fff;
-  padding-left: 100px;
   padding-right: 40px;
   padding-top: 24px;
   padding-bottom: 24px;
@@ -100,3 +105,68 @@
   }
 }
 
+.title-mobile {
+  display: none;
+
+  position: absolute;
+
+  width: 575px;
+
+  // display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  font-size: 14px;
+
+  background: #fff;
+  padding-left: 62px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+
+  &__name {
+    color: #1d1d1d;
+    font-size: 28px;
+    font-weight: 500;
+
+    margin-bottom: 16px;
+  }
+
+  &__categories {
+    color: #757575;
+
+    margin-bottom: 16px;
+  }
+
+  &__eta {
+    width: 86px;
+    background-color: #f5f5f5;
+
+    margin-bottom: 18px;
+  }
+}
+
+.wrapper-title {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  background: transparent;
+}
+
+.left-margin-block {
+  position: absolute;
+  background: #fff;
+  height: 100%;
+  width: 30%;
+  top: 0;
+  z-index: -1;
+
+  @media (min-width: 3500px) {
+    width: 40%;
+  }
+
+  @media (min-width: 7200px) {
+    width: 50%;
+  }
+}

From dd4f6c41e89455fb10c4f54173608080eb8b1659 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 26 Oct 2019 19:23:44 +0300
Subject: [PATCH 18/34] partial solution - hero of restoran page

---
 .../RestaurantPage/RestaurantPage.js          |  2 +
 .../RestaurantPage/RestaurantPage.scss        | 44 +++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index d94fbcd..a199255 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -76,6 +76,7 @@ export class RestaurantPage extends PureComponent {
             </div>
             <div className="left-margin-block" />
           </div>
+
         </div>
 
         <div className="title-mobile">
@@ -87,6 +88,7 @@ export class RestaurantPage extends PureComponent {
             {etaRange || DEFAULT_ETA_RANGE}
           </div>
         </div>
+
         <div className="content">
           <nav className="restoraunt-menu">
             {restaurantSections
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 82957c4..1a4d7b5 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -8,16 +8,22 @@
 
   overflow: hidden;
 
-  @media (max-width: $breack-point-tablet-lg) {
-    margin-bottom: 90px;
-  }
-
   &__img {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
   }
+
+  @media (max-width: $breack-point-tablet) {
+    margin-bottom: 90px;
+    height: 300px;
+  }
+
+  @media (max-width: $breack-point-phone) {
+    margin-bottom: 175px;
+    height: 255px;
+  }
 }
 
 .title {
@@ -27,10 +33,6 @@
 
   font-size: 14px;
 
-  @media (max-width: $breack-point-tablet-lg) {
-    display: none;
-  }
-
   width: fit-content;
   background: #fff;
   padding-right: 40px;
@@ -106,22 +108,23 @@
 }
 
 .title-mobile {
+
   display: none;
 
   position: absolute;
+  top: 200px;
 
-  width: 575px;
+  min-width: 540px;
+  left: 50%;
+  transform: translateX(-50%);
 
-  // display: flex;
   flex-direction: column;
   align-items: flex-start;
 
   font-size: 14px;
 
   background: #fff;
-  padding-left: 62px;
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding: 24px 60px;
 
   &__name {
     color: #1d1d1d;
@@ -143,6 +146,16 @@
 
     margin-bottom: 18px;
   }
+
+  @media (max-width: $breack-point-tablet) {
+    display: flex;
+  }
+
+  @media (max-width: $breack-point-phone) {
+    padding: 20px;
+    min-width: 280px;
+  }
+
 }
 
 .wrapper-title {
@@ -152,6 +165,11 @@
   transform: translateY(-50%);
   width: 100%;
   background: transparent;
+
+  @media (max-width: $breack-point-tablet) {
+    display: none;
+  }
+
 }
 
 .left-margin-block {

From db06d694994b4b565b5c79eb2140facdc1a51182 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 26 Oct 2019 20:42:36 +0300
Subject: [PATCH 19/34] partial solution adaptive Pagearestotan, Card

---
 src/components/CardItem/CardItem.scss         |  6 ++++--
 .../RestaurantPage/RestaurantPage.scss        |  8 ++++----
 src/components/Section/Section.scss           | 20 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
index 6a34b48..b285a05 100644
--- a/src/components/CardItem/CardItem.scss
+++ b/src/components/CardItem/CardItem.scss
@@ -1,14 +1,16 @@
 .card {
   display: flex;
   flex-flow: row nowrap;
+  justify-content: space-between;
   box-sizing: border-box;
   height: 160px;
 
   line-height: 21px;
   border: 1px solid #e0e0e0;
 
-  &__img,
-  &__description {
+  overflow: hidden;
+
+  &__img {
     width: 50%;
   }
 
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 1a4d7b5..06a1d56 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -70,7 +70,6 @@
 
 .restoraunt-menu {
   display: flex;
-  justify-content: space-between;
 
   overflow-x: auto;
 
@@ -84,6 +83,7 @@
     font-size: 14px;
     line-height: 21px;
     position: relative;
+    margin-right: 24px;
 
     &:not(:last-of-type) {
       margin-right: 20px;
@@ -131,20 +131,20 @@
     font-size: 28px;
     font-weight: 500;
 
-    margin-bottom: 16px;
+    margin-bottom: 10px;
   }
 
   &__categories {
     color: #757575;
 
-    margin-bottom: 16px;
+    margin-bottom: 10px;
   }
 
   &__eta {
     width: 86px;
     background-color: #f5f5f5;
 
-    margin-bottom: 18px;
+    // margin-bottom: 18px;
   }
 
   @media (max-width: $breack-point-tablet) {
diff --git a/src/components/Section/Section.scss b/src/components/Section/Section.scss
index 471bf2a..629def4 100644
--- a/src/components/Section/Section.scss
+++ b/src/components/Section/Section.scss
@@ -1,11 +1,29 @@
+@import "../../styles/utils.scss";
+
 .section {
   --card-width: 348px;
+  --section-row-gap: 40px;
+  --section-coumn-gap: 20px;
+
+  box-sizing: border-box;
 
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
-  gap: 40px 20px;
+  gap: var(--section-row-gap) var(--section-coumn-gap);
 
   margin-bottom: 40px;
+
+  @media (max-width: $breack-point-tablet-lg) {
+    --card-width: 340px;
+  }
+
+  @media (max-width: $breack-point-phone-lg) {
+    --section-row-gap: 20px;
+  }
+
+  @media (max-width: $breack-point-phone-sm) {
+    --card-width: 280px;
+  }
 }
 
 .title-categories {

From fcfca0fdbac6d5c333a971116561e43b6534e57f Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 26 Oct 2019 21:22:33 +0300
Subject: [PATCH 20/34] partial solution - refactored bag with img in
 ReastorauntPage

---
 src/components/CardItem/CardItem.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
index b285a05..7b60fe4 100644
--- a/src/components/CardItem/CardItem.scss
+++ b/src/components/CardItem/CardItem.scss
@@ -20,6 +20,7 @@
     justify-content: space-between;
     box-sizing: border-box;
     padding: 16px;
+    min-width: 50%;
 
     &-wrapper {
       overflow: hidden;

From 5b0833a769d3c5f2d5d3b450801a038b95906ffc Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 26 Oct 2019 22:59:29 +0300
Subject: [PATCH 21/34] partial solution - change size image in Card

---
 src/components/CardItem/CardItem.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
index 7b60fe4..6cd4b9b 100644
--- a/src/components/CardItem/CardItem.scss
+++ b/src/components/CardItem/CardItem.scss
@@ -11,7 +11,7 @@
   overflow: hidden;
 
   &__img {
-    width: 50%;
+    height: 100%;
   }
 
   &__description {

From 0460d70857c6f916eab1111a10ce90678f1af38e Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sun, 27 Oct 2019 22:51:59 +0200
Subject: [PATCH 22/34] change class-component to functional component

---
 .../RestaurantPage/RestaurantPage.js          | 186 +++++++++---------
 src/store/selector.js                         |   4 +-
 2 files changed, 94 insertions(+), 96 deletions(-)

diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index a199255..10b411b 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Loader from '../Loader';
 import './RestaurantPage.scss';
@@ -6,112 +6,110 @@ import { Section } from '../Section';
 
 const DEFAULT_ETA_RANGE = '20 - 30 min';
 
-export class RestaurantPage extends PureComponent {
-  componentDidMount() {
-    const { loadRestaurantPage } = this.props;
-    const { match: { params } } = this.props;
-
+export const RestaurantPage = ({
+  loadRestaurantPage,
+  restaurantPageData,
+  restaurantSections,
+  match: { params },
+}) => {
+  useEffect(() => {
     loadRestaurantPage(params.uuid);
     window.scrollTo(0, 0);
+  }, [params.uuid, loadRestaurantPage]);
+
+  if (!restaurantPageData) {
+    return <Loader />;
   }
 
-  render() {
-    const { restaurantPageData, restaurantSections } = this.props;
-
-    if (!restaurantPageData) {
-      return <Loader />;
-    }
-
-    const {
-      uuid,
-      title,
-      heroImageUrls,
-      categories,
-      etaRange,
-      location,
-    } = restaurantPageData;
-
-    const heroImageUrl = heroImageUrls[heroImageUrls.length - 1].url;
-
-    const heroImageUrlSrcSet = heroImageUrls.reduce((acc, item, index) => {
-      let str = `${item.url} ${item.width}w`;
-
-      (index !== heroImageUrls.length - 1) && (str = `${str},`);
-
-      return `${acc}${str}`;
-    }, '');
-
-    return (
-      <>
-        <div className="hero">
-          <img
-            className="hero__img"
-            srcSet={heroImageUrlSrcSet}
-            sizes="
-              (max-width: 320px) 240px,
-              (max-width: 768px) 550px,
-              (max-width: 1280px) 750px,
-              (max-width: 1980px) 1080px,
-              750px
-            "
-            src={heroImageUrl}
-            alt={title}
-          />
-
-          <div className="wrapper-title">
-            <div className="content">
-              <div className="title">
-                <h1 id={uuid} className="title__name">{title}</h1>
-                <div className="title__categories">
-                  {categories.join(' • ')}
-                </div>
-                <div className="title__eta">
-                  {etaRange || DEFAULT_ETA_RANGE}
-                </div>
-                <div className="title__address">
-                  {`${location.address} • `}
-                  <span className="title__more">More info</span>
-                </div>
+  const {
+    uuid,
+    title,
+    heroImageUrls,
+    categories,
+    etaRange,
+    location,
+  } = restaurantPageData;
+
+  const heroImageUrl = heroImageUrls[heroImageUrls.length - 1].url;
+
+  const heroImageUrlSrcSet = heroImageUrls.reduce((acc, item, index) => {
+    let str = `${item.url} ${item.width}w`;
+
+    (index !== heroImageUrls.length - 1) && (str = `${str},`);
+
+    return `${acc}${str}`;
+  }, '');
+
+  return (
+    <>
+      <div className="hero">
+        <img
+          className="hero__img"
+          srcSet={heroImageUrlSrcSet}
+          sizes="
+            (max-width: 320px) 240px,
+            (max-width: 768px) 550px,
+            (max-width: 1280px) 750px,
+            (max-width: 1980px) 1080px,
+            750px
+          "
+          src={heroImageUrl}
+          alt={title}
+        />
+
+        <div className="wrapper-title">
+          <div className="content">
+            <div className="title">
+              <h1 id={uuid} className="title__name">{title}</h1>
+              <div className="title__categories">
+                {categories.join(' • ')}
+              </div>
+              <div className="title__eta">
+                {etaRange || DEFAULT_ETA_RANGE}
+              </div>
+              <div className="title__address">
+                {`${location.address} • `}
+                <span className="title__more">More info</span>
               </div>
             </div>
-            <div className="left-margin-block" />
           </div>
-
+          <div className="left-margin-block" />
         </div>
 
-        <div className="title-mobile">
-          <h1 id={uuid} className="title-mobile__name">{title}</h1>
-          <div className="title-mobile__categories">
-            {categories.join(' • ')}
-          </div>
-          <div className="title-mobile__eta">
-            {etaRange || DEFAULT_ETA_RANGE}
-          </div>
-        </div>
+      </div>
 
-        <div className="content">
-          <nav className="restoraunt-menu">
-            {restaurantSections
-              .map(item => (
-                <a
-                  href={`#${item.uuid}`}
-                  className="restoraunt-menu__item"
-                  key={item.uuid}
-                >
-                  {item.title}
-                </a>
-              ))
-            }
-          </nav>
+      <div className="title-mobile">
+        <h1 id={uuid} className="title-mobile__name">{title}</h1>
+        <div className="title-mobile__categories">
+          {categories.join(' • ')}
+        </div>
+        <div className="title-mobile__eta">
+          {etaRange || DEFAULT_ETA_RANGE}
+        </div>
+      </div>
 
+      <div className="content">
+        <nav className="restoraunt-menu">
           {restaurantSections
-            .map(item => <Section category={item} key={item.uuid} />)
+            .map(item => (
+              <a
+                href={`#${item.uuid}`}
+                className="restoraunt-menu__item"
+                key={item.uuid}
+              >
+                {item.title}
+              </a>
+            ))
           }
-        </div>
-      </>
-    );
-  }
-}
+        </nav>
+
+        {restaurantSections
+          .map(item => <Section category={item} key={item.uuid} />)
+        }
+      </div>
+    </>
+  );
+};
 
 const restorauntShape = {
   title: PropTypes.string,
diff --git a/src/store/selector.js b/src/store/selector.js
index 8070529..55c4c78 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -31,14 +31,14 @@ export const selectResorauntSections = createSelector(
 export const selectRestorauntItems = createSelector(
   rootSelector,
   selectResorauntSections,
-  ({ restaurantPageData }, resorauntSections) => {
+  ({ restaurantPageData }, restorauntSections) => {
     if (!restaurantPageData) {
       return [];
     }
 
     const { entitiesMap } = restaurantPageData;
 
-    return resorauntSections
+    return restorauntSections
       .map(item => ({
         ...item,
         itemUuids: item.itemUuids.map(uid => entitiesMap[uid]),

From f591389900cb74dba045dd38e2e955fb041a2792 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Tue, 29 Oct 2019 22:20:18 +0200
Subject: [PATCH 23/34] partial solution - regactoring

---
 package.json                                  |   3 +-
 public/images/button-close.svg                |   3 +
 public/images/button-minus.svg                |   4 +
 public/images/button-plus.svg                 |   5 +
 public/images/no_image.png                    | Bin 0 -> 18632 bytes
 src/App.js                                    |  26 -----
 src/components/App/App.js                     |  29 ++++++
 src/{ => components/App}/App.scss             |   0
 src/components/App/index.js                   |  18 ++++
 src/components/CardItem/CardItem.js           |  38 ++++++--
 src/components/CardItem/CardItem.scss         |  22 ++++-
 src/components/CardItem/index.js              |   7 ++
 src/components/Error/Error.js                 |   4 +-
 src/components/Footer/Footer.js               |   2 +
 src/components/Header/Header.js               |   2 +
 src/components/Input/Input.js                 |   1 +
 src/components/Loader/Loader.js               |   1 +
 src/components/Order/Order.js                 |  84 ++++++++++++++++
 src/components/Order/Order.scss               |  92 ++++++++++++++++++
 src/components/Order/index.js                 |  29 ++++++
 .../RestaurantCard/RestaurantCard.js          |   1 +
 .../RestaurantPage/RestaurantPage.js          |   4 +-
 .../RestaurantPage/RestaurantPage.scss        |   4 +
 src/components/RestaurantPage/index.js        |   2 +
 .../RestaurantsListPage.js                    |   4 +-
 src/components/RestaurantsListPage/index.js   |   1 +
 src/components/Section/Section.js             |   7 +-
 src/components/Section/index.js               |   1 +
 src/components/Select/Select.js               |   1 +
 src/index.js                                  |  14 ++-
 src/store/actions.js                          |  28 +++++-
 src/store/index.js                            |   1 +
 src/store/rootReducer.js                      |  21 ++++
 src/store/selector.js                         |  16 +++
 34 files changed, 424 insertions(+), 51 deletions(-)
 create mode 100644 public/images/button-close.svg
 create mode 100644 public/images/button-minus.svg
 create mode 100644 public/images/button-plus.svg
 create mode 100644 public/images/no_image.png
 delete mode 100644 src/App.js
 create mode 100644 src/components/App/App.js
 rename src/{ => components/App}/App.scss (100%)
 create mode 100644 src/components/App/index.js
 create mode 100644 src/components/Order/Order.js
 create mode 100644 src/components/Order/Order.scss
 create mode 100644 src/components/Order/index.js

diff --git a/package.json b/package.json
index ebce6b5..d537744 100755
--- a/package.json
+++ b/package.json
@@ -17,8 +17,7 @@
     "react-scripts": "3.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
-    "uuidv4": "^5.0.1"
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",
diff --git a/public/images/button-close.svg b/public/images/button-close.svg
new file mode 100644
index 0000000..ed1a1b8
--- /dev/null
+++ b/public/images/button-close.svg
@@ -0,0 +1,3 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46 23C46 35.7025 35.7025 46 23 46C10.2975 46 0 35.7025 0 23C0 10.2975 10.2975 0 23 0C35.7025 0 46 10.2975 46 23ZM14.3905 15.76L15.7604 14.39L23.2953 21.9249L30.8302 14.3901L32.2001 15.7601L24.6653 23.2949L32.2001 30.8297L30.8302 32.1997L23.2953 24.6649L15.7604 32.1998L14.3905 30.8298L21.9254 23.2949L14.3905 15.76Z" fill="white"/>
+</svg>
diff --git a/public/images/button-minus.svg b/public/images/button-minus.svg
new file mode 100644
index 0000000..8798241
--- /dev/null
+++ b/public/images/button-minus.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="24" fill="#F5F5F5"/>
+<rect x="14.7695" y="25.0258" width="2.05128" height="18.4615" transform="rotate(-90 14.7695 25.0258)" fill="black"/>
+</svg>
diff --git a/public/images/button-plus.svg b/public/images/button-plus.svg
new file mode 100644
index 0000000..7007058
--- /dev/null
+++ b/public/images/button-plus.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="24" fill="#F5F5F5"/>
+<rect x="22.9746" y="14.7692" width="2.05128" height="18.4615" fill="black"/>
+<rect x="14.7695" y="25.0256" width="2.05128" height="18.4615" transform="rotate(-90 14.7695 25.0256)" fill="black"/>
+</svg>
diff --git a/public/images/no_image.png b/public/images/no_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..73cc6df92e9720a1b229079f329a7f0eb8cc3ce4
GIT binary patch
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index c132728..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import './App.scss';
-import { store } from './store';
-import { RestaurantsListPage } from './components/RestaurantsListPage';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import { RestaurantPage } from './components/RestaurantPage';
-
-const App = () => (
-  <Provider store={store}>
-    <HashRouter>
-      <Header />
-      <main className="page">
-        <Switch>
-          <Route path="/" exact component={RestaurantsListPage} />
-          <Route path="/:uuid" component={RestaurantPage} />
-        </Switch>
-      </main>
-      <Footer />
-    </HashRouter>
-  </Provider>
-);
-
-export default App;
diff --git a/src/components/App/App.js b/src/components/App/App.js
new file mode 100644
index 0000000..691125c
--- /dev/null
+++ b/src/components/App/App.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import { RestaurantsListPage } from '../RestaurantsListPage';
+import Header from '../Header';
+import Footer from '../Footer';
+import { RestaurantPage } from '../RestaurantPage';
+import { Order } from '../Order';
+
+import './App.scss';
+
+export const App = ({ modalWindow }) => (
+  <>
+    <Header />
+    <main className="page">
+      <Switch>
+        <Route path="/" exact component={RestaurantsListPage} />
+        <Route path="/:uuid" component={RestaurantPage} />
+      </Switch>
+    </main>
+    <Footer />
+    {modalWindow && <Order />}
+  </>
+);
+
+App.propTypes = {
+  modalWindow: PropTypes.bool.isRequired,
+};
diff --git a/src/App.scss b/src/components/App/App.scss
similarity index 100%
rename from src/App.scss
rename to src/components/App/App.scss
diff --git a/src/components/App/index.js b/src/components/App/index.js
new file mode 100644
index 0000000..300b72b
--- /dev/null
+++ b/src/components/App/index.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import { App } from './App';
+import {
+  selectOrder,
+  selectStateModalWindow,
+} from '../../store/selector';
+
+const mapStateToProps = state => ({
+  order: selectOrder(state),
+  modalWindow: selectStateModalWindow(state),
+});
+
+const Enhanced = connect(
+  mapStateToProps,
+)(App);
+
+export { Enhanced as App };
diff --git a/src/components/CardItem/CardItem.js b/src/components/CardItem/CardItem.js
index 4f2f76d..1c30b27 100644
--- a/src/components/CardItem/CardItem.js
+++ b/src/components/CardItem/CardItem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import './CardItem.scss';
 
 export const CardItem = ({
@@ -8,25 +9,42 @@ export const CardItem = ({
   description,
   price,
   restaurantCurency,
-}) => (
-  <div className="card">
-    <div className="card__description">
-      <div className="card__description-wrapper">
-        <p>{title}</p>
-        <p className="card__description-info">{description}</p>
+  uuid,
+  createOrder,
+}) => {
+  const srcImage = imageUrl || './images/no_image.png';
+  const srcTitle = title || 'no-image icon';
+
+  return (
+    <div
+      id={uuid}
+      className="card"
+      onClick={event => createOrder(event.target.id)}
+      onKeyPress={event => createOrder(event.target.id)}
+      role="presentation"
+    >
+      <div id={uuid} className="card__description">
+        <div id={uuid} className="card__description-wrapper">
+          <p id={uuid}>{title}</p>
+          <p id={uuid} className="card__description-info">{description}</p>
+        </div>
+        <p id={uuid}>{`${restaurantCurency}${price}`}</p>
+      </div>
+      <div className="card__wrapper-img">
+        <img id={uuid} className="card__img" src={srcImage} alt={srcTitle} />
       </div>
-      <p>{`${restaurantCurency}${price}`}</p>
     </div>
-    {imageUrl && <img className="card__img" src={imageUrl} alt={title} />}
-  </div>
-);
+  );
+};
 
 CardItem.propTypes = {
+  uuid: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   imageUrl: PropTypes.string,
   description: PropTypes.string,
   price: PropTypes.number.isRequired,
   restaurantCurency: PropTypes.string,
+  createOrder: PropTypes.func.isRequired,
 };
 
 CardItem.defaultProps = {
diff --git a/src/components/CardItem/CardItem.scss b/src/components/CardItem/CardItem.scss
index 6cd4b9b..5bad81c 100644
--- a/src/components/CardItem/CardItem.scss
+++ b/src/components/CardItem/CardItem.scss
@@ -1,3 +1,5 @@
+@import '../../styles/utils.scss';
+
 .card {
   display: flex;
   flex-flow: row nowrap;
@@ -7,11 +9,27 @@
 
   line-height: 21px;
   border: 1px solid #e0e0e0;
+  box-shadow: none;
+  transition: box-shadow 500ms;
 
   overflow: hidden;
 
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);;
+  }
+
+  &__wrapper-img {
+    overflow: hidden;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 5px;
+  }
+
   &__img {
-    height: 100%;
+    width: 100%;
   }
 
   &__description {
@@ -20,7 +38,7 @@
     justify-content: space-between;
     box-sizing: border-box;
     padding: 16px;
-    min-width: 50%;
+    width: 50%;
 
     &-wrapper {
       overflow: hidden;
diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
index 24ab6bd..53cd66c 100644
--- a/src/components/CardItem/index.js
+++ b/src/components/CardItem/index.js
@@ -1,15 +1,22 @@
 import { connect } from 'react-redux';
+
 import { CardItem } from './CardItem';
 import {
   selectRestaurantCurency,
 } from '../../store/selector';
+import { loadMenuItem } from '../../store/actions';
 
 const mapStateToProps = state => ({
   restaurantCurency: selectRestaurantCurency(state),
 });
 
+const mapDispatchToProps = dispatch => ({
+  createOrder: uuid => dispatch(loadMenuItem(uuid)),
+});
+
 const Enhanced = connect(
   mapStateToProps,
+  mapDispatchToProps
 )(CardItem);
 
 export { Enhanced as CardItem };
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
index 23be283..6a41e28 100644
--- a/src/components/Error/Error.js
+++ b/src/components/Error/Error.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import './Error.scss';
 
 export const Error = (props) => {
@@ -7,11 +8,12 @@ export const Error = (props) => {
 
   return (
     <div className="error">
+      <p className="error__text">Sorry, something wrong(</p>
       <p className="error__text">
         {message}
       </p>
       <a href="/" className="error__link">
-        Go to Home
+        Go to main page
       </a>
     </div>
   );
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 135322c..642a585 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import Select from '../Select';
+
 import './Footer.scss';
 
 const Footer = () => (
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index e1c3d28..c2fa2b3 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
+
 import Input from '../Input';
+
 import './Header.scss';
 
 export class Header extends Component {
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index f99e1f8..2eb9ada 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+
 import './Input.scss';
 
 export class Input extends PureComponent {
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index e07f821..a633609 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import './Loader.scss';
 
 export const Loader = () => (
diff --git a/src/components/Order/Order.js b/src/components/Order/Order.js
new file mode 100644
index 0000000..fd41cba
--- /dev/null
+++ b/src/components/Order/Order.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Loader from '../Loader';
+import Error from '../Error';
+
+import './Order.scss';
+
+export const Order = ({
+  deleteOrder,
+  order,
+  isLoading,
+  error,
+}) => {
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  const { imageUrl, title, itemDescription } = order;
+  const countItem = 1;
+  const srcImage = imageUrl || './images/no_image.png';
+  const srcTitle = title || 'no-image icon';
+
+  return (
+    <aside className="modal">
+      <div className="modal-window">
+        {error && <Error message={error} />}
+        {!error && (
+          <>
+            <img className="modal-window__img" src={srcImage} alt={srcTitle} />
+            <div className="modal-window__wrapper-content">
+              <p className="modal-window__title">{title}</p>
+              <p className="modal-window__description">{itemDescription}</p>
+              <div className="modal-window__footer">
+                <div className="counter">
+                  <img
+                    className="counter__button"
+                    src="./images/button-minus.svg"
+                    alt="icon minus"
+                  />
+                  <div className="counter__item">{countItem}</div>
+                  <img
+                    className="counter__button"
+                    src="./images/button-plus.svg"
+                    alt="icon plus"
+                  />
+                </div>
+                <button type="button" className="modal-window__button-order">
+                  {`Add ${countItem}`}
+                </button>
+              </div>
+            </div>
+          </>
+        )
+        }
+        <div
+          onClick={deleteOrder}
+          onKeyPress={deleteOrder}
+          role="presentation"
+        >
+          <img
+            className="modal-window__button-close"
+            src="./images/button-close.svg"
+            alt="button close"
+            title="close"
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+Order.propTypes = {
+  isLoading: PropTypes.bool,
+  error: PropTypes.string,
+  deleteOrder: PropTypes.func.isRequired,
+  order: PropTypes.shape(),
+};
+
+Order.defaultProps = {
+  error: null,
+  isLoading: false,
+  order: [],
+};
diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
new file mode 100644
index 0000000..56ce699
--- /dev/null
+++ b/src/components/Order/Order.scss
@@ -0,0 +1,92 @@
+.modal{
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0, 0.7);
+
+  &-window {
+    position: relative;
+    margin: 80px auto 0;
+    background: #fff;
+    width: 716px;
+    min-height: 300px;
+
+    &__button-close {
+      position: absolute;
+      top: 24px;
+      right: 24px;
+      width: 46px;
+      height: 46px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+      border-radius: 50%;
+      background: rgba(211,211,211,0.7);
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &__img {
+      display: block;
+      height: 375px;
+      margin: 0 auto 50px;
+    }
+
+    &__wrapper-content {
+      padding: 0 34px 24px;
+    }
+
+    &__title {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 21px;
+      margin-bottom: 2px;
+    }
+
+    &__description {
+      font-size: 14px;
+      font-weight: 21px;
+      color: #626262;
+    }
+
+    &__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__button-order {
+      width: 485px;
+      height: 55px;
+      background: #247a00;
+      color: #fff;
+      font-weight: 500;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+
+  &__button {
+    &:not(:last-of-type) {
+      margin-right: 17px;
+    }
+
+    &:hover{
+      cursor: pointer;
+    }
+  }
+
+  &__item {
+    margin-right: 17px;
+  }
+}
+
diff --git a/src/components/Order/index.js b/src/components/Order/index.js
new file mode 100644
index 0000000..e160b7b
--- /dev/null
+++ b/src/components/Order/index.js
@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+
+import { Order } from './Order';
+import { setOrder, setModalWindow } from '../../store/actions';
+import {
+  selectOrder,
+  selectRestaurantsListError,
+  selectIsLoading,
+} from '../../store/selector';
+
+const mapStateToProps = state => ({
+  order: selectOrder(state),
+  error: selectRestaurantsListError(state),
+  isLoading: selectIsLoading(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+  deleteOrder: () => {
+    dispatch(setModalWindow(false));
+    dispatch(setOrder(null));
+  },
+});
+
+const Enhanced = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Order);
+
+export { Enhanced as Order };
diff --git a/src/components/RestaurantCard/RestaurantCard.js b/src/components/RestaurantCard/RestaurantCard.js
index c527808..20a945e 100644
--- a/src/components/RestaurantCard/RestaurantCard.js
+++ b/src/components/RestaurantCard/RestaurantCard.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import './RestaurantCard.scss';
 
 export const RestaurantCard = (props) => {
diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index 10b411b..a0fd09f 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+
 import Loader from '../Loader';
-import './RestaurantPage.scss';
 import { Section } from '../Section';
 
+import './RestaurantPage.scss';
+
 const DEFAULT_ETA_RANGE = '20 - 30 min';
 
 export const RestaurantPage = ({
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 06a1d56..2a47b0b 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -70,6 +70,10 @@
 
 .restoraunt-menu {
   display: flex;
+  position: sticky;
+  top: 80px;
+
+  background: #fff;
 
   overflow-x: auto;
 
diff --git a/src/components/RestaurantPage/index.js b/src/components/RestaurantPage/index.js
index 116b7c9..8fdc28f 100644
--- a/src/components/RestaurantPage/index.js
+++ b/src/components/RestaurantPage/index.js
@@ -4,11 +4,13 @@ import { loadRestaurantPage } from '../../store/actions';
 import {
   selectRestaurantPageData,
   selectResorauntSections,
+  selectOrder,
 } from '../../store/selector';
 
 const mapStateToProps = state => ({
   restaurantPageData: selectRestaurantPageData(state),
   restaurantSections: selectResorauntSections(state),
+  order: selectOrder(state),
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/RestaurantsListPage/RestaurantsListPage.js b/src/components/RestaurantsListPage/RestaurantsListPage.js
index f7e946a..b4361b2 100644
--- a/src/components/RestaurantsListPage/RestaurantsListPage.js
+++ b/src/components/RestaurantsListPage/RestaurantsListPage.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+
 import RestaurantCard from '../RestaurantCard';
-import './RestaurantListPage.scss';
 import Loader from '../Loader';
 import Error from '../Error';
 
+import './RestaurantListPage.scss';
+
 const DEFAULT_ETA_RANGE = '20 - 30 min';
 
 export class RestaurantsListPage extends Component {
diff --git a/src/components/RestaurantsListPage/index.js b/src/components/RestaurantsListPage/index.js
index 591eebc..b338055 100644
--- a/src/components/RestaurantsListPage/index.js
+++ b/src/components/RestaurantsListPage/index.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+
 import { RestaurantsListPage } from './RestaurantsListPage';
 import { loadRestaurants } from '../../store/actions';
 import {
diff --git a/src/components/Section/Section.js b/src/components/Section/Section.js
index 9aa60f2..0dc31be 100644
--- a/src/components/Section/Section.js
+++ b/src/components/Section/Section.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import uuidGen from 'uuidv4';
-import './Section.scss';
+
 import { CardItem } from '../CardItem';
 
+import './Section.scss';
+
 export const Section = ({ category, restaurantItems }) => {
   const { title, uuid } = category;
   const items = restaurantItems
@@ -13,7 +14,7 @@ export const Section = ({ category, restaurantItems }) => {
     <>
       <h2 className="title-categories">{title}</h2>
       <section id={uuid} className="section">
-        {items.map(item => <CardItem {...item} key={uuidGen()} />)}
+        {items.map(item => <CardItem {...item} key={item.uuid} />)}
       </section>
     </>
   );
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
index fe79e06..9ba9f57 100644
--- a/src/components/Section/index.js
+++ b/src/components/Section/index.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+
 import { Section } from './Section';
 import {
   selectRestorauntItems,
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 3a4eb70..7079498 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import './Select.scss';
 
 export const Select = (props) => {
diff --git a/src/index.js b/src/index.js
index 7e8df49..69bc72d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import { App } from './components/App';
+import { store } from './store';
+
 import './styles/index.scss';
 
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <BrowserRouter basename={process.env.PUBLIC_URL}>
+      <App />
+    </BrowserRouter>
+  </Provider>,
+
   document.getElementById('root')
 );
diff --git a/src/store/actions.js b/src/store/actions.js
index 2414512..a0d89aa 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,4 +1,4 @@
-const BASE_URL = 'https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/';
+const BASE_URL = 'https://mate-uber-eats-api.herokuapp.com/api/v1/';
 
 export const ACTION_TYPES = {
   SAVE_RESTAURANTS: 'SAVE_RESTAURANTS',
@@ -6,6 +6,8 @@ export const ACTION_TYPES = {
   SET_LOAD_RESTAURANTS_ERROR: 'SET_LOAD_RESTAURANTS_ERROR',
   START_LOADING: 'START_LOADING',
   STOP_LOADING: 'STOP_LOADING',
+  SET_ORDER: 'SET_ORDER',
+  SET_MODAL_WINDOW: 'SET_MODAL_WINDOW',
 };
 
 const saveRestaurants = data => ({
@@ -31,9 +33,19 @@ const stopLoading = () => ({
   type: ACTION_TYPES.STOP_LOADING,
 });
 
+export const setOrder = uuid => ({
+  type: ACTION_TYPES.SET_ORDER,
+  payload: uuid,
+});
+
+export const setModalWindow = bool => ({
+  type: ACTION_TYPES.SET_MODAL_WINDOW,
+  payload: bool,
+});
+
 export const loadRestaurants = () => (dispatch) => {
   dispatch(startLoading());
-  fetch(BASE_URL)
+  fetch(`${BASE_URL}restaurants/`)
     .then(response => response.json())
     .then(({ data }) => dispatch(saveRestaurants(data)))
     .catch(error => dispatch(setRestaurantsError(error.message)))
@@ -42,9 +54,19 @@ export const loadRestaurants = () => (dispatch) => {
 
 export const loadRestaurantPage = id => (dispatch) => {
   dispatch(startLoading());
-  fetch(`${BASE_URL}${id}`)
+  fetch(`${BASE_URL}restaurants/${id}`)
     .then(response => response.json())
     .then(({ data }) => dispatch(saveRestaurantPage(data)))
     .catch(error => dispatch(setRestaurantsError(error.message)))
     .finally(() => dispatch(stopLoading()));
 };
+
+export const loadMenuItem = uuid => (dispatch) => {
+  dispatch(setModalWindow(true));
+  dispatch(startLoading());
+  fetch(`${BASE_URL}menu-items/${uuid}`)
+    .then(response => response.json())
+    .then(({ data }) => dispatch(setOrder(data)))
+    .catch(error => dispatch(setRestaurantsError(error.message)))
+    .finally(() => dispatch(stopLoading()));
+};
diff --git a/src/store/index.js b/src/store/index.js
index e6b904f..6fb11db 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
 import { createStore, compose, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
+
 import { rootReducer } from './rootReducer';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index 28d0987..1893864 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -5,6 +5,8 @@ const initialState = {
   restaurantPageData: null,
   isLoading: false,
   error: null,
+  order: null,
+  showModalWindow: false,
 };
 
 export function rootReducer(state = initialState, action) {
@@ -38,6 +40,7 @@ export function rootReducer(state = initialState, action) {
         error: payload,
         restaurantsListData: null,
         restaurantPage: null,
+        order: null,
       });
     }
 
@@ -55,6 +58,24 @@ export function rootReducer(state = initialState, action) {
       });
     }
 
+    case ACTION_TYPES.SET_ORDER: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        order: payload,
+      });
+    }
+
+    case ACTION_TYPES.SET_MODAL_WINDOW: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        showModalWindow: payload,
+      });
+    }
+
     default:
       return state;
   }
diff --git a/src/store/selector.js b/src/store/selector.js
index 55c4c78..5330065 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -76,3 +76,19 @@ export const selectIsLoading = createSelector(
   rootSelector,
   ({ isLoading }) => isLoading
 );
+
+export const selectOrder = createSelector(
+  rootSelector,
+  ({ order }) => {
+    if (!order) {
+      return [];
+    }
+
+    return order;
+  }
+);
+
+export const selectStateModalWindow = createSelector(
+  rootSelector,
+  ({ showModalWindow }) => showModalWindow
+);

From 8be6962194cb8dbe0833f0bb7be23e50c88fd073 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 30 Oct 2019 14:35:40 +0200
Subject: [PATCH 24/34] change to HashRoute

---
 src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 69bc72d..a8c26f3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
 import { App } from './components/App';
@@ -10,9 +10,9 @@ import './styles/index.scss';
 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter basename={process.env.PUBLIC_URL}>
+    <HashRouter>
       <App />
-    </BrowserRouter>
+    </HashRouter>
   </Provider>,
 
   document.getElementById('root')

From 088b6e66b8a52e3f7eac91fe9f0ca17ea91fb01a Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 30 Oct 2019 16:02:31 +0200
Subject: [PATCH 25/34] partial solution change to HashRouter, change behavior
 item of menu in page of restourant

---
 .../RestaurantPage/RestaurantPage.js          | 21 ++++++++++++++++---
 .../RestaurantPage/RestaurantPage.scss        |  2 ++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index a0fd09f..0761310 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -19,6 +19,18 @@ export const RestaurantPage = ({
     window.scrollTo(0, 0);
   }, [params.uuid, loadRestaurantPage]);
 
+  const handleClickItemMenu = (id) => {
+    const sectionId = id.slice(2);
+    const section = document.getElementById(sectionId);
+    const positionSection = section.getBoundingClientRect();
+
+    window.scrollTo({
+      left: 0,
+      top: positionSection.y - 170,
+      behavior: 'smooth',
+    });
+  };
+
   if (!restaurantPageData) {
     return <Loader />;
   }
@@ -94,13 +106,16 @@ export const RestaurantPage = ({
         <nav className="restoraunt-menu">
           {restaurantSections
             .map(item => (
-              <a
-                href={`#${item.uuid}`}
+              <span
+                id={`m_${item.uuid}`}
                 className="restoraunt-menu__item"
                 key={item.uuid}
+                onClick={event => handleClickItemMenu(event.target.id)}
+                onKeyPress={event => handleClickItemMenu(event.target.id)}
+                role="presentation"
               >
                 {item.title}
-              </a>
+              </span>
             ))
           }
         </nav>
diff --git a/src/components/RestaurantPage/RestaurantPage.scss b/src/components/RestaurantPage/RestaurantPage.scss
index 2a47b0b..0fa5743 100644
--- a/src/components/RestaurantPage/RestaurantPage.scss
+++ b/src/components/RestaurantPage/RestaurantPage.scss
@@ -89,6 +89,8 @@
     position: relative;
     margin-right: 24px;
 
+    cursor: pointer;
+
     &:not(:last-of-type) {
       margin-right: 20px;
     }

From 9e49dd0944a417ca5e583ea4ef6a66e8c18a9597 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Wed, 30 Oct 2019 17:04:09 +0200
Subject: [PATCH 26/34] change scrollTo in menu of restourant's page

---
 src/components/RestaurantPage/RestaurantPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RestaurantPage/RestaurantPage.js b/src/components/RestaurantPage/RestaurantPage.js
index 0761310..305afc1 100644
--- a/src/components/RestaurantPage/RestaurantPage.js
+++ b/src/components/RestaurantPage/RestaurantPage.js
@@ -26,7 +26,7 @@ export const RestaurantPage = ({
 
     window.scrollTo({
       left: 0,
-      top: positionSection.y - 170,
+      top: positionSection.y + window.scrollY - 170,
       behavior: 'smooth',
     });
   };

From a3ff84b48dfe456c9002e09ec24b153923454a5f Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 31 Oct 2019 13:48:29 +0200
Subject: [PATCH 27/34] 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 (
     <div className="error">
-      <p className="error__text">Sorry, something wrong(</p>
+      <p className="error__text">something wrong</p>
       <p className="error__text">
         {message}
       </p>
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 message={error} />}
         {!error && (
           <>
-            <img className="modal-window__img" src={srcImage} alt={srcTitle} />
+            <div className="modal-window__wrapper-img">
+              <img
+                className="modal-window__img"
+                src={srcImage}
+                alt={srcTitle}
+              />
+            </div>
             <div className="modal-window__wrapper-content">
               <p className="modal-window__title">{title}</p>
               <p className="modal-window__description">{itemDescription}</p>
               <div className="modal-window__footer">
-                <div className="counter">
-                  <img
-                    className="counter__button"
-                    src="./images/button-minus.svg"
-                    alt="icon minus"
-                  />
-                  <div className="counter__item">{countItem}</div>
-                  <img
-                    className="counter__button"
-                    src="./images/button-plus.svg"
-                    alt="icon plus"
-                  />
-                </div>
-                <button type="button" className="modal-window__button-order">
-                  {`Add ${countItem}`}
-                </button>
+                <OrderFooter />
               </div>
             </div>
           </>
         )
         }
         <div
-          onClick={deleteOrder}
-          onKeyPress={deleteOrder}
+          onClick={hideModalWindow}
+          onKeyPress={hideModalWindow}
           role="presentation"
         >
           <img
@@ -73,7 +64,7 @@ export const Order = ({
 Order.propTypes = {
   isLoading: PropTypes.bool,
   error: PropTypes.string,
-  deleteOrder: PropTypes.func.isRequired,
+  hideModalWindow: PropTypes.func.isRequired,
   order: PropTypes.shape(),
 };
 
diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
index 56ce699..9f482af 100644
--- a/src/components/Order/Order.scss
+++ b/src/components/Order/Order.scss
@@ -11,8 +11,11 @@
     position: relative;
     margin: 80px auto 0;
     background: #fff;
-    width: 716px;
+    width: 720px;
+    height: 100%;
     min-height: 300px;
+    min-width: 400px;
+    overflow: auto;
 
     &__button-close {
       position: absolute;
@@ -28,10 +31,12 @@
       }
     }
 
+    &__wrapper-img {
+      margin-bottom: 50px;
+    }
+
     &__img {
-      display: block;
-      height: 375px;
-      margin: 0 auto 50px;
+      width: 100%;
     }
 
     &__wrapper-content {
@@ -42,7 +47,7 @@
       font-size: 30px;
       font-weight: 500;
       line-height: 21px;
-      margin-bottom: 2px;
+      margin-bottom: 8px;
     }
 
     &__description {
@@ -53,40 +58,8 @@
 
     &__footer {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-    }
-
-    &__button-order {
-      width: 485px;
-      height: 55px;
-      background: #247a00;
-      color: #fff;
-      font-weight: 500;
-
-      &:hover {
-        cursor: pointer;
-      }
+      margin: 24px 0;
     }
   }
 }
-
-.counter {
-  display: flex;
-  align-items: center;
-
-  &__button {
-    &:not(:last-of-type) {
-      margin-right: 17px;
-    }
-
-    &:hover{
-      cursor: pointer;
-    }
-  }
-
-  &__item {
-    margin-right: 17px;
-  }
-}
-
diff --git a/src/components/Order/index.js b/src/components/Order/index.js
index e160b7b..e432b98 100644
--- a/src/components/Order/index.js
+++ b/src/components/Order/index.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { Order } from './Order';
-import { setOrder, setModalWindow } from '../../store/actions';
+import { hideModalWindow } from '../../store/actions';
 import {
   selectOrder,
   selectRestaurantsListError,
@@ -14,12 +14,9 @@ const mapStateToProps = state => ({
   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 (
+    <>
+      <div className="counter">
+        <img
+          className="counter__button"
+          src="./images/button-minus.svg"
+          alt="icon minus"
+          onClick={() => {
+            if (countItem > 1) {
+              changeCountItem(countItem - 1);
+            }
+          }}
+          onKeyPress={() => changeCountItem(countItem + 1)}
+          role="presentation"
+        />
+        <div className="counter__item">{countItem}</div>
+        <img
+          className="counter__button"
+          src="./images/button-plus.svg"
+          alt="icon plus"
+          onClick={() => changeCountItem(countItem + 1)}
+          onKeyPress={() => changeCountItem(countItem + 1)}
+          role="presentation"
+        />
+      </div>
+      <button
+        type="button"
+        className="button-order"
+        onClick={hideModalWindow}
+      >
+        <div className="button-order__wrapper-number">
+          <span
+            className="button-order__number"
+          >
+            {`Add ${countItem} to order`}
+          </span>
+        </div>
+        <span
+          className="button-order__amount"
+        >
+          {`${(orderAmount * countItem).toFixed(2)} ${currencyCode}`}
+        </span>
+      </button>
+    </>
+  );
+};
+
+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 <igor.sobko@gmail.com>
Date: Thu, 31 Oct 2019 20:47:51 +0200
Subject: [PATCH 28/34] 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 = ({
     <div
       id={uuid}
       className="card"
-      onClick={event => 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 <Loader />;
   }
 
-  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 (
     <aside className="modal">
       <div className="modal-window">
-        {error && <Error message={error} />}
-        {!error && (
-          <>
-            <div className="modal-window__wrapper-img">
-              <img
-                className="modal-window__img"
-                src={srcImage}
-                alt={srcTitle}
-              />
-            </div>
-            <div className="modal-window__wrapper-content">
-              <p className="modal-window__title">{title}</p>
-              <p className="modal-window__description">{itemDescription}</p>
-              <div className="modal-window__footer">
-                <OrderFooter />
-              </div>
-            </div>
-          </>
-        )
+        <div className="modal-window__wrapper-img">
+          <img
+            className="modal-window__img"
+            src={srcImage}
+            alt={srcTitle}
+          />
+        </div>
+        <div className="modal__wrapper-content">
+          <p className="modal-window__title">{title}</p>
+          <p className="modal-window__description">{itemDescription}</p>
+        </div>
+        {customizationsList
+          .map(item => (
+            <OrderCustomizationsSection customizations={item} key={item.uuid} />
+          ))
         }
+        <div className="modal__wrapper-content">
+          <div className="modal-window__footer">
+            <OrderFooter altPrice={altData.price} />
+          </div>
+        </div>
         <div
           onClick={hideModalWindow}
           onKeyPress={hideModalWindow}
@@ -65,6 +73,7 @@ Order.propTypes = {
   isLoading: PropTypes.bool,
   error: PropTypes.string,
   hideModalWindow: PropTypes.func.isRequired,
+  altData: PropTypes.shape().isRequired,
   order: PropTypes.shape(),
 };
 
diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
index 9f482af..4791bf0 100644
--- a/src/components/Order/Order.scss
+++ b/src/components/Order/Order.scss
@@ -7,15 +7,19 @@
   right: 0;
   background: rgba(0,0,0, 0.7);
 
+  &__wrapper-content {
+    padding: 0 34px;
+  }
+
   &-window {
     position: relative;
     margin: 80px auto 0;
     background: #fff;
     width: 720px;
-    height: 100%;
+    height: 90vh;
     min-height: 300px;
     min-width: 400px;
-    overflow: auto;
+    overflow-y: auto;
 
     &__button-close {
       position: absolute;
@@ -39,10 +43,6 @@
       width: 100%;
     }
 
-    &__wrapper-content {
-      padding: 0 34px 24px;
-    }
-
     &__title {
       font-size: 30px;
       font-weight: 500;
@@ -54,6 +54,7 @@
       font-size: 14px;
       font-weight: 21px;
       color: #626262;
+      margin-bottom: 30px;
     }
 
     &__footer {
diff --git a/src/components/Order/index.js b/src/components/Order/index.js
index e432b98..6c2fb30 100644
--- a/src/components/Order/index.js
+++ b/src/components/Order/index.js
@@ -6,12 +6,14 @@ import {
   selectOrder,
   selectRestaurantsListError,
   selectIsLoading,
+  selectAltDataModal,
 } from '../../store/selector';
 
 const mapStateToProps = state => ({
   order: selectOrder(state),
   error: selectRestaurantsListError(state),
   isLoading: selectIsLoading(state),
+  altData: selectAltDataModal(state),
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
new file mode 100644
index 0000000..995fdff
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './OrderCustomizationsSection.scss';
+
+export const OrderCustomizationsSection = ({ customizations }) => {
+  const { title, maxPermitted, options } = customizations;
+  const maxCount = maxPermitted || 1;
+
+  return (
+    <div className="customizations-sections">
+      <div className="customizations-sections__head">
+        <div className="modal__wrapper-content">
+          <div className="customizations-sections__title">
+            {title}
+          </div>
+          <div className="customizations-sections__count">
+            {`Choose up to ${maxCount}`}
+          </div>
+        </div>
+      </div>
+
+      <div className="customizations-sections__options">
+        <div className="modal__wrapper-content">
+          {options.map(item => <p>{item.title}</p>)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+OrderCustomizationsSection.propTypes = {
+  customizations: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+};
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
new file mode 100644
index 0000000..c99eed0
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
@@ -0,0 +1,22 @@
+.customizations-sections {
+  &__head {
+    background: #f5f5f5;
+    padding: 17px 0;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 21px;
+  }
+
+  &__count {
+    font-size: 14px;
+    line-height: 21px;
+    color: #757575;
+  }
+
+  &__options {
+    padding: 17px 0;
+  }
+}
diff --git a/src/components/OrderCustomizationsSection/index.js b/src/components/OrderCustomizationsSection/index.js
new file mode 100644
index 0000000..3ba4d91
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/index.js
@@ -0,0 +1 @@
+export * from './OrderCustomizationsSection';
diff --git a/src/components/OrderFooter/OrderFooter.js b/src/components/OrderFooter/OrderFooter.js
index b7824a5..763ede7 100644
--- a/src/components/OrderFooter/OrderFooter.js
+++ b/src/components/OrderFooter/OrderFooter.js
@@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
 
 import './OrderFooter.scss';
 
-export const OrderFooter = ({ hideModalWindow, orderAmount, currencyCode }) => {
+export const OrderFooter = ({
+  hideModalWindow,
+  orderAmount,
+  currencyCode,
+  altPrice,
+}) => {
   const [countItem, changeCountItem] = useState(1);
+  const totalAmount = orderAmount || altPrice;
 
   return (
     <>
@@ -46,7 +52,7 @@ export const OrderFooter = ({ hideModalWindow, orderAmount, currencyCode }) => {
         <span
           className="button-order__amount"
         >
-          {`${(orderAmount * countItem).toFixed(2)} ${currencyCode}`}
+          {`${(totalAmount * countItem).toFixed(2)} ${currencyCode}`}
         </span>
       </button>
     </>
@@ -57,4 +63,9 @@ OrderFooter.propTypes = {
   hideModalWindow: PropTypes.func.isRequired,
   orderAmount: PropTypes.number.isRequired,
   currencyCode: PropTypes.string.isRequired,
+  altPrice: PropTypes.number,
+};
+
+OrderFooter.defaultProps = {
+  altPrice: 0,
 };
diff --git a/src/store/actions.js b/src/store/actions.js
index 0eae277..d72bc9c 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -8,6 +8,7 @@ export const ACTION_TYPES = {
   STOP_LOADING: 'STOP_LOADING',
   SET_ORDER: 'SET_ORDER',
   SET_MODAL_WINDOW: 'SET_MODAL_WINDOW',
+  SET_ALT_DATA_MODAL_WINDOW: 'SET_ALT_DATA_MODAL_WINDOW',
 };
 
 const saveRestaurants = data => ({
@@ -43,6 +44,11 @@ const setModalWindow = bool => ({
   payload: bool,
 });
 
+export const setAltDataModalWindow = data => ({
+  type: ACTION_TYPES.SET_ALT_DATA_MODAL_WINDOW,
+  payload: data,
+});
+
 export const hideModalWindow = () => (dispatch) => {
   dispatch(setModalWindow(false));
   dispatch(setOrder(null));
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index 8949a18..7f7c335 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -7,7 +7,13 @@ const initialState = {
   error: null,
   order: null,
   showModalWindow: false,
-  orderAmount: null,
+  orderAmount: 0,
+  altDataModalWindow: {
+    title: '',
+    imageUrl: '',
+    itemDescription: '',
+    price: 0,
+  },
 };
 
 export function rootReducer(state = initialState, action) {
@@ -40,7 +46,6 @@ export function rootReducer(state = initialState, action) {
         ...state,
         error: payload,
         restaurantsListData: null,
-        restaurantPage: null,
         order: null,
       });
     }
@@ -61,7 +66,7 @@ export function rootReducer(state = initialState, action) {
 
     case ACTION_TYPES.SET_ORDER: {
       const { payload } = action;
-      const price = payload ? payload.price : null;
+      const price = payload ? payload.price : 0;
 
       return ({
         ...state,
@@ -79,6 +84,15 @@ export function rootReducer(state = initialState, action) {
       });
     }
 
+    case ACTION_TYPES.SET_ALT_DATA_MODAL_WINDOW: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        altDataModalWindow: payload,
+      });
+    }
+
     default:
       return state;
   }
diff --git a/src/store/selector.js b/src/store/selector.js
index b916b1b..617d083 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -108,3 +108,8 @@ export const selectCurencyCode = createSelector(
     return restaurantPageData.currencyCode;
   }
 );
+
+export const selectAltDataModal = createSelector(
+  rootSelector,
+  ({ altDataModalWindow }) => altDataModalWindow
+);

From 2a0f2057bf9bab7e2d43fc7d3c961c7de0047327 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 31 Oct 2019 22:16:53 +0200
Subject: [PATCH 29/34] refactoring adaptive for modal wondow in mobile

---
 src/components/Order/Order.scss             | 16 +++++++++++
 src/components/OrderFooter/OrderFooter.js   |  3 +++
 src/components/OrderFooter/OrderFooter.scss | 30 +++++++++++++++++++++
 3 files changed, 49 insertions(+)

diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
index 4791bf0..e9d6c0a 100644
--- a/src/components/Order/Order.scss
+++ b/src/components/Order/Order.scss
@@ -1,3 +1,5 @@
+@import '../../styles/utils.scss';
+
 .modal{
   z-index: 2;
   position: fixed;
@@ -21,6 +23,12 @@
     min-width: 400px;
     overflow-y: auto;
 
+    @media (max-width: $breack-point-tablet) {
+      width: 100%;
+      margin: 0;
+      height: 100%;
+    }
+
     &__button-close {
       position: absolute;
       top: 24px;
@@ -48,6 +56,10 @@
       font-weight: 500;
       line-height: 21px;
       margin-bottom: 8px;
+
+      @media (max-width: $breack-point-phone) {
+        font-size: 24px;
+      }
     }
 
     &__description {
@@ -61,6 +73,10 @@
       display: flex;
       align-items: center;
       margin: 24px 0;
+
+      @media (max-width: $breack-point-phone) {
+        display: block;
+      }
     }
   }
 }
diff --git a/src/components/OrderFooter/OrderFooter.js b/src/components/OrderFooter/OrderFooter.js
index 763ede7..e177fa1 100644
--- a/src/components/OrderFooter/OrderFooter.js
+++ b/src/components/OrderFooter/OrderFooter.js
@@ -15,6 +15,9 @@ export const OrderFooter = ({
   return (
     <>
       <div className="counter">
+        <div className="counter__mobile">
+          Quantity
+        </div>
         <img
           className="counter__button"
           src="./images/button-minus.svg"
diff --git a/src/components/OrderFooter/OrderFooter.scss b/src/components/OrderFooter/OrderFooter.scss
index 38071c7..b548d9f 100644
--- a/src/components/OrderFooter/OrderFooter.scss
+++ b/src/components/OrderFooter/OrderFooter.scss
@@ -1,7 +1,21 @@
+@import '../../styles/utils.scss';
+
 .counter {
   display: flex;
   align-items: center;
 
+  @media (max-width: $breack-point-phone) {
+    margin-bottom: 20px;
+  }
+
+  &__mobile {
+    display: none;
+    @media (max-width: $breack-point-phone) {
+      display: inline;
+      margin-right: auto;
+    }
+  }
+
   &__button {
 
     border-radius: 50%;
@@ -10,6 +24,16 @@
 
     margin-right: 17px;
 
+    @media (max-width: $breack-point-phone) {
+      &:not(:last-of-type) {
+        margin-right: 26px;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+
     &:hover {
       cursor: pointer;
       box-shadow: 0 0 10px rgba(0,0,0,0.5);
@@ -22,6 +46,12 @@
 
   &__item {
     margin-right: 17px;
+
+    @media (max-width: $breack-point-phone) {
+      &:not(:last-of-type) {
+        margin-right: 26px;
+      }
+    }
   }
 }
 

From d0d8d19a0024c231c9b2849d5ad60dea0322b8f3 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Thu, 31 Oct 2019 22:23:38 +0200
Subject: [PATCH 30/34] refactoring adaptive for modal window in mobile

---
 src/components/Order/Order.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
index e9d6c0a..ee2df6b 100644
--- a/src/components/Order/Order.scss
+++ b/src/components/Order/Order.scss
@@ -19,8 +19,6 @@
     background: #fff;
     width: 720px;
     height: 90vh;
-    min-height: 300px;
-    min-width: 400px;
     overflow-y: auto;
 
     @media (max-width: $breack-point-tablet) {

From b2272c36515bb631748d9414d49cc61b28392a26 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Fri, 1 Nov 2019 14:55:32 +0200
Subject: [PATCH 31/34] added checkbox in options modal window

---
 .../OrderCustomizationsOptions.js             | 21 +++++++++++++++++++
 .../OrderCustomizationsOptions.scss           |  0
 .../OrderCustomizationsOptions/index.js       |  1 +
 .../OrderCustomizationsSection.js             |  4 +++-
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
 create mode 100644 src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
 create mode 100644 src/components/OrderCustomizationsOptions/index.js

diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
new file mode 100644
index 0000000..5a3bf69
--- /dev/null
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const OrderCustomizationsOptions = ({ option }) => {
+  const { title } = option;
+
+  return (
+    <div className="option">
+      <label htmlFor="input-option">
+        <input id="input-option" type="checkbox" />
+        {title}
+      </label>
+    </div>
+  );
+};
+
+OrderCustomizationsOptions.propTypes = {
+  option: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+  })).isRequired,
+};
diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/OrderCustomizationsOptions/index.js b/src/components/OrderCustomizationsOptions/index.js
new file mode 100644
index 0000000..ca85945
--- /dev/null
+++ b/src/components/OrderCustomizationsOptions/index.js
@@ -0,0 +1 @@
+export * from './OrderCustomizationsOptions';
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
index 995fdff..5ec0052 100644
--- a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { OrderCustomizationsOptions } from '../OrderCustomizationsOptions';
+
 import './OrderCustomizationsSection.scss';
 
 export const OrderCustomizationsSection = ({ customizations }) => {
@@ -22,7 +24,7 @@ export const OrderCustomizationsSection = ({ customizations }) => {
 
       <div className="customizations-sections__options">
         <div className="modal__wrapper-content">
-          {options.map(item => <p>{item.title}</p>)}
+          {options.map(item => <OrderCustomizationsOptions option={item} />)}
         </div>
       </div>
     </div>

From 5a6658014372ccfb7496e4adbe2523580174f017 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 2 Nov 2019 20:48:58 +0200
Subject: [PATCH 32/34] added checkbox in modal window

---
 .../OrderCustomizationsOptions.js             | 13 +++--
 .../OrderCustomizationsOptions.scss           | 57 +++++++++++++++++++
 .../OrderCustomizationsSection.js             |  4 +-
 .../OrderCustomizationsSection.scss           |  2 +-
 4 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
index 5a3bf69..9398a3c 100644
--- a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './OrderCustomizationsOptions.scss';
+
 export const OrderCustomizationsOptions = ({ option }) => {
-  const { title } = option;
+  const { title, uuid } = option;
 
   return (
     <div className="option">
-      <label htmlFor="input-option">
-        <input id="input-option" type="checkbox" />
-        {title}
-      </label>
+      <div className="option__checkbox">
+        <input id={uuid} type="checkbox" className="option__checkbox-input" />
+        <label htmlFor={uuid} className="option__checkbox-title">{title}</label>
+      </div>
     </div>
   );
 };
@@ -17,5 +19,6 @@ export const OrderCustomizationsOptions = ({ option }) => {
 OrderCustomizationsOptions.propTypes = {
   option: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
+    uuid: PropTypes.string,
   })).isRequired,
 };
diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
index e69de29..875eaff 100644
--- a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
@@ -0,0 +1,57 @@
+.option {
+  height: 48px;
+
+  display: flex;
+  align-items: center;
+  
+  &__checkbox {
+    display: flex;
+
+    &-title {
+      display: flex;
+      position: relative;
+
+      font-size: 12px;
+      line-height: 21px;
+
+      &::before {
+        content: "";
+        display: inline-block;
+
+        height: 22px;
+        width: 22px;
+
+        margin-right: 14px;
+
+        border: 1px solid #d3d3d3;
+      }
+
+      &::after {
+        content: "V";
+        display: inline-block;
+        font-size: 16px;
+        font-weight: 500;
+        position: absolute;
+        left: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &-input {
+      opacity: 0;
+
+      -moz-appearance: none;
+      -webkit-appearance: none;
+    }
+
+    &-input + &-title::after {
+      content: none;
+    }
+
+    &-input:checked + &-title::after {
+      content: "V";
+    }
+  }
+
+}
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
index 5ec0052..f79e244 100644
--- a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
@@ -24,7 +24,9 @@ export const OrderCustomizationsSection = ({ customizations }) => {
 
       <div className="customizations-sections__options">
         <div className="modal__wrapper-content">
-          {options.map(item => <OrderCustomizationsOptions option={item} />)}
+          {options.map(
+            item => <OrderCustomizationsOptions option={item} key={item.uuid} />
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
index c99eed0..e4bcd2a 100644
--- a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
@@ -17,6 +17,6 @@
   }
 
   &__options {
-    padding: 17px 0;
+    padding: 12px 0;
   }
 }

From ab22f5bf2435df8da510be2a47f7c3c317d0f2ae Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 2 Nov 2019 21:03:50 +0200
Subject: [PATCH 33/34] added focus to input in modal window

---
 .../OrderCustomizationsOptions.scss                       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
index 875eaff..c67ea7c 100644
--- a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
@@ -1,9 +1,11 @@
+@import '../../styles/utils.scss';
+
 .option {
   height: 48px;
 
   display: flex;
   align-items: center;
-  
+
   &__checkbox {
     display: flex;
 
@@ -52,6 +54,10 @@
     &-input:checked + &-title::after {
       content: "V";
     }
+
+    &-input:focus + &-title::before {
+      outline: $color-green auto 5px;
+    }
   }
 
 }

From b38d260fca19f943a12c64eabddfcae29f8e6ff9 Mon Sep 17 00:00:00 2001
From: igaryok <igor.sobko@gmail.com>
Date: Sat, 2 Nov 2019 21:33:46 +0200
Subject: [PATCH 34/34] chehge style checkbox in modal window

---
 .../OrderCustomizationsOptions.scss           | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
index c67ea7c..9425da4 100644
--- a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
@@ -29,14 +29,19 @@
       }
 
       &::after {
-        content: "V";
+        content: "";
         display: inline-block;
-        font-size: 16px;
-        font-weight: 500;
+        height: 8px;
+        width: 12px;
+
         position: absolute;
-        left: 6px;
-        top: 50%;
-        transform: translateY(-50%);
+        left: 5px;
+        top: 4px;
+
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+
+        transform: rotate(-45deg);
       }
     }
 
@@ -52,7 +57,11 @@
     }
 
     &-input:checked + &-title::after {
-      content: "V";
+      content: "";
+    }
+
+    &-input:checked + &-title::before {
+      background: $color-green;
     }
 
     &-input:focus + &-title::before {
