update

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "team58",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

sports-matcher/package.json

@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
     "web-vitals": "^2.1.4"
   },

sports-matcher/src/Admin.css

@@ -0,0 +1,4 @@
+
+.MainTable {
+    padding : 20px;
+}

sports-matcher/src/Admin.js

@@ -0,0 +1,249 @@
+import * as React from 'react';
+import './Admin.css';
+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';
+
+
+
+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 <Button onClick={() => {
+            alert('clicked');
+        }} variant="contained">Edit</Button>;
+
+    }
+
+    DeleteButtonClick() {
+        return (
+            <Container component="main" maxWidth="xs">
+
+                <Typography>Are you sure you want to delete this user?</Typography>
+                <Button onClick={() => {
+                    alert('User deleted');
+                }} variant="contained">Yes</Button>
+            </Container>
+        )
+    }
+
+    NewDeleteButtonClick() {
+        return (<form onsubmit="console.log('You clicked submit.'); return false">
+            <button type="submit">Submit</button>
+        </form>)
+    }
+
+    DeleteButton() {
+        return <Button onClick={() => {
+            alert('User deleted.');
+        }} variant="contained">Delete</Button>;
+
+    }
+
+    PardonButton() {
+        return <Button onClick={() => {
+            alert('User pardoned.');
+        }} variant="contained">Pardon</Button>;
+
+    }
+
+    userTableData() {
+        return this.state.users.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>
+                </TableRow>
+            )
+        })
+    }
+
+    suspendedUserTableData() {
+        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>
+            )
+        })
+    }
+
+    matchTableData() {
+        return this.state.matches.map((match) => {
+            const { id, sport, date, location, description } = match
+            return (
+                <TableRow>
+                    <TableCell>{id}</TableCell>
+                    <TableCell>{sport}</TableCell>
+                    <TableCell>{date}</TableCell>
+                    <TableCell>{location}</TableCell>
+                    <TableCell>{description}</TableCell>
+                    <TableCell>{this.DeleteButton()}</TableCell>
+                    <TableCell>{this.EditButton()}</TableCell>
+                </TableRow>
+            )
+        })
+    }
+
+    matchTableHead() {
+        return (
+            <TableHead>
+                <TableRow>
+                    <TableCell>ID</TableCell>
+                    <TableCell>Sport</TableCell>
+                    <TableCell>Date</TableCell>
+                    <TableCell>Location</TableCell>
+                    <TableCell>Description</TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                </TableRow>
+            </TableHead>
+        );
+
+    }
+
+    suspendedUserTableHead() {
+        return (
+            <TableHead>
+                <TableRow>
+                    <TableCell>ID</TableCell>
+                    <TableCell>Username</TableCell>
+                    <TableCell>Name</TableCell>
+                    <TableCell>Email</TableCell>
+                    <TableCell>Phone</TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                </TableRow>
+            </TableHead>
+        );
+
+    }
+
+    userTableHead() {
+        return (
+            <TableHead>
+                <TableRow>
+                    <TableCell>ID</TableCell>
+                    <TableCell>Username</TableCell>
+                    <TableCell>Name</TableCell>
+                    <TableCell>Email</TableCell>
+                    <TableCell>Phone</TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                </TableRow>
+            </TableHead>
+        );
+
+    }
+
+
+    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 (
+            <div>
+                <h1 id='title'>Administration</h1>
+                <div className='ButtonList'>
+                    <Button onClick={() => {
+                        this.setState({ buttonColors: ['black', '', ''] });
+                    }} sx={{
+                        margin: 3,
+                        backgroundColor: this.state.buttonColors[0],
+                    }} variant="outlined">Matches</Button>
+                    <Button onClick={() => {
+                        this.setState({ buttonColors: ['', 'black', ''] });
+                    }} sx={{
+                        margin: 3,
+                        backgroundColor: this.state.buttonColors[1],
+                    }} variant="outlined">Users</Button>
+                    <Button onClick={() => {
+                        this.setState({ buttonColors: ['', '', 'black'] });
+                    }} sx={{
+                        margin: 3,
+                        backgroundColor: this.state.buttonColors[2],
+                    }} variant="outlined">Suspended Users</Button></div>
+                <div className='MainTable'>
+                    <TableContainer
+                        component={Paper}
+                        variant="outlined"
+                    >
+                        <Table>
+                            {this.renderTableHead()}
+                            <TableBody>
+                                {this.renderTableData()}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default AdminTable

sports-matcher/src/App.js

@@ -1,23 +1,16 @@
-import logo from './logo.svg';
 import './App.css';
-
+import { Routes, Route, Link } from "react-router-dom";
+import SignIn from './SignIn';
+import SignUp from './SignUp';
+import Admin from './Admin';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Routes>
+        <Route path="sign-in" element={<SignIn />} />
+        <Route path="sign-up" element={<SignUp />} />
+        <Route path="admin" element={<Admin />} />
+      </Routes>
     </div>
   );
 }

sports-matcher/src/Chat.js

@@ -1,18 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css'
-
-class Chat extends React.Component {
-    render() {
-        return (
-            <div class="chatbubble-container">                    
-                        <div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
-                            {this.props.message}
-                        </div>
-            </div>
-        )
-    }
-}
-
-export default Chat;

sports-matcher/src/ChatWindow.js

@@ -1,113 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css'
-import Chat from './Chat'
-import Contact from './Contact'
-import { useState } from "react";
-
-class ChatWindow extends React.Component {
-    render() {
-        return (
-            <div class="chatcomponent">
-                <UserList />
-                <MessageList />
-                <ChatInput />
-            </div>
-        )
-    }
-}
-
-class UserList extends React.Component {
-    
-    render() {
-        return (
-            <div class="contactlist">
-                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
-                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
-                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
-            </div>
-        )
-    }
-}
-
-class MessageList extends React.Component {
-    render() {
-        return (
-            <div class="messagelist">
-                <Chat message="Got time for tennis this week, Raiden?" side="right"/>
-                <Chat message="Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?" side="left" />
-                <Chat message="Aiight, see you at 4" side="right" />
-                <Chat message="As you wish." side="left" />
-                </div>
-        )
-    }
-}
-// class ChatWindow extends React.Component {
-//     render() {
-//         return (
-//             <div>
-//                 <ChatUserList />
-//                 {/* <MessageList /> */}
-//             </div>
-//         )
-//     }
-// }
-const ChatInput = () => {
-    const [message, setMessage] = useState( '' );
-    
-    // const onKeyPress = (e) => {
-    //     // if(e.key === 'Enter'){
-    //     //     e.preventDefault(); // Ensure it is only this code that runs
-    //     //     setMessage("")
-    //     // }
-    // }
-
-    const onKeyDown = (e) => {
-        const keyCode = e.which || e.keyCode;
-
-        // 13 represents the Enter key
-        if (keyCode === 13 && !e.shiftKey) {
-            e.preventDefault();
-            setMessage("")
-        }
-    }
-
-    return (
-        // onKeyPress={(e) => onKeyPress(e)}
-      <div>
-        <textarea
-           class="chatinput"
-           value={message}
-           placeholder="Press ENTER to send, SHIFT + ENTER for new line"
-           onChange={e => setMessage(e.target.value)}
-           
-           onKeyDown={onKeyDown}
-         />
-      </div>
-    );
-  };
-class ChatInput2 extends React.Component {
-    
-    constructor(props) {
-        super(props)
-        this.setState({inputVal : ""})
-    }
-
-    handleUserInput(e) {
-        this.setState(this.setState({inputVal : e.target.value}));
-    };
-
-    render() {
-        return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line"
-                onKeyPress={(e)=>this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
-        
-    }
-    onKeyPress(e) {
-        if(e.key === 'Enter'){
-            e.preventDefault(); // Ensure it is only this code that runs
-            this.setState({inputVal : ""});
-        }
-    }
-}
-export default ChatWindow;

sports-matcher/src/Contact.js

@@ -1,38 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css';
-
-class Contact extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            selected : this.props.selected
-        }
-    }
-    onClick() {
-        // This toggling of the contact selection is for demo purposes only
-        // Once backend is implemented, only one contact can be selected
-        if (this.state.selected === "false") {
-            this.setState({selected : "true"})
-        } else {
-            this.setState({selected : "false"})
-        }
-        
-    }
-    render() {
-        return (
-            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
-                        <div class="profilepiccontainer">
-                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
-                                alt="profile" />
-                        </div>
-                        <div class="profilenamecontainer">
-                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
-                        </div>
-            </div>
-        )
-    }
-}
-
-export default Contact;

sports-matcher/src/SignIn.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Link } from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+
+export default function SignIn() {
+  return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
+            <AccountCircleIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box component="form" noValidate sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </Button>
+            <Link href="/sign-up" underline="always">
+            {"Don't have an account?"}
+            </Link>
+            </Box>
+            </Box>
+            </Container>
+            )}

sports-matcher/src/SignUp.js

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Link } from '@mui/material';
+import { Grid } from '@mui/material';
+
+export default function SignUp() {
+  return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'info.main' }}>
+            <AccountBoxIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign up
+          </Typography>
+          <Box component="form" noValidate sx={{ mt: 1 }}>
+          <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoComplete="given-name"
+                  name="firstName"
+                  required
+                  fullWidth
+                  id="firstName"
+                  label="First Name"
+                  autoFocus
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  required
+                  fullWidth
+                  id="lastName"
+                  label="Last Name"
+                  name="lastName"
+                  autoComplete="family-name"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  name="email"
+                  autoComplete="email"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  name="password"
+                  label="Password"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
+                />
+              </Grid>
+            </Grid>
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color='info'
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign Up
+            </Button>
+            <Link href="/sign-in" underline="always">
+            {'Already have an account?'}
+            </Link>
+            </Box>
+            </Box>
+            </Container>
+            )}

sports-matcher/src/chats.css

@@ -1,108 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-.chatcomponent > * {
-    display: inline-block;
-}
-.contact {
-    border-style: solid;
-    border-width: 1px;
-    border-bottom: 1px;
-    border-color:rgb(75, 75, 75);
-
-    background-color: rgb(80, 80, 80);
-    height: 70px;
-
-    user-select: none;
-}
-.contact.dark {
-    background-color: black;
-}
-.contactlist {
-    height: 500px;
-    width: 200px;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    border-radius: 2%;
-    background: rgb(48, 45, 45);
-    overflow-y: scroll;
-    overflow-x: hidden;
-
-    text-align: center;
-}
-.messagelist {
-    height: 400px;
-    width: 800px;
-    top: 0px;
-    left: 200px;
-
-    position: absolute;
-    background-color: rgb(80, 80, 80);
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-.messagelist > * {
-    display: block;
-}
-.profilepiccontainer {
-    height: 60px;
-    width: 60px;
-    margin-top: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    float: left;
-}
-.profilepic {
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
-}
-.profilenamecontainer {
-    text-align: center;
-    padding: 7%;
-}
-.profilename {
-    color: white;
-}
-.chatbubble {
-	margin-top: 20px;
-    margin-left: 20px;
-    display: inline-block;
-    position: relative;
-	width: auto;
-	height: auto;
-    padding: 10px;
-	
-    border-radius: 10px;
-}
-.left {
-    background-color: rgba(0, 57, 163, 0.637);
-    margin-right: 35px;
-    color: white;
-    float: auto;
-}
-.right {
-    background-color: khaki;
-    color: black;
-    margin-right: 35px;
-    float: right;
-}
-.chatbubble-container {
-    width: 800px;
-    height: auto;
-    float: left;
-}
-.chatinput {
-    background-color: rgb(75, 75, 75);
-    top: 400px;
-    left: 200px;
-    position: absolute;
-
-    height: 92px;
-    width: 793px;
-
-    color: antiquewhite;
-
-    border-width: 2px;
-    border-color: rgb(48, 45, 45);
-}

sports-matcher/src/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root')
 );