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

frontend_reactjs/src/pages/Users.tsx

@@ -1,18 +1,43 @@
-import Card from '../components/Card'
-import useDataFetching from '../components/FetchingData'
-interface ICard {
-  firstname: string
-  lastname: string
-  email: string
-}
+import { useEffect, useState } from "react"
+import AuthService from "../services/AuthService"
+import { Box, Button } from "@mui/material"
+import DataTable from "../components/DataTable"
+import { GridColDef } from "@mui/x-data-grid"
 
-function Users() {
-  const cards = useDataFetching<ICard[]>(`${import.meta.env.VITE_API_URL}/auth/user/`, [])
-  return (
-    <div>
-      {cards.map((card, index) => <Card key={index} {...card} />)}
-    </div>
-  )
-}
+export default function Users() {
+    const [users, setUsers] = useState<any>(null)
 
-export default Users
+    const getUsers = async () => {
+        await AuthService.getUsers().then(response => {
+            setUsers(response.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
+        },
+    ];
+
+    return (
+        <Box>
+            <Button onClick={() => getUsers()}>
+                Get users
+            </Button>
+
+            {users &&
+                <DataTable rows={users} columns={columns}/>
+            }
+        </Box>
+    )
+}