DashboardLayout changes, refactoring, useSWR

frontend_reactjs/src/pages/ApiTest.tsx

@@ -1,43 +1,32 @@
 import { useEffect, useState } from "react"
-import { Button } from "@mui/material"
-import DataTable from "../components/DataTable"
-import { GridColDef } from "@mui/x-data-grid"
-import UserService from "../services/UserService"
+import { Button, Typography } from "@mui/material"
 
 export default function ApiTest() {
-    const [users, setUsers] = useState<any>(null)
+    const [data, setData] = useState<any>(null)
 
-    const getUsers = async () => {
-        await UserService.getUsers().then(response => {
-            setUsers(response.data)
-        })
+    function getRealtimeData(data: any) {
+        setData(data)
     }
 
-    const columns: GridColDef[] = [
-        { field: 'id', headerName: 'ID', type: "number", width: 70 },
-        { field: 'email', headerName: 'Email', width: 130 },
-        { field: 'login', headerName: 'Логин', width: 130 },
-        { field: 'phone', headerName: 'Телефон', width: 90 },
-        { field: 'name', headerName: 'Имя', width: 90 },
-        { field: 'surname', headerName: 'Фамилия', width: 90 },
-        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90 },
-        {
-            field: 'role_id',
-            headerName: 'Роль',
-            valueGetter: (value, row) => `${value}`,
-            width: 90
-        },
-    ];
+    useEffect(() => {
+        const sse = new EventSource(`${import.meta.env.VITE_API_SSE_URL}/stream`)
+
+        sse.onmessage = e => getRealtimeData(e.data)
+
+        sse.onerror = () => {
+            sse.close()
+        }
+
+        return () => {
+            sse.close()
+        }
+    }, [])
 
     return (
         <>
-            <Button onClick={() => getUsers()}>
-                Get users
-            </Button>
-
-            {users &&
-                <DataTable rows={users} columns={columns}/>
-            }
+            <Typography>
+                {JSON.stringify(data)}
+            </Typography>
         </>
     )
 }

frontend_reactjs/src/pages/Roles.tsx

@@ -32,7 +32,8 @@ function Roles() {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'flex-start',
-      gap: '16px'
+      gap: '16px',
+      flexGrow: 1
     }}>
       <Button onClick={() => console.log("TODO: Add")}>
         Добавить роль

frontend_reactjs/src/pages/Users.tsx

@@ -1,43 +1,62 @@
-import { useEffect, useState } from "react"
-import { Box, Button } from "@mui/material"
+import { Box, Button, CircularProgress } from "@mui/material"
 import DataTable from "../components/DataTable"
 import { GridColDef } from "@mui/x-data-grid"
-import UserService from "../services/UserService"
+import { useRoles, useUsers } from "../hooks/swrHooks"
+import { Role } from "../interfaces/auth"
+import { useState } from "react"
+import CreateUserModal from "../components/modals/CreateUserModal"
 
 export default function Users() {
-    const [users, setUsers] = useState<any>(null)
+    const { users, isError, isLoading } = useUsers()
 
-    const getUsers = async () => {
-        await UserService.getUsers().then(response => {
-            setUsers(response.data)
-        })
-    }
+    const { roles } = useRoles()
+
+    const [open, setOpen] = useState(false)
 
     const columns: GridColDef[] = [
         { field: 'id', headerName: 'ID', type: "number", width: 70 },
-        { field: 'email', headerName: 'Email', width: 130 },
-        { field: 'login', headerName: 'Логин', width: 130 },
-        { field: 'phone', headerName: 'Телефон', width: 90 },
-        { field: 'name', headerName: 'Имя', width: 90 },
-        { field: 'surname', headerName: 'Фамилия', width: 90 },
-        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90 },
+        { field: 'email', headerName: 'Email', width: 130, editable: true},
+        { field: 'login', headerName: 'Логин', width: 130, editable: true },
+        { field: 'phone', headerName: 'Телефон', width: 90, editable: true },
+        { field: 'name', headerName: 'Имя', width: 90, editable: true },
+        { field: 'surname', headerName: 'Фамилия', width: 90, editable: true },
+        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90, editable: true},
         {
             field: 'role_id',
             headerName: 'Роль',
-            valueGetter: (value, row) => `${value}`,
+            valueGetter: (value, row) => {
+                if (roles) {
+                    const roleName = roles.find((role: Role) => role.id === value).name
+                    return roleName
+                } else {
+                    return value
+                }
+            },
             width: 90
         },
     ];
 
+    if (isError) return <div>Произошла ошибка при получении данных.</div>
+    if (isLoading) return <CircularProgress />
+
     return (
-        <Box>
-            <Button onClick={() => getUsers()}>
-                Get users
+        <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "16px",
+        }}
+        >
+            <Button onClick={() => setOpen(true)}>
+                Добавить пользователя
             </Button>
 
-            {users &&
-                <DataTable rows={users} columns={columns}/>
-            }
+            <CreateUserModal
+                open={open}
+                setOpen={setOpen}
+            />
+
+            <DataTable rows={users} columns={columns} />
         </Box>
     )
 }

frontend_reactjs/src/pages/auth/SignIn.tsx

@@ -1,14 +1,14 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextField, Button, Container, Typography, Box } from '@mui/material';
 import { AxiosResponse } from 'axios';
-import { SignInFormData, ApiResponse } from '../../interfaces/auth';
+import { ApiResponse, LoginFormData } from '../../interfaces/auth';
 import { login, setUserData } from '../../store/auth';
 import { useNavigate } from 'react-router-dom';
 import AuthService from '../../services/AuthService';
 import UserService from '../../services/UserService';
 
 const SignIn = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<SignInFormData>({
+  const { register, handleSubmit, formState: { errors } } = useForm<LoginFormData>({
     defaultValues: {
       username: '',
       password: '',
@@ -21,10 +21,10 @@ const SignIn = () => {
 
   const navigate = useNavigate();
 
-  const onSubmit: SubmitHandler<SignInFormData> = async (data) => {
+  const onSubmit: SubmitHandler<LoginFormData> = async (data) => {
     const formBody = new URLSearchParams();
     for (const key in data) {
-      formBody.append(key, data[key as keyof SignInFormData] as string);
+      formBody.append(key, data[key as keyof LoginFormData] as string);
     }
 
     try {

frontend_reactjs/src/pages/auth/SignUp.tsx

@@ -1,12 +1,12 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextField, Button, Container, Typography, Box } from '@mui/material';
-import axios, { AxiosResponse } from 'axios';
-import { SignUpFormData, ApiResponse } from '../../interfaces/auth';
-import axiosInstance from '../../http/axiosInstance';
+import { AxiosResponse } from 'axios';
+import { ApiResponse } from '../../interfaces/auth';
 import UserService from '../../services/UserService';
+import { CreateUserFormData } from '../../interfaces/user';
 
 const SignUp = () => {
-    const { register, handleSubmit, formState: { errors } } = useForm<SignUpFormData>({
+    const { register, handleSubmit, formState: { errors } } = useForm<CreateUserFormData>({
         defaultValues: {
             email: '',
             login: '',
@@ -19,7 +19,7 @@ const SignUp = () => {
     })
 
 
-    const onSubmit: SubmitHandler<SignUpFormData> = async (data) => {
+    const onSubmit: SubmitHandler<CreateUserFormData> = async (data) => {
         try {
             const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
             console.log('Успешная регистрация:', response.data);