Removed package-lock.json.

package-lock.json

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

sports-matcher/package.json

@@ -12,7 +12,6 @@
     "@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

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

sports-matcher/src/Admin.js

@@ -1,249 +0,0 @@
-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,16 +1,15 @@
 import './App.css';
-import { Routes, Route, Link } from "react-router-dom";
-import SignIn from './SignIn';
-import SignUp from './SignUp';
-import Admin from './Admin';
+import Filter from './Filter';
+import MatchesList from './MatchesList';
+import ReportForm from "./ReportForm";
+import SearchBar from './SearchBar';
+
 function App() {
   return (
     <div className="App">
-      <Routes>
-        <Route path="sign-in" element={<SignIn />} />
-        <Route path="sign-up" element={<SignUp />} />
-        <Route path="admin" element={<Admin />} />
-      </Routes>
+      <main>
+        <SearchBar />
+      </main>
     </div>
   );
 }

sports-matcher/src/CardSuggestedMatches.js

@@ -0,0 +1,20 @@
+import { Stack, Typography } from "@mui/material";
+import MatchInfo from "./matchinfo";
+
+export default function CardSuggestedMatches() {
+    return (
+        <div style={{ padding: 25 }}>
+            <Typography variant="h4" component="div">
+                Suggested
+            </Typography>
+            <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+            </Stack >
+        </div>
+    );
+}

sports-matcher/src/Filter.js

@@ -0,0 +1,65 @@
+import { InputLabel, MenuItem, Select, TextField, FormControl } from "@mui/material";
+
+export default function Filter() {
+    return (
+        <div>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Sport</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Tennis</MenuItem>
+                    <MenuItem value={10}>Soccer</MenuItem>
+                    <MenuItem value={20}>Golf</MenuItem>
+                    <MenuItem value={30}>Basketball</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Date" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Time" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Location" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Radius" variant="outlined" />
+            </FormControl>
+        </div>
+    );
+}

sports-matcher/src/ListSuggestedMatch.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+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';
+
+export default function ListSuggestedMatch() {
+    return (<ListItem alignItems="flex-start">
+        <ListItemIcon>
+            <SportsTennisIcon />
+        </ListItemIcon>
+        <ListItemText
+            primary="Tennis - King of The Court"
+            secondary={
+                <React.Fragment>
+                    <Typography
+                        sx={{ display: 'inline' }}
+                        component="span"
+                        variant="body2"
+                        color="text.primary"
+                    >
+                        12:30PM - 123 Alphabet St. Toronto ON.
+                    </Typography>
+                    {" — John Smith, Alfred Baker, and Samantha Wright"}
+                </React.Fragment>
+            }
+        />
+    </ListItem>);
+}

sports-matcher/src/MatchesList.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListSuggestedMatch from './ListSuggestedMatch';
+
+export default function MatchesList() {
+    return (
+        <List sx={{ width: '100%' }}>
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+            {/* TODO: Loop to populate */}
+        </List>
+    );
+}

sports-matcher/src/ReportForm.js

@@ -0,0 +1,21 @@
+import FormControl from "@mui/material/FormControl";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import TextField from "@mui/material/TextField";
+
+export default function ReportForm() {
+    return (
+        <FormControl sx={{ width: '80%' }}>
+            <OutlinedInput
+                sx={{ margin: 1 }}
+                placeholder="Please enter user email." />
+            <TextField
+                id="outlined-multiline-static"
+                label="Multiline"
+                multiline
+                rows={5}
+                sx={{ margin: 1 }}
+                defaultValue="Reason for suspension..."
+            />
+        </FormControl>
+    );
+}

sports-matcher/src/SearchBar.js

@@ -0,0 +1,11 @@
+import { Button, TextField } from "@mui/material";
+
+export default function SearchBar() {
+    return (
+        <div>
+            <TextField sx={{ margin: 1 }} id="standard-basic" label="Search" variant="outlined" />
+            <Button sx={{ margin: 1 }} variant="outlined">Search</Button>
+            <Button sx={{ margin: 1 }} variant="outlined">Filter</Button>
+        </div>
+    );
+}

sports-matcher/src/SignIn.js

@@ -1,65 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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/index.js

@@ -1,14 +1,13 @@
 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(
-  <BrowserRouter>
+  <React.StrictMode>
     <App />
-  </BrowserRouter>,
+  </React.StrictMode>,
   document.getElementById('root')
 );
 

sports-matcher/src/matchinfo.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import { List, ListItemAvatar } from '@mui/material';
+import { ListItem } from '@mui/material';
+import { ListItemText } from '@mui/material';
+import PeopleIcon from '@mui/icons-material/People';
+import SportsIcon from '@mui/icons-material/Sports';
+import MapIcon from '@mui/icons-material/Map';
+import EventIcon from '@mui/icons-material/Event';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export default function MatchInfo() {
+    return (
+        <Card sx={{ maxWidth: 400 }}>
+            <CardContent>
+                <Typography sx={{ fontSize: 24 }} component="div">
+                    King of the Court!
+                </Typography>
+                <List>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <SportsIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Sport" secondary="Tennis" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <PeopleIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Participants" secondary="John Smith, Bob Williams, and Candice Baker" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <MapIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Location" secondary="Athletic Center - 55 Harbord St, Toronto, ON M5S 2W6" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <EventIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Time" secondary="1:00PM Tomorrow (January 13th)" />
+                    </ListItem>
+                </List>
+            </CardContent>
+            <CardActions>
+                <Button size="Medium">Participate</Button>
+            </CardActions>
+        </Card>
+    );
+}