From 94d3369d4e2983a9179a27f5be5a33e7e090bddf Mon Sep 17 00:00:00 2001 From: Sahni-Arjun Date: Tue, 5 Apr 2022 19:29:44 -0400 Subject: [PATCH 01/25] admin page --- sports-matcher/client/src/pages/Admin.js | 250 +++++++++++++++++++++ sports-matcher/client/src/styles/Admin.css | 4 + 2 files changed, 254 insertions(+) create mode 100644 sports-matcher/client/src/pages/Admin.js create mode 100644 sports-matcher/client/src/styles/Admin.css diff --git a/sports-matcher/client/src/pages/Admin.js b/sports-matcher/client/src/pages/Admin.js new file mode 100644 index 0000000..90ec76e --- /dev/null +++ b/sports-matcher/client/src/pages/Admin.js @@ -0,0 +1,250 @@ +/* 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'; + + + +export default class AdminTable 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", "", ""] + }; + + + } + + EditButton() { + return ; + + } + + DeleteButtonClick() { + return ( + + + Are you sure you want to delete this user? + + + ); + } + + NewDeleteButtonClick() { + return (
+ +
); + } + + DeleteButton() { + return ; + + } + + PardonButton() { + return ; + + } + + userTableData() { + return this.state.users.map((user) => { + const { id, username, name, email, phone } = user; + return ( + + + {id} + {username} + {name} + {email} + {phone} + {this.DeleteButton()} + {this.EditButton()} + + ); + }); + } + + suspendedUserTableData() { + return this.state.suspendedUsers.map((user) => { + const { id, username, name, email, phone } = user; + return ( + + {id} + {username} + {name} + {email} + {phone} + {this.DeleteButton()} + {this.EditButton()} + {this.PardonButton()} + + ); + }); + } + + matchTableData() { + return this.state.matches.map((match) => { + const { id, sport, date, location, description } = match; + return ( + + {id} + {sport} + {date} + {location} + {description} + {this.DeleteButton()} + {this.EditButton()} + + ); + }); + } + + matchTableHead() { + return ( + + + ID + Sport + Date + Location + Description + + + + + ); + + } + + suspendedUserTableHead() { + return ( + + + ID + Username + Name + Email + Phone + + + + + + ); + + } + + userTableHead() { + return ( + + + ID + Username + Name + Email + Phone + + + + + ); + + } + + + 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.suspendedUserTableHead(); + } + } + + renderTableData() { + if (this.state.buttonColors[0] === "black") { + return this.matchTableData(); + } else if (this.state.buttonColors[1] === "black") { + return this.userTableData(); + } else { + return this.suspendedUserTableData(); + } + + } + + render() { + return ( +
+

Administration

+
+ + +
+
+ + + {this.renderTableHead()} + + {this.renderTableData()} + +
+ +
+
+ ); + } +} + +//export default AdminTable \ No newline at end of file diff --git a/sports-matcher/client/src/styles/Admin.css b/sports-matcher/client/src/styles/Admin.css new file mode 100644 index 0000000..59c9b92 --- /dev/null +++ b/sports-matcher/client/src/styles/Admin.css @@ -0,0 +1,4 @@ + +.MainTable { + padding : 20px; +} \ No newline at end of file From 54b01f81c5c73f6a9156d6f7efdc9efca3372dab Mon Sep 17 00:00:00 2001 From: Sahni-Arjun Date: Wed, 6 Apr 2022 19:34:21 -0400 Subject: [PATCH 02/25] 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 ( - - {id} + {username} + {id} {name} {email} {phone} @@ -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 ( - - {id} - {username} - {name} - {email} - {phone} - {this.DeleteButton()} - {this.EditButton()} - {this.PardonButton()} + + {id} + {username} + {name} + {email} + {phone} + {this.DeleteButton()} + {this.EditButton()} + {this.PardonButton()} ); }); @@ -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 ( - + {id} {sport} {date} @@ -206,8 +203,12 @@ export default class AdminTable extends React.Component { } + // render() { return (

RANDOM TEXT

); } + + render() { return ( +

Administration

@@ -243,8 +244,9 @@ export default class AdminTable extends React.Component {
+ ); } } -//export default AdminTable \ No newline at end of file +export default AdminTable; \ No newline at end of file From 499cbf3409c89e23d249ff8f724ea710f45dbdf4 Mon Sep 17 00:00:00 2001 From: Harrison Deng Date: Wed, 6 Apr 2022 20:35:41 -0500 Subject: [PATCH 03/25] Fixed api client url error. --- sports-matcher/client/src/utils/httpClients.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sports-matcher/client/src/utils/httpClients.js b/sports-matcher/client/src/utils/httpClients.js index 6cff00c..36a9ea2 100644 --- a/sports-matcher/client/src/utils/httpClients.js +++ b/sports-matcher/client/src/utils/httpClients.js @@ -1,7 +1,7 @@ import axios from "axios"; export const apiClient = axios.create({ - baseURL: process.env.REACT_APP_API_HOST || "" + "/api/", + baseURL: (process.env.REACT_APP_API_HOST || "") + "/api/", timeout: 5000, withCredentials: process.env.NODE_ENV === "development", validateStatus: function (status) { From c738e8044a2afb3283c3a375c354613f8c1f91f7 Mon Sep 17 00:00:00 2001 From: Harrison Deng Date: Wed, 6 Apr 2022 21:03:30 -0500 Subject: [PATCH 04/25] eslint no fails compiles due to unused imports. --- sports-matcher/client/.eslintrc.json | 3 ++- sports-matcher/server/.eslintrc.json | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/sports-matcher/client/.eslintrc.json b/sports-matcher/client/.eslintrc.json index 3cdde28..456e459 100644 --- a/sports-matcher/client/.eslintrc.json +++ b/sports-matcher/client/.eslintrc.json @@ -35,6 +35,7 @@ "semi": [ "error", "always" - ] + ], + "no-unused-vars": "warn" } } \ No newline at end of file diff --git a/sports-matcher/server/.eslintrc.json b/sports-matcher/server/.eslintrc.json index 0806fb5..e296e45 100644 --- a/sports-matcher/server/.eslintrc.json +++ b/sports-matcher/server/.eslintrc.json @@ -14,7 +14,7 @@ 4 ], "linebreak-style": [ - "error", + "warn", "unix" ], "quotes": [ @@ -24,6 +24,7 @@ "semi": [ "error", "always" - ] + ], + "no-unused-vars": "warn" } } \ No newline at end of file From 7c8e37aea8c1be00c4e427bc9525c2cf53a4b598 Mon Sep 17 00:00:00 2001 From: Sahni-Arjun Date: Wed, 6 Apr 2022 22:09:03 -0400 Subject: [PATCH 05/25] finished admin frontend --- sports-matcher/client/src/Layout.js | 2 + sports-matcher/client/src/pages/Admin.js | 252 -------------------- sports-matcher/client/src/pages/NewAdmin.js | 210 ++++++++++++++++ sports-matcher/client/src/styles/Admin.css | 13 +- 4 files changed, 224 insertions(+), 253 deletions(-) delete mode 100644 sports-matcher/client/src/pages/Admin.js create mode 100644 sports-matcher/client/src/pages/NewAdmin.js diff --git a/sports-matcher/client/src/Layout.js b/sports-matcher/client/src/Layout.js index 1c546ac..7f2a32e 100644 --- a/sports-matcher/client/src/Layout.js +++ b/sports-matcher/client/src/Layout.js @@ -8,6 +8,7 @@ import { Container, Nav, NavbarBrand } from "react-bootstrap"; import NavbarToggle from "react-bootstrap/esm/NavbarToggle"; import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse"; import Dashboard from "./pages/Dashboard"; +import Admin from "./pages/NewAdmin"; import Login from "./pages/Login"; export default class Layout extends React.Component { @@ -34,6 +35,7 @@ export default class Layout extends React.Component { } /> } /> } /> + } />