mate-academy · Prokopovych16 · Sep 5, 2024 · Sep 11, 2024 · Sep 12, 2024 · Sep 12, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,11 +8,13 @@
   "dependencies": {
     "@cypress/react18": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.2.0",
+    "@reduxjs/toolkit": "^2.2.7",
     "@types/react-transition-group": "^4.4.5",
     "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.5"
@@ -33,11 +35,12 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
+    "parcel": "^1.12.3",
     "postcss": "^8.4.12",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
     "stylelint": "^15.11.0",
-    "typescript": "5.1.6"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "mate-scripts start -l",

diff --git a/public/img/header/Logo.svg b/public/img/header/Logo.svg
diff --git a/public/img/homePage/Banner.svg b/public/img/homePage/Banner.svg
diff --git a/public/img/homePage/category/Accessories.svg b/public/img/homePage/category/Accessories.svg
diff --git a/public/img/homePage/category/Phones.svg b/public/img/homePage/category/Phones.svg
diff --git a/public/img/homePage/category/Tablets.svg b/public/img/homePage/category/Tablets.svg
diff --git a/public/img/homePage/foto-2-3.jpg b/public/img/homePage/foto-2-3.jpg
diff --git a/public/img/homePage/iphone-11-vs-iphone-12-vs-13.jpg b/public/img/homePage/iphone-11-vs-iphone-12-vs-13.jpg
diff --git a/public/img/homePage/iphone-x-4k-iphone-10-wallpaper-preview.jpg b/public/img/homePage/iphone-x-4k-iphone-10-wallpaper-preview.jpg
diff --git a/public/img/homePage/iphone11watersplash.jpg b/public/img/homePage/iphone11watersplash.jpg
diff --git a/public/img/homePage/iphone12-logo.jpg b/public/img/homePage/iphone12-logo.jpg
diff --git a/public/img/icons/Chevron-left-dis.svg b/public/img/icons/Chevron-left-dis.svg
diff --git a/public/img/icons/Chevron-left.svg b/public/img/icons/Chevron-left.svg
diff --git a/public/img/icons/Chevron-right-dis.svg b/public/img/icons/Chevron-right-dis.svg
diff --git a/public/img/icons/Chevron-right.svg b/public/img/icons/Chevron-right.svg
diff --git a/public/img/icons/Chevron.svg b/public/img/icons/Chevron.svg
diff --git a/public/img/icons/Chevron_down.svg b/public/img/icons/Chevron_down.svg
diff --git a/public/img/icons/Close-black.svg b/public/img/icons/Close-black.svg
diff --git a/public/img/icons/Close.svg b/public/img/icons/Close.svg
diff --git a/public/img/icons/FavouritesFilledHeart.svg b/public/img/icons/FavouritesFilledHeart.svg
diff --git a/public/img/icons/Home.svg b/public/img/icons/Home.svg
diff --git a/public/img/icons/Menu.svg b/public/img/icons/Menu.svg
diff --git a/public/img/icons/Minus-dis.svg b/public/img/icons/Minus-dis.svg
diff --git a/public/img/icons/Minus.svg b/public/img/icons/Minus.svg
diff --git a/public/img/icons/Plus.svg b/public/img/icons/Plus.svg
diff --git a/public/img/icons/bucket_header.svg b/public/img/icons/bucket_header.svg
diff --git a/public/img/icons/favourites.svg b/public/img/icons/favourites.svg
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Phone catalog</title>
+    <link rel="icon" type="image/x-icon" href="img/icons/Home.svg">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,44 @@
-// not empty
+@import './utils/mixins.scss';
+@import './utils/vars.scss';
+
+/* Define the custom fonts using @font-face */
+@font-face {
+  font-family: 'Mont-Bold';
+  src: url('../public/fonts/Mont-Bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Mont-Regular';
+  src: url('../public/fonts/Mont-Regular.otf') format('opentype');
+}
+
+/* Global styles */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  background-color: #fff;
+  position: sticky; top: 0;
+  z-index: 1;
+}
+
+/* Main content area */
+.main {
+  min-height: calc(100vh - 170px);
+}
+
+/* Heading styles */
+h1, h2, h3, h4, li {
+  font-family: 'Mont-Bold', sans-serif;
+}
+
+/* Paragraph styles */
+p {
+  font-family: 'Mont-Regular', sans-serif;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,73 @@
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import './App.scss';
+import { HomePage } from './components/HomePage/HomePage';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { getProductsAsync } from './features/getProductsSlice';
+import { useEffect } from 'react';
+import { useAppDispatch } from './app/hooks';
+import { FavouritesPage } from './components/FavouritesPage';
+import { GeneralProductsPage } from './components/GeneralProductPage';
+import { ItemInformation } from './components/ItemInformation';
+import { BucketPage } from './components/BucketPage';
+import { BurgerMenu } from './components/BurgerMenu';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  // const category  = useLocation().pathname.slice(1);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(getProductsAsync());
+  }, [dispatch]);
+
+  const isMenuClicked = useLocation().pathname.slice(1);
+
+  return (
+    <>
+      <div className="App">
+        <div className="page-content">
+          <header className="header">
+            <Header />
+          </header>
+
+          <main className="main">
+            <Routes>
+              <Route path="/">
+                <Route index element={<HomePage />} />
+                {/* <Route path=":productId?" element={<ItemInformation />} /> */}
+              </Route>
+              <Route path="home" element={<Navigate to="/" replace={true} />} />
+
+              <Route path="phones">
+                <Route index element={<GeneralProductsPage />} />
+                <Route path=":productId?" element={<ItemInformation />} />
+              </Route>
+
+              <Route path="tablets">
+                <Route index element={<GeneralProductsPage />} />
+                <Route path=":productId?" element={<ItemInformation />} />
+              </Route>
+
+              <Route path="accessories">
+                <Route index element={<GeneralProductsPage />} />
+                <Route path=":productId?" element={<ItemInformation />} />
+              </Route>
+
+              <Route path="favourites" element={<FavouritesPage />} />
+              <Route path="bucket" element={<BucketPage />} />
+              <Route path="menu" element={<BurgerMenu />} />
+
+              <Route path="*" element={<p>Page not found</p>} />
+            </Routes>
+          </main>
+
+          {isMenuClicked !== 'menu' && (
+            <footer className="footer">
+              <Footer />
+            </footer>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/app/store.ts b/src/app/store.ts
@@ -0,0 +1,30 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import getProductsSlice from '../features/getProductsSlice';
+import getAllProductsReducer from '../features/getAllProductsSlice';
+import getTabletsSlice from '../features/getTabletsSlice';
+import getAccessoriesSlice from '../features/getAccessoriesSlice';
+import addFavouritesSlice from '../features/addFavouritesSlice';
+import addBucketInfoSlice from '../features/addBucketInfoSlice';
+
+export const store = configureStore({
+  reducer: {
+    products: getProductsSlice,
+    allProducts: getAllProductsReducer,
+    tablets: getTabletsSlice,
+    accessories: getAccessoriesSlice,
+    addedFavourites: addFavouritesSlice,
+    addedBucket: addBucketInfoSlice,
+  },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+
+/* eslint-disable @typescript-eslint/indent */
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;
+/* eslint-enable @typescript-eslint/indent */