mate-academy · Anothar · May 15, 2024 · May 20, 2024 · May 26, 2024 · Sep 15, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,19 @@ module.exports = {
   extends: [
     '@mate-academy/eslint-config-react-typescript',
     'plugin:cypress/recommended',
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
   ],
-  rules: {},
+  "plugins": ["prettier"],
+  rules: {
+    "prettier/prettier": "error" ,
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["state"]
+      }
+    ],
+    "no-console": "off",
+  }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,24 +8,36 @@
   "dependencies": {
     "@cypress/react18": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.2.0",
+    "@reduxjs/toolkit": "^2.2.4",
+    "@types/react-redux": "^7.1.33",
     "@types/react-transition-group": "^4.4.5",
     "bulma": "^0.9.4",
     "classnames": "^2.5.1",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.2",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
-    "react-transition-group": "^4.4.5"
+    "react-toastify": "^10.0.5",
+    "react-transition-group": "^4.4.5",
+    "redux-persist": "^6.0.0",
+    "styled-components": "^6.1.11"
   },
   "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.8.1",
     "@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",
+    "@types/redux-persist": "^4.3.1",
+    "cross-env": "^7.0.3",
     "cypress": "^12.17.4",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -37,7 +49,8 @@
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
     "stylelint": "^15.11.0",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "typescript-plugin-css-modules": "^5.1.0"
   },
   "scripts": {
     "start": "mate-scripts start -l",

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,44 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Phone catalog</title>
+    <style>
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #636363;
+        border-radius: 8px;
+      }
+
+      ::-webkit-scrollbar-track {
+        border-radius: 8px;
+      }
+    </style>
+    <style>
+      @font-face {
+        font-family: Mont-Regular;
+        src: url(/react_phone-catalog/fonts/Mont-Regular.otf) format('opentype');
+        font-weight: 600;
+      }
+
+      @font-face {
+        font-family: Mont-SemiBold;
+        src: url(/react_phone-catalog/fonts/Mont-SemiBold.otf) format('opentype');
+        font-weight: 700;
+      }
+
+      @font-face {
+        font-family: Mont-Bold;
+        src: url(/react_phone-catalog/fonts/Mont-Bold.otf) format('opentype');
+        font-weight: 800;
+      }
+
+      body {
+        font-family: 'Mont-Regular', sans-serif;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -0,0 +1,62 @@
+{
+  "WELCOME_MESSAGE": "Welcome to Nice Gadgets store!",
+  "NEW_MODELS": "Brand new models",
+  "SCREEN": "Screen",
+  "CAPACITY": "Capacity",
+  "RAM": "RAM",
+  "ADD_TO_CART": "Add to cart",
+  "SHOP_BY_CATEGORY": "Shop by category",
+  "MOBILE_PHONES": "Mobile phones",
+  "MODELS": "models",
+  "TABLETS": "Tablets",
+  "ACCESSORIES": "Accessories",
+  "HOT_PRICES": "Hot prices",
+  "CONTACTS": "Contacts",
+  "RIGHTS": "Rights",
+  "BACK_TO_TOP": "Back to top",
+  "THEME": "Theme",
+  "LANGUAGE": "Language",
+  "HOME": "Home",
+  "PHONES": "Phones",
+  "ADDED": "Added",
+  "PAGE_NOT_FOUND": "Page Not Found. Go to home page?",
+  "SORT_BY": "Sort by",
+  "ITEMS_ON_PAGE": "Items on page",
+  "SORT_AGE": "Newest",
+  "SORT_NAME": "Alphabetically",
+  "SORT_PRICE": "Cheapest",
+  "NOT_PHONES": "Sorry... There are no phones yet... Go to phones page?",
+  "NOT_TABLETS": "Sorry... There are no tablets yet... Go to tablets page?",
+  "NOT_ACCESSORIES": "Sorry... There are no accessories yet... Go to accessories page?",
+  "GO_BACK": "GO BACK",
+  "GO_HOME": "HOME PAGE",
+  "SEARCH_TEXT": "Enter search text!",
+  "FAVOURITES": "Favourites",
+  "NO_SEARCH": "No search results...",
+  "SEE_ALL": "Search",
+  "SEE_PHONES": "See phones",
+  "SEE_TABLETS": "See tablets",
+  "SEE_ACCESORIES": "See accesories",
+  "CLEAR": "Clear",
+  "NOT_FAVOURITES": "There are no favourites yet...",
+  "NOT_CART": "Your cart is empty...",
+  "BACK": "Back",
+  "CART": "Cart",
+  "TOTAL_FOR": "Total for",
+  "ITEMS": "items",
+  "CHECKOUT": "Checkout",
+  "CART_CHECKOUT_MSG": "Checkout is not implemented yet. Do you want to clear the Cart?",
+  "CONFIRM": "Confirm",
+  "CANCEL": "Cancel",
+  "AVAILABLE_COLORS": "Available Colors",
+  "SELECT_CAPACITY": "Select capacity",
+  "RESOLUTION": "Resolution",
+  "PROCESSOR": "Processor",
+  "ABOUT": "About",
+  "TECH_SPECS": "Tech specs",
+  "BUILT_IN_MEMORY": "Built in memory",
+  "CELL": "Cell",
+  "CAMERA": "Camera",
+  "ZOOM": "Zoom",
+  "PRODUCT_NOT": "Product not found. Go home page?"
+}
diff --git a/public/locales/uk/translation.json b/public/locales/uk/translation.json
@@ -0,0 +1,62 @@
+{
+  "WELCOME_MESSAGE": "Ласкаво просимо до магазину Nice Gadgets!",
+  "NEW_MODELS": "Нові моделі",
+  "SCREEN": "Екран",
+  "CAPACITY": "Ємність",
+  "RAM": "ОЗП",
+  "ADD_TO_CART": "Додати до кошика",
+  "SHOP_BY_CATEGORY": "Купити за категоріями",
+  "MOBILE_PHONES": "Мобільні телефони",
+  "MODELS": "моделі",
+  "TABLETS": "Планшети",
+  "ACCESSORIES": "Аксесуари",
+  "HOT_PRICES": "Гарячі ціни",
+  "CONTACTS": "Контакти",
+  "RIGHTS": "Права",
+  "BACK_TO_TOP": "Повернутися нагору",
+  "THEME": "Тема",
+  "LANGUAGE": "Мова",
+  "HOME": "Головна",
+  "PHONES": "Телефони",
+  "ADDED": "Добавлено",
+  "PAGE_NOT_FOUND": "Сторінка не знайдена. Повернутись на домашню сторінку?",
+  "SORT_BY": "Сортувати за",
+  "ITEMS_ON_PAGE": "Елементів",
+  "SORT_AGE": "Новизною",
+  "SORT_NAME": "Назвою",
+  "SORT_PRICE": "Дешевизною",
+  "NOT_PHONES": "Вибачте... Наразі немає телефонів... Перейти на сторінку телефонів?",
+  "NOT_TABLETS": "Вибачте... Наразі немає планшетів... Перейти на сторінку планшетів?",
+  "NOT_ACCESSORIES": "Вибачте... Наразі немає аксесуарів... Перейти на сторінку аксесуарів?",
+  "GO_BACK": "ПОВЕРНУТИСЬ",
+  "GO_HOME": "ДОМАШНЯ СТОРІНКА",
+  "SEARCH_TEXT": "Введіть пошуковий текст!",
+  "FAVOURITES": "Збереження",
+  "NO_SEARCH": "Немає результатів пошуку...",
+  "SEE_ALL": "Пошук",
+  "SEE_PHONES": "Телефони",
+  "SEE_TABLETS": "Планшети",
+  "SEE_ACCESORIES": "Аксесуари",
+  "CLEAR": "Очистити",
+  "NOT_FAVOURITES": "Наразі ваші збереження пусті...",
+  "NOT_CART": "Наразі ваш кошик пустий...",
+  "BACK": "Повернутись",
+  "CART": "Кошик",
+  "TOTAL_FOR": "Разом за",
+  "ITEMS": "шт.",
+  "CHECKOUT": "Оплата",
+  "CART_CHECKOUT_MSG": "Оформлення замовлення ще не реалізовано. Ви хочете очистити кошик?",
+  "CONFIRM": "Підтвердити",
+  "CANCEL": "Скасувати",
+  "AVAILABLE_COLORS": "Доступні кольори",
+  "SELECT_CAPACITY": "Вибрати об'єм",
+  "RESOLUTION": "Роздільна здатність",
+  "PROCESSOR": "Процесор",
+  "ABOUT": "Про продукт",
+  "TECH_SPECS": "Технічні характеристики",
+  "BUILT_IN_MEMORY": "Вбудована пам'ять",
+  "CELL": "Мобільний зв'язок",
+  "CAMERA": "Камера",
+  "ZOOM": "Приближення",
+  "PRODUCT_NOT": "Товар не знайдено. Перейти на домашнюю сторінку?"
+}
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,23 @@
-// not empty
+* {
+  box-sizing: border-box;
+  transition: all 0.3s;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0 1000px white inset;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,63 @@
+import { Outlet, useLocation } from 'react-router-dom';
 import './App.scss';
+import { Header } from './components/Header';
+import { useEffect } from 'react';
+import { getFrom } from './api/api';
+import { useAppDispatch } from './hooks/hookStore';
+import { setAccessories } from './features/accessoriesSlice';
+import { setTables } from './features/tablesSlice';
+import { setPhones } from './features/phoneSlice';
+import { setProducts } from './features/productsSlice';
+import { Footer } from './components/Footer';
+import { ThemeProvider } from './components/Themes/ThemeProvider';
+import { AppStyled, MainStyled } from './AppStyled';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  const dispatch = useAppDispatch();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [pathname]);
+
+  useEffect(() => {
+    const fetchItems = async () => {
+      try {
+        const [phones, tables, accesories, products] = await Promise.all([
+          getFrom.getPhones(),
+          getFrom.getTables(),
+          getFrom.getAccessories(),
+          getFrom.getProducts(),
+        ]);
+
+        dispatch(setPhones(phones));
+        dispatch(setTables(tables));
+        dispatch(setAccessories(accesories));
+        dispatch(setProducts(products));
+      } catch (error) {
+        console.error('Error, get products:', error);
+      }
+    };
+
+    fetchItems();
+  }, [dispatch]);
+
+  return (
+    <ThemeProvider>
+      <AppStyled className="App">
+        <Header />
+
+        <Outlet />
+
+        <MainStyled />
+
+        <div id="modal-root"></div>
+
+        <Footer />
+      </AppStyled>
+    </ThemeProvider>
+  );
+};
diff --git a/src/AppStyled.ts b/src/AppStyled.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+import styled from 'styled-components';
+import { media } from './utils/const';
+
+const AppStyled = styled.div`
+  background-color: ${({ theme }) => theme.bacgroundPage};
+  padding-top: 48px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+
+  ${media.desktop} {
+    padding-top: 64px;
+  }
+`;
+
+const MainStyled = styled.main`
+  flex: 1;
+`;
+
+export { AppStyled, MainStyled };