From 54b01f81c5c73f6a9156d6f7efdc9efca3372dab Mon Sep 17 00:00:00 2001
From: Sahni-Arjun <arjun.sahni@mail.utoronto.ca>
Date: Wed, 6 Apr 2022 19:34:21 -0400
Subject: [PATCH] Admin page

---
 sports-matcher/client/src/pages/Admin.js | 44 +++++++++++++-----------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/sports-matcher/client/src/pages/Admin.js b/sports-matcher/client/src/pages/Admin.js
index 90ec76e..0dc98c4 100644
--- a/sports-matcher/client/src/pages/Admin.js
+++ b/sports-matcher/client/src/pages/Admin.js
@@ -1,15 +1,14 @@
 /* eslint-disable react/jsx-key */
 import React from "react";
 import "../styles/Admin.css";
-import { Button, Typography, Container, Paper } from "react-bootstrap";
-import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead } from "react-bootstrap";
-// import Typography from '@mui/material/Typography';
-// import Container from '@mui/material/Container';
-// import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
+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";
 
 
 
-export default class AdminTable extends React.Component {
+class AdminTable extends React.Component {
     constructor(props) {
         super(props);
 
@@ -32,8 +31,6 @@ export default class AdminTable extends React.Component {
             ],
             buttonColors: ["black", "", ""]
         };
-
-
     }
 
     EditButton() {
@@ -80,9 +77,9 @@ export default class AdminTable extends React.Component {
             const { id, username, name, email, phone } = user;
             return (
 
-                <TableRow>
-                    <TableCell>{id}</TableCell>
+                <TableRow key={user.id}>
                     <TableCell>{username}</TableCell>
+                    <TableCell>{id}</TableCell>
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
@@ -97,15 +94,15 @@ export default class AdminTable extends React.Component {
         return this.state.suspendedUsers.map((user) => {
             const { id, username, name, email, phone } = user;
             return (
-                <TableRow>
-                    <TableCell>{id}</TableCell>
-                    <TableCell>{username}</TableCell>
-                    <TableCell>{name}</TableCell>
-                    <TableCell>{email}</TableCell>
-                    <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
-                    <TableCell>{this.PardonButton()}</TableCell>
+                <TableRow key={user.id}>
+                    <TableCell >{id}</TableCell>
+                    <TableCell >{username}</TableCell>
+                    <TableCell >{name}</TableCell>
+                    <TableCell >{email}</TableCell>
+                    <TableCell >{phone}</TableCell>
+                    <TableCell >{this.DeleteButton()}</TableCell>
+                    <TableCell >{this.EditButton()}</TableCell>
+                    <TableCell >{this.PardonButton()}</TableCell>
                 </TableRow>
             );
         });
@@ -115,7 +112,7 @@ export default class AdminTable extends React.Component {
         return this.state.matches.map((match) => {
             const { id, sport, date, location, description } = match;
             return (
-                <TableRow>
+                <TableRow key={match.id}>
                     <TableCell>{id}</TableCell>
                     <TableCell>{sport}</TableCell>
                     <TableCell>{date}</TableCell>
@@ -206,8 +203,12 @@ export default class AdminTable extends React.Component {
 
     }
 
+    // render() { return (<h1>RANDOM TEXT</h1>); }
+
+
     render() {
         return (
+
             <div>
                 <h1 id='title'>Administration</h1>
                 <div className='ButtonList'>
@@ -243,8 +244,9 @@ export default class AdminTable extends React.Component {
                     </TableContainer>
                 </div>
             </div>
+
         );
     }
 }
 
-//export default AdminTable
\ No newline at end of file
+export default AdminTable;
\ No newline at end of file