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

import {
    Button,
    Grid,
    List,
    ListItem,
    ListItemText,
    Paper,
} from '@mui/material'
import {Fragment, useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../redux/store'
import 'react-quill/dist/quill.snow.css'
import ContentLoading from "../Reusables/ContentLoading"
import {UserDto} from "../../swagger/data-contracts"
import UserDetail from "./UserDetail"
import {Link as RouterLink} from "react-router-dom"
import AddIcon from '@mui/icons-material/Add';
import {fetchUsers} from "./userDetailThunks"
import {
    clear,
    consumeError,
    setLoading,
    setSelectedUser
} from "./userDetailSlice"
import ShowErrorIfPresent from "../Reusables/ShowErrorIfPresent"
import {number} from "yup"

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

const Administration = () => {
    // Items, loading and error from api
    const users = useSelector((state: RootState) => state.usersDetail.users)
    const loading = useSelector((state: RootState) => state.usersDetail.loading)
    const apiError = useSelector((state: RootState) => state.usersDetail.error)
    const selectedUser = useSelector((state: RootState) => state.usersDetail.selectedUser)
    const [selectedUserId, setSelectedUserId] = useState<number | undefined>(undefined)

    // Local state to display any error relevant error
    const [displayError, setDisplayError] = useState<string | undefined>(
        undefined
    )

    const dispatch = useDispatch()

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

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

    // Use effect to read the error and consume it
    useEffect(() => {
        if (users.length > 0) {
            setSelectedUserId(0)
            dispatch(setSelectedUser(users.at(0)))
            console.log("selected id: " + selectedUser)
        }
    }, [users])


    // Use effect to read the error and consume it
    useEffect(() => {
        if (apiError) {
            setDisplayError(apiError)
            dispatch(consumeError())
        }
    }, [apiError, dispatch])

    // Fetch the item from the api after mounting the component
    useEffect(() => {
        console.log("before fetch")
        dispatch(fetchUsers())
        console.log("after fetch: " + loading)

        return () => {
            // Invalidate the state when unmounting so that the old list is not rerendered when the user returns to the page
            dispatch(setLoading())
            console.log("set loading: " + loading)
        }
    }, [dispatch])

    const childClosed = () => {
        dispatch(clear())
        dispatch(fetchUsers())
        setSelectedUserId(0)
        dispatch(setSelectedUser(users.at(0)))
    }

    return (
        <Fragment>
            <ShowErrorIfPresent err={displayError} />
            {loading && !apiError ? <ContentLoading /> : null}
            {!loading && users && isAdmin ? (
                <Grid container justifyContent="space-around">
                    <Grid item xs={6} md={3} 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={9} xs={6}>
                        {selectedUserId !== undefined  ?
                            <UserDetail user={selectedUser as UserDto} onClose={childClosed} />
                        : null }
                    </Grid>
                </Grid>
            ) : null}
        </Fragment>
    )
}

export default Administration