backup commit

app/shop/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ShopPage } from '@/views';
 import { FC } from 'react';
 

src/app/providers/StoreProvider/config/RootState.ts

@@ -1,3 +1,4 @@
+import { ProductState } from '@/entities/Product';
 import { ProfileState } from '@/entities/Profile';
 import { UserState } from '@/entities/User';
 import { LoginState } from '@/features/Auth';
@@ -21,6 +22,7 @@ export interface RootState {
 	loginForm?: LoginState;
 	search?: SearchState;
 	profile?: ProfileState;
+	product?: ProductState;
 }
 
 export type RootStateKey = keyof RootState;

src/db.ts

@@ -1,7 +1,7 @@
 // ! IS TEMPORARY DATA FOR TESTING
-import { ProductDataProps } from './entities/Product/model/types/product';
+import { Product } from './entities/Product';
 
-export const productData: ProductDataProps[] = [
+export const productData: Product[] = [
 	{
 		id: 1,
 		images: [
@@ -11,7 +11,7 @@ export const productData: ProductDataProps[] = [
 		],
 		title: 'Ого! Это я недавно такие наушники купил',
 		creativity: 5,
-		filter: ['joke'],
+		filters: ['joke'],
 		characteristics: {
 			Версия: ['global', 'Ростест (EAC)'],
 			Конфигурация: ['4/128 ГБ', '6/128 ГБ', '8/256 ГБ'],
@@ -49,7 +49,7 @@ export const productData: ProductDataProps[] = [
 		images: ['6665452272.webp', '6665452284.webp'],
 		title: 'Невероятный накачанный Максим гигабайт',
 		creativity: 5,
-		filter: ['female', 'love'],
+		filters: ['female', 'love'],
 		characteristics: {
 			'Характеристика 1': ['Значение характеристики 1'],
 		},
@@ -70,7 +70,7 @@ export const productData: ProductDataProps[] = [
 		images: ['600014177060b0.webp'],
 		title: 'Шашлык лютейший без шампура понял?',
 		creativity: 5,
-		filter: ['kid'],
+		filters: ['kid'],
 		characteristics: {
 			'Характеристика 1': ['Значение характеристики 1'],
 		},
@@ -91,7 +91,7 @@ export const productData: ProductDataProps[] = [
 		images: ['100025078688b2.webp'],
 		title: 'Ого! Это я недавно такие наушники купил',
 		creativity: 5,
-		filter: ['year'],
+		filters: ['year'],
 		characteristics: {
 			'Характеристика 1': ['Значение характеристики 1'],
 		},

src/entities/Product/index.ts

@@ -1,12 +1,29 @@
 import { Card } from '@nextui-org/react';
+import { getProductData } from './model/selector/getProductData/getProductData';
+import { getProductError } from './model/selector/getProductError/getProductError';
+import { getProductIsLoading } from './model/selector/getProductIsLoading/getProductIsLoading';
 import {
 	MarketType,
 	MarketsProductData,
-	ProductDataProps,
+	Product,
+	ProductState,
 } from './model/types/product';
 import { CardWide } from './ui/CardWide/CardWide';
 import { Cards, CardsProps } from './ui/Cards/Cards';
 
-export { Card, CardWide, Cards };
+export {
+	Card,
+	CardWide,
+	Cards,
+	getProductData,
+	getProductError,
+	getProductIsLoading,
+};
 
-export type { CardsProps, MarketType, MarketsProductData, ProductDataProps };
+export type {
+	CardsProps,
+	MarketType,
+	MarketsProductData,
+	Product,
+	ProductState,
+};

src/entities/Product/model/selector/getProductData/getProductData.ts

@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider';
+
+export const getProductData = (state: RootState) => state.product?.data;

src/entities/Product/model/selector/getProductError/getProductError.ts

@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider';
+
+export const getProductError = (state: RootState) => state.product?.error;

src/entities/Product/model/selector/getProductIsLoading/getProductIsLoading.ts

@@ -0,0 +1,4 @@
+import { RootState } from '@/app/providers/StoreProvider';
+
+export const getProductIsLoading = (state: RootState) =>
+	state.product?.isLoading;

src/entities/Product/model/services/fetchProductData.ts

@@ -0,0 +1,18 @@
+import { ThunkConfig } from '@/app/providers/StoreProvider';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { Product } from '../..';
+
+export const fetchProductData = createAsyncThunk<
+	Product[],
+	void,
+	ThunkConfig<string>
+>('products/fetchProductData', async (_, thunkAPI) => {
+	try {
+		const response = await thunkAPI.extra.api.get<Product[]>('/products');
+
+		return response.data;
+	} catch (e) {
+		console.log(e);
+		return thunkAPI.rejectWithValue('error');
+	}
+});

src/entities/Product/model/slice/productSlice.ts

@@ -0,0 +1,38 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { fetchProductData } from '../services/fetchProductData';
+import { Product, ProductState } from '../types/product';
+
+export const productInitialState: ProductState = {
+	readonly: true,
+	isLoading: false,
+	error: undefined,
+	data: undefined,
+};
+
+export const productSlice = createSlice({
+	name: 'product',
+	initialState: productInitialState,
+	reducers: {},
+	extraReducers: (builder) => {
+		builder
+			.addCase(fetchProductData.pending, (state) => {
+				state.error = undefined;
+				state.isLoading = true;
+			})
+			.addCase(
+				fetchProductData.fulfilled,
+				(state, action: PayloadAction<Product[]>) => {
+					state.isLoading = false;
+					state.data = action.payload;
+				},
+			)
+			.addCase(fetchProductData.rejected, (state, action) => {
+				state.isLoading = false;
+				state.error = action.payload;
+			});
+	},
+});
+
+export const { actions: productActions } = productSlice;
+export const { reducer: productReducer } = productSlice;

src/entities/Product/model/types/product.ts

@@ -1,12 +1,12 @@
 import { FilterSortProps } from '@/features/Sorts';
 import { Currency } from '@/shared/types/localization';
 
-export interface ProductDataProps {
+export interface Product {
 	id: number;
 	images: string[];
 	title: string;
 	creativity: number;
-	filter: FilterSortProps[];
+	filters: FilterSortProps[];
 	characteristics: Record<string, string[] | Record<string, string>>;
 	markets: MarketsProductData[];
 	description?: string;
@@ -28,3 +28,10 @@ export type MarketType =
 	| 'aliexpress'
 	| 'wildberries'
 	| 'sber';
+
+export interface ProductState {
+	data?: Product[];
+	isLoading: boolean;
+	error?: string;
+	readonly: boolean;
+}

src/features/Auth/index.ts

@@ -1,7 +1,7 @@
-import { loginByUsername } from './model/service/loginByUsername/loginByUsername';
+import { loginByEmail } from './model/service/loginByEmail/loginByEmail';
 import { loginActions, loginReducer } from './model/slice/loginSlice';
 import { LoginState } from './model/types/loginState';
-import ModalLogin from './ui/ModalLogin/ModalLogin';
+import ModalLogin from './ui/ModalLogin/ModalAuth';
 
-export { ModalLogin, loginActions, loginByUsername, loginReducer };
+export { ModalLogin, loginActions, loginByEmail, loginReducer };
 export type { LoginState };

src/features/Auth/model/service/loginByEmail/loginByEmail.test.ts

@@ -0,0 +1,41 @@
+// import { User, userActions } from '@/entities/User';
+// import { TestAsyncThunk } from '@/shared/lib/tests';
+// import { loginByEmail } from './loginByEmail';
+
+// describe('loginByUsername.test', () => {
+// 	test('success login', async () => {
+// 		const userValue: User = {
+// 			id: 1,
+// 			email: 'markus@e.com',
+// 		};
+
+// 		const thunk = new TestAsyncThunk(loginByEmail);
+// 		thunk.api.post.mockReturnValue(Promise.resolve({ data: userValue }));
+// 		const result = await thunk.callThunk({
+// 			email: 'markus@e.com',
+// 			password: 'pass',
+// 		});
+
+// 		expect(thunk.dispatch).toHaveBeenCalledWith(
+// 			userActions.setAuthData(userValue),
+// 		);
+// 		expect(thunk.dispatch).toHaveBeenCalledTimes(3);
+// 		expect(thunk.api.post).toHaveBeenCalled();
+// 		expect(result.meta.requestStatus).toBe('fulfilled');
+// 		expect(result.payload).toEqual(userValue);
+// 	});
+
+// 	test('error login', async () => {
+// 		const thunk = new TestAsyncThunk(loginByEmail);
+// 		thunk.api.post.mockReturnValue(Promise.resolve({ status: 403 }));
+// 		const result = await thunk.callThunk({
+// 			password: 'pass',
+// 			username: 'MarkMelior',
+// 		});
+
+// 		expect(thunk.dispatch).toHaveBeenCalledTimes(2);
+// 		expect(thunk.api.post).toHaveBeenCalled();
+// 		expect(result.meta.requestStatus).toBe('rejected');
+// 		expect(result.payload).toBe('Вы ввели неверную почту или пароль');
+// 	});
+// });