Admin display connected to backend.

sports-matcher/client/src/Layout.js

@@ -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>

sports-matcher/client/src/components/AuthenticationGuard.js

@@ -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 });
         }

sports-matcher/client/src/pages/Administration.js

@@ -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>
+        );
+    }
+}

sports-matcher/client/src/pages/NewAdmin.js

@@ -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>
-        );
-    }
-}

sports-matcher/client/src/pages/Signup.js

@@ -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.");

sports-matcher/server/controllers/rentalController.js

@@ -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;
         }