mate-academy · Ehulinian · Nov 9, 2024 · Nov 9, 2024 · Nov 27, 2024 · Nov 27, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -7,5 +7,6 @@
   "printWidth": 80,
   "semi": true,
   "bracketSpacing": true,
-  "bracketSameLine": false
+  "bracketSameLine": false,
+  "endOfLine": "lf"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,26 +9,29 @@
     "@cypress/react18": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "@types/react-transition-group": "^4.4.5",
+    "axios": "^1.7.7",
     "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "swiper": "^11.1.14"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mate-academy/eslint-config-react-typescript": "latest",
-    "@mate-academy/scripts": "^1.7.9",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "latest",
     "@mate-academy/stylelint-config": "latest",
     "@types/node": "^16.18.80",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "cypress": "^12.17.4",
-    "eslint": "^7.32.0",
+    "eslint": "^9.14.0",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-typescript": "^0.14.0",
     "gh-pages": "^6.1.1",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.2.0",

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Phone catalog</title>
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <title>Nice Gadgets</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="page"></div>
   </body>
 </html>
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,13 @@
-// not empty
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 56px;
+  flex-grow: 1;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,25 @@
+import { Outlet } from 'react-router-dom';
 import './App.scss';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { useContext } from 'react';
+import { ProductsContext } from './store/ProductsContext';
+import Loader from './components/Loader/Loader';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  const { isLoading } = useContext(ProductsContext);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <Outlet />;
+      </main>
+      <Footer />
+    </>
+  );
+};
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,43 @@
+import { Route, HashRouter as Router, Routes } from 'react-router-dom';
+import { App } from './App';
+import { AccessoriesPage } from './pages/AccessoriesPage';
+import { HomePage } from './pages/HomePage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { PhonesPage } from './pages/PhonesPage';
+import { TabletsPage } from './pages/TabletsPage';
+import { ProductsProvider } from './store/ProductsContext';
+import { FavoritesPage } from './pages/FavoritesPage';
+import { CartPage } from './pages/CartPage';
+import { ProductDetailsPage } from './pages/ProductDetailsPage';
+
+export const Root = () => (
+  <Router>
+    <ProductsProvider>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+
+          <Route path="phones">
+            <Route index element={<PhonesPage />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="tablets">
+            <Route index element={<TabletsPage />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="accessories">
+            <Route index element={<AccessoriesPage />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="cart" element={<CartPage />} />
+
+          <Route path="catalog" element={<FavoritesPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </ProductsProvider>
+  </Router>
+);
diff --git a/src/api/categoryProducts.ts b/src/api/categoryProducts.ts
@@ -0,0 +1,6 @@
+import { ProductSpecs } from '../types/Product';
+import { client } from '../utils/httpClient';
+
+export const getCategoryProducts = (category: string) => {
+  return client.get<ProductSpecs[]>(`api/${category}.json`);
+};
diff --git a/src/api/products.ts b/src/api/products.ts
@@ -0,0 +1,6 @@
+import { Product } from '../types/Product';
+import { client } from '../utils/httpClient';
+
+export const getProducts = () => {
+  return client.get<Product[]>('api/products.json');
+};
diff --git a/src/assets/icons/icons.svg b/src/assets/icons/icons.svg