feat: add memo for components \ profile page folders

extractedTranslations/en/translation.json

@@ -1,4 +1,5 @@
 {
+  "PROFILE PAGE": "",
   "auth_form": "",
   "auth_password": "",
   "auth_username": "",

json-server/db.json

@@ -25,6 +25,15 @@
       "password": "123"
     }
   ],
-  "profile": { "name": "typicode" }
+  "profile": {
+    "first": "Тимур",
+    "lastname": "Ульби",
+    "age": 22,
+    "currency": "RUB",
+    "country": "Russia",
+    "city": "Moscow",
+    "username": "admin",
+    "avatar": "https://pic.rutubelist.ru/user/3b/27/3b2758ad5492a76b578f7ee072e4e894.jpg"
+  }
 }
 

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

@@ -5,12 +5,14 @@ import {
     AnyAction, EnhancedStore, Reducer, ReducersMapObject,
 } from '@reduxjs/toolkit';
 import { CombinedState } from 'redux';
+import { ProfileSchema } from 'entities/Profile';
 
 export interface StateSchema {
 	counter: CounterSchema;
 	user: UserSchema;
 	// Асинхронные редюсеры
 	loginForm?: LoginSchema;
+	profile?: ProfileSchema
 }
 
 export type StateSchemaKey = keyof StateSchema;

src/entities/Profile/index.ts

@@ -0,0 +1,3 @@
+export { Profile, ProfileSchema } from './model/types/profile';
+
+export { profileActions, profileReducer } from './model/slice/profileSlice';

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

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

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

@@ -0,0 +1,19 @@
+import { Country, Currency } from 'shared/const/common';
+
+export interface Profile {
+	'first': string,
+	'lastname': string,
+	'age': number,
+	'currency': Currency,
+	'country': Country,
+	'city': string,
+	'username': string,
+	'avatar': string
+}
+
+export interface ProfileSchema {
+	data?: Profile;
+	isLoading: boolean;
+	error?: string;
+	readonly: boolean;
+}

src/pages/AboutPage/ui/AboutPage.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
 import { Theme } from 'app/providers/ThemeProvider';
-import AboutPage from './AboutPage';
+import { AboutPage } from 'pages/AboutPage';
 
 export default {
     title: 'pages/AboutPage',

src/pages/AboutPage/ui/AboutPage.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const AboutPage = (props: any) => {
+const AboutPage = memo((props: any) => {
     const { t } = useTranslation('about');
 
     return (
         <div>
             {t('О сайте')}
         </div>
     );
-};
+});
 
 export default AboutPage;

src/pages/MainPage/ui/MainPage.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
 import { Theme } from 'app/providers/ThemeProvider';
-import MainPage from './MainPage';
+import { MainPage } from 'pages/MainPage';
 
 export default {
     title: 'pages/MainPage',

src/pages/MainPage/ui/MainPage.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const MainPage = (props: any) => {
+const MainPage = memo((props: any) => {
     const { t } = useTranslation();
 
     return (
         <div>
             {t('Главная страница')}
         </div>
     );
-};
+});
 
 export default MainPage;

src/pages/NotFoundPage/ui/NotFoundPage.tsx

@@ -1,16 +1,17 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import cls from './NotFoundPage.module.scss';
 
 interface NotFoundPageProps {
     className?: string;
 }
 
-export const NotFoundPage = ({ className }: NotFoundPageProps) => {
+export const NotFoundPage = memo(({ className }: NotFoundPageProps) => {
     const { t } = useTranslation();
     return (
         <div className={classNames(cls.NotFoundPage, {}, [className])}>
             {t('Страница не найдена')}
         </div>
     );
-};
+});

src/pages/ProfilePage/index.ts

@@ -0,0 +1 @@
+export { ProfilePageAsync as ProfilePage } from './ui/ProfilePage.async';

src/pages/ProfilePage/ui/ProfilePage.async.tsx

@@ -0,0 +1,7 @@
+import { lazy } from 'react';
+
+export const ProfilePageAsync = lazy(() => new Promise((resolve) => {
+    // @ts-ignore
+    // ТАК В РЕАЛЬНЫХ ПРОЕКТАХ НЕ ДЕЛАТЬ!!!!! ДЕЛАЕМ ДЛЯ КУРСА!
+    setTimeout(() => resolve(import('./ProfilePage')), 1500);
+}));

src/pages/ProfilePage/ui/ProfilePage.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { Theme } from 'app/providers/ThemeProvider';
+import ProfilePage from 'pages/ProfilePage/ui/ProfilePage';
+
+export default {
+    title: 'pages/ProfilePage',
+    component: ProfilePage,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProfilePage>;
+
+const Template: ComponentStory<typeof ProfilePage> = (args) => <ProfilePage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
+// Normal.decorators = [StoreDecorator({})];
+
+export const Dark = Template.bind({});
+Dark.args = {};
+// Dark.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({})];
+Dark.decorators = [ThemeDecorator(Theme.DARK)];

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -0,0 +1,27 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
+import { DynamicModuleLoader, ReducersList } from 'shared/lib/components/DynamicModuleLoared/DynamicModuleLoared';
+import { profileReducer } from 'entities/Profile';
+
+const reducers: ReducersList = {
+    profile: profileReducer,
+};
+
+interface ProfilePageProps {
+	className?: string;
+}
+
+const ProfilePage = memo(({ className }: ProfilePageProps) => {
+    const { t } = useTranslation();
+    return (
+        <DynamicModuleLoader reducers={reducers} removeAfterUnmount>
+            <div className={classNames('', {}, [className])}>
+                {t('PROFILE PAGE')}
+            </div>
+        </DynamicModuleLoader>
+
+    );
+});
+
+export default ProfilePage;

src/shared/config/routeConfig/routeConfig.tsx

@@ -2,17 +2,19 @@ import { RouteProps } from 'react-router-dom';
 import { MainPage } from 'pages/MainPage';
 import { AboutPage } from 'pages/AboutPage';
 import { NotFoundPage } from 'pages/NotFoundPage';
+import { ProfilePage } from 'pages/ProfilePage';
 
 export enum AppRoutes {
     MAIN = 'main',
     ABOUT = 'about',
+		PROFILE = 'profile',
     NOT_FOUND = 'not_found',
 }
 
 export const RoutePath: Record<AppRoutes, string> = {
     [AppRoutes.MAIN]: '/',
     [AppRoutes.ABOUT]: '/about',
-    // последний
+    [AppRoutes.PROFILE]: '/profile',
     [AppRoutes.NOT_FOUND]: '*',
 };
 
@@ -25,8 +27,13 @@ export const routeConfig: Record<AppRoutes, RouteProps> = {
         path: RoutePath.about,
         element: <AboutPage />,
     },
+    [AppRoutes.PROFILE]: {
+        path: RoutePath.profile,
+        element: <ProfilePage />,
+    },
     [AppRoutes.NOT_FOUND]: {
         path: RoutePath.not_found,
         element: <NotFoundPage />,
     },
+
 };

src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx

@@ -2,9 +2,11 @@ import { Story } from '@storybook/react';
 import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
 import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit';
 import { loginReducer } from 'features/AuthByUsername/model/slice/loginSlice';
+import { profileReducer } from 'entities/Profile';
 
 const defaultAsyncReducers: DeepPartial<ReducersMapObject<StateSchema>> = {
     loginForm: loginReducer,
+    profile: profileReducer,
 };
 
 export const StoreDecorator = (

src/shared/const/common.ts

@@ -0,0 +1,13 @@
+export enum Currency {
+	"RUB" = "RUB",
+	"EUR" = "EUR",
+	"USD" = "USD",
+}
+
+export enum Country {
+	Russia = 'Russia',
+	Belarus = 'Belarus',
+	Ukraine = 'Ukraine',
+	Kazakhstan = 'Kazahstan',
+	Armenia = 'Armenia',
+}

src/shared/ui/AppLink/AppLink.tsx

@@ -1,20 +1,21 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { Link, LinkProps } from 'react-router-dom';
-import { FC } from 'react';
+import { memo, ReactNode } from 'react';
 import cls from './AppLink.module.scss';
 
 export enum AppLinkTheme {
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    RED = 'red',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  RED = 'red',
 }
 
 interface AppLinkProps extends LinkProps {
     className?: string;
     theme?: AppLinkTheme;
+		children?: ReactNode
 }
 
-export const AppLink: FC<AppLinkProps> = (props) => {
+export const AppLink = memo((props: AppLinkProps) => {
     const {
         to,
         className,
@@ -32,4 +33,4 @@ export const AppLink: FC<AppLinkProps> = (props) => {
             {children}
         </Link>
     );
-};
+});

src/shared/ui/Button/Button.tsx

@@ -1,5 +1,7 @@
 import { classNames } from 'shared/lib/classNames/classNames';
-import { ButtonHTMLAttributes, FC } from 'react';
+import {
+    ButtonHTMLAttributes, FC, memo, ReactNode,
+} from 'react';
 import cls from './Button.module.scss';
 
 export enum ButtonTheme {
@@ -22,9 +24,10 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
 	square?: boolean;
 	size?: ButtonSize;
 	isDisabled?: boolean;
+	children?: ReactNode;
 }
 
-export const Button: FC<ButtonProps> = (props) => {
+export const Button = memo((props: ButtonProps) => {
     const {
         className,
         children,
@@ -56,4 +59,4 @@ export const Button: FC<ButtonProps> = (props) => {
             {children}
         </button>
     );
-};
+});

src/shared/ui/LangSwitcher/LangSwitcher.tsx

@@ -1,14 +1,14 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
-import React from 'react';
+import React, { memo } from 'react';
 import { Button, ButtonTheme } from 'shared/ui/Button/Button';
 
 interface LangSwitcherProps {
     className?: string;
 		short?: boolean;
 }
 
-export const LangSwitcher = ({ className, short }: LangSwitcherProps) => {
+export const LangSwitcher = memo(({ className, short }: LangSwitcherProps) => {
     const { t, i18n } = useTranslation();
 
     const toggle = async () => {
@@ -24,4 +24,4 @@ export const LangSwitcher = ({ className, short }: LangSwitcherProps) => {
             {t(short ? 'Короткий язык' : 'Язык')}
         </Button>
     );
-};
+});

src/shared/ui/Text/Text.tsx

@@ -1,4 +1,5 @@
 import { classNames } from 'shared/lib/classNames/classNames';
+import { memo } from 'react';
 import cls from './Text.module.scss';
 
 export enum TextTheme {
@@ -14,7 +15,7 @@ interface TextProps {
 	theme?: TextTheme;
 }
 
-export const Text = (props: TextProps) => {
+export const Text = memo((props: TextProps) => {
     const {
         className,
         text,
@@ -28,4 +29,4 @@ export const Text = (props: TextProps) => {
             {text && <p className={cls.text}>{text}</p>}
         </div>
     );
-};
+});