Develop

.stylelintrc.js

@@ -1,4 +1,6 @@
 module.exports = {
   extends: "@mate-academy/stylelint-config",
-  rules: {}
+  rules: {
+    "scss/at-mixin-pattern": null,
+  }
 };

package.json

@@ -1,22 +1,23 @@
 {
   "name": "react_phone-catalog",
-  "homepage": "react_phone-catalog",
   "version": "0.1.0",
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
@@ -55,7 +56,7 @@
     "format": "prettier --write './src/**/*.{ts,tsx}'",
     "lint": "npm run style-format && npm run format && npm run lint-js && npm run lint-css",
     "update": "mate-scripts update",
-    "postinstall": "npm run update && cypress verify",
+    "postinstall": "npm run update",
     "predeploy": "npm run build",
     "deploy": "mate-scripts deploy"
   },

src/App.scss

@@ -1 +1,12 @@
-// not empty
+// not empty
+.App {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.main {
+  flex: 1;
+  padding-inline: 32px;
+}

src/App.tsx

@@ -1,7 +1,32 @@
+import { Route, Routes } from 'react-router-dom';
 import './App.scss';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { HomePage } from './modules/HomePage';
+import { ProductsPage } from './modules/ProductsPage';
+import { ProductDetailsPage } from './modules/ProductDetailsPage';
+import { FavoritesPage } from './modules/FavoritesPage';
+import { CartPage } from './modules/CartPage';
+import { NotFoundPage } from './modules/NotFoundPage';
 
 export const App = () => (
   <div className="App">
-    <h1>Product Catalog</h1>
+    <Header />
+    <div className="main">
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/phones" element={<ProductsPage category="phones" />} />
+        <Route path="/tablets" element={<ProductsPage category="tablets" />} />
+        <Route
+          path="/accessories"
+          element={<ProductsPage category="accessories" />}
+        />
+        <Route path="/:category/:productId" element={<ProductDetailsPage />} />
+        <Route path="/favorites" element={<FavoritesPage />} />
+        <Route path="/cart" element={<CartPage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </div>
+    <Footer />
   </div>
 );

src/api/phone.ts

@@ -0,0 +1,8 @@
+import { PhoneType } from '../features/types/phoneType';
+import { getData } from '../features/utils/client';
+
+export async function getPhones(): Promise<PhoneType[]> {
+  const phones = await getData<PhoneType[]>('/api/phones.json');
+
+  return phones;
+}

src/api/products.ts

@@ -0,0 +1,35 @@
+import { ProductDetails } from '../features/types/productDetailsType';
+import { Product, ProductCategory } from '../features/types/productType';
+import { getData } from '../features/utils/client';
+
+const DETAILS_FILE_BY_CATEGORY: Record<ProductCategory, string> = {
+  phones: '/api/phones.json',
+  tablets: '/api/tablets.json',
+  accessories: '/api/accessories.json',
+};
+
+export function getProducts(): Promise<Product[]> {
+  return getData<Product[]>('/api/products.json');
+}
+
+export async function getProductDetails(
+  category: ProductCategory,
+  productId: string,
+): Promise<ProductDetails> {
+  const url = DETAILS_FILE_BY_CATEGORY[category];
+
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    throw new Error('Failed to load details');
+  }
+
+  const all: ProductDetails[] = await res.json();
+  const found = all.find(p => p.id === productId);
+
+  if (!found) {
+    throw new Error('Product not found');
+  }
+
+  return found;
+}

src/app/store.ts

@@ -0,0 +1,26 @@
+import { configureStore, Middleware } from '@reduxjs/toolkit';
+import favoritesReducer from '../features/slices/favorites/favoritesSlice';
+import cartListReducer from '../features/slices/cartSlice/cartSlice';
+
+const localStorageMiddleware: Middleware = store => next => action => {
+  const result = next(action);
+
+  const state = store.getState();
+
+  localStorage.setItem('favorites', JSON.stringify(state.favorites.items));
+  localStorage.setItem('cartList', JSON.stringify(state.cartList.items));
+
+  return result;
+};
+
+export const store = configureStore({
+  reducer: {
+    favorites: favoritesReducer,
+    cartList: cartListReducer,
+  },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(localStorageMiddleware),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;