mate-academy · AnnaGerdii · Jan 13, 2020
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 .DS_Store
 yarn.lock
 package-lock.json
+public/images
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/README.md b/README.md
@@ -86,7 +86,7 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
 - run `npm run lint` to check code style
 - 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://AnnaGerdii.github.io/react_uber-eats/)` - 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 

diff --git a/package.json b/package.json
@@ -1,17 +1,23 @@
 {
-  "homepage": "https://mate-academy.github.io/react_uber-eats",
+  "homepage": "https://AnnaGerdii.github.io/react_uber-eats/",
   "name": "react_uber-eats",
   "version": "0.1.0",
   "private": true,
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "classnames": "^2.2.6",
+    "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.3",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React Uber eats</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha256-gvEnj2axkqIj4wbYhPjbWV7zttgpzBVEgHub9AAZQD4=" crossorigin="anonymous" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
diff --git 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>
+export const App = () => (
+  <Provider store={store}>
+    <div className="App">
+      <Header>Uber Eats</Header>
+      <main className="page">
+        <div className="content">
+          <RestaurantsListPage />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  </Provider>
 );
-
-export default App;
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,6 @@
+.page {
+  position: relative;
+  padding-top: 40px;
+  min-height: 100vh;
+  margin-bottom: 40px;
+}
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,7 @@
+const URL_POSTS = 'https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants';
+
+export const getRestaurantsFromServer = async() => {
+  const restaurants = await fetch(URL_POSTS);
+
+  return restaurants.json();
+};
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Error.scss';
+
+export const Error = ({ message }) => (
+  <div className="error">
+    <p className="error__text">
+      {message}
+    </p>
+
+    <a href="/" className="error__link">
+        Go to Home page
+    </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
@@ -0,0 +1,20 @@
+@import "../../styles/utils";
+
+.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
@@ -0,0 +1 @@
+export * from './Error';
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -0,0 +1,113 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import './Footer.scss';
+import { Select } from '../Select';
+
+export const Footer = () => (
+  <footer className="footer">
+    <div className="content">
+      <div className="footer__top-part">
+        <div className="footer__main">
+          <div className="footer__logo-container">
+            <img
+              src="./images/logo-white.svg"
+              alt="Uber Eats"
+              className="footer__logo"
+            />
+            <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/google-play.png"
+                alt="Google Play"
+              />
+            </a>
+            <a
+              className="footer__mobile-app"
+              href="#"
+            >
+              <img
+                src="./images/app-store.png"
+                alt="App Store"
+              />
+            </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 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/twitter.svg" alt="twitter" />
+            </a>
+            <a href="#" className="social__link">
+              <img src="./images/instagram.svg" alt="instagram" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+);
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -0,0 +1,135 @@
+@import "../../styles/utils";
+
+.footer {
+  background-color: #262626;
+  padding: 64px 0;
+
+  @media (max-width: $breakpoint-tablet) {
+    padding: 40px 0;
+  }
+
+  &__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;
+
+    @media (max-width: $breakpoint-tablet) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  &__mobile-app {
+    display: inline-block;
+
+    @media (max-width: $breakpoint-tablet) {
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    &:first-of-type {
+      margin-right: 20px;
+    }
+  }
+
+  &__logo {
+    margin-right: 40px;
+
+    @media (max-width: $breakpoint-tablet) {
+      margin-bottom: 40px;
+    }
+  }
+
+  &__top-part,
+  &__bottom-part {
+    @extend %flex-row-center;
+    align-items: flex-start;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      flex-direction: column;
+    }
+  }
+
+  &__main,
+  &__copyright {
+    flex-basis: 45vw;
+    padding-right: 40px;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      flex-basis: initial;
+    }
+  }
+
+  &__top-links:last-of-type {
+    margin-left: 10vw;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      margin-left: 0;
+    }
+  }
+
+  &__copyright {
+    font-size: 14px;
+    color: #fff;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      order: 1;
+    }
+  }
+
+  &__bottom-links {
+    @extend %flex-row-center;
+
+    margin-bottom: 40px;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 20px;
+    }
+
+    .links__link:not(:last-of-type) {
+      margin-right: 40px;
+    }
+  }
+
+  &__misc {
+    @media (max-width: $breakpoint-phone-lg) {
+      display: flex;
+      flex-direction: column-reverse;
+      margin-top: 20px;
+    }
+  }
+}
+
+.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
@@ -0,0 +1 @@
+export * from './Footer';