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

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,
    resetIsRequestCompleted,
    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 isRequestCompleted = useSelector((state: RootState) => state.usersDetail.isRequestCompleted)
    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) {
            // if there is user selected, leave that state - handled by useEffect on isRequestCompleted
            if (selectedUser !== undefined) {
                const selUser = users.find(u => u.email === selectedUser.email)
                if (selUser !== undefined) {
                    console.log("Selected from before")
                    console.log(selUser)
                    setSelectedUserId(users.findIndex(u => u.email === selectedUser.email))
                    dispatch(setSelectedUser(selUser))
                    return
                }
            } else {
                setSelectedUserId(0)
                dispatch(setSelectedUser(users.at(0)))
            }
        }
    }, [users, dispatch])

    useEffect(() => {
        if (isRequestCompleted) {
            dispatch(resetIsRequestCompleted())
            // dispatch(clear())
            dispatch(fetchUsers())
            // setSelectedUserId(0)
            // dispatch(setSelectedUser(users.at(0)))
            //
            // if (users.length > 0) {
            //     setSelectedUserId(0)
            //     dispatch(setSelectedUser(users.at(0)))
            //     console.log("selected id: " + selectedUser)
            // }
        }
    }, [isRequestCompleted, dispatch])


    // 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])

    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}/>
                        : null }
                    </Grid>
                </Grid>
            ) : null}
        </Fragment>
    )
}

export default Administration