Fixed some global bugs

src/app/slices/cartSlise.ts

@@ -90,7 +90,7 @@ export const cartReducer = cartSlice.reducer;
 
 export const selectTotalCost = (state: CartState) =>
   state.cartItems.reduce(
-    (total, cartItem) => total + cartItem.item.priceRegular * cartItem.count,
+    (total, cartItem) => total + cartItem.item.priceDiscount * cartItem.count,
     0,
   );
 

src/app/slices/orderSlice.ts

@@ -1,21 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { CartItems } from '../../utils/types/CartItem';
-
-// Тип для користувача
-type User = {
-  name: string;
-  surname: string;
-  phone: string;
-  post: string;
-  city: string;
-};
+import { Order } from '../../utils/types/Order';
+import { User } from '../../utils/types/User';
 
 // Тип для замовлення
-type Order = {
-  user: User | null;
-  cartItems: CartItems[]; // Використовуємо тип CartItems
-  totalPrice: number;
-};
 
 // Функція для отримання даних корзини з LocalStorage
 const getCartItemsFromLocalStorage = (): CartItems[] => {
@@ -92,7 +80,7 @@ export const orderSlice = createSlice({
       state.cartItems = [];
       localStorage.removeItem('orderCart');
     },
-    setUser: (state, action: PayloadAction<User | null>) => {
+    setUser: (state, action: PayloadAction<User>) => {
       state.user = action.payload;
       localStorage.setItem('userData', JSON.stringify(action.payload));
     },

src/components/Catalog/Catalog.module.scss

@@ -48,6 +48,7 @@
     font-weight: 600;
     font-size: 14px;
     color: $secondary-color;
+    margin-bottom: 16px;
   }
   &__items {
     list-style: none;
@@ -141,10 +142,9 @@
 
 .phonesDropdown {
   display: flex;
-
 }
 
-.noResults{
+.noResults {
   margin-top: 20px;
 }
 
@@ -155,4 +155,4 @@
   @include onTablet {
     flex-direction: row;
   }
-}
+}

src/components/Catalog/Catalog.tsx

@@ -175,7 +175,8 @@ export const Catalog: React.FC<Props> = ({ items, title, isFiltered }) => {
         <Breadcrumbs />
         <div className={styles.phones__title}>{title}</div>
         <div className={styles.phones__countModel}>
-          {filteredItems.length} models
+          {filteredItems.length}{' '}
+          {filteredItems.length === 1 ? 'model' : 'models'}
         </div>
         {isFiltered && (
           <div className={styles.filtration}>
@@ -193,7 +194,7 @@ export const Catalog: React.FC<Props> = ({ items, title, isFiltered }) => {
           </div>
         )}
 
-        {paginatedItems.length === 0 && (
+        {paginatedItems.length === 0 && isFiltered && (
           <div className={styles.noResults}>
             <h2>No results found</h2>
             <p>Try searching for something else.</p>

src/components/Main/Main.tsx

@@ -17,6 +17,7 @@ export const Main: React.FC<Props> = () => {
   }, [phones]);
 
   useEffect(() => {
+    document.title = 'Nice Gadgets';
     dispatch(loadPhones());
   }, []);
 

src/pages/AccessoriesPage/AccessoriesPage.tsx

@@ -17,6 +17,7 @@ export const AccessoriesPage: React.FC<Props> = () => {
 
   useEffect(() => {
     dispatch(loadAccessories());
+    document.title = 'Accessories';
   }, [dispatch]);
 
   if (loading || !accessories.length) {

src/pages/CartPage/CartItem/CartItem.scss

@@ -9,6 +9,10 @@
   padding: 16px;
   grid-column: 1/-1;
 
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
   @include onTablet {
     padding: 24px;
     flex-direction: row;
@@ -32,7 +36,7 @@
 
   &__image {
     width: auto;
-    height: 80px;
+    height: 66px;
     margin-right: 16px;
     cursor: pointer;
     img {
@@ -51,11 +55,12 @@
   }
 
   &__name {
-    font-size: 16px;
-    font-weight: 600;
     margin-bottom: 8px;
     max-width: 366px;
-    cursor: pointer;
+
+    @include onTablet {
+      margin-bottom: 0;
+    }
   }
 
   &__details {
@@ -105,17 +110,24 @@
 
 .block__information {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 
   @include onTablet {
-    margin-bottom: 16px;
+    margin-bottom: 0;
+  }
+
+  a {
+    color: $primary-color;
   }
 }
 
 .block__price {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  &--order {
+    justify-content: flex-end;
+  }
 }

src/pages/CartPage/CartItem/CartItem.tsx

@@ -9,6 +9,9 @@ import {
   increaseQuantity,
   removeFromCart,
 } from '../../../app/slices/cartSlise';
+import { BASE_URL } from '../../../api/api';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
 
 type Props = {
   cart: CartItems;
@@ -17,9 +20,6 @@ type Props = {
 
 export const CartItem: React.FC<Props> = ({ cart, isOrder = false }) => {
   const dispatch = useAppDispatch();
-  const imageUrl = encodeURI(
-    `https://raw.githubusercontent.com/mate-academy/react_phone-catalog/f064fa3751d4adbc9a531a51805d593af585860b/public/${cart.item.images[0]}`,
-  );
 
   const deleteItem = () => {
     dispatch(removeFromCart(cart.item.id));
@@ -39,10 +39,19 @@ export const CartItem: React.FC<Props> = ({ cart, isOrder = false }) => {
         {!isOrder && (
           <button onClick={deleteItem} className="cartItem__close"></button>
         )}
-        <img className="cartItem__image" src={imageUrl} />
-        <div className="cartItem__name">{cart.item.name}</div>
+        <img
+          className="cartItem__image"
+          src={`${BASE_URL}/${cart.item.images[0]}`}
+        />
+        <Link to={`/${cart.item.category}/${cart.item.id}`}>
+          <p className="cartItem__name">{cart.item.name}</p>
+        </Link>
       </div>
-      <div className="block__price">
+      <div
+        className={classNames('block__price', {
+          'block__price--order': isOrder,
+        })}
+      >
         <div className="cartItem__count">
           {!isOrder && (
             <button className="cartItem__count--button" onClick={decrease}>
@@ -57,10 +66,10 @@ export const CartItem: React.FC<Props> = ({ cart, isOrder = false }) => {
             </button>
           )}
         </div>
-        <div className="cartItem__price">${cart.item.priceRegular}</div>
+        <div className="cartItem__price">${cart.item.priceDiscount}</div>
         {isOrder && (
           <div className="cartItem__price">
-            ${cart.item.priceRegular * cart.count}
+            ${cart.item.priceDiscount * cart.count}
           </div>
         )}
       </div>

src/pages/CartPage/CartPage.scss

@@ -12,6 +12,11 @@
       line-height: 56px;
     }
   }
+
+  &__empty-message {
+    margin-bottom: 32px;
+  }
+
   &__items {
     @include mainPageGrid;
     grid-column: 1/-1;

src/pages/CartPage/CartPage.tsx

@@ -13,7 +13,7 @@ import {
   selectTotalCost,
   selectTotalQuentity,
 } from '../../app/slices/cartSlise';
-// import { addToOrder } from '../../app/slices/orderSlice';
+import { addToOrder } from '../../app/slices/orderSlice';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
@@ -30,8 +30,11 @@ export const CartPage: React.FC<Props> = () => {
     selectTotalQuentity(state.cart),
   );
 
+  document.title = 'Cart';
+
   const saveOrder = () => {
     if (cartItems.length !== 0) {
+      dispatch(addToOrder(cartItems));
       dispatch(clearCart());
       navigate('/user');
     }
@@ -42,7 +45,9 @@ export const CartPage: React.FC<Props> = () => {
 
       <div className="cart__title">Cart</div>
       {cartItems.length === 0 && (
-        <div>Your shopping cart is currently empty</div>
+        <div className="cart__empty-message">
+          Your shopping cart is currently empty
+        </div>
       )}
       <div className="cart__items">
         {cartItems.map((product: CartItems) => {

src/pages/FavoritesPage/FavoritesPage.tsx

@@ -2,16 +2,16 @@ import { Catalog } from '../../components/Catalog/Catalog';
 // import styles from './FavoritesPage.module.scss';
 import { useAppSelector } from '../../app/reduxHooks';
 import { RootState } from '../../app/store';
-import { Breadcrumbs } from '../../components/Breadcrumbs';
 
 export const FavoritesPage = () => {
   //в цій компоненті я передію не данні favorites, а данні accessories(це заглушка).
   //Нікіта, коли ти зробиш редакс для цієї компоненти, поєднаєш його з локальним хранилищем, зміни цю змінну.
   const favorites = useAppSelector((state: RootState) => state.favorites);
 
+  document.title = 'Favorites';
+
   return (
     <>
-      <Breadcrumbs />
       <Catalog
         items={favorites.favoriteItems}
         title={'Favorites'}

src/pages/NotFoundPage/NotFoundPage.tsx

@@ -2,6 +2,8 @@ import './NotFoundPage.scss';
 import { Link } from 'react-router-dom';
 
 export const NotFoundPage = () => {
+  document.title = 'Page not found';
+
   return (
     <div className="not-found">
       <div className="not-found__container">

src/pages/OrderPage/OrderPage.module.scss

@@ -26,21 +26,60 @@
     }
   }
 
+  &__user {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  &__info {
+    margin-top: 32px;
+
+    &--list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0;
+      list-style: none;
+
+      &-item {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    &--title {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 15px;
+
+      color: $secondary-color;
+    }
+
+    &--value {
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 15px;
+
+      color: $primary-color;
+    }
+  }
+
   &__totalInformation {
     border: 1px solid $elemnts-color;
     border-radius: 16px;
     padding: 24px;
     margin-bottom: 56px;
+    margin-top: 32px;
     grid-column: 1/-1;
 
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: aqua;
+    background-color: $hover-plus-background-color;
     @include onDesktop {
       grid-column: 17/-1;
       margin-bottom: 0px;
-      //   grid-row: 1/-1;
+      margin-top: 0;
     }
     &__price {
       color: #0f0f11;