add profile, optimization render

app/[profile]/page.tsx

@@ -0,0 +1,17 @@
+import { ProfilePage } from '@/views/ProfilePage';
+import { Metadata } from 'next';
+import { FC } from 'react';
+
+export const metadata: Metadata = {
+	title: 'Melior Gift - Профиль',
+};
+
+export interface ProfilePageProps {
+	params: { profile: string };
+}
+
+const Profile: FC<ProfilePageProps> = ({ params }) => {
+	return <ProfilePage params={params} />;
+};
+
+export default Profile;

app/not-found.tsx

@@ -1,6 +1,11 @@
 import { NotFoundPage } from '@/views';
+import { Metadata } from 'next';
 import { FC } from 'react';
 
+export const metadata: Metadata = {
+	title: 'Melior Gift - Несуществующая страница 404',
+};
+
 const NotFound: FC = () => {
 	return <NotFoundPage />;
 };

app/product/[id]/page.tsx

@@ -5,12 +5,6 @@ export interface ProductPageProps {
 	params: { id: string };
 }
 
-// export async function generateStaticParams() {
-// 	return productData.map((post) => ({
-// 		product: post.id,
-// 	}));
-// }
-
 const Product: FC<ProductPageProps> = ({ params }) => {
 	return <ProductPage params={params} />;
 };

json-server/db.json

@@ -27,5 +27,32 @@
 			"username": "admin",
 			"password": "123"
 		}
-	]
+	],
+	"reviews": [
+		{
+			"id": 1,
+			"userId": 1,
+			"rating": 5,
+			"comment": "good",
+			"passed": true
+		}
+	],
+	"profile": {
+		"id": 1,
+		"private": false,
+		"email": "mark.melior@yandex.com",
+		"phone": "9834956634",
+		"first": "Mark",
+		"last": "Melior",
+		"age": 19,
+		"currency": "USD",
+		"country": "Russia",
+		"city": "Krasnodar",
+		"username": "MarkMelior",
+		"avatar": "ava.jpg",
+		"sex": "male",
+		"status": "active",
+		"favorites": [1],
+		"history": []
+	}
 }

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

@@ -1,3 +1,4 @@
+import { ProfileState } from '@/entities/Profile';
 import { UserState } from '@/entities/User';
 import { LoginState } from '@/features/Auth';
 import { SearchState } from '@/features/Search';
@@ -18,6 +19,7 @@ export interface RootState {
 	sort?: SortState;
 	loginForm?: LoginState;
 	search?: SearchState;
+	profile?: ProfileState;
 }
 
 export type RootStateKey = keyof RootState;

src/db.ts

@@ -1,5 +1,5 @@
 // ! IS TEMPORARY DATA FOR TESTING
-import { ProductDataProps } from './shared/types/product';
+import { ProductDataProps } from './entities/Product/model/types/product';
 
 export const productData: ProductDataProps[] = [
 	{

src/entities/Product/index.ts

@@ -0,0 +1,12 @@
+import { Card } from '@nextui-org/react';
+import {
+	MarketType,
+	MarketsProductData,
+	ProductDataProps,
+} from './model/types/product';
+import { CardWide } from './ui/CardWide/CardWide';
+import { Cards, CardsProps } from './ui/Cards/Cards';
+
+export { Card, CardWide, Cards };
+
+export type { CardsProps, MarketType, MarketsProductData, ProductDataProps };

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

@@ -1,5 +1,5 @@
 import { FilterSortProps } from '@/features/Sorts';
-import { Currency } from './localization';
+import { Currency } from '@/shared/types/localization';
 
 export interface ProductDataProps {
 	id: number;

src/shared/ui/Card/ui/Card/Card.tsx → src/entities/Product/ui/Card/Card.tsx

@@ -1,13 +1,13 @@
 'use client';
 
+import { ProductDataProps } from '@/entities/Product/model/types/product';
 import { HeartIcon } from '@/shared/assets/icon/Heart';
 import { ReviewIcon } from '@/shared/assets/icon/Review';
 import { StarIcon } from '@/shared/assets/icon/Star';
 import { Markets, MediaSize } from '@/shared/const';
 import { convertCurrency, productLink } from '@/shared/lib/features';
 import { useLocalstorageArray } from '@/shared/lib/hooks';
 import { LocalstorageKeys } from '@/shared/types/localstorage';
-import { ProductDataProps } from '@/shared/types/product';
 import { Button } from '@/shared/ui/Button';
 import { Tooltip } from '@nextui-org/react';
 import cn from 'clsx';

src/shared/ui/Card/ui/CardWide/CardWide.tsx → src/entities/Product/ui/CardWide/CardWide.tsx

@@ -1,10 +1,10 @@
 import { convertCurrency } from '@/shared/lib/features';
 import Image from 'next/image';
-import { FC } from 'react';
+import { FC, memo } from 'react';
 import { CardProps } from '../Card/Card';
 import cls from './CardWide.module.scss';
 
-export const CardWide: FC<CardProps> = ({ data }) => {
+export const CardWide: FC<CardProps> = memo(({ data }) => {
 	const convertedPrice = convertCurrency(data.markets[0].price);
 	const convertedOldPrice = convertCurrency(data.markets[0].oldPrice);
 
@@ -57,4 +57,4 @@ export const CardWide: FC<CardProps> = ({ data }) => {
 			</div>
 		</div>
 	);
-};
+});

src/shared/ui/Card/ui/Cards/Cards.tsx → src/entities/Product/ui/Cards/Cards.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ProductDataProps } from '@/shared/types/product';
-import { FC } from 'react';
+import { ProductDataProps } from '@/entities/Product/model/types/product';
+import { FC, memo } from 'react';
 import 'swiper/css/pagination';
 import { Card } from '../Card/Card';
 import cls from './Cards.module.scss';
@@ -11,7 +11,7 @@ export interface CardsProps {
 	size?: 'sm' | 'md';
 }
 
-export const Cards: FC<CardsProps> = ({ data, size }) => {
+export const Cards: FC<CardsProps> = memo(({ data, size }) => {
 	if (!data) return null;
 
 	return (
@@ -21,4 +21,4 @@ export const Cards: FC<CardsProps> = ({ data, size }) => {
 			))}
 		</div>
 	);
-};
+});

src/entities/Profile/index.ts

@@ -0,0 +1,24 @@
+import { profileActions, profileReducer } from './model/slice/profileSlice';
+import {
+	ConfidentialityProfile,
+	Profile,
+	ProfileState,
+} from './model/types/profile';
+import {
+	GameBusiness,
+	GameConfidentialityProfile,
+	GameProfile,
+	GameProfileState,
+} from './model/types/profileGame';
+
+export { profileActions, profileReducer };
+
+export type {
+	ConfidentialityProfile,
+	GameBusiness,
+	GameConfidentialityProfile,
+	GameProfile,
+	GameProfileState,
+	Profile,
+	ProfileState,
+};

src/entities/Profile/model/slice/profileSlice.ts

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { ProfileState } from '../types/profile';
+
+export const profileInitialState: ProfileState = {
+	readonly: true,
+	isLoading: false,
+	error: undefined,
+	data: undefined,
+};
+
+export const profileSlice = createSlice({
+	name: 'profile',
+	initialState: profileInitialState,
+	reducers: {},
+});
+
+export const { actions: profileActions } = profileSlice;
+export const { reducer: profileReducer } = profileSlice;

src/entities/Profile/model/types/profile.ts

@@ -0,0 +1,37 @@
+import { Country, Currency } from '@/shared/types/localization';
+
+export type Gender = 'male' | 'female';
+export type Status = 'online' | 'offline' | 'busy' | 'invisible' | 'away';
+export type ConfidentialityParams = 'private' | 'public' | 'friend';
+
+export interface Profile {
+	id: number;
+	private: boolean;
+	email: string;
+	phone: string;
+	first: string;
+	last: string;
+	age: number;
+	currency: Currency;
+	country: Country;
+	city: string;
+	username: string;
+	avatar: string;
+	sex: Gender;
+	status: Status;
+	favorites: number[];
+	history: number[];
+	confidentiality?: ConfidentialityProfile;
+	gameId?: number;
+}
+
+export interface ConfidentialityProfile {
+	all: ConfidentialityParams;
+}
+
+export interface ProfileState {
+	data?: Profile;
+	isLoading: boolean;
+	error?: string;
+	readonly: boolean;
+}

src/entities/Profile/model/types/profileGame.ts

@@ -0,0 +1,28 @@
+import { ConfidentialityParams } from './profile';
+
+export interface GameProfile {
+	id: number;
+	cash: number;
+	casinoWin: number;
+	casinoLoss: number;
+	businessId: number;
+	confidentiality?: GameConfidentialityProfile;
+}
+
+export interface GameBusiness {
+	id: number;
+	name: string;
+	description: string;
+	income: number;
+	image: string;
+}
+
+export interface GameConfidentialityProfile {
+	all: ConfidentialityParams;
+}
+
+export interface GameProfileState {
+	data?: GameProfile;
+	isLoading: boolean;
+	error?: string;
+}

src/features/Auth/ui/ModalLogin/ModalLogin.tsx

@@ -1,9 +1,12 @@
 'use client';
 
+import { Notification } from '@/entities/Notification';
+import { CheckIcon } from '@/shared/assets/icon/Check';
 import { MailIcon } from '@/shared/assets/icon/Mail';
 import { PasswordIcon } from '@/shared/assets/icon/Password';
 import { UserIcon } from '@/shared/assets/icon/User';
 import { DynamicModuleLoader, ReducersList } from '@/shared/lib/components';
+import { useAppDispatch } from '@/shared/lib/hooks';
 import { Button } from '@/shared/ui/Button';
 import { Input } from '@/shared/ui/Input';
 import {
@@ -19,8 +22,8 @@ import {
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { FC, memo, useCallback, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { getLoginState } from '../../model/selector/getLoginState/getLoginState';
 import { loginByUsername } from '../../model/service/loginByUsername/loginByUsername';
 import { loginActions, loginReducer } from '../../model/slice/loginSlice';
@@ -35,11 +38,11 @@ const initialReducers: ReducersList = {
 	loginForm: loginReducer,
 };
 
-const ModalLogin: FC<ModalLoginProps> = memo(({ isOpen, onOpenChange }) => {
+const ModalLogin: FC<ModalLoginProps> = ({ isOpen, onOpenChange }) => {
 	const searchParams = useSearchParams();
 	const isRegistration = searchParams.get('state') === 'sign-up';
 
-	const dispatch = useDispatch();
+	const dispatch = useAppDispatch();
 	const { password, username, error, isLoading } =
 		useSelector(getLoginState) || {};
 
@@ -57,16 +60,23 @@ const ModalLogin: FC<ModalLoginProps> = memo(({ isOpen, onOpenChange }) => {
 		[dispatch],
 	);
 
-	const onLoginClick = useCallback(() => {
-		// @ts-ignore
-		dispatch(loginByUsername({ username, password }));
-	}, [dispatch, password, username]);
+	const [showNotification, setShowNotification] = useState(false);
+
+	const onLoginClick = useCallback(async () => {
+		// @ts-ignore fix
+		const result = await dispatch(loginByUsername({ username, password }));
+
+		if (result.meta.requestStatus === 'fulfilled') {
+			onOpenChange(false);
+			setShowNotification(true);
+		}
+	}, [dispatch, onOpenChange, password, username]);
 
 	const renderLogin = useMemo(() => {
 		return (
 			<Tab
 				as={Link}
-				// @ts-ignore
+				// @ts-ignore fix
 				scroll={false}
 				href={'?state=login'}
 				key='login'
@@ -206,8 +216,25 @@ const ModalLogin: FC<ModalLoginProps> = memo(({ isOpen, onOpenChange }) => {
 					)}
 				</ModalContent>
 			</Modal>
+			{showNotification && (
+				<Notification
+					message={`${username}, вы успешно авторизовались!`}
+					duration={5000}
+					placement='top'
+					onClose={() => setShowNotification(false)}
+					closeOnClick
+					startContent={
+						<CheckIcon
+							width={16}
+							height={16}
+							color='hsl(var(--gift-success))'
+							isSelected
+						/>
+					}
+				/>
+			)}
 		</DynamicModuleLoader>
 	);
-});
+};
 
 export default ModalLogin;