Rename interfaces, AppBar changes

frontend_reactjs/src/pages/Roles.tsx

@@ -1,32 +1,24 @@
 import { useState } from 'react'
-import RoleCard from '../components/RoleCard'
-import Modal from '../components/Modal'
-import useDataFetching from '../components/FetchingData'
-import RoleService from '../services/RoleService'
-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 { useRoles } from '../hooks/swrHooks'
+import CreateRoleModal from '../components/modals/CreateRoleModal'
 
-interface IRoleCard {
-  id: number
-  name: string
-  description: string
-}
+export default function Roles() {
+  const { roles, isError, isLoading } = useRoles()
 
-interface Props {
-  showModal: boolean;
-}
-
-function Roles() {
-  const [showModal, setShowModal] = useState<Props>({ showModal: false });
-  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])
+  const [open, setOpen] = useState(false)
 
   const columns: GridColDef[] = [
     { field: 'id', headerName: 'ID', type: "number", width: 70 },
-    { field: 'name', headerName: 'Название', width: 90 },
-    { field: 'description', headerName: 'Описание', width: 90 },
+    { field: 'name', headerName: 'Название', width: 90, editable: true },
+    { field: 'description', headerName: 'Описание', width: 90, editable: true },
   ];
 
+  if (isError) return <div>Произошла ошибка при получении данных.</div>
+  if (isLoading) return <CircularProgress />
+
   return (
     <Box sx={{
       display: 'flex',
@@ -35,23 +27,16 @@ function Roles() {
       gap: '16px',
       flexGrow: 1
     }}>
-      <Button onClick={() => console.log("TODO: Add")}>
+      <Button onClick={() => setOpen(true)}>
         Добавить роль
       </Button>
 
-      {cards &&
-        <DataTable rows={cards} columns={columns} />
-      }
+      <CreateRoleModal
+        open={open}
+        setOpen={setOpen}
+      />
+
+      <DataTable rows={roles} columns={columns} />
     </Box>
   )
-
-  return (
-    <div>
-      {cards.length > 0 && cards.map((card, index) => <RoleCard key={index} {...card} />)}
-      <button className='absolute w-0 h-0' onClick={() => setShowModal({ showModal: true })}>+</button>
-      <Modal {...showModal} />
-    </div>
-  )
-}
-
-export default Roles
+}

frontend_reactjs/src/pages/Users.tsx

@@ -2,7 +2,7 @@ import { Box, Button, CircularProgress } from "@mui/material"
 import DataTable from "../components/DataTable"
 import { GridColDef } from "@mui/x-data-grid"
 import { useRoles, useUsers } from "../hooks/swrHooks"
-import { Role } from "../interfaces/auth"
+import { IRole } from "../interfaces/role"
 import { useState } from "react"
 import CreateUserModal from "../components/modals/CreateUserModal"
 
@@ -26,7 +26,7 @@ export default function Users() {
             headerName: 'Роль',
             valueGetter: (value, row) => {
                 if (roles) {
-                    const roleName = roles.find((role: Role) => role.id === value).name
+                    const roleName = roles.find((role: IRole) => role.id === value).name
                     return roleName
                 } else {
                     return value

frontend_reactjs/src/pages/auth/SignUp.tsx

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