mate-academy · ValeraViachalo · Sep 6, 2023 · Sep 6, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,19 +7,27 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@cypress/react": "^5.12.4",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@uiball/loaders": "^1.3.0",
     "bulma": "^0.9.3",
+    "classnames": "^2.3.2",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3"
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.15.0",
+    "react-scripts": "^4.0.3",
+    "swiper": "^9.4.1"
   },
   "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/lodash": "^4.14.197",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",

diff --git a/public/img/fav-icon.png b/public/img/fav-icon.png
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Phone catalog</title>
+    <link rel="shortcut icon" href="./img/fav-icon.png" type="image/x-icon">
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
   </body>
 </html>
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,13 @@
-// not empty
+@import "styles/global-imports";
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  &__section {
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,75 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
 import './App.scss';
 
+import { Header } from './components/Header';
+import { HomePage } from './pages/HomePage';
+import { Footer } from './components/Footer';
+import { PhonesPage } from './pages/PhonesPage';
+import { TabletPage } from './pages/TabletsPage/TabletsPage';
+import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
+import { ProductDetailsPage } from './pages/ProductDetailsPage';
+import { CartPage } from './pages/CartPage/CartPage';
+import { FavoritesPage } from './pages/FavoritesPage/FavoritesPage';
+import { PageNotFound } from './pages/PageNotFound/PageNotFound';
+
 const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
+  <div className="app">
+    <Header />
+
+    <section className="app__section">
+      <div className="app__content">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="home" element={<Navigate to="/" replace />} />
+
+          <Route path="phones">
+            <Route index element={<PhonesPage />} />
+
+            <Route
+              path=":productId"
+              element={<ProductDetailsPage />}
+            />
+          </Route>
+
+          <Route path="tablets">
+            <Route index element={<TabletPage />} />
+
+            <Route
+              path=":productId"
+              element={<ProductDetailsPage />}
+            />
+          </Route>
+
+          <Route path="accessories">
+            <Route index element={<AccessoriesPage />} />
+
+            <Route
+              path=":productId"
+              element={<ProductDetailsPage />}
+            />
+          </Route>
+
+          <Route
+            path="favourites"
+            element={<FavoritesPage />}
+          />
+
+          <Route
+            path="cart"
+            element={<CartPage />}
+          />
+
+          <Route
+            path="*"
+            element={<PageNotFound />}
+          />
+        </Routes>
+      </div>
+    </section>
+
+    <div className="app__footer">
+      <Footer />
+    </div>
   </div>
 );
 

diff --git a/src/components/Button/ButtonBack/ButtonBack.scss b/src/components/Button/ButtonBack/ButtonBack.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/global-imports";
+
+.button-back {
+  display: flex;
+  gap: 6px;
+
+  margin: 40px 0 16px;
+  background-color: $c-white;
+
+  @extend %small-text;
+  color: $c-secondary;
+
+  &--arrow {
+    width: 16px;
+    height: 16px;
+    background: url("../../../images/icons/Arrow.svg") no-repeat center;
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/components/Button/ButtonBack/ButtonBack.tsx b/src/components/Button/ButtonBack/ButtonBack.tsx
@@ -0,0 +1,18 @@
+import './ButtonBack.scss';
+
+export const ButtonBack = () => {
+  const handleGoBack = () => (
+    window.history.back()
+  );
+
+  return (
+    <button
+      type="button"
+      className="button-back"
+      onClick={handleGoBack}
+    >
+      <div className="button-back--arrow" />
+      Back
+    </button>
+  );
+};
diff --git a/src/components/Button/ButtonCart/ButtonCart.scss b/src/components/Button/ButtonCart/ButtonCart.scss
@@ -0,0 +1,28 @@
+@import "../../../styles/global-imports";
+
+.button-cart {
+  width: 100%;
+  height: 40px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $c-white;
+  background-color: $c-primary;
+  border: 1px solid $c-primary;
+
+  @extend %body-text;
+
+  &:not(.button-cart--added) {
+    @include hover(border-color, $c-elements);
+  }
+
+  &--added {
+    color: $c-green;
+    background-color: $c-white;
+
+    @include hover(border-color, $c-primary);
+
+  }
+}
diff --git a/src/components/Button/ButtonCart/ButtonCart.tsx b/src/components/Button/ButtonCart/ButtonCart.tsx
@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+
+import classNames from 'classnames';
+import './ButtonCart.scss';
+
+import { Product } from '../../../types/Product';
+import { CartContext } from '../../../contexts/CartContextProvider';
+
+type Props = {
+  product: Product,
+};
+
+export const ButtonCart: React.FC<Props> = ({ product }) => {
+  const {
+    cart,
+    addToCart,
+    removeFromCart,
+  } = useContext(CartContext);
+
+  const isAdded = cart.find(currentItem => (
+    currentItem.product.phoneId === product.phoneId));
+
+  const handleAddCart = () => {
+    if (isAdded) {
+      removeFromCart(product.phoneId);
+    } else {
+      const cartItem = {
+        id: product.phoneId,
+        quantity: 1,
+        product,
+      };
+
+      addToCart(cartItem);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleAddCart}
+      className={classNames(
+        'button-cart',
+        { 'button-cart--added': isAdded },
+      )}
+    >
+      {isAdded ? 'Added to cart' : 'Add to cart'}
+    </button>
+  );
+};
diff --git a/src/components/Button/ButtonCart/index.ts b/src/components/Button/ButtonCart/index.ts
@@ -0,0 +1 @@
+export * from './ButtonCart';
diff --git a/src/components/Button/ButtonFavorites/ButtonFavorites.scss b/src/components/Button/ButtonFavorites/ButtonFavorites.scss
@@ -0,0 +1,16 @@
+@import "../../../styles/global-imports";
+
+.button-favorites {
+  width: 40px;
+  height: 40px;
+
+  background: url("../../../images/icons/icon-favourites.svg") no-repeat center;
+
+  border: 1px solid $c-icons;
+
+  @include hover(border-color, $c-primary);
+
+  &-active {
+    background-image: url("../../../images/icons/icon-favourites-active.svg");
+  }
+}
diff --git a/src/components/Button/ButtonFavorites/ButtonFavorites.tsx b/src/components/Button/ButtonFavorites/ButtonFavorites.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import { useContext } from 'react';
+
+import classNames from 'classnames';
+import './ButtonFavorites.scss';
+
+import { FavoriteContext } from '../../../contexts/FavoriteContextProvider';
+import { Product } from '../../../types/Product';
+
+type Props = {
+  product: Product;
+};
+
+export const ButtonFavorites: React.FC<Props> = ({ product }) => {
+  const {
+    favorites,
+    addToFavorite,
+    removeFromFavorite,
+  } = useContext(FavoriteContext);
+
+  const isAdded = favorites.find(({ phoneId }) => phoneId === product.phoneId);
+
+  const handleAddFavorites = () => {
+    if (isAdded) {
+      removeFromFavorite(product.phoneId);
+    } else {
+      addToFavorite(product);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleAddFavorites}
+      className={classNames(
+        'button-favorites',
+        { 'button-favorites-active': isAdded },
+      )}
+    />
+  );
+};
diff --git a/src/components/Button/ButtonFavorites/index.ts b/src/components/Button/ButtonFavorites/index.ts
@@ -0,0 +1 @@
+export * from './ButtonFavorites';
diff --git a/src/components/Button/ButtonToUp/ButtonToUp.scss b/src/components/Button/ButtonToUp/ButtonToUp.scss
@@ -0,0 +1,21 @@
+@import "../../../styles/global-imports";
+
+.button-to-up {
+  background-color: $c-white;
+  color: $c-secondary;
+  @extend %small-text;
+
+  display: flex;
+  align-items: center;
+
+  &--arrow {
+    margin-left: 16px;
+    height: 32px;
+    width: 32px;
+    border: 1px solid $c-icons;
+
+    transform: rotate(-90deg);
+
+    background: url("../../../images/icons/Arrow.svg") no-repeat center;
+  }
+}
diff --git a/src/components/Button/ButtonToUp/ButtonToUp.tsx b/src/components/Button/ButtonToUp/ButtonToUp.tsx
@@ -0,0 +1,21 @@
+import './ButtonToUp.scss';
+
+export const ButtonToUp = () => {
+  const handleBackToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button
+      className="button-to-up"
+      type="button"
+      onClick={handleBackToTop}
+    >
+      Back to top
+      <div className="button-to-up--arrow" />
+    </button>
+  );
+};
diff --git a/src/components/Button/ButtonToUp/index.ts b/src/components/Button/ButtonToUp/index.ts
@@ -0,0 +1 @@
+export * from './ButtonToUp';