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
+}