Changed to showing visible participate button.

Develop

README.md

@@ -1 +1,21 @@
-# team58
+# team58
+
+Sports Matcher is an application that allows users to connect with other athletes, schedule sports meets, and rent sports equipment!
+
+**Built Using**
+
+It is built using the React framework and the Material UI and React Bootstrap libraries.
+
+**Instructions**
+
+To use Sports Matcher, navigate to the sports-matcher directory in the repository and run the commands `npm i` and `npm start` in order. This should launch a localhost window in your browser which shows the homepage.
+
+From here you can Sign In to your account using the username "admin" and password "admin" OR using the username "user" and password "user" as specified in the handout.
+
+Signing in as 'admin' will take you to the admin page. You will be able to see a list of current matches, users and suspended users. You will need to click the appropriate button for the correct table to appear.
+
+Every page has a navbar at the top. There is a chat and profile icon. Clicking on the chat icon will take you to the chat page. From the profile icon you can sign out.
+
+
+
+

sports-matcher/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json

sports-matcher/src/Admin.css

@@ -1,4 +1,8 @@
 
 .MainTable {
     padding : 20px;
+}
+
+.Title {
+    margin-top: 40px;
 }

sports-matcher/src/Admin.js

@@ -4,6 +4,7 @@ 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';
+import Navbar from './Navbar';
 
 
 
@@ -36,14 +37,14 @@ class AdminTable extends React.Component {
 
     }
 
-    EditButton() {
+    editButton() {
         return <Button onClick={() => {
             alert('clicked');
         }} variant="contained">Edit</Button>;
 
     }
 
-    DeleteButtonClick() {
+    deleteButtonClick() {
         return (
             <Container component="main" maxWidth="xs">
 
@@ -55,20 +56,27 @@ class AdminTable extends React.Component {
         )
     }
 
-    NewDeleteButtonClick() {
+    newDeleteButtonClick() {
         return (<form onsubmit="console.log('You clicked submit.'); return false">
             <button type="submit">Submit</button>
         </form>)
     }
 
-    DeleteButton() {
+    deleteButton() {
         return <Button onClick={() => {
             alert('User deleted.');
         }} variant="contained">Delete</Button>;
 
     }
 
-    PardonButton() {
+    matchDeleteButton() {
+        return <Button onClick={() => {
+            alert('Match deleted.');
+        }} variant="contained">Delete</Button>;
+
+    }
+
+    pardonButton() {
         return <Button onClick={() => {
             alert('User pardoned.');
         }} variant="contained">Pardon</Button>;
@@ -85,8 +93,8 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -102,9 +110,9 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
-                    <TableCell>{this.PardonButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
+                    <TableCell>{this.pardonButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -120,8 +128,8 @@ class AdminTable extends React.Component {
                     <TableCell>{date}</TableCell>
                     <TableCell>{location}</TableCell>
                     <TableCell>{description}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.matchDeleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -208,7 +216,8 @@ class AdminTable extends React.Component {
     render() {
         return (
             <div>
-                <h1 id='title'>Administration</h1>
+                <Navbar></Navbar>
+                <h1 className='Title'>Administration</h1>
                 <div className='ButtonList'>
                     <Button onClick={() => {
                         this.setState({ buttonColors: ['black', '', ''] });

sports-matcher/src/App.js

@@ -2,14 +2,21 @@ import './App.css';
 import { Routes, Route, Link } from "react-router-dom";
 import SignIn from './SignIn';
 import SignUp from './SignUp';
+import Admin from './Admin';
 import Home from './Home';
+import ChatWindow from './ChatWindow';
+import UserDashboard from "./UserDashboard";
+
 function App() {
   return (
     <div className="App">
       <Routes>
         <Route path="" element={<Home />} />
+        <Route path="dashboard" element={<UserDashboard />} />
         <Route path="sign-in" element={<SignIn />} />
         <Route path="sign-up" element={<SignUp />} />
+        <Route path="admin" element={<Admin />} />
+        <Route path="chat-window" element={<ChatWindow />} />
       </Routes>
     </div>
   );

sports-matcher/src/ChatWindow.js

@@ -5,11 +5,13 @@ import './chats.css'
 import Chat from './Chat'
 import Contact from './Contact'
 import { useState } from "react";
+import Navbar from './Navbar';
 
 class ChatWindow extends React.Component {
     render() {
         return (
             <div class="chatcomponent">
+                <Navbar></Navbar>
                 <UserList />
                 <MessageList />
                 <ChatInput />

sports-matcher/src/ListSuggestedMatch.js

@@ -3,7 +3,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import SportsTennisIcon from '@mui/icons-material/SportsTennis';
-import { ListItemIcon } from '@mui/material';
+import { Button, ListItemIcon } from '@mui/material';
 
 export default function ListSuggestedMatch() {
     return (<ListItem alignItems="flex-start">
@@ -23,6 +23,7 @@ export default function ListSuggestedMatch() {
                         12:30PM - 123 Alphabet St. Toronto ON.
                     </Typography>
                     {" — John Smith, Alfred Baker, and Samantha Wright"}
+                    <Button size="Medium">Participate</Button>
                 </React.Fragment>
             }
         />

sports-matcher/src/Navbar.js

@@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
 
 const pages = ['Dashboard'];
 
-export default function Navbar(){
+export default function Navbar() {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -38,7 +38,7 @@ export default function Navbar(){
   const navigate = useNavigate();
 
   return (
-    <AppBar position="static" sx={{background: '#00226D'}}>
+    <AppBar position="static" sx={{ background: '#00226D' }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Typography
@@ -95,28 +95,25 @@ export default function Navbar(){
             Sports Matcher
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
-            {pages.map((page) => (
-              <Button
-                key={page}
-                onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
-              >
-                {page}
-              </Button>
-            ))}
+            <Button
+              onClick={() => { navigate("/dashboard") }}
+              sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
+            >
+              Dashboard
+            </Button>
           </Box>
 
-          <Box sx={{ flexGrow: 0, marginRight: '1%'}}>
-           <Tooltip title="Chats">
-              <IconButton sx={{ p: 0}}>
-                <ForumIcon sx={{color: 'white'}}></ForumIcon>
+          <Box sx={{ flexGrow: 0, marginRight: '1%' }}>
+            <Tooltip title="Chats">
+              <IconButton onClick={() => { navigate('/chat-window') }} sx={{ p: 0 }}>
+                <ForumIcon sx={{ color: 'white' }}></ForumIcon>
               </IconButton>
             </Tooltip>
-            </Box>
-            <Box sx={{ flexGrow: 0 }}>
+          </Box>
+          <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}>
-                <AccountCircle sx={{color: 'white'}}></AccountCircle>
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <AccountCircle sx={{ color: 'white' }}></AccountCircle>
               </IconButton>
             </Tooltip>
             <Menu
@@ -135,15 +132,15 @@ export default function Navbar(){
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-                <MenuItem onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">Profile</Typography>
-                </MenuItem>
-                <MenuItem onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">Account</Typography>
-                </MenuItem>
-                <MenuItem onClick={() => navigate('sign-in')}>
-                  <Typography textAlign="center">Sign Out</Typography>
-                </MenuItem>
+              <MenuItem onClick={handleCloseUserMenu}>
+                <Typography textAlign="center">Profile</Typography>
+              </MenuItem>
+              <MenuItem onClick={handleCloseUserMenu}>
+                <Typography textAlign="center">Account</Typography>
+              </MenuItem>
+              <MenuItem onClick={() => navigate('/sign-in')}>
+                <Typography textAlign="center">Sign Out</Typography>
+              </MenuItem>
             </Menu>
           </Box>
         </Toolbar>

sports-matcher/src/SignIn.js

@@ -14,62 +14,67 @@ export default function SignIn() {
   const navigate = useNavigate();
   const handleSubmit = (event) => {
     event.preventDefault();
+    // For Phase 1, we have hardcoded the usernames and passwords as specified in the handout
+    // For the upcoming phases, this will be changed to secure authentication
     const data = new FormData(event.currentTarget);
     // eslint-disable-next-line no-console
-    if(data.get('username') == "admin" && data.get('password') == "admin"){
-      navigate('/');
+    if (data.get('username') === "admin" && data.get('password') === "admin") {
+      navigate('/admin');
+    } else if (data.get('username') === "user" && data.get('password') === "user") {
+      navigate('/chat-window')
     }
   };
   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 }} onSubmit={handleSubmit}>
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              id="username"
-              label="Username"
-              name="username"
-              autoComplete="username"
-              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">
+    <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 }} onSubmit={handleSubmit}>
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="Username"
+            name="username"
+            autoComplete="username"
+            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>
-            )}
+          </Link>
+        </Box>
+      </Box>
+    </Container>
+  )
+}

sports-matcher/src/UserDashboard.js

@@ -12,11 +12,13 @@ import Filter from "./Filter";
 import SearchBar from "./SearchBar";
 import { useNavigate } from 'react-router-dom';
 import MatchesList from './MatchesList';
+import Navbar from './Navbar';
 
 export default function UserDashboard() {
   const navigate = useNavigate();
   return (
     <div>
+      <Navbar></Navbar>
       <SearchBar></SearchBar>
       <Filter></Filter>
       <MatchesList></MatchesList>

sports-matcher/src/chats.css

@@ -10,7 +10,7 @@
     border-color:rgb(75, 75, 75);
 
     background-color: rgb(80, 80, 80);
-    height: 70px;
+    height: 80px;
 
     user-select: none;
 }
@@ -18,9 +18,9 @@
     background-color: black;
 }
 .contactlist {
-    height: 500px;
-    width: 200px;
-    top: 0;
+    height: 90%;
+    width: 13%;
+    top: 10%;
     left: 0;
     box-sizing: border-box;
     border-radius: 2%;
@@ -28,13 +28,14 @@
     overflow-y: scroll;
     overflow-x: hidden;
 
+    position: absolute;
     text-align: center;
 }
 .messagelist {
-    height: 400px;
-    width: 800px;
-    top: 0px;
-    left: 200px;
+    height: 70%;
+    width: 87%;
+    top: 10%;
+    left: 13%;
 
     position: absolute;
     background-color: rgb(80, 80, 80);
@@ -77,29 +78,29 @@
 }
 .left {
     background-color: rgba(0, 57, 163, 0.637);
-    margin-right: 35px;
+    margin-left: 20px;
     color: white;
-    float: auto;
+    float: left;
 }
 .right {
     background-color: khaki;
     color: black;
-    margin-right: 35px;
+    margin-right: 20px;
     float: right;
 }
 .chatbubble-container {
-    width: 800px;
+    width: 100%;
     height: auto;
     float: left;
 }
 .chatinput {
     background-color: rgb(75, 75, 75);
-    top: 400px;
-    left: 200px;
+    top: 80%;
+    left: 13%;
     position: absolute;
 
-    height: 92px;
-    width: 793px;
+    height: 20%;
+    width: 87%;
 
     color: antiquewhite;