From 5c4130d3e497bd0f1ebf7c40dc06ae8989e7b32e Mon Sep 17 00:00:00 2001
From: Felix Albrigtsen <felixalbrigtsen@gmail.com>
Date: Sat, 23 Apr 2022 14:37:18 +0200
Subject: [PATCH] Continued session, admin page

---
 src/client/src/AdminsOverview.js              | 47 +++++++++++--------
 src/client/src/ProfilePage.js                 | 22 ++++++---
 src/client/src/TournamentHistory.js           |  4 +-
 src/client/src/components/AsuraBar.js         |  2 +
 .../src/components/tournamentBracket.css      |  2 +-
 5 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/client/src/AdminsOverview.js b/src/client/src/AdminsOverview.js
index a7be8fe..a38ae2d 100644
--- a/src/client/src/AdminsOverview.js
+++ b/src/client/src/AdminsOverview.js
@@ -26,7 +26,7 @@ function AdminCreator(props){
     formData.append("email", adminEmail)
     let body = new URLSearchParams(formData)
 
-    fetch(process.env.REACT_APP_API_URL + `/admins/create`, {
+    fetch(process.env.REACT_APP_API_URL + `/users/createBlank`, {
         method: "POST",
         body: body
         })
@@ -45,7 +45,7 @@ function AdminCreator(props){
     return (
         <Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
             <div align="center">
-                <TextField id="adminEmailInput" sx={{ width: "70%" }} label="Admin Email" variant="outlined" />
+                <TextField id="adminEmailInput" sx={{ width: "70%" }} label="Admin Email" variant="outlined" type="email" />
                 {/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
                 <Button variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
                     <Box sx={{padding: "10px"}}>
@@ -58,16 +58,16 @@ function AdminCreator(props){
     )
 }
 
-function AdminList(props){
-    const deleteAdmin = adminId => {
-        fetch(process.env.REACT_APP_API_URL + `/users/${adminId}`, {method: "DELETE"})
+function UserList(props){
+    const deleteUsers = userId => {
+        fetch(process.env.REACT_APP_API_URL + `/users/${userId}`, {method: "DELETE"})
             .then(res => res.json())
             .then(data => {
                 if(data.status !== "OK"){
                     showError(data.data);
                     return;
                 }
-                props.setAdmins(props.admins.filter(admin => admin.id !== adminId));
+                props.setUsers(props.users.filter(user => user.id !== userId));
             })
             .catch(error => showError(error));
     }
@@ -79,20 +79,27 @@ function AdminList(props){
                 <Table aria-label="simple table">
                     <TableHead>
                         <TableRow>
-                            <TableCell>Admin</TableCell>
+                            <TableCell>Name</TableCell>
+                            <TableCell>Email</TableCell>
+                            <TableCell>Rank</TableCell>
                             <TableCell align="center">Actions</TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {props.admins.map((admin) => (
-                            <TableRow key={admin.id}>
-                            <TableCell component="th" scope="row"> <b>
-                              {admin.name}
-                            </b></TableCell>
+                        {props.users.map((user) => (
+                            <TableRow key={user.id}>
+                            <TableCell component="th" scope="row"> 
+                            <b>
+                              {user.name}
+                            </b>
+                            </TableCell>
+                            <TableCell>{user.email}</TableCell>
+                            {/* TODO Drop down menu for selecting rank */}
+                            <TableCell>{'user.rank'}</TableCell>
                             {/* <TableCell align="right">{team.members}</TableCell> */}
                             <TableCell align="center">
                               {/* <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)} endIcon={<EditIcon />}>Edit</Button> */}
-                              <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {deleteAdmin(admin.id)}} endIcon={<DeleteIcon />}>Delete</Button>
+                              <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {deleteUsers(user.id)}} endIcon={<DeleteIcon />}>Delete</Button>
                             </TableCell>
                           </TableRow>
                         ))}
@@ -103,23 +110,23 @@ function AdminList(props){
     )
 }
 
-export default function Admins(props) {
-    const [admins, setAdmins] = React.useState([]);
-    const { adminId } = useParams();
+export default function Users(props) {
+    const [users, setUsers] = React.useState([]);
+    const { userId } = useParams();
 
-    function getAdmins() {
+    function getUsers() {
         fetch(process.env.REACT_APP_API_URL + `/users/getUsers`)
             .then((res) => res.json())
             .then((data) =>{
                 if(data.status !== "OK") {
                     showError(data.data);
                 }
-                setAdmins(data.data);
+                setUsers(data.data);
             })
             .catch((err) => showError(err));
         } 
         React.useEffect(() => {
-            getAdmins()
+            getUsers()
         }, []);
 
         return (
@@ -127,7 +134,7 @@ export default function Admins(props) {
             <Appbar pageTitle="Admins" />
             <div className="admins">
                 <AdminCreator />
-                <AdminList />
+                <UserList users={users}/>
             </div>
             </>
         );
diff --git a/src/client/src/ProfilePage.js b/src/client/src/ProfilePage.js
index 2738e96..4a9b09c 100644
--- a/src/client/src/ProfilePage.js
+++ b/src/client/src/ProfilePage.js
@@ -8,15 +8,25 @@ export default function ProfilePage(props) {
     if (!props.login) {
         return <h1>Something went very wrong</h1>
     }
-    console.log(props.login.user);
+
+    let user = props.login.user;
+    console.log(props.login);
     return (<>
         <AppBar pageTitle="Profile" />
         <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
-            {props.login.isLoggedIn ? <>
-                <Box sx={{ padding: "20px", width: "90vw", height: "30vh", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", alignContent: "center", flexGrow: 1}}>
-                  
-                </Box>
-            </>:<>
+            {props.login.isLoggedIn() ? <>
+                <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
+                    <div align="center">
+                    <h2><b>Your profile</b></h2>
+                    <Box>
+                        <h3><b>Name: </b> {user.name}</h3>
+                        <h3><b>Email: </b> {user.email}</h3>
+                        <h3><b>Role: </b> {user.isManager() ? "Manager" : "Administrator"}</h3>
+                        <h3><b>Picture: </b> <img src={user.imgURL} alt="Your profile"></img></h3>
+                    </Box>
+                    </div>
+                </Paper>
+            </> : <>
                 <Box sx={{ padding: "20px", width: "90vw", height: "30vh", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", alignContent: "center", flexGrow: 1}}>
                     You are not logged in.
                 </Box>
diff --git a/src/client/src/TournamentHistory.js b/src/client/src/TournamentHistory.js
index 75cbbdc..9bde926 100644
--- a/src/client/src/TournamentHistory.js
+++ b/src/client/src/TournamentHistory.js
@@ -55,7 +55,8 @@ function shorten(description, maxLength) {
                 
                 <Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
                 <Description />
-                
+                <Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold" align="vertical-center"/>  Prize: {props.tournament.prize} </Typography>
+
                 <Box sx={{flexGrow: 1, marginTop: "20px"}}>
                   <Grid container spacing={4} justifyContent="center" wrap="wrap">
                       <Grid item >
@@ -67,7 +68,6 @@ function shorten(description, maxLength) {
                       </Grid>
                   </Grid>
                 </Box>
-                <Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold" align="vertical-center"/>  Prize: {props.tournament.prize} </Typography>
               </CardContent>
             </Card>     
           </Paper>
diff --git a/src/client/src/components/AsuraBar.js b/src/client/src/components/AsuraBar.js
index cc26b89..d1384a2 100644
--- a/src/client/src/components/AsuraBar.js
+++ b/src/client/src/components/AsuraBar.js
@@ -4,6 +4,7 @@ import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid
 import MenuIcon from '@mui/icons-material/Menu';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import HistoryIcon from '@mui/icons-material/History';
+import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import logo from "./../Asura2222.png";
@@ -35,6 +36,7 @@ function LoggedInMenu() {
           <Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
           <Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link>
           <Link to="/" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link>
+          <Link to="/admins" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<EditIcon />} >Admins</Button></MenuItem></Link>
       </Menu> 
     </> 
   );  
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css
index 7323480..bf8f409 100644
--- a/src/client/src/components/tournamentBracket.css
+++ b/src/client/src/components/tournamentBracket.css
@@ -10,7 +10,7 @@
 	display:flex;
 	flex-direction:column;
 	justify-content:center;
-	width:20%;
+	width:20vw;
 	list-style:none;
 	padding:0;
 	font-size: 1.5rem;