1
|
import {
|
2
|
Button,
|
3
|
Container, Grid,
|
4
|
Link,
|
5
|
List,
|
6
|
ListItem,
|
7
|
ListItemIcon,
|
8
|
ListItemText,
|
9
|
NativeSelect,
|
10
|
Paper,
|
11
|
Select, SelectChangeEvent
|
12
|
} from '@mui/material'
|
13
|
import {Fragment, ReactNode, useEffect, useState} from 'react'
|
14
|
import { useDispatch, useSelector } from 'react-redux'
|
15
|
import { RootState } from '../redux/store'
|
16
|
import axiosInstance from "../../api/api"
|
17
|
import 'react-quill/dist/quill.snow.css'
|
18
|
import ContentLoading from "../Reusables/ContentLoading"
|
19
|
import {UserDto} from "../../swagger/data-contracts"
|
20
|
import UserDetail from "./UserDetail"
|
21
|
import EditIcon from "@mui/icons-material/Edit"
|
22
|
import {Link as RouterLink} from "react-router-dom"
|
23
|
import AddIcon from '@mui/icons-material/Add';
|
24
|
|
25
|
|
26
|
|
27
|
const apiError =
|
28
|
'Error while fetching data from the server, please try again later.'
|
29
|
|
30
|
const Administration = () => {
|
31
|
const [users, setUsers] = useState<UserDto[] | undefined>(undefined)
|
32
|
const [selectedUser, setSelectedUser] = useState<UserDto | undefined>(undefined)
|
33
|
const [selectedUserID, setSelectedUserID] = useState<number | undefined>(undefined)
|
34
|
const [isContentLoading, setIsContentLoading] = useState(true)
|
35
|
const [err, setErr] = useState<string | undefined>(undefined)
|
36
|
|
37
|
const isAdmin = useSelector(
|
38
|
(state: RootState) => state.user.roles.includes("ROLE_ADMIN")
|
39
|
)
|
40
|
|
41
|
const handleClick = (userID: number) => {
|
42
|
console.log("clicked " + userID)
|
43
|
if (users) {
|
44
|
setSelectedUser(users.at(userID))
|
45
|
setSelectedUserID(userID)
|
46
|
}
|
47
|
}
|
48
|
|
49
|
// Function to fetch the item from the api
|
50
|
const fetchItem = async () => {
|
51
|
try {
|
52
|
const { data, status } = await axiosInstance.get(
|
53
|
`/users`
|
54
|
)
|
55
|
if (status !== 200) {
|
56
|
setErr(apiError)
|
57
|
return
|
58
|
}
|
59
|
|
60
|
setUsers(data)
|
61
|
setIsContentLoading(false)
|
62
|
} catch (err: any) {
|
63
|
setErr(apiError)
|
64
|
}
|
65
|
}
|
66
|
|
67
|
// Fetch the item from the api after mounting the component
|
68
|
useEffect(() => {
|
69
|
fetchItem()
|
70
|
}, [])
|
71
|
|
72
|
const childClosed = () => {
|
73
|
setSelectedUser(undefined)
|
74
|
setSelectedUserID(undefined)
|
75
|
fetchItem()
|
76
|
}
|
77
|
|
78
|
return (
|
79
|
<Fragment>
|
80
|
|
81
|
{isContentLoading && !err ? <ContentLoading /> : null}
|
82
|
{!isContentLoading && users && isAdmin ? (
|
83
|
<Grid container justifyContent="space-around">
|
84
|
<Grid item xs={3} md={2} sx={{ px: 2 }}>
|
85
|
<Paper style={{ minHeight: '80vh', display:'flex', justifyContent: 'space-between', flexDirection:'column'}} variant="outlined">
|
86
|
<List>
|
87
|
{users.map((user, id) => (
|
88
|
<ListItem
|
89
|
key={id}
|
90
|
className={
|
91
|
selectedUserID === id
|
92
|
? 'clicked-user'
|
93
|
: ''
|
94
|
}
|
95
|
onClick={() => handleClick(id)}
|
96
|
>
|
97
|
<ListItemText primary={user.name} />
|
98
|
</ListItem>
|
99
|
))}
|
100
|
</List>
|
101
|
<Button startIcon={<AddIcon />}
|
102
|
variant="contained"
|
103
|
component={RouterLink}
|
104
|
to="/register"
|
105
|
color="primary"
|
106
|
sx={{ m: 2 }} >
|
107
|
Add user
|
108
|
</Button>
|
109
|
</Paper>
|
110
|
</Grid>
|
111
|
<Grid item md={10} xs={9}>
|
112
|
{selectedUser ?
|
113
|
<UserDetail user={selectedUser} onClose={childClosed} />
|
114
|
: null }
|
115
|
</Grid>
|
116
|
</Grid>
|
117
|
) : null}
|
118
|
</Fragment>
|
119
|
)
|
120
|
}
|
121
|
|
122
|
export default Administration
|