feat: Профиль пользователя

Добавлена функциональность профиля пользователя: * Получение данных пользователя * Редактирование профиля * Изменение пароля
2025-06-02 20:40:08 +05:00 · 2025-06-02 20:40:08 +05:00 · fda45296a4
commit fda45296a4
parent d5fb35e266
8 changed files with 107 additions and 47 deletions
--- a/web-app/src/Api/usersApi.js
+++ b/web-app/src/Api/usersApi.js
@ -19,7 +19,19 @@ export const usersApi = createApi({
                body: data,
            }),
        }),
+        updateUser: builder.mutation({
+            query: ({userId, ...data}) => ({
+                url: `/users/${userId}/`,
+                method: "PUT",
+                body: data,
+            }),
+            invalidatesTags: ['User']
+        }),
    }),
 });

-export const {useGetAuthenticatedUserDataQuery} = usersApi;
+export const {
+    useGetAuthenticatedUserDataQuery,
+    useChangePasswordMutation,
+    useUpdateUserMutation,
+} = usersApi;
--- a/web-app/src/App/App.jsx
+++ b/web-app/src/App/App.jsx
@ -1,22 +1,38 @@
 import {BrowserRouter as Router} from "react-router-dom";
 import AppRouter from "./AppRouter.jsx";
 import "/src/Styles/app.css";
-import {Provider} from "react-redux";
-import store from "../Redux/store.js";
+import {useDispatch, useSelector} from "react-redux";
 import dayjs from "dayjs";
 import locale from 'antd/locale/ru_RU';
 import {ConfigProvider} from "antd";
+import {useEffect} from "react";
+import {checkAuth} from "../Redux/Slices/authSlice.js";
+import LoadingIndicator from "../Components/Widgets/LoadingIndicator/LoadingIndicator.jsx";
+import ErrorBoundary from "./ErrorBoundary.jsx";

 dayjs.locale('ru');

-const App = () => (
-    <Provider store={store}>
+const App = () => {
+    const dispatch = useDispatch();
+    const {isLoading} = useSelector((state) => state.auth);
+
+    useEffect(() => {
+        dispatch(checkAuth());
+    }, [dispatch]);
+
+    if (isLoading) {
+        return <LoadingIndicator/>;
+    }
+
+    return (
        <Router>
            <ConfigProvider locale={locale}>
-                <AppRouter/>
+                <ErrorBoundary>
+                    <AppRouter/>
+                </ErrorBoundary>
            </ConfigProvider>
        </Router>
-    </Provider>
-);
+    );
+};

 export default App;
--- a/web-app/src/App/PrivateRoute.jsx
+++ b/web-app/src/App/PrivateRoute.jsx
@ -1,14 +1,14 @@
-import { Navigate, Outlet } from "react-router-dom";
-import { useSelector } from "react-redux";
+import {Navigate, Outlet} from "react-router-dom";
+import {useSelector} from "react-redux";

 const PrivateRoute = () => {
-    const { user } = useSelector((state) => state.auth);
+    const {user} = useSelector((state) => state.auth);

    if (!user) {
-        return <Navigate to="/login" />;
+        return <Navigate to="/login"/>;
    }

-    return <Outlet />;
+    return <Outlet/>;
 };

 export default PrivateRoute;
--- a/web-app/src/App/main.jsx
+++ b/web-app/src/App/main.jsx
@ -1,9 +1,13 @@
 import {StrictMode} from 'react'
 import {createRoot} from 'react-dom/client'
 import App from './App.jsx'
+import store from "../Redux/store.js";
+import {Provider} from "react-redux";

 createRoot(document.getElementById('root')).render(
    <StrictMode>
-        <App/>
+        <Provider store={store}>
+            <App/>
+        </Provider>
    </StrictMode>
 )
--- a/web-app/src/Components/Pages/HomePage/useHomePageUI.js
+++ b/web-app/src/Components/Pages/HomePage/useHomePageUI.js
@ -1,5 +1,5 @@
 import { Grid } from "antd";
-import { useMemo } from "react";
+import {useEffect, useMemo} from "react";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
 import {useSelector} from "react-redux"; // Import isBetween plugin
@ -18,6 +18,10 @@ const useHomePageUI = (appointments, scheduledAppointments, patients) => {
    const buttonStyle = { width: screens.xs ? "100%" : "auto" };
    const chartContainerStyle = { padding: 16, background: "#fff", borderRadius: 4 };

+    useEffect(() => {
+        document.title = "Главная страница";
+    }, []);
+
    const todayEvents = useMemo(() => {
        return [...appointments, ...scheduledAppointments].filter((event) =>
            dayjs(event.appointment_datetime || event.scheduled_datetime).isSame(dayjs(), "day")
--- a/web-app/src/Components/Pages/ProfilePage/ProfilePage.jsx
+++ b/web-app/src/Components/Pages/ProfilePage/ProfilePage.jsx
@ -1,16 +1,32 @@
-import { Button, Card, Col, Form, Input, Modal, Row, Space, Typography, Result } from "antd";
-import { EditOutlined } from "@ant-design/icons";
+import {Button, Card, Col, Form, Input, Modal, Row, Space, Typography, Result} from "antd";
+import {EditOutlined} from "@ant-design/icons";
 import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
 import useProfilePage from "./useProfilePage.js";
 import useProfilePageUI from "./useProfilePageUI.js";
-import { useSelector } from "react-redux";
+import {useSelector} from "react-redux";

 const ProfilePage = () => {
-    const { userData, isLoading, isError, isUpdating, handleEditProfile, handleCancelEdit, handleSubmitProfile, handleSubmitPassword } = useProfilePage();
-    const { containerStyle, cardStyle, buttonStyle, formStyle, profileFormRules, passwordFormRules, isMobile } = useProfilePageUI();
+    const {
+        userData,
+        isLoading,
+        isError,
+        isUpdating,
+        handleEditProfile,
+        handleCancelEdit,
+        handleSubmitProfile,
+        handleSubmitPassword
+    } = useProfilePage();
+    const {
+        containerStyle,
+        cardStyle,
+        buttonStyle,
+        formStyle,
+        profileFormRules,
+        passwordFormRules,
+        profileForm,
+        passwordForm
+    } = useProfilePageUI();
    const editProfileModalVisible = useSelector((state) => state.usersUI.editProfileModalVisible);
-    const [profileForm] = Form.useForm();
-    const [passwordForm] = Form.useForm();

    if (isError) {
        return (
@ -25,7 +41,7 @@ const ProfilePage = () => {
    return (
        <div style={containerStyle}>
            {isLoading ? (
-                <LoadingIndicator />
+                <LoadingIndicator/>
            ) : (
                <>
                    <Typography.Title level={1}>Профиль</Typography.Title>
@ -50,9 +66,9 @@ const ProfilePage = () => {
                        </Row>
                        <Button
                            type="primary"
-                            icon={<EditOutlined />}
+                            icon={<EditOutlined/>}
                            onClick={handleEditProfile}
-                            style={{ ...buttonStyle, marginTop: 16 }}
+                            style={{...buttonStyle, marginTop: 16}}
                        >
                            Редактировать
                        </Button>
@ -77,16 +93,16 @@ const ProfilePage = () => {
                            style={formStyle}
                        >
                            <Form.Item label="Фамилия" name="last_name" rules={profileFormRules.last_name}>
-                                <Input />
+                                <Input/>
                            </Form.Item>
                            <Form.Item label="Имя" name="first_name" rules={profileFormRules.first_name}>
-                                <Input />
+                                <Input/>
                            </Form.Item>
                            <Form.Item label="Отчество" name="patronymic" rules={profileFormRules.patronymic}>
-                                <Input />
+                                <Input/>
                            </Form.Item>
                            <Form.Item label="Логин" name="login" rules={profileFormRules.login}>
-                                <Input disabled />
+                                <Input disabled/>
                            </Form.Item>
                            <Form.Item>
                                <Space>
@ -105,14 +121,16 @@ const ProfilePage = () => {
                            style={formStyle}
                        >
                            <Typography.Title level={4}>Смена пароля</Typography.Title>
-                            <Form.Item label="Текущий пароль" name="current_password" rules={passwordFormRules.current_password}>
-                                <Input.Password />
+                            <Form.Item label="Текущий пароль" name="current_password"
+                                       rules={passwordFormRules.current_password}>
+                                <Input.Password/>
                            </Form.Item>
                            <Form.Item label="Новый пароль" name="new_password" rules={passwordFormRules.new_password}>
-                                <Input.Password />
+                                <Input.Password/>
                            </Form.Item>
-                            <Form.Item label="Подтвердите пароль" name="confirm_password" rules={passwordFormRules.confirm_password}>
-                                <Input.Password />
+                            <Form.Item label="Подтвердите пароль" name="confirm_password"
+                                       rules={passwordFormRules.confirm_password}>
+                                <Input.Password/>
                            </Form.Item>
                            <Form.Item>
                                <Space>
--- a/web-app/src/Components/Pages/ProfilePage/useProfilePage.js
+++ b/web-app/src/Components/Pages/ProfilePage/useProfilePage.js
@ -1,7 +1,11 @@
-import { useGetAuthenticatedUserDataQuery } from "../../../Api/usersApi.js";
-import { useDispatch } from "react-redux";
-import { openEditProfileModal, closeEditProfileModal } from "../../../Redux/Slices/usersSlice.js";
-import { notification } from "antd";
+import {
+    useChangePasswordMutation,
+    useGetAuthenticatedUserDataQuery,
+    useUpdateUserMutation
+} from "../../../Api/usersApi.js";
+import {useDispatch} from "react-redux";
+import {openEditProfileModal, closeEditProfileModal} from "../../../Redux/Slices/usersSlice.js";
+import {notification} from "antd";

 const useProfilePage = () => {
    const dispatch = useDispatch();
@ -14,14 +18,9 @@ const useProfilePage = () => {
        pollingInterval: 20000,
    });

-    // const [updateUserProfile, { isLoading: isUpdatingProfile }] = useUpdateUserProfileMutation();
-    const updateUserProfile = () => {};
-    const isUpdatingProfile = false;
-    const isErrorUpdatingProfile = false;
+    const [updateUserProfile, {isLoading: isUpdatingProfile}] = useUpdateUserMutation();

-    // const [changePassword, { isLoading: isChangingPassword }] = useChangePasswordMutation();
-    const changePassword = () => {};
-    const isChangingPassword  = false;
+    const [changePassword, {isLoading: isChangingPassword}] = useChangePasswordMutation();

    const handleEditProfile = () => {
        dispatch(openEditProfileModal());
@ -37,8 +36,9 @@ const useProfilePage = () => {
                first_name: values.first_name,
                last_name: values.last_name,
                patronymic: values.patronymic || null,
+                login: userData.login,
            };
-            await updateUserProfile(profileData).unwrap();
+            await updateUserProfile({userId: userData.id, ...profileData}).unwrap();
            notification.success({
                message: "Успех",
                description: "Профиль успешно обновлен.",
@ -60,6 +60,7 @@ const useProfilePage = () => {
                current_password: values.current_password,
                new_password: values.new_password,
                confirm_password: values.confirm_password,
+                user_id: userData.id,
            };
            await changePassword(passwordData).unwrap();
            notification.success({
--- a/web-app/src/Components/Pages/ProfilePage/useProfilePageUI.js
+++ b/web-app/src/Components/Pages/ProfilePage/useProfilePageUI.js
@ -1,4 +1,4 @@
-import { Grid } from "antd";
+import {Form, Grid} from "antd";

 const { useBreakpoint } = Grid;

@ -10,6 +10,9 @@ const useProfilePageUI = () => {
    const buttonStyle = { width: screens.xs ? "100%" : "auto" };
    const formStyle = { maxWidth: 600 };

+    const [profileForm] = Form.useForm();
+    const [passwordForm] = Form.useForm();
+
    const profileFormRules = {
        first_name: [
            { required: true, message: "Пожалуйста, введите имя" },
@ -56,6 +59,8 @@ const useProfilePageUI = () => {
        formStyle,
        profileFormRules,
        passwordFormRules,
+        profileForm,
+        passwordForm,
        isMobile: screens.xs,
    };
 };