react_phone-catalog

src/App.tsx

@@ -1,9 +1,125 @@
-import './App.scss';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Header } from './components/Header';
+import { HomePage } from './pages/HomePage';
+import { Product } from './types/Product';
+import { getProductsFromServer } from './helpers/fetchProducts';
+import { Loader } from './components/Loader';
+import { Error } from './components/Error';
+import { Footer } from './components/Footer';
+import { ProductsPage } from './pages/ProductsPage';
+import { ProductsList } from './components/ProductsList';
+import { ProductDetailsPage } from './pages/ProductDetailsPage';
+import { FavoritesPage } from './pages/FavoritesPage';
+import { CartPage } from './pages/CartPage';
+import { Menu } from './components/Menu';
+import { CartProvider } from './components/CartContext';
 
-const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
-  </div>
-);
+const menuItems = [
+  { to: '/', title: 'Home' },
+  { to: '/phones', title: 'Phones' },
+  { to: '/tablets', title: 'Tablets' },
+  { to: '/accessories', title: 'Accessories' },
+];
+
+const App = () => {
+  const [isActiveMenu, setActiveMenu] = useState(false);
+  const [products, setProducts] = useState<Product[] | null>(null);
+  const [isLoading, setLoading] = useState(false);
+  const [isError, setError] = useState(false);
+
+  const toggleMenu = () => {
+    setActiveMenu(!isActiveMenu);
+  };
+
+  async function getProducts() {
+    setLoading(true);
+    try {
+      const productsFromServer = await getProductsFromServer();
+
+      setProducts(productsFromServer);
+    } catch (error) {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    getProducts();
+  }, []);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (!isLoading && isError) {
+    return (
+      <Error />
+    );
+  }
+
+  return (
+    <CartProvider>
+      <div className="App">
+        <Header menuItems={menuItems} toggleMenu={toggleMenu} />
+        <Menu
+          menuItems={menuItems}
+          isActiveMenu={isActiveMenu}
+          toggleMenu={toggleMenu}
+        />
+        <Routes>
+          <Route path="/" element={<HomePage products={products} />} />
+          <Route path="/home" element={<Navigate to="/" replace />} />
+          <Route path="/phones" element={<ProductsPage category="phones" />}>
+            <Route
+              index
+              element={<ProductsList title="Mobile phones" category="phones" />}
+            />
+            <Route
+              path=":selectedProductId"
+              element={<ProductDetailsPage products={products} />}
+            />
+          </Route>
+          <Route path="/tablets" element={<ProductsPage category="tablets" />}>
+            <Route
+              index
+              element={<ProductsList title="Tablets" category="tablets" />}
+            />
+            <Route
+              path=":selectedProductId"
+              element={<ProductDetailsPage products={products} />}
+            />
+          </Route>
+          <Route
+            path="/accessories"
+            element={<ProductsPage category="accessories" />}
+          >
+            <Route
+              index
+              element={
+                <ProductsList title="Accessories" category="accessories" />
+              }
+            />
+            <Route
+              path=":selectedProductId"
+              element={<ProductDetailsPage products={products} />}
+            />
+          </Route>
+          <Route path="/favorites" element={<FavoritesPage />} />
+          <Route path="/cart" element={<CartPage />} />
+          <Route
+            path="*"
+            element={
+              // eslint-disable-next-line max-len
+              <div className="App__not-found"><Error message="Page is not found" /></div>
+            }
+          />
+        </Routes>
+        <Footer />
+      </div>
+    </CartProvider>
+  );
+};
 
 export default App;

src/components/BackLink/BackLink.tsx

@@ -0,0 +1,16 @@
+export const BackLink = () => {
+  const handleClick = () => {
+    window.history.back();
+  };
+
+  return (
+    <button
+      type="button"
+      className="back-link"
+      onClick={handleClick}
+      data-cy="backButton"
+    >
+      Back
+    </button>
+  );
+};

src/components/BackLink/index.ts

@@ -0,0 +1 @@
+export * from './BackLink';

src/components/Carousel/Carousel.tsx

@@ -0,0 +1,204 @@
+import classNames from 'classnames';
+import React, {
+  RefObject, useEffect, useLayoutEffect, useMemo, useRef, useState,
+} from 'react';
+import imgAccessories from '../../helpers/img/banners/banner-accessories.png';
+import imgPhones from '../../helpers/img/banners/banner-phones.png';
+import imgTablets from '../../helpers/img/banners/banner-tablets.png';
+
+const images = [
+  {
+    idx: 0,
+    src: imgAccessories,
+    alt: 'Accessories',
+  },
+  {
+    idx: 1,
+    src: imgPhones,
+    alt: 'Phones',
+  },
+  {
+    idx: 2,
+    src: imgTablets,
+    alt: 'Tablets',
+  },
+];
+
+export const Carousel = React.memo(() => {
+  const container = useRef() as RefObject<HTMLDivElement>;
+  const [currTransitionX, setCurrTransitionX] = useState(0);
+  const [transitionDuration, setTransitionDuration] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [currImg, setCurrImg] = useState(1);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [activeImg, setActiveImg] = useState(0);
+  const [isClick, setClick] = useState(false);
+
+  const slides = useMemo(() => {
+    const items = images.map(img => (
+      <li key={img.idx} className="carousel__item">
+        <img src={img.src} alt={img.alt} className="carousel__img" />
+      </li>
+    ));
+
+    return [
+      <li key={images.length} className="carousel__item">
+        <img
+          src={images[images.length - 1].src}
+          alt={images[images.length - 1].alt}
+          className="carousel__img"
+        />
+      </li>,
+      ...items,
+      <li key={images.length + 1} className="carousel__item">
+        <img
+          src={images[0].src}
+          alt={images[0].alt}
+          className="carousel__img"
+        />
+      </li>,
+    ];
+  }, []);
+
+  const rightSlide = () => {
+    setTransitionDuration(1000);
+    setClick(true);
+    if (currImg === images.length) {
+      setCurrTransitionX((images.length + 1) * containerWidth);
+      setCurrImg(1);
+      setActiveImg(0);
+    } else {
+      setCurrTransitionX((currImg + 1) * containerWidth);
+      setCurrImg(currImg + 1);
+      setActiveImg(activeImg + 1);
+    }
+  };
+
+  const leftSlide = () => {
+    setTransitionDuration(1000);
+    setClick(true);
+    if (currImg === 1) {
+      setCurrTransitionX(0);
+      setCurrImg(images.length);
+      setActiveImg(images.length - 1);
+    } else {
+      setCurrTransitionX((currImg - 1) * containerWidth);
+      setCurrImg(currImg - 1);
+      setActiveImg(activeImg - 1);
+    }
+  };
+
+  useLayoutEffect(() => {
+    const width = container.current?.clientWidth || 0;
+
+    setCurrTransitionX(width);
+  }, []);
+
+  useEffect(() => {
+    setContainerWidth(container.current?.clientWidth || 0);
+    setCurrTransitionX(currImg * containerWidth);
+  }, [windowWidth]);
+
+  useEffect(() => {
+    const width = container.current?.clientWidth || 0;
+
+    setCurrTransitionX(width);
+
+    const handleWindowResize = () => {
+      setWindowWidth(window.innerWidth);
+      setTransitionDuration(0);
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    const transitionEnd = () => {
+      if (currImg <= 1 && isClick) {
+        setTransitionDuration(0);
+        setCurrTransitionX(currImg * containerWidth);
+      }
+
+      if (currImg >= images.length) {
+        setTransitionDuration(0);
+        setCurrTransitionX(images.length * containerWidth);
+      }
+    };
+
+    window.addEventListener('transitionend', transitionEnd);
+
+    return () => {
+      window.removeEventListener('transitionend', transitionEnd);
+    };
+  }, [currImg]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      rightSlide();
+    }, 5000);
+
+    return () => {
+      if (intervalId) {
+        window.clearInterval(intervalId);
+      }
+    };
+  });
+
+  return (
+    <div className="home-page__carousel carousel">
+      <div className="carousel__container _container">
+        <button
+          type="button"
+          aria-label="Mute volume"
+          className="
+            carousel__button
+            carousel__button-left
+            icon-button--left
+            icon-button"
+          onClick={leftSlide}
+        />
+
+        <div className="carousel__static-container" ref={container}>
+          <ul
+            className="carousel__dynamic-container"
+            style={{
+              transform: `translateX(${-currTransitionX}px)`,
+              transitionDuration: `${transitionDuration}ms`,
+            }}
+          >
+            {slides}
+          </ul>
+        </div>
+
+        <div className="carousel__indicators">
+          {
+            images.map(img => (
+              <span
+                key={img.idx}
+                className={classNames(
+                  'carousel__indicator',
+                  { 'carousel__indicator--is-active': img.idx === activeImg },
+                )}
+              />
+            ))
+          }
+        </div>
+
+        <button
+          type="button"
+          aria-label="Mute volume"
+          className="
+            carousel__button
+            carousel__button-right
+            icon-button--right
+            icon-button"
+          onClick={rightSlide}
+        />
+      </div>
+    </div>
+  );
+});

src/components/Carousel/index.ts

@@ -0,0 +1 @@
+export * from './Carousel';