From 528cb80c1fa14ea326d1a77d6c5ea3a9aa8cffc8 Mon Sep 17 00:00:00 2001
From: Sahni-Arjun <arjun.sahni@mail.utoronto.ca>
Date: Sun, 6 Mar 2022 21:01:56 -0500
Subject: [PATCH] minor changes, added navbar to admin

---
 sports-matcher/src/Admin.css |  4 ++++
 sports-matcher/src/Admin.js  | 35 +++++++++++++++++++------------
 sports-matcher/src/App.js    |  2 ++
 sports-matcher/src/Navbar.js | 40 ++++++++++++++++++------------------
 4 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/sports-matcher/src/Admin.css b/sports-matcher/src/Admin.css
index 59c9b92..c09116c 100644
--- a/sports-matcher/src/Admin.css
+++ b/sports-matcher/src/Admin.css
@@ -1,4 +1,8 @@
 
 .MainTable {
     padding : 20px;
+}
+
+.Title {
+    margin-top: 40px;
 }
\ No newline at end of file
diff --git a/sports-matcher/src/Admin.js b/sports-matcher/src/Admin.js
index 9d48546..cf200f2 100644
--- a/sports-matcher/src/Admin.js
+++ b/sports-matcher/src/Admin.js
@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
+import Navbar from './Navbar';
 
 
 
@@ -36,14 +37,14 @@ class AdminTable extends React.Component {
 
     }
 
-    EditButton() {
+    editButton() {
         return <Button onClick={() => {
             alert('clicked');
         }} variant="contained">Edit</Button>;
 
     }
 
-    DeleteButtonClick() {
+    deleteButtonClick() {
         return (
             <Container component="main" maxWidth="xs">
 
@@ -55,20 +56,27 @@ class AdminTable extends React.Component {
         )
     }
 
-    NewDeleteButtonClick() {
+    newDeleteButtonClick() {
         return (<form onsubmit="console.log('You clicked submit.'); return false">
             <button type="submit">Submit</button>
         </form>)
     }
 
-    DeleteButton() {
+    deleteButton() {
         return <Button onClick={() => {
             alert('User deleted.');
         }} variant="contained">Delete</Button>;
 
     }
 
-    PardonButton() {
+    matchDeleteButton() {
+        return <Button onClick={() => {
+            alert('Match deleted.');
+        }} variant="contained">Delete</Button>;
+
+    }
+
+    pardonButton() {
         return <Button onClick={() => {
             alert('User pardoned.');
         }} variant="contained">Pardon</Button>;
@@ -85,8 +93,8 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -102,9 +110,9 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
-                    <TableCell>{this.PardonButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
+                    <TableCell>{this.pardonButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -120,8 +128,8 @@ class AdminTable extends React.Component {
                     <TableCell>{date}</TableCell>
                     <TableCell>{location}</TableCell>
                     <TableCell>{description}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.matchDeleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -208,7 +216,8 @@ class AdminTable extends React.Component {
     render() {
         return (
             <div>
-                <h1 id='title'>Administration</h1>
+                <Navbar></Navbar>
+                <h1 className='Title'>Administration</h1>
                 <div className='ButtonList'>
                     <Button onClick={() => {
                         this.setState({ buttonColors: ['black', '', ''] });
diff --git a/sports-matcher/src/App.js b/sports-matcher/src/App.js
index e631343..04fc368 100644
--- a/sports-matcher/src/App.js
+++ b/sports-matcher/src/App.js
@@ -2,6 +2,7 @@ import './App.css';
 import { Routes, Route, Link } from "react-router-dom";
 import SignIn from './SignIn';
 import SignUp from './SignUp';
+import Admin from './Admin';
 import Home from './Home';
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
         <Route path="" element={<Home />} />
         <Route path="sign-in" element={<SignIn />} />
         <Route path="sign-up" element={<SignUp />} />
+        <Route path="admin" element={<Admin />} />
       </Routes>
     </div>
   );
diff --git a/sports-matcher/src/Navbar.js b/sports-matcher/src/Navbar.js
index 6fef1b2..3b3373c 100644
--- a/sports-matcher/src/Navbar.js
+++ b/sports-matcher/src/Navbar.js
@@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
 
 const pages = ['Dashboard'];
 
-export default function Navbar(){
+export default function Navbar() {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -38,7 +38,7 @@ export default function Navbar(){
   const navigate = useNavigate();
 
   return (
-    <AppBar position="static" sx={{background: '#00226D'}}>
+    <AppBar position="static" sx={{ background: '#00226D' }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Typography
@@ -99,24 +99,24 @@ export default function Navbar(){
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
+                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
               >
                 {page}
               </Button>
             ))}
           </Box>
 
-          <Box sx={{ flexGrow: 0, marginRight: '1%'}}>
-           <Tooltip title="Chats">
-              <IconButton sx={{ p: 0}}>
-                <ForumIcon sx={{color: 'white'}}></ForumIcon>
+          <Box sx={{ flexGrow: 0, marginRight: '1%' }}>
+            <Tooltip title="Chats">
+              <IconButton sx={{ p: 0 }}>
+                <ForumIcon sx={{ color: 'white' }}></ForumIcon>
               </IconButton>
             </Tooltip>
-            </Box>
-            <Box sx={{ flexGrow: 0 }}>
+          </Box>
+          <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}>
-                <AccountCircle sx={{color: 'white'}}></AccountCircle>
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <AccountCircle sx={{ color: 'white' }}></AccountCircle>
               </IconButton>
             </Tooltip>
             <Menu
@@ -135,15 +135,15 @@ export default function Navbar(){
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-                <MenuItem onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">Profile</Typography>
-                </MenuItem>
-                <MenuItem onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">Account</Typography>
-                </MenuItem>
-                <MenuItem onClick={() => navigate('sign-in')}>
-                  <Typography textAlign="center">Sign Out</Typography>
-                </MenuItem>
+              <MenuItem onClick={handleCloseUserMenu}>
+                <Typography textAlign="center">Profile</Typography>
+              </MenuItem>
+              <MenuItem onClick={handleCloseUserMenu}>
+                <Typography textAlign="center">Account</Typography>
+              </MenuItem>
+              <MenuItem onClick={() => navigate('/sign-in')}>
+                <Typography textAlign="center">Sign Out</Typography>
+              </MenuItem>
             </Menu>
           </Box>
         </Toolbar>