commit -for fe-chat problem with swiper

package.json

@@ -7,22 +7,28 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@cypress/react": "^5.12.4",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@types/react-redux": "^7.1.25",
     "bulma": "^0.9.3",
+    "classnames": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "^6.14.2",
     "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",
     "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-slick": "^0.23.10",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",

src/App.scss

@@ -1 +1,27 @@
-// not empty
+@font-face {
+  font-family: Mont-Regular;
+  src: url('../src/fonts/Mont-Regular.otf')  format('truetype');
+}
+@font-face {
+  font-family: Mont-SemiBold;
+  src: url('../src/fonts/Mont-SemiBold.otf')  format('truetype');
+}
+@font-face {
+  font-family: Mont-Bold;
+  src: url('../src/fonts/Mont-Bold.otf')  format('truetype');
+}
+
+html,
+body {
+  margin: 0;
+  scroll-behavior: smooth;
+}
+
+.App {
+  font-family: Mont-Regular;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; 
+
+}

src/App.tsx

@@ -1,9 +1,137 @@
+import { FC, useEffect } from 'react';
+import {
+  Navigate, Route, Routes,
+} from 'react-router-dom';
 import './App.scss';
 
-const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
-  </div>
-);
+import { Header } from './pages/components/Header';
+import { HomePage } from './pages/HomePage';
+import { PhonesPage } from './pages/PhonesPage';
+import { Footer } from './pages/components/Footer';
+import { ProductDetailsPage } from './pages/ProductDetailsPage';
+import { useAppDispatch } from './app/hooks';
+import { incrementAsync as loadedPhones } from './features/phones/phonesSlice';
+import { FavoritesPage } from './pages/FavoritesPage';
+import { CardPage } from './pages/CardPage';
+import { TabletsPage } from './pages/TabletsPage';
+import {
+  incrementAsync as loadedProducts,
+} from './features/products/productsSlice';
+import { AccessoriesPage } from './pages/AccessoriesPage';
 
-export default App;
+export const App: FC = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(loadedPhones());
+    dispatch(loadedProducts());
+  }, []);
+
+  return (
+    <div className="App">
+      <Routes>
+        <Route
+          path="/"
+          element={(
+            <>
+              <Header />
+              <HomePage />
+              <Footer />
+            </>
+          )}
+        />
+        <Route path="home" element={<Navigate to="/" replace />} />
+        <Route path="phones">
+          <Route
+            index
+            element={(
+              <>
+                <Header />
+                <PhonesPage />
+                <Footer />
+              </>
+            )}
+          />
+          <Route
+            path="/phones/:productId"
+            element={(
+              <>
+                <Header />
+                <ProductDetailsPage />
+                <Footer />
+              </>
+            )}
+          />
+        </Route>
+        <Route path="tablets">
+          <Route
+            index
+            element={(
+              <>
+                <Header />
+                <TabletsPage />
+                <Footer />
+              </>
+            )}
+          />
+          <Route
+            path="/tablets/:productId"
+            element={(
+              <>
+                <Header />
+                <ProductDetailsPage />
+                <Footer />
+              </>
+            )}
+          />
+        </Route>
+        <Route path="accessories">
+          <Route
+            index
+            element={(
+              <>
+                <Header />
+                <AccessoriesPage />
+                <Footer />
+              </>
+            )}
+          />
+          <Route
+            path="/accessories/:productId"
+            element={(
+              <>
+                <Header />
+                <ProductDetailsPage />
+                <Footer />
+              </>
+            )}
+          />
+        </Route>
+        <Route
+          path="favorites"
+          element={(
+            <>
+              <Header />
+              <FavoritesPage />
+              <Footer />
+            </>
+          )}
+        />
+        <Route
+          path="card"
+          element={(
+            <>
+              <Header />
+              <CardPage />
+              <Footer />
+            </>
+          )}
+        />
+        <Route
+          path="*"
+          element={<h1 className="title">Page not found</h1>}
+        />
+      </Routes>
+    </div>
+  );
+};

src/api/banners.json

@@ -0,0 +1,54 @@
+[
+  {
+    "age": 0,
+    "id": "banner1",
+    "type": "banner",
+    "imageUrl": "images/BannerHomePage.png",
+    "name": "Banner phones",
+    "snippet": "Best phones in our shop",
+    "price": 100,
+    "discount": 0,
+    "screen": "Full size",
+    "capacity": "",
+    "ram": ""
+  },
+  {
+    "age": 0,
+    "id": "banner2",
+    "type": "banner",
+    "imageUrl": "images/BannerHomePage.png",
+    "name": "Banner phones",
+    "snippet": "Best phones in our shop",
+    "price": 100,
+    "discount": 0,
+    "screen": "Full size",
+    "capacity": "",
+    "ram": ""
+  },
+  {
+    "age": 0,
+    "id": "banner3",
+    "type": "banner",
+    "imageUrl": "images/BannerHomePage.png",
+    "name": "Banner phones",
+    "snippet": "Best phones in our shop",
+    "price": 100,
+    "discount": 0,
+    "screen": "Full size",
+    "capacity": "",
+    "ram": ""
+  },
+  {
+    "age": 0,
+    "id": "banner4",
+    "type": "banner",
+    "imageUrl": "images/BannerHomePage.png",
+    "name": "Banner phones",
+    "snippet": "Best phones in our shop",
+    "price": 100,
+    "discount": 0,
+    "screen": "Full size",
+    "capacity": "",
+    "ram": ""
+  }
+]

src/api/phone.ts

@@ -0,0 +1,15 @@
+import { Product } from '../types/Product';
+import { PhoneDetails } from '../types/PhoneDetails';
+import { client } from '../utils/fetchClient';
+
+export const getPhones = () => {
+  return client.get<Product[]>('/_new/products.json');
+};
+
+export const getPhoneDetails = (phoneId: string) => {
+  return client.get<PhoneDetails>(`/_new/products/${phoneId}.json`);
+};
+
+export const getProducts = () => {
+  return client.get<Product[]>('/api/products.json');
+};

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use these hooks everywhere instead of useDispatch and useSelector
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;