commit for fe-chat

package.json

@@ -8,10 +8,10 @@
   "dependencies": {
     "@cypress/react": "^5.12.4",
     "bulma": "^0.9.3",
+    "classnames": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3",
-    "swiper": "^6.8.4"
+    "react-scripts": "^4.0.3"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
@@ -24,6 +24,7 @@
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
+    "@types/react-slick": "^0.23.10",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",

src/App.scss

@@ -18,4 +18,6 @@ body {
 
 .App {
   font-family: Mont-Regular;
+  overflow: hidden;
+
 }

src/App.tsx

@@ -1,15 +1,17 @@
 import './App.scss';
 
+import { Header } from './pages/components/Header';
 import { HomePage } from './pages/HomePage';
 import { PhonesPage } from './pages/PhonesPage';
 import { Footer } from './pages/components/Footer';
-import { Header } from './pages/components/Header';
+// import { ProductDetailsPage } from './pages/ProductDetailsPage';
 
 const App = () => (
   <div className="App">
     <Header />
     <HomePage />
     <PhonesPage />
+    {/* <ProductDetailsPage /> */}
     <Footer />
   </div>
 );

src/api/phone.ts

@@ -0,0 +1,6 @@
+import { Phone } from '../types/Phone';
+import { client } from '../utils/fetchClient';
+
+export const getPhones = () => {
+  return client.get<Phone[]>('/products.json');
+};

src/pages/HomePage.tsx

@@ -1,50 +1,78 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { FC } from 'react';
+import React, { useState, useEffect } from 'react';
 
-// import { useSwiper } from 'swiper/react';
 import { ProductsSlider } from './components/ProductsSlider';
-import '../styles/blocks/home-page.scss';
-import { Slider } from './components/Slider';
+import '../styles/styles.scss';
 
-import slides from '../api/banners.json';
+import { PreviewSlider } from './components/PreviewSlider';
+// import { ProductCard } from './components/ProductCard';
+import { getPhones } from '../api/phone';
+import { Phone } from '../types/Phone';
 
-export const HomePage: FC = () => {
-  // const swiper = useSwiper();
+export const HomePage: React.FC = () => {
+  const [phones, setPhones] = useState<Phone[]>([]);
+
+  const images = [
+    { imgUrl: 'images/BannerHomePage.png', id: '01' },
+    { imgUrl: 'images/BannerHomePage.png', id: '02' },
+    { imgUrl: 'images/BannerHomePage.png', id: '03' },
+  ];
+
+  // const products = [
+  //   { id: '1', value: <ProductCard /> },
+  //   { id: '2', value: <ProductCard /> },
+  //   { id: '3', value: <ProductCard /> },
+  //   { id: '4', value: <ProductCard /> },
+  //   { id: '5', value: <ProductCard /> },
+  //   { id: '6', value: <ProductCard /> },
+  //   { id: '7', value: <ProductCard /> },
+  //   { id: '8', value: <ProductCard /> },
+  // ];
+
+  async function loadedPhones() {
+    try {
+      const result = await getPhones();
+
+      setPhones(result);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  useEffect(() => {
+    loadedPhones();
+  }, []);
 
   return (
     <>
       <div className="home-page">
-
         <div className="home-page__preview-slider preview-slider">
-
-          <button
-            // onClick={() => swiper.slideNext()}
-            type="button"
-            className="preview-slider__button"
-          >
-            <img src="images/icons/ArrowLeft.svg" alt="" />
-          </button>
-          <div className="preview-slider__container">
-            <div className="preview-slider__picture">
-              <Slider slides={slides} />
-
-            </div>
-            <div className="picture__pagination pagination">
-              <a href="#" className="pagination__link">1</a>
-              <a href="#" className="pagination__link">2</a>
-              <a href="#" className="pagination__link">3</a>
-            </div>
-          </div>
-          <button type="button" className="preview-slider__button">
-            <img src="images/icons/ArrowRight.svg" alt="" />
-          </button>
+          <PreviewSlider>
+            {images.map((img, index) => (
+              <img
+                className={`picture-${index}`}
+                src={img.imgUrl}
+                alt="Banner"
+                key={img.id}
+              />
+            ))}
+          </PreviewSlider>
         </div>
 
         <div className="home-page__hot-prices hot-prices">
           <h1 className="hot-prices__title">
             Hot prices
           </h1>
-          <ProductsSlider />
+          <ProductsSlider>
+            {phones.map(product => {
+              return (
+                <div key={product.id}>
+                  {product}
+                </div>
+              );
+            })}
+          </ProductsSlider>
         </div>
 
         <div className="home-page__shop-by-category shop-by-category">
@@ -96,7 +124,13 @@ export const HomePage: FC = () => {
           <h1 className="brand-new__title">
             Brand new models
           </h1>
-          <ProductsSlider />
+          {/* <ProductsSlider>
+            {products.map(product => (
+              <div key={product.id}>
+                {product.value}
+              </div>
+            ))}
+          </ProductsSlider> */}
         </div>
       </div>
 

src/pages/PhonesPage.tsx

@@ -1,22 +1,20 @@
 import { FC } from 'react';
 import Breadcrumbs from './components/Breadcrumbs';
-import { ProductsList } from './components/ProductsList';
-import '../styles/blocks/phones-page.scss';
+// import { ProductsList } from './components/ProductsList';
+import '../styles/styles.scss';
 
 export const PhonesPage: FC = () => {
   const breadcrumbItems = [
     { text: 'Home', link: '/' },
-    { text: 'Category', link: '/category' },
-    { text: 'Subcategory', link: '/category/subcategory' },
-    { text: 'Current Page', link: '/category/subcategory/current-page' },
+    { text: 'Phones', link: '/phones' },
   ];
 
   return (
-    <div className="phone-page">
+    <div className="phones-page">
       <Breadcrumbs items={breadcrumbItems} />
-      <h1 className="phone-page__title">Mobile phones</h1>
-      <p className="phone-page__amount-phone-text">95 models</p>
-      <div className="phone-page__filter filter">
+      <h1 className="phones-page__title">Mobile phones</h1>
+      <p className="phones-page__amount-phone-text">95 models</p>
+      <div className="phones-page__filter filter">
         <div className="filter__container">
           <h2 className="filter__title">Sort by</h2>
           <select
@@ -27,7 +25,7 @@ export const PhonesPage: FC = () => {
             <option
               className="filter__selector--items"
               value="age"
-              selected
+              // selected
             >
               Newest
             </option>
@@ -62,7 +60,7 @@ export const PhonesPage: FC = () => {
             <option
               className="filter__selector--items"
               value="16"
-              selected
+              // selected
             >
               16
             </option>
@@ -75,7 +73,7 @@ export const PhonesPage: FC = () => {
           </select>
         </div>
       </div>
-      <ProductsList />
+      {/* <ProductsList /> */}
     </div>
   );
 };

src/pages/ProductDetailsPage.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import Breadcrumbs from './components/Breadcrumbs';
+import '../styles/styles.scss';
+
+export const ProductDetailsPage: FC = () => {
+  const breadcrumbItems = [
+    { text: 'Home', link: '/' },
+    { text: 'Phones', link: '/phones' },
+    {
+      text: 'Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)',
+      link: '/phones/product-datails-page',
+    },
+  ];
+
+  return (
+    <div className="product-details-page">
+      <Breadcrumbs items={breadcrumbItems} />
+      <a className="product-details-page__link-move-back" href="http://">
+        <img src="images/icons/ArrowLeft.svg" alt="Back button" />
+        Back
+      </a>
+      <h1 className="product-details-page__title">
+        Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)
+      </h1>
+    </div>
+  );
+};

src/pages/components/BreadcrumbItem.tsx

@@ -1,6 +1,6 @@
 // BreadcrumbItem.js
 import { FC } from 'react';
-import '../../styles/blocks/breadcrumb.scss';
+import '../../styles/styles.scss';
 
 type Props = {
   text: string,
@@ -15,7 +15,12 @@ const BreadcrumbItem: FC<Props> = ({ text, link }) => {
           <img src="images/icons/Home.svg" alt="Home icon" />
         </a>
       ) : (
-        <a className="breadcrumb-item__link" href={link}>{text}</a>
+        <>
+          <a className="breadcrumb-item__link" href={link}>
+            <img src="images/icons/ArrowRight.svg" alt="Arrow right" />
+            {text}
+          </a>
+        </>
       )}
     </>
   );

src/pages/components/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 // Breadcrumbs.js
 import { FC } from 'react';
 import BreadcrumbItem from './BreadcrumbItem';
-import '../../styles/blocks/breadcrumb.scss';
+import '../../styles/styles.scss';
 
 type Props = {
   items: { text: string; link: string; }[],

src/pages/components/Footer.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import '../../styles/blocks/footer.scss';
+import '../../styles/styles.scss';
 
 export const Footer: FC = () => {
   return (

src/pages/components/Header.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { FC } from 'react';
-import '../../styles/blocks/header.scss';
+import '../../styles/styles.scss';
 
 export const Header: FC = () => {
   return (