Auth: SignIn, SignUp (TODO: rewrite into react-hook-form)

frontend_reactjs/src/pages/Roles.tsx

@@ -2,6 +2,10 @@ 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 DataTable from '../components/DataTable'
+import { GridColDef } from '@mui/x-data-grid'
 
 interface IRoleCard {
   id: number
@@ -11,12 +15,38 @@ interface Props {
   showModal: boolean;
 }
 function Roles() {
+  const [roles, setRoles] = useState<any>(null)
+
+  const getRoles = async () => {
+    await RoleService.getRoles().then(response => {
+      setRoles(response.data)
+    })
+  }
+
   const [showModal, setShowModal] = useState<Props>({ showModal: false });
-  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_URL}/auth/role/`, [])
+  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])
+
+  const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', type: "number", width: 70 },
+    { field: 'name', headerName: 'Название', width: 90 },
+    { field: 'description', headerName: 'Описание', width: 90 },
+  ];
+
+  return (
+    <Box>
+      <Button onClick={() => getRoles()}>
+        Get roles
+      </Button>
+
+      {roles &&
+        <DataTable rows={roles} columns={columns} />
+      }
+    </Box>
+  )
 
   return (
     <div>
-      {cards.map((card, index) => <RoleCard key={index} {...card} />)}
+      {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>