Admin display connected to backend.
This commit is contained in:
parent
9c4696b797
commit
90040f9049
@ -9,9 +9,10 @@ import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
|
||||
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import Logout from "./pages/Logout";
|
||||
import Admin from "./pages/NewAdmin";
|
||||
import Admin from "./pages/Administration";
|
||||
import Login from "./pages/Login";
|
||||
import Context from "./globals.js";
|
||||
import Signup from "./pages/Signup";
|
||||
|
||||
|
||||
export default function layout() {
|
||||
@ -69,6 +70,7 @@ export default function layout() {
|
||||
<Route path="/" element={<Welcome />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/signup" element={<Signup />} />
|
||||
<Route path="/logout" element={<Logout />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
</Routes>
|
||||
|
||||
@ -16,6 +16,9 @@ export default class AuthenticationGuard extends React.Component {
|
||||
} else if (userDataResponse.status == 401) {
|
||||
this.context.navigate("/signup", { replace: true });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.context.user && this.context.user.accessLevel < this.props.accessLevel) {
|
||||
this.context.navigate("/", { replace: true });
|
||||
}
|
||||
|
||||
256
sports-matcher/client/src/pages/Administration.js
Normal file
256
sports-matcher/client/src/pages/Administration.js
Normal file
@ -0,0 +1,256 @@
|
||||
import React from "react";
|
||||
import { Button, ButtonGroup, Spinner, Table } from "react-bootstrap";
|
||||
import "../styles/Admin.css";
|
||||
import globals from "../globals";
|
||||
import AuthenticationGuard from "../components/AuthenticationGuard";
|
||||
import { apiClient } from "../utils/httpClients";
|
||||
|
||||
export default class Admin extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// Use null to indicate not loaded
|
||||
// Use empty array to indicate no items for that state.
|
||||
this.state = {
|
||||
users: null,
|
||||
suspendedUsers: null,
|
||||
matches: null,
|
||||
user: null,
|
||||
currentTab: "matches",
|
||||
};
|
||||
}
|
||||
|
||||
static contextType = globals;
|
||||
|
||||
async componentDidMount() {
|
||||
await this.loadActiveUsers();
|
||||
await this.loadSuspendedUsers();
|
||||
await this.loadMatches();
|
||||
}
|
||||
|
||||
async loadActiveUsers() {
|
||||
let response = await apiClient.get("/user/all/active");
|
||||
if (response.status === 200) {
|
||||
this.setState({ users: response.data.active });
|
||||
}
|
||||
}
|
||||
|
||||
async loadSuspendedUsers() {
|
||||
let response = await apiClient.get("/user/all/suspended");
|
||||
if (response.status === 200) {
|
||||
this.setState({ suspendedUsers: response.data.suspended });
|
||||
} else {
|
||||
console.error(response.status);
|
||||
}
|
||||
}
|
||||
|
||||
async loadMatches() {
|
||||
let response = await apiClient.get("/match/all");
|
||||
if (response.status === 200) {
|
||||
this.setState({ matches: response.data.all });
|
||||
}
|
||||
}
|
||||
|
||||
DeleteButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("User deleted.");
|
||||
}} variant="outline-secondary">Delete</Button>;
|
||||
|
||||
}
|
||||
|
||||
PardonButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("User pardoned.");
|
||||
}} variant="outline-secondary">Pardon</Button>;
|
||||
|
||||
}
|
||||
|
||||
EditButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("clicked");
|
||||
}} variant="outline-secondary">Edit</Button>;
|
||||
|
||||
}
|
||||
|
||||
userTableHead() {
|
||||
return (
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
matchTableHead() {
|
||||
return (
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Sport</th>
|
||||
<th>Date</th>
|
||||
<th>Location</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
userTableData() {
|
||||
if (!this.state.users) {
|
||||
return (
|
||||
<tr>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return this.state.users.map((user) => {
|
||||
const { _id, firstName, lastName, email, phone } = user;
|
||||
return (
|
||||
<tr key={_id}>
|
||||
<td>{_id}</td>
|
||||
<td>{firstName}</td>
|
||||
<td>{lastName}</td>
|
||||
<td>{email}</td>
|
||||
<td>{phone}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
susUserTableData() {
|
||||
if (!this.state.suspendedUsers) {
|
||||
return (
|
||||
<tr>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return this.state.suspendedUsers.map((user) => {
|
||||
const { _id, firstName, lastName, email, phone } = user;
|
||||
return (
|
||||
<tr key={_id}>
|
||||
<td>{_id}</td>
|
||||
<td>{firstName}</td>
|
||||
<td>{lastName}</td>
|
||||
<td>{email}</td>
|
||||
<td>{phone}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
<td>{this.PardonButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
matchTableData() {
|
||||
if (!this.state.matches) {
|
||||
return (
|
||||
<tr>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
<td><Spinner animation="grow" /></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return this.state.matches.map((match) => {
|
||||
const { _id, sport, when, location } = match;
|
||||
const sportName = sport.name;
|
||||
return (
|
||||
<tr key={_id}>
|
||||
<td>{_id}</td>
|
||||
<td>{sportName}</td>
|
||||
<td>{when}</td>
|
||||
<td>{location}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
<td>{this.PardonButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderTableHead() {
|
||||
if (this.state.currentTab === "matches") {
|
||||
return this.matchTableHead();
|
||||
} else if (this.state.currentTab === "users") {
|
||||
return this.userTableHead();
|
||||
} else {
|
||||
return this.userTableHead();
|
||||
}
|
||||
}
|
||||
|
||||
renderTableData() {
|
||||
if (this.state.currentTab === "matches") {
|
||||
return this.matchTableData();
|
||||
} else if (this.state.currentTab === "users") {
|
||||
return this.userTableData();
|
||||
} else {
|
||||
return this.susUserTableData();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="page-root">
|
||||
<AuthenticationGuard accessLevel={3}>
|
||||
<React.Fragment>
|
||||
<div className='center'>
|
||||
<h1 id='title'>Administration</h1>
|
||||
<ButtonGroup aria-label="Pages">
|
||||
<Button onClick={() => {
|
||||
this.setState({ currentTab: "matches" });
|
||||
}} variant="outline-secondary" active={this.state.currentTab === "matches"}>Matches</Button>
|
||||
<Button onClick={() => {
|
||||
this.setState({ currentTab: "users" });
|
||||
}} variant="outline-secondary" active={this.state.currentTab === "users"}>Users</Button>
|
||||
<Button onClick={() => {
|
||||
this.setState({ currentTab: "suspended" });
|
||||
}} variant="outline-secondary" active={this.state.currentTab === "suspended"}>Suspended Users</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<Table striped bordered hover>
|
||||
{this.renderTableHead()}
|
||||
<tbody>
|
||||
{this.renderTableData()}
|
||||
{/* {this.matchUserTableData()} */}
|
||||
</tbody>
|
||||
</Table>
|
||||
</React.Fragment>
|
||||
</AuthenticationGuard >
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,214 +0,0 @@
|
||||
import React from "react";
|
||||
import { Button, Table } from "react-bootstrap";
|
||||
import "../styles/Admin.css";
|
||||
import globals from "../globals";
|
||||
import AuthenticationGuard from "../components/AuthenticationGuard";
|
||||
|
||||
export default class Admin extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
||||
|
||||
this.state = {
|
||||
users: [
|
||||
{ id: 1, username: "username1", name: "name1", email: "user1@email.com", phone: "123-456-7890" },
|
||||
{ id: 2, username: "username2", name: "name2", email: "user2@email.com", phone: "123-456-7890" },
|
||||
{ id: 3, username: "username3", name: "name3", email: "user3@email.com", phone: "123-456-7890" },
|
||||
{ id: 4, username: "username4", name: "name4", email: "user4@email.com", phone: "123-456-7890" }
|
||||
],
|
||||
suspendedUsers: [
|
||||
{ id: 1, username: "suspended1", name: "s1", email: "s1@email.com", phone: "123-456-7890" },
|
||||
{ id: 2, username: "suspended2", name: "s2", email: "s2@email.com", phone: "123-456-7890" },
|
||||
{ id: 3, username: "suspended3", name: "s3", email: "s3@email.com", phone: "123-456-7890" },
|
||||
{ id: 4, username: "suspended4", name: "s4", email: "s4@email.com", phone: "123-456-7890" }
|
||||
],
|
||||
matches: [
|
||||
{ id: 1, sport: "Tennis", date: "08/08/2021", location: "toronto", description: "Tennis match" },
|
||||
{ id: 2, sport: "Basketball", date: "09/09/2021", location: "toronto", description: "Basketball match" }
|
||||
],
|
||||
buttonColors: ["black", "", ""],
|
||||
user: null
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
static contextType = globals;
|
||||
|
||||
async componentDidMount() {
|
||||
}
|
||||
|
||||
DeleteButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("User deleted.");
|
||||
}} variant="outline-secondary">Delete</Button>;
|
||||
|
||||
}
|
||||
|
||||
PardonButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("User pardoned.");
|
||||
}} variant="outline-secondary">Pardon</Button>;
|
||||
|
||||
}
|
||||
|
||||
EditButton() {
|
||||
return <Button onClick={() => {
|
||||
alert("clicked");
|
||||
}} variant="outline-secondary">Edit</Button>;
|
||||
|
||||
}
|
||||
|
||||
userTableHead() {
|
||||
return (
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
matchTableHead() {
|
||||
return (
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Sport</th>
|
||||
<th>Date</th>
|
||||
<th>Location</th>
|
||||
<th>Description</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
userTableData() {
|
||||
return this.state.users.map((user) => {
|
||||
const { id, username, name, email, phone } = user;
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td>{id}</td>
|
||||
<td>{username}</td>
|
||||
<td>{name}</td>
|
||||
<td>{email}</td>
|
||||
<td>{phone}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
susUserTableData() {
|
||||
return this.state.suspendedUsers.map((user) => {
|
||||
const { id, username, name, email, phone } = user;
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td>{id}</td>
|
||||
<td>{username}</td>
|
||||
<td>{name}</td>
|
||||
<td>{email}</td>
|
||||
<td>{phone}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
<td>{this.PardonButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
matchTableData() {
|
||||
return this.state.matches.map((match) => {
|
||||
const { id, sport, date, location, description } = match;
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td>{id}</td>
|
||||
<td>{sport}</td>
|
||||
<td>{date}</td>
|
||||
<td>{location}</td>
|
||||
<td>{description}</td>
|
||||
<td>{this.DeleteButton()}</td>
|
||||
<td>{this.EditButton()}</td>
|
||||
<td>{this.PardonButton()}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
selectTable() {
|
||||
this.setState({ buttonColors: ["", "", ""] });
|
||||
}
|
||||
|
||||
renderTableHead() {
|
||||
if (this.state.buttonColors[0] === "black") {
|
||||
return this.matchTableHead();
|
||||
} else if (this.state.buttonColors[1] === "black") {
|
||||
return this.userTableHead();
|
||||
} else {
|
||||
return this.userTableHead();
|
||||
}
|
||||
}
|
||||
|
||||
renderTableData() {
|
||||
if (this.state.buttonColors[0] === "black") {
|
||||
return this.matchTableData();
|
||||
} else if (this.state.buttonColors[1] === "black") {
|
||||
return this.userTableData();
|
||||
} else {
|
||||
return this.susUserTableData();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="page-root">
|
||||
<AuthenticationGuard accessLevel={3}>
|
||||
<React.Fragment>
|
||||
<div className='center'>
|
||||
<h1 id='title'>Administration</h1>
|
||||
<Button onClick={() => {
|
||||
this.setState({ buttonColors: ["black", "", ""] });
|
||||
}} sx={{
|
||||
margin: 3,
|
||||
backgroundColor: this.state.buttonColors[0],
|
||||
}} variant="outline-secondary">Matches</Button>
|
||||
<Button onClick={() => {
|
||||
this.setState({ buttonColors: ["", "black", ""] });
|
||||
}} sx={{
|
||||
margin: 3,
|
||||
backgroundColor: this.state.buttonColors[1],
|
||||
}} variant="outline-secondary">Users</Button>
|
||||
<Button onClick={() => {
|
||||
this.setState({ buttonColors: ["", "", "black"] });
|
||||
}} sx={{
|
||||
margin: 3,
|
||||
backgroundColor: this.state.buttonColors[2],
|
||||
}} variant="outline-secondary">Suspended Users</Button></div>
|
||||
<Table striped bordered hover>
|
||||
{this.renderTableHead()}
|
||||
<tbody>
|
||||
{this.renderTableData()}
|
||||
{/* {this.matchUserTableData()} */}
|
||||
</tbody>
|
||||
</Table>
|
||||
</React.Fragment>
|
||||
</AuthenticationGuard >
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,6 @@ export default class Signup extends React.Component {
|
||||
}
|
||||
|
||||
const res = await apiClient.post("/user", this.state.user);
|
||||
console.log(res.data);
|
||||
if (res.status === 201) {
|
||||
this.notifyUser("Success!", <div>You are successfully signed up! You wil be directed to <Link to="/login">login</Link> now.</div>, "success");
|
||||
this.redirectTimer = setTimeout(() => {
|
||||
@ -67,7 +66,6 @@ export default class Signup extends React.Component {
|
||||
}
|
||||
|
||||
validateCurrentForm() {
|
||||
console.log(this.state);
|
||||
let formIssues = [];
|
||||
if (!validator.isEmail(this.state.user.email)) {
|
||||
formIssues.push("The email submitted is invalid.");
|
||||
|
||||
@ -39,7 +39,6 @@ rentalController.get("/recent/:limit?", needDatabase, async (req, res) => {
|
||||
let limit = parseInt(req.params.limit);
|
||||
if (!req.params.limit) limit = 10;
|
||||
if (isNaN(limit)) {
|
||||
console.log(typeof (limit));
|
||||
res.status(400).send("Limit parameter is not a number.");
|
||||
return;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user