Admin page

This commit is contained in:
Sahni-Arjun 2022-04-06 19:34:21 -04:00
parent 94d3369d4e
commit 54b01f81c5

View File

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