Revize 287652cf

Refactor of administration page and user registration
re #9627

frontend/src/features/Administration/Administration.tsx

@@ -1 +1 @@
 import {
     Button,
-    Container, Grid,
-    Link,
+    Grid,
     List,
     ListItem,
-    ListItemIcon,
     ListItemText,
-    NativeSelect,
     Paper,
-    Select, SelectChangeEvent
 } from '@mui/material'
-import {Fragment, ReactNode, useEffect, useState} from 'react'
+import {Fragment, 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';
-
-
+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 = () => {
-    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)
+    // 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)
+        console.log("clicked "+ userID)
         if (users) {
-            setSelectedUser(users.at(userID))
-            setSelectedUserID(userID)
+            setSelectedUserId(userID)
+            dispatch(setSelectedUser(users.at(userID)))
+            console.log("after " + selectedUser)
         }
     }
 
-    // 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
-            }
+    // 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])
+
 
-            setUsers(data)
-            setIsContentLoading(false)
-        } catch (err: any) {
-            setErr(apiError)
+    // 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(() => {
-        fetchItem()
-    }, [])
+        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 = () => {
-        setSelectedUser(undefined)
-        setSelectedUserID(undefined)
-        fetchItem()
+        dispatch(clear())
+        dispatch(fetchUsers())
+        setSelectedUserId(0)
+        dispatch(setSelectedUser(users.at(0)))
     }
 
     return (
         <Fragment>
-
-            {isContentLoading && !err ? <ContentLoading /> : null}
-            {!isContentLoading && users && isAdmin ? (
+            <ShowErrorIfPresent err={displayError} />
+            {loading && !apiError ? <ContentLoading /> : null}
+            {!loading && users && isAdmin ? (
                 <Grid container justifyContent="space-around">
-                    <Grid item xs={3} md={2} sx={{ px: 2 }}>
+                    <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
+                                            selectedUserId === id
                                                 ? 'clicked-user'
                                                 : ''
                                         }
@@ -108 +127 @@
                             </Button>
                         </Paper>
                     </Grid>
-                    <Grid item md={10} xs={9}>
-                        {selectedUser ?
-                            <UserDetail user={selectedUser} onClose={childClosed} />
+                    <Grid item md={9} xs={6}>
+                        {selectedUserId !== undefined  ?
+                            <UserDetail user={selectedUser as UserDto} onClose={childClosed} />
                         : null }
                     </Grid>
                 </Grid>