Began mass reorganizing of project and code structure.
This commit is contained in:
parent
1e62ba70d1
commit
eea74dab09
@ -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": {
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -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>
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
|
|
||||||
.MainTable {
|
|
||||||
padding : 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Title {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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 {
|
||||||
return (
|
constructor(props) {
|
||||||
<div className="App">
|
super(props);
|
||||||
<Routes>
|
this.AuthContext = createContext()
|
||||||
<Route path="" element={<Home />} />
|
this.AuthState = {
|
||||||
<Route path="dashboard" element={<UserDashboard />} />
|
authenticated: false
|
||||||
<Route path="sign-in" element={<SignIn />} />
|
}
|
||||||
<Route path="sign-up" element={<SignUp />} />
|
}
|
||||||
<Route path="admin" element={<Admin />} />
|
render() {
|
||||||
<Route path="chat-window" element={<ChatWindow />} />
|
return (
|
||||||
</Routes>
|
<div className='App'>
|
||||||
</div>
|
<this.AuthContext.Provider value={this.AuthState} >
|
||||||
);
|
<Navbar />
|
||||||
|
<Routes>
|
||||||
|
<Route path='/' element={<HomePage />} />
|
||||||
|
<Route path='/chat-page' element={<ChatPage />} />
|
||||||
|
<Route path='/' element={<HomePage />} />
|
||||||
|
</Routes>
|
||||||
|
</this.AuthContext.Provider>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
h1, h2{
|
|
||||||
-webkit-text-stroke-width: 1px;
|
|
||||||
-webkit-text-stroke-color: black;
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -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>);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
)}
|
|
||||||
@ -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
18
sports-matcher/src/components/Chat.js
Normal 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;
|
||||||
@ -1,35 +1,35 @@
|
|||||||
/* 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" })
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div class={this.state.selected === "true" ? "contact dark" : "contact"}>
|
<div class={this.state.selected === "true" ? "contact dark" : "contact"}>
|
||||||
<div class="profilepiccontainer">
|
<div class="profilepiccontainer">
|
||||||
<img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()}
|
<img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()}
|
||||||
alt="profile" />
|
alt="profile" />
|
||||||
</div>
|
</div>
|
||||||
<div class="profilenamecontainer">
|
<div class="profilenamecontainer">
|
||||||
<div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
|
<div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -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%' }}>
|
||||||
<Button
|
{pages.map((page) => (
|
||||||
onClick={() => { navigate("/dashboard") }}
|
<Button
|
||||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
|
key={page}
|
||||||
>
|
onClick={handleCloseNavMenu}
|
||||||
Dashboard
|
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
|
||||||
</Button>
|
>
|
||||||
|
{page}
|
||||||
|
</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>
|
||||||
@ -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(
|
||||||
<BrowserRouter>
|
<React.StrictMode>
|
||||||
<App />
|
<BrowserRouter>
|
||||||
</BrowserRouter>,
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</React.StrictMode>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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 />
|
||||||
@ -21,14 +19,14 @@ class ChatWindow extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class UserList extends React.Component {
|
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,11 +35,11 @@ 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" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -56,8 +54,8 @@ 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'){
|
||||||
// // e.preventDefault(); // Ensure it is only this code that runs
|
// // e.preventDefault(); // Ensure it is only this code that runs
|
||||||
@ -77,39 +75,39 @@ const ChatInput = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
// onKeyPress={(e) => onKeyPress(e)}
|
// onKeyPress={(e) => onKeyPress(e)}
|
||||||
<div>
|
<div>
|
||||||
<textarea
|
<textarea
|
||||||
class="chatinput"
|
class="chatinput"
|
||||||
value={message}
|
value={message}
|
||||||
placeholder="Press ENTER to send, SHIFT + ENTER for new line"
|
placeholder="Press ENTER to send, SHIFT + ENTER for new line"
|
||||||
onChange={e => setMessage(e.target.value)}
|
onChange={e => setMessage(e.target.value)}
|
||||||
|
|
||||||
onKeyDown={onKeyDown}
|
onKeyDown={onKeyDown}
|
||||||
/>
|
/>
|
||||||
</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
9
sports-matcher/src/pages/DashboardPage.js
Normal 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
9
sports-matcher/src/pages/HomePage.js
Normal 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
9
sports-matcher/src/pages/UserProfilePage.js
Normal 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;
|
||||||
Loading…
x
Reference in New Issue
Block a user