Merge pull request #73 from fs-jun24-team-3/feature/orderPage

Feature/order page

package.json

@@ -17,6 +17,7 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
     "redux": "^5.0.1",

src/Root.tsx

@@ -13,6 +13,8 @@ import { CartPage } from './pages/CartPage/CartPage';
 import { NotFoundPage } from './pages/NotFoundPage';
 import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 import { FavoritesPage } from './pages/FavoritesPage';
+import { UserPage } from './pages/UserPage/UserPage';
+import { OrderPage } from './pages/OrderPage/OrderPage';
 
 export const Root = () => {
   return (
@@ -38,6 +40,8 @@ export const Root = () => {
               </Route>
               <Route path="favorites" element={<FavoritesPage />} />
               <Route path="cart" element={<CartPage />} />
+              <Route path="user" element={<UserPage />} />
+              <Route path="order" element={<OrderPage />} />
 
               <Route path="*" element={<NotFoundPage />} />
             </Route>

src/app/slices/orderSlice.ts

@@ -0,0 +1,124 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { CartItems } from '../../utils/types/CartItem';
+
+// Тип для користувача
+type User = {
+  name: string;
+  surname: string;
+  phone: string;
+  post: string;
+  city: string;
+};
+
+// Тип для замовлення
+type Order = {
+  user: User | null;
+  cartItems: CartItems[]; // Використовуємо тип CartItems
+  totalPrice: number;
+};
+
+// Функція для отримання даних корзини з LocalStorage
+const getCartItemsFromLocalStorage = (): CartItems[] => {
+  const storedCartItems = localStorage.getItem('orderCart');
+  return storedCartItems ? JSON.parse(storedCartItems) : [];
+};
+
+// Функція для отримання даних користувача з LocalStorage
+const getUserFromLocalStorage = (): User | null => {
+  const storedUser = localStorage.getItem('userData');
+  return storedUser ? JSON.parse(storedUser) : null;
+};
+
+// Ініціалізація початкового стану з LocalStorage
+const initialState: Order = {
+  user: getUserFromLocalStorage(), // Ініціалізація даними з LocalStorage
+  cartItems: getCartItemsFromLocalStorage(), // Ініціалізація даними з LocalStorage
+  totalPrice: 0,
+};
+
+export const orderSlice = createSlice({
+  name: 'order',
+  initialState,
+  reducers: {
+    addToOrder: (state, action: PayloadAction<CartItems[]>) => {
+      action.payload.forEach(newProduct => {
+        const existingItem = state.cartItems.find(
+          cartItem => cartItem.item.id === newProduct.item.id, // Працюємо через item.id
+        );
+
+        if (existingItem) {
+          existingItem.count += newProduct.count;
+        } else {
+          state.cartItems.push(newProduct);
+        }
+      });
+
+      localStorage.setItem('orderCart', JSON.stringify(state.cartItems));
+    },
+    removeFromOrder: (state, action: PayloadAction<string>) => {
+      // id у вас типу string
+      state.cartItems = state.cartItems.filter(
+        cartItem => cartItem.item.id !== action.payload, // Працюємо через item.id
+      );
+      localStorage.setItem('orderCart', JSON.stringify(state.cartItems));
+    },
+    increaseQuantity: (state, action: PayloadAction<string>) => {
+      const existingItem = state.cartItems.find(
+        cartItem => cartItem.item.id === action.payload, // Працюємо через item.id
+      );
+
+      if (existingItem) {
+        existingItem.count += 1;
+      }
+
+      localStorage.setItem('orderCart', JSON.stringify(state.cartItems));
+    },
+    decreaseQuantity: (state, action: PayloadAction<string>) => {
+      const existingItem = state.cartItems.find(
+        cartItem => cartItem.item.id === action.payload, // Працюємо через item.id
+      );
+
+      if (existingItem && existingItem.count > 1) {
+        existingItem.count -= 1;
+      } else {
+        state.cartItems = state.cartItems.filter(
+          cartItem => cartItem.item.id !== action.payload, // Працюємо через item.id
+        );
+      }
+
+      localStorage.setItem('orderCart', JSON.stringify(state.cartItems));
+    },
+    clearOrder: state => {
+      state.cartItems = [];
+      localStorage.removeItem('orderCart');
+    },
+    setUser: (state, action: PayloadAction<User | null>) => {
+      state.user = action.payload;
+      localStorage.setItem('userData', JSON.stringify(action.payload));
+    },
+  },
+  selectors: {
+    totalCost: (state: Order) => {
+      return state.cartItems.reduce((total, cartItem) => {
+        return total + cartItem.item.priceRegular * cartItem.count;
+      }, 0);
+    },
+    totalQuantity: (state: Order) => {
+      return state.cartItems.reduce((total, cartItem) => {
+        return total + cartItem.count;
+      }, 0);
+    },
+  },
+});
+
+// Експорт дій для використання в компонентах
+export const {
+  setUser,
+  addToOrder,
+  removeFromOrder,
+  increaseQuantity,
+  decreaseQuantity,
+  clearOrder,
+} = orderSlice.actions;
+
+export default orderSlice.reducer;

src/app/store.ts

@@ -5,6 +5,7 @@ import { productsSlice } from './slices/productsSlice';
 import { tabletsSlice } from './slices/tabletsSlice';
 import { cartSlice } from './slices/cartSlise';
 import { favoritesSlice } from './slices/favoritesSlice';
+import { orderSlice } from './slices/orderSlice';
 
 const rootReducer = combineSlices(
   accessoriesSlice,
@@ -13,6 +14,7 @@ const rootReducer = combineSlices(
   tabletsSlice,
   cartSlice,
   favoritesSlice,
+  orderSlice,
 );
 
 export const store = configureStore({