aswi2022code-of-duty-gitlab/frontend/src/features/Administration/Administration.tsx @ afdd306f

import {
    Button,
    Container, Grid,
    Link,
    List,
    ListItem,
    ListItemIcon,
    ListItemText,
    NativeSelect,
    Paper,
    Select, SelectChangeEvent
} from '@mui/material'
import {Fragment, ReactNode, useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../redux/store'
import axiosInstance from "../../api/api"
import 'react-quill/dist/quill.snow.css'
import ContentLoading from "../Reusables/ContentLoading"
import {UserDto} from "../../swagger/data-contracts"
import UserDetail from "./UserDetail"
import EditIcon from "@mui/icons-material/Edit"
import {Link as RouterLink} from "react-router-dom"
import AddIcon from '@mui/icons-material/Add';



const apiError =
    'Error while fetching data from the server, please try again later.'

const Administration = () => {
    const [users, setUsers] = useState<UserDto[] | undefined>(undefined)
    const [selectedUser, setSelectedUser] = useState<UserDto | undefined>(undefined)
    const [selectedUserID, setSelectedUserID] = useState<number | undefined>(undefined)
    const [isContentLoading, setIsContentLoading] = useState(true)
    const [err, setErr] = useState<string | undefined>(undefined)

    const isAdmin = useSelector(
        (state: RootState) => state.user.roles.includes("ROLE_ADMIN")
    )

    const handleClick = (userID: number) => {
        console.log("clicked " + userID)
        if (users) {
            setSelectedUser(users.at(userID))
            setSelectedUserID(userID)
        }
    }

    // Function to fetch the item from the api
    const fetchItem = async () => {
        try {
            const { data, status } = await axiosInstance.get(
                `/users`
            )
            if (status !== 200) {
                setErr(apiError)
                return
            }

            setUsers(data)
            setIsContentLoading(false)
        } catch (err: any) {
            setErr(apiError)
        }
    }

    // Fetch the item from the api after mounting the component
    useEffect(() => {
        fetchItem()
    }, [])

    const childClosed = () => {
        setSelectedUser(undefined)
        setSelectedUserID(undefined)
        fetchItem()
    }

    return (
        <Fragment>

            {isContentLoading && !err ? <ContentLoading /> : null}
            {!isContentLoading && users && isAdmin ? (
                <Grid container justifyContent="space-around">
                    <Grid item xs={3} md={2} sx={{ px: 2 }}>
                        <Paper style={{ minHeight: '80vh', display:'flex', justifyContent: 'space-between', flexDirection:'column'}} variant="outlined">
                            <List>
                                {users.map((user, id) => (
                                    <ListItem
                                        key={id}
                                        className={
                                            selectedUserID === id
                                                ? 'clicked-user'
                                                : ''
                                        }
                                        onClick={() => handleClick(id)}
                                    >
                                        <ListItemText primary={user.name} />
                                    </ListItem>
                                ))}
                            </List>
                            <Button startIcon={<AddIcon />}
                                    variant="contained"
                                    component={RouterLink}
                                    to="/register"
                                    color="primary"
                                    sx={{ m: 2 }} >
                                Add user
                            </Button>
                        </Paper>
                    </Grid>
                    <Grid item md={10} xs={9}>
                        {selectedUser ?
                            <UserDetail user={selectedUser} onClose={childClosed} />
                        : null }
                    </Grid>
                </Grid>
            ) : null}
        </Fragment>
    )
}

export default Administration