new login modal, sidebar, profile

json-server/db.json

@@ -25,5 +25,14 @@
       "password": "123"
     }
   ],
-  "profile": { "name": "typicode" }
+  "profile": {
+    "first": "Кирилл",
+    "last": "Гай",
+    "age": 21,
+    "currency": "RUB",
+    "country": "Russia",
+    "city": "St. Petersburg",
+    "username": "gilead",
+    "avatar": "https://sun9-3.userapi.com/impg/fRt9rFPnIPsoR2qXjrNgmhYkYKOZJ9wc1K007w/PG5c7b_rDSI.jpg?size=2560x1707&quality=96&sign=e80fed43bd21fb613295d5b390954162&type=album"
+  }
 }

package.json

@@ -95,6 +95,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",
+    "@tabler/icons-react": "^3.3.0",
     "axios": "^1.6.8",
     "i18next": "^21.6.11",
     "i18next-browser-languagedetector": "^6.1.3",

public/locales/en/translation.json

@@ -6,6 +6,7 @@
   "Вернуться на главную": "Вернуться на главную",
   "Вернуться на глвную": "",
   "Войти": "Login",
+  "Вы ввели неверный логин или пароль": "Вы ввели неверный логин или пароль",
   "Выйти": "Logout",
   "Главная": "Main",
   "Главная страница": "",
@@ -16,6 +17,7 @@
   "Перевести": "Translate",
   "Перезагрузить": "Перезагрузить",
   "Почта": "Почта",
+  "Профиль": "Профиль",
   "Страница не найдена": "Страница не найдена",
   "Тестовый перевод": "Test Translate",
   "Тогл": "toggle",

public/locales/ru/translation.json

@@ -6,6 +6,7 @@
   "Вернуться на главную": "Вернуться на главную",
   "Вернуться на глвную": "",
   "Войти": "Войти",
+  "Вы ввели неверный логин или пароль": "Вы ввели неверный логин или пароль",
   "Выйти": "Выйти",
   "Главная": "Главная",
   "Главная страница": "",
@@ -16,6 +17,7 @@
   "Перевести": "Перевести",
   "Перезагрузить": "Перезагрузить",
   "Почта": "Почта",
+  "Профиль": "Профиль",
   "Страница не найдена": "Страница не найдена",
   "Тестовый перевод": "Тестовый перевод",
   "Тогл": "Тогл",

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

@@ -8,13 +8,15 @@ import {
   Reducer,
   ReducersMapObject,
 } from '@reduxjs/toolkit';
+import { ProfileSchema } from 'entities/Profile';
 
 export interface StateSchema {
   counter: CounterSchema;
   user: UserSchema;
 
   // async
   loginForm?: LoginSchema;
+  profile?: ProfileSchema;
 }
 
 export type StateSchemaKey = keyof StateSchema;

src/entities/Profile/index.ts

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

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

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { ProfileSchema } from '../type/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/type/profile.ts

@@ -0,0 +1,19 @@
+import { CountryT, CurrencyT } from 'shared/const/common';
+
+export interface ProfileT {
+  first: string | null;
+  last: string | null;
+  age: number | null;
+  currency: CurrencyT | null;
+  country: CountryT | null;
+  city: string | null;
+  username: string | null;
+  avatar: string | null;
+}
+
+export interface ProfileSchema {
+  data?: ProfileT;
+  isLoading: boolean;
+  error?: string;
+  readonly?: boolean;
+}

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.test.ts

@@ -1,13 +1,9 @@
 import axios from 'axios';
 import { loginByUsername } from 'features/AuthByUsername/model/services/loginByUsername/loginByUsername';
-import i18n from 'shared/configs/i18n/i18n';
 import { TestAsyncThunk } from 'shared/lib/test/TestAsyncThunk/TestAsyncThunk';
 import { userActions } from 'entities/User';
 
 jest.mock('axios');
-jest.mock('shared/configs/i18n/i18n', () => ({
-  t: jest.fn().mockImplementation((key) => key),
-}));
 
 const mockedAxios = jest.mocked(axios, true);
 
@@ -63,11 +59,9 @@ describe('longByUsername.test', () => {
   });
 
   test('error login', async () => {
-    const rejectValue = 'Неверный логин или пароль';
     mockedAxios.post.mockReturnValue(Promise.resolve({ status: 403 }));
     const thunk = new TestAsyncThunk(loginByUsername);
     const result = await thunk.callThunk({ username: '123', password: '123' });
-    expect(i18n.t).toHaveBeenCalledWith(rejectValue);
 
     expect(mockedAxios.post).toHaveBeenCalled();
     expect(thunk.dispatch).toHaveBeenCalledTimes(2);

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.ts

@@ -1,7 +1,6 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { User, userActions } from 'entities/User';
-import i18n from 'shared/configs/i18n/i18n';
 import { USER_LOCAL_TOKEN } from 'shared/const/localStorage';
 
 interface LoginByUsernameProps {
@@ -26,6 +25,6 @@ export const loginByUsername = createAsyncThunk<
 
     return response.data;
   } catch (e) {
-    return thunkAPI.rejectWithValue(i18n.t('Неверный логин или пароль'));
+    return thunkAPI.rejectWithValue('error');
   }
 });

src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx

@@ -28,7 +28,7 @@ const LoginForm: FC<LoginFormProps> = ({ className, onSuccess }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const loginForm = useSelector(getLoginState);
-  useDynamicModuleLoader({ reducers: { loginForm: loginReducer } });
+  useDynamicModuleLoader({ reducers: initialReducers });
 
   const onChangeUsername = useCallback(
     (value: string) => {
@@ -60,7 +60,10 @@ const LoginForm: FC<LoginFormProps> = ({ className, onSuccess }) => {
     <div className={classNames(cls.loginForm, {}, [className])}>
       <Text className={cls.loginForm__title} title={t('Войти')} />
       {loginForm?.error && (
-        <Text text={loginForm.error} theme={TextTheme.ERROR} />
+        <Text
+          text={t('Вы ввели неверный логин или пароль')}
+          theme={TextTheme.ERROR}
+        />
       )}
       <Input
         className={cls.loginForm__input}

src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx

@@ -3,7 +3,6 @@ import { classNames } from 'shared/lib/classNames/classNames';
 import { Loader } from 'shared/ui/Loader/Loader';
 import { Modal } from 'shared/ui/Modal/Modal';
 import { LoginFormAsync } from '../LoginForm/LonginForm.async';
-import cls from './LoginModal.module.scss';
 
 interface LoginModalProps {
   className?: string;
@@ -18,7 +17,7 @@ export const LoginModal: FC<LoginModalProps> = ({
 }) => {
   return (
     <Modal
-      className={classNames(cls.loginModal, {}, [className])}
+      className={classNames('', {}, [className])}
       onClose={onClose}
       isOpen={isOpen}
       lazy

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,3 @@
+import { lazy } from 'react';
+
+export const ProfilePageAsync = lazy(() => import('./ProfilePage'));

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProfilePage from './ProfilePage';
+import { StoreDecorator } from '../../../shared/configs/storybook/StoreDecorator/StoreDecorator';
+import { profileReducer } from '../../../entities/Profile';
+
+const meta: Meta<typeof ProfilePage> = {
+  title: 'pages/ProfilePage',
+  component: ProfilePage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfilePage>;
+
+export const Common: Story = {
+  decorators: [
+    StoreDecorator(
+      {
+        profile: {
+          data: undefined,
+          isLoading: false,
+          error: undefined,
+          readonly: true,
+        },
+      },
+      { profile: profileReducer },
+    ),
+  ],
+};

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { classNames } from 'shared/lib/classNames/classNames';
+import {
+  ReducersList,
+  useDynamicModuleLoader,
+} from 'shared/hooks/useDynamicModuleLoader/useDynamicModuleLoader';
+import { profileReducer } from '../../../entities/Profile';
+
+const reducers: ReducersList = {
+  profile: profileReducer,
+};
+
+interface ProfilePageProps {
+  className?: string;
+}
+
+const ProfilePage: FC<ProfilePageProps> = ({ className }) => {
+  const { t } = useTranslation();
+  useDynamicModuleLoader({ reducers, removeAfterUnmount: true });
+
+  return <div className={classNames('', {}, [className])}>{t('Профиль')}</div>;
+};
+
+export default ProfilePage;

src/shared/configs/routerConfig/routerConfig.tsx

@@ -2,16 +2,19 @@ import { MainPage } from 'pages/MainPage';
 import { AboutPage } from 'pages/AboutPage';
 import { RouteProps } from 'react-router-dom';
 import { NotFoundPage } from 'pages/NotFoundPage';
+import { ProfilePage } from 'pages/ProfilePage';
 
 export enum AppRouter {
   MAIN = 'main',
   ABOUT = 'about',
+  PROFILE = 'profile',
   NOT_FOUND = 'not_found',
 }
 
 export const RouterPath: Record<AppRouter, string> = {
   [AppRouter.MAIN]: '/',
   [AppRouter.ABOUT]: '/about',
+  [AppRouter.PROFILE]: '/profile',
   [AppRouter.NOT_FOUND]: '*',
 };
 
@@ -24,6 +27,10 @@ export const routerConfig: Record<AppRouter, RouteProps> = {
     path: RouterPath.about,
     element: <AboutPage />,
   },
+  [AppRouter.PROFILE]: {
+    path: RouterPath.profile,
+    element: <ProfilePage />,
+  },
   [AppRouter.NOT_FOUND]: {
     path: RouterPath.not_found,
     element: <NotFoundPage />,

src/shared/const/common.ts

@@ -0,0 +1,13 @@
+export enum CurrencyT {
+  RUB = 'RUB',
+  EUR = 'EUR',
+  USD = 'USD',
+}
+
+export enum CountryT {
+  Russia = 'Russia',
+  Belarus = 'Belarus',
+  Ukraine = 'Ukraine',
+  Kazakhstan = 'Kazakhstan',
+  Armenia = 'Armenia',
+}

src/shared/ui/Button/Button.module.scss

@@ -11,6 +11,7 @@
   display: flex;
   column-gap: 8px;
   align-items: center;
+  justify-content: center;
 }
 
 .unstyled {
@@ -37,3 +38,7 @@
   background-color: var(--gray-light-color);
   color: var(--gray-color);
 }
+
+.square {
+  padding: 5px;
+}