mate-academy · Blenemy · Jun 7, 2023 · Jun 7, 2023 · Jun 9, 2023 · Jun 14, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,22 +7,36 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@cypress/react": "^5.12.4",
-    "bulma": "^0.9.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/material": "^5.14.3",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@uidotdev/usehooks": "^2.0.1",
+    "classnames": "^2.3.2",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.10.0",
     "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",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "autoprefixer": "^10.4.14",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -31,6 +45,7 @@
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
     "node-sass": "^6.0.1",
+    "postcss": "^8.4.27",
     "stylelint": "^13.13.1",
     "typescript": "^4.6.3"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/products/Cart.svg b/public/img/products/Cart.svg
diff --git a/public/img/products/Home.svg b/public/img/products/Home.svg
diff --git a/public/img/products/Logo.png b/public/img/products/Logo.png
diff --git a/public/img/products/accessories-banner.png b/public/img/products/accessories-banner.png
diff --git a/public/img/products/arrow-top.svg b/public/img/products/arrow-top.svg
diff --git a/public/img/products/favourites-added.svg b/public/img/products/favourites-added.svg
diff --git a/public/img/products/favourites.svg b/public/img/products/favourites.svg
diff --git a/public/img/products/image-banner.png b/public/img/products/image-banner.png
diff --git a/public/img/products/phone-catalog-home.zip b/public/img/products/phone-catalog-home.zip
diff --git a/public/img/products/phones-banner.png b/public/img/products/phones-banner.png
diff --git a/public/img/products/tablets-banner.png b/public/img/products/tablets-banner.png
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" href="%PUBLIC_URL%/favicon.ico" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,118 @@
-// not empty
+@import url(https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900);
+
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+}
+
+:focus,
+:active {
+  outline: none;
+}
+
+::-webkit-scrollbar:hover {
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a0a0a0;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+nav,
+footer,
+header,
+aside {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  line-height: 1;
+  font-size: 18px;
+  font-family: "Montserrat", sans-serif;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+input,
+button,
+textarea {
+  font-family: inherit;
+}
+
+input::-ms-clear {
+  display: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: 400;
+}
+
+main {
+  flex: 1 1 auto;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  min-height: 100vh;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,95 @@
+import { useEffect } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Footer } from './components/Footer/Footer';
+import { Header } from './components/Header/Header';
+import { Homepage } from './pages/Homepage';
+import {
+  ProductDetailsPage,
+} from './components/ProductDetails/ProductDetailsPage';
+import { API_URL, getProducts } from './helpers/helper';
 import './App.scss';
+import { Favoutires } from './components/Favourites/Favourites';
+import { Cart } from './components/Cart/Cart';
+import { ScrollToTop } from './helpers/ScrollToTop';
+import { PhonesPage } from './pages/PhonesPage';
+import { TabletsPage } from './pages/TabletsPage';
+import {
+  AccessoriesPage,
+} from './pages/AccessoriesPage';
+import { NotFound } from './components/NotFound/NotFound';
+import { useAppDispatch } from './app/hooks';
+import { set } from './features/productsSlice';
+import { AuthForm } from './components/AuthForm/AuthForm';
+import { CreateAccount } from './components/CreateAccount/CreateAccount';
 
-const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
-  </div>
-);
+const App = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await getProducts(API_URL);
+
+        dispatch(set(response));
+      } catch (fetchError) {
+        throw new Error('Data could not be fetched');
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <div className="App">
+      <ScrollToTop />
+      <div className="wrapper">
+        <Header />
+        <Routes>
+          <Route
+            path="/"
+            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="favourites"
+            element={<Favoutires />}
+          />
+          <Route
+            path="cart"
+            element={<Cart />}
+          />
+          <Route path="*" element={<NotFound />} />
+          <Route
+            path="home"
+            element={<Navigate to="/" replace />}
+          />
+          <Route path="authentication" element={<AuthForm />} />
+          <Route path="create-account" element={<CreateAccount />} />
+        </Routes>
+        <Footer />
+      </div>
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/app/hooks.ts b/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;
diff --git a/src/app/store.ts b/src/app/store.ts
@@ -0,0 +1,22 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import productsSlice from '../features/productsSlice';
+import productInfoSlice from '../features/productInfoSlice';
+
+export const store = configureStore({
+  reducer: {
+    products: productsSlice,
+    productInfo: productInfoSlice,
+  },
+});
+
+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 */
diff --git a/src/components/AuthForm/AuthForm.scss b/src/components/AuthForm/AuthForm.scss
@@ -0,0 +1,27 @@
+$width-var: 320px;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  max-width: 700px;
+  margin: 0 auto 20px;
+
+  &__button {
+    min-width: 400px !important;
+  }
+
+  &__title {
+    margin-bottom: 20px;
+  }
+}
+
+.register {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  &__button {
+    text-align: center;
+    color: #42aa19 !important;
+  }
+
+}