mate-academy · Blenemy · Jun 7, 2023 · Jun 7, 2023 · Jun 9, 2023 · Jun 14, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,17 +7,25 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@cypress/react": "^5.12.4",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/material": "^5.13.4",
     "bulma": "^0.9.3",
+    "classnames": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "^4.0.3"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.4",
     "@mate-academy/eslint-config-react": "*",
     "@mate-academy/eslint-config-react-typescript": "*",
-    "@mate-academy/scripts": "^1.2.1",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",

diff --git a/public/img/products/Cart.svg b/public/img/products/Cart.svg
diff --git a/public/img/products/Home.svg b/public/img/products/Home.svg
diff --git a/public/img/products/Logo.png b/public/img/products/Logo.png
diff --git a/public/img/products/accessories-banner.png b/public/img/products/accessories-banner.png
diff --git a/public/img/products/arrow-top.svg b/public/img/products/arrow-top.svg
diff --git a/public/img/products/favicon.png b/public/img/products/favicon.png
diff --git a/public/img/products/favourites-added.svg b/public/img/products/favourites-added.svg
diff --git a/public/img/products/favourites.svg b/public/img/products/favourites.svg
diff --git a/public/img/products/image-banner.png b/public/img/products/image-banner.png
diff --git a/public/img/products/phone-catalog-home.zip b/public/img/products/phone-catalog-home.zip
diff --git a/public/img/products/phones-banner.png b/public/img/products/phones-banner.png
diff --git a/public/img/products/tablets-banner.png b/public/img/products/tablets-banner.png
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Phone catalog</title>
+    <link rel="icon" type="image/x-icon" href="/img/products/favicon.png">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,118 @@
-// not empty
+@import url(https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900);
+
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+}
+
+:focus,
+:active {
+  outline: none;
+}
+
+::-webkit-scrollbar:hover {
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a0a0a0;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+nav,
+footer,
+header,
+aside {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  line-height: 1;
+  font-size: 18px;
+  font-family: "Montserrat", sans-serif;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+input,
+button,
+textarea {
+  font-family: inherit;
+}
+
+input::-ms-clear {
+  display: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: 400;
+}
+
+main {
+  flex: 1 1 auto;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  min-height: 100vh;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,95 @@
+import { useState, useEffect } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Footer } from './components/Footer/Footer';
+import { Header } from './components/Header/Header';
+import { Homepage } from './components/Homepage/Homepage';
+import {
+  ProductDetailsPage,
+} from './components/ProductDetailsPage/ProductDetailsPage';
+import { API_URL, getProducts } from './helpers/helper';
+import { Product } from './types/Products';
 import './App.scss';
+import { Favoutires } from './components/Favourites/Favourites';
+import { Cart } from './components/Cart/Cart';
+import {
+  ProductDataContext,
+} from './components/ProductDataContext/ProductDataContext';
+import { ScrollToTop } from './helpers/ScrollToTop';
+import { PhonesPage } from './components/ProductPage/PhonesPage/PhonesPage';
+import { TabletsPage } from './components/ProductPage/TabletsPage/TabletsPage';
+import {
+  AccessoriesPage,
+} from './components/ProductPage/AccessoriesPage/AccessoriesPage';
+import { NotFound } from './components/NotFound/NotFound';
 
-const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
-  </div>
-);
+const App = () => {
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await getProducts(API_URL);
+
+        setProducts(response);
+      } catch (fetchError) {
+        throw new Error('Data could not be fetched');
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <div className="App">
+      <ScrollToTop />
+      <div className="wrapper">
+        <Header />
+        <ProductDataContext.Provider value={products}>
+          <Routes>
+            <Route
+              path="/"
+              element={<Homepage products={products} />}
+            />
+            <Route path="phones">
+              <Route index element={<PhonesPage />} />
+              <Route
+                path=":productId"
+                element={<ProductDetailsPage products={products} />}
+              />
+            </Route>
+            <Route path="tablets">
+              <Route index element={<TabletsPage />} />
+              <Route
+                path=":productId"
+                element={<ProductDetailsPage products={products} />}
+              />
+            </Route>
+            <Route path="accessories">
+              <Route index element={<AccessoriesPage />} />
+              <Route
+                path=":productId"
+                element={<ProductDetailsPage products={products} />}
+              />
+            </Route>
+            <Route
+              path="favourites"
+              element={<Favoutires />}
+            />
+            <Route
+              path="cart"
+              element={<Cart />}
+            />
+            <Route path="*" element={<NotFound />} />
+            <Route
+              path="home"
+              element={<Navigate to="/" replace />}
+            />
+          </Routes>
+        </ProductDataContext.Provider>
+        <Footer />
+      </div>
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/BackToPage/BackToPage.tsx b/src/components/BackToPage/BackToPage.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const BackToPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="product-info__back back-to-page">
+      <button
+        type="button"
+        onClick={() => navigate(-1)}
+        className="back-to-page__link"
+        data-cy="backButton"
+      >
+        &lt;
+      </button>
+      <button
+        type="button"
+        onClick={() => navigate(-1)}
+        className="back-to-page__link"
+        data-cy="backButton"
+      >
+        Back
+      </button>
+    </div>
+  );
+};