ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Began mass reorganizing of project and code structure.

Browse Source
This commit is contained in:
Harrison Deng 2022-03-07 21:09:52 -06:00
parent 1e62ba70d1
commit eea74dab09
32 changed files with 138 additions and 888 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sports-matcher/package.json
View File

@ -5,17 +5,15 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.8.1", "@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.4", "@mui/icons-material": "^5.5.0",
"@mui/material": "^5.4.4", "@mui/material": "^5.5.0",
"@testing-library/jest-dom": "^5.16.2", "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3", "@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^2.2.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.2.2",
"react-scripts": "^5.0.0", "react-scripts": "5.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

0
sports-matcher/public/chief.jpg → sports-matcher/public/fakedata/profiles/pictures/chief.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 244 KiB

0
sports-matcher/public/freeman.jpg → sports-matcher/public/fakedata/profiles/pictures/freeman.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

0
sports-matcher/public/shogun.jpg → sports-matcher/public/fakedata/profiles/pictures/shogun.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

6
sports-matcher/public/index.html
View File

@ -24,12 +24,6 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

8
sports-matcher/src/Admin.css
View File

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

258
sports-matcher/src/Admin.js
View File

@ -1,258 +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';
import Navbar from './Navbar';
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>;
}
matchDeleteButton() {
return <Button onClick={() => {
alert('Match 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.matchDeleteButton()}</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>
<Navbar></Navbar>
<h1 className='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

41
sports-matcher/src/App.js
View File

@ -1,25 +1,32 @@
import './App.css'; import './css/App.css';
import { Routes, Route, Link } from "react-router-dom"; import { Route, Routes } from 'react-router-dom';
import SignIn from './SignIn'; import HomePage from './pages/HomePage';
import SignUp from './SignUp'; import { Component, createContext } from 'react';
import Admin from './Admin'; import Navbar from './components/Navbar';
import Home from './Home'; import ChatPage from './pages/ChatPage';
import ChatWindow from './ChatWindow';
import UserDashboard from "./UserDashboard";
function App() { class App extends Component {
constructor(props) {
super(props);
this.AuthContext = createContext()
this.AuthState = {
authenticated: false
}
}
render() {
return ( return (
<div className="App"> <div className='App'>
<this.AuthContext.Provider value={this.AuthState} >
<Navbar />
<Routes> <Routes>
<Route path="" element={<Home />} /> <Route path='/' element={<HomePage />} />
<Route path="dashboard" element={<UserDashboard />} /> <Route path='/chat-page' element={<ChatPage />} />
<Route path="sign-in" element={<SignIn />} /> <Route path='/' element={<HomePage />} />
<Route path="sign-up" element={<SignUp />} />
<Route path="admin" element={<Admin />} />
<Route path="chat-window" element={<ChatWindow />} />
</Routes> </Routes>
</div> </this.AuthContext.Provider>
</div >
); );
}
} }
export default App; export default App;

20
sports-matcher/src/CardSuggestedMatches.js
View File

@ -1,20 +0,0 @@
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>
);
}

18
sports-matcher/src/Chat.js
View File

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

65
sports-matcher/src/Filter.js
View File

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

4
sports-matcher/src/Home.css
View File

@ -1,4 +0,0 @@
h1, h2{
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

46
sports-matcher/src/Home.js
View File

@ -1,46 +0,0 @@
import * as React from 'react';
import Homebar from './Homebar';
import { Carousel } from 'react-bootstrap';
import './Home.css';
export default function Home() {
return(
<React.Fragment>
<Homebar></Homebar>
<Carousel>
<Carousel.Item>
<img
src='https://d39l2hkdp2esp1.cloudfront.net/img/photo/148976/148976_00_2x.jpg'
alt="Connect Slide"
style={{ height: '680px', width: '2000px'}}
/>
<Carousel.Caption>
<h1>Connect</h1>
<h2>Connect with other athletes in your area!</h2>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
src='https://www.groovypost.com/wp-content/uploads/2021/08/sports-calendar-featured.jpg'
alt="Schedule Slide"
style={{ height: '680px', width: '2000px' }}
/>
<Carousel.Caption>
<h1>Schedule</h1>
<h2>Schedule sport meets with other athletes!</h2>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
src='https://i.pinimg.com/736x/dd/80/c3/dd80c3136a96c2fbf6004aef8e9619f3.jpg'
alt="Rent Slide"
style={{ height: '680px', width: '2000px' }}
/>
<Carousel.Caption>
<h1>Rent</h1>
<h2>Rent sports equipment from other athletes!</h2>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</React.Fragment>
)
}

44
sports-matcher/src/Homebar.js
View File

@ -1,44 +0,0 @@
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom';
export default function Navbar(){
const navigate = useNavigate();
return (
<AppBar position="static" sx={{background: '#00226D'}}>
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
variant="h6"
noWrap
component="div"
sx={{ mr: 2, fontSize: '200%', textAlign: 'center', flexGrow: 1, marginLeft: '10%'}}
>
Sports Matcher
</Typography>
<Box sx={{display: { xs: 'none', md: 'flex' }}}>
<Button
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
onClick={() => navigate('sign-up')}
>
Sign Up
</Button>
<Button
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
onClick={() => navigate('sign-in')}
>
Sign In
</Button>
</Box>
</Toolbar>
</Container>
</AppBar>
);
};

31
sports-matcher/src/ListSuggestedMatch.js
View File

@ -1,31 +0,0 @@
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 { Button, 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"}
<Button size="Medium">Participate</Button>
</React.Fragment>
}
/>
</ListItem>);
}

19
sports-matcher/src/MatchesList.js
View File

@ -1,19 +0,0 @@
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" />
<ListSuggestedMatch></ListSuggestedMatch>
<Divider variant="inset" component="li" />
<ListSuggestedMatch></ListSuggestedMatch>
<Divider variant="inset" component="li" />
<ListSuggestedMatch></ListSuggestedMatch>
<Divider variant="inset" component="li" />
</List>
);
}

21
sports-matcher/src/ReportForm.js
View File

@ -1,21 +0,0 @@
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>
);
}

10
sports-matcher/src/SearchBar.js
View File

@ -1,10 +0,0 @@
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>
</div>
);
}

80
sports-matcher/src/SignIn.js
View File

@ -1,80 +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';
import { useNavigate } from 'react-router-dom';
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('/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">
{"Don't have an account?"}
</Link>
</Box>
</Box>
</Container>
)
}

92
sports-matcher/src/SignUp.js
View File

@ -1,92 +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';
import { useNavigate } from 'react-router-dom';
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>
)}

27
sports-matcher/src/UserDashboard.js
View File

@ -1,27 +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';
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>
</div>
);
}

18
sports-matcher/src/components/Chat.js Normal file
View File

@ -0,0 +1,18 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import '../css/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;

8
sports-matcher/src/Contact.js → sports-matcher/src/components/Contact.js
View File

@ -1,22 +1,22 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ /* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react'; import React from 'react';
import './chats.css'; import '../css/chats.css';
class Contact extends React.Component { class Contact extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
selected : this.props.selected selected: this.props.selected
} }
} }
onClick() { onClick() {
// This toggling of the contact selection is for demo purposes only // This toggling of the contact selection is for demo purposes only
// Once backend is implemented, only one contact can be selected // Once backend is implemented, only one contact can be selected
if (this.state.selected === "false") { if (this.state.selected === "false") {
this.setState({selected : "true"}) this.setState({ selected: "true" })
} else { } else {
this.setState({selected : "false"}) this.setState({ selected: "false" })
} }
} }

9
sports-matcher/src/Navbar.js → sports-matcher/src/components/Navbar.js
View File

@ -95,17 +95,20 @@ export default function Navbar() {
Sports Matcher Sports Matcher
</Typography> </Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}> <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
{pages.map((page) => (
<Button <Button
onClick={() => { navigate("/dashboard") }} key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }} sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
> >
Dashboard {page}
</Button> </Button>
))}
</Box> </Box>
<Box sx={{ flexGrow: 0, marginRight: '1%' }}> <Box sx={{ flexGrow: 0, marginRight: '1%' }}>
<Tooltip title="Chats"> <Tooltip title="Chats">
<IconButton onClick={() => { navigate('/chat-window') }} sx={{ p: 0 }}> <IconButton onClick={() => { navigate('/chat-page') }} sx={{ p: 0 }}>
<ForumIcon sx={{ color: 'white' }}></ForumIcon> <ForumIcon sx={{ color: 'white' }}></ForumIcon>
</IconButton> </IconButton>
</Tooltip> </Tooltip>

0
sports-matcher/src/App.css → sports-matcher/src/css/App.css
View File

0
sports-matcher/src/chats.css → sports-matcher/src/css/chats.css
View File

6
sports-matcher/src/index.js
View File

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

54
sports-matcher/src/matchinfo.js
View File

@ -1,54 +0,0 @@
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>
);
}

40
sports-matcher/src/ChatWindow.js → sports-matcher/src/pages/ChatPage.js
View File

@ -1,17 +1,15 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ /* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react'; import React from 'react';
import './chats.css' import '../css/chats.css'
import Chat from './Chat' import Chat from '../components/Chat'
import Contact from './Contact' import Contact from '../components/Contact'
import { useState } from "react"; import { useState } from "react";
import Navbar from './Navbar';
class ChatWindow extends React.Component { class ChatPage extends React.Component {
render() { render() {
return ( return (
<div class="chatcomponent"> <div className="chatcomponent">
<Navbar></Navbar>
<UserList /> <UserList />
<MessageList /> <MessageList />
<ChatInput /> <ChatInput />
@ -24,11 +22,11 @@ class UserList extends React.Component {
render() { render() {
return ( return (
<div class="contactlist"> <div className="contactlist" >
<Contact pfpsrc="./chief.jpg" name="Master Chief"/> <Contact pfpsrc="../fakedata/profiles/pictures/chief.jpg" name="Master Chief" />
<Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" /> <Contact pfpsrc="../fakedata/profiles/pictures/freeman.jpg" name="Gordon Freeman" />
<Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" /> <Contact pfpsrc="../fakedata/profiles/pictures/shogun.jpg" name="Raiden Shogun" selected="true" />
</div> </div >
) )
} }
} }
@ -37,7 +35,7 @@ class MessageList extends React.Component {
render() { render() {
return ( return (
<div class="messagelist"> <div class="messagelist">
<Chat message="Got time for tennis this week, Raiden?" side="right"/> <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="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="Aiight, see you at 4" side="right" />
<Chat message="As you wish." side="left" /> <Chat message="As you wish." side="left" />
@ -56,7 +54,7 @@ class MessageList extends React.Component {
// } // }
// } // }
const ChatInput = () => { const ChatInput = () => {
const [message, setMessage] = useState( '' ); const [message, setMessage] = useState('');
// const onKeyPress = (e) => { // const onKeyPress = (e) => {
// // if(e.key === 'Enter'){ // // if(e.key === 'Enter'){
@ -88,28 +86,28 @@ const ChatInput = () => {
/> />
</div> </div>
); );
}; };
class ChatInput2 extends React.Component { class ChatInput2 extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.setState({inputVal : ""}) this.setState({ inputVal: "" })
} }
handleUserInput(e) { handleUserInput(e) {
this.setState(this.setState({inputVal : e.target.value})); this.setState(this.setState({ inputVal: e.target.value }));
}; };
render() { render() {
return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line" 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) => this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
} }
onKeyPress(e) { onKeyPress(e) {
if(e.key === 'Enter'){ if (e.key === 'Enter') {
e.preventDefault(); // Ensure it is only this code that runs e.preventDefault(); // Ensure it is only this code that runs
this.setState({inputVal : ""}); this.setState({ inputVal: "" });
} }
} }
} }
export default ChatWindow; export default ChatPage;

9
sports-matcher/src/pages/DashboardPage.js Normal file
View File

@ -0,0 +1,9 @@
import { Component } from "react";
class DashboardPage extends Component {
render() {
return <h1>Hello, this is the dashboard.</h1>;
}
}
export default DashboardPage;

9
sports-matcher/src/pages/HomePage.js Normal file
View File

@ -0,0 +1,9 @@
import { Component } from "react";
class HomePage extends Component {
render() {
return <h1>Hello, World</h1>;
}
}
export default HomePage;

9
sports-matcher/src/pages/UserProfilePage.js Normal file
View File

@ -0,0 +1,9 @@
import { Component } from "react";
class UserProfilePage extends Component {
render() {
return <h1>Hello, this is the user profile.</h1>;
}
}
export default UserProfilePage;