diff --git a/sports-matcher/package.json b/sports-matcher/package.json index e8e0974..2f9a1cb 100644 --- a/sports-matcher/package.json +++ b/sports-matcher/package.json @@ -5,17 +5,15 @@ "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", - "@mui/icons-material": "^5.4.4", - "@mui/material": "^5.4.4", + "@mui/icons-material": "^5.5.0", + "@mui/material": "^5.5.0", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", - "bootstrap": "^5.1.3", "react": "^17.0.2", - "react-bootstrap": "^2.2.0", "react-dom": "^17.0.2", "react-router-dom": "^6.2.2", - "react-scripts": "^5.0.0", + "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/sports-matcher/public/chief.jpg b/sports-matcher/public/fakedata/profiles/pictures/chief.jpg similarity index 100% rename from sports-matcher/public/chief.jpg rename to sports-matcher/public/fakedata/profiles/pictures/chief.jpg diff --git a/sports-matcher/public/freeman.jpg b/sports-matcher/public/fakedata/profiles/pictures/freeman.jpg similarity index 100% rename from sports-matcher/public/freeman.jpg rename to sports-matcher/public/fakedata/profiles/pictures/freeman.jpg diff --git a/sports-matcher/public/shogun.jpg b/sports-matcher/public/fakedata/profiles/pictures/shogun.jpg similarity index 100% rename from sports-matcher/public/shogun.jpg rename to sports-matcher/public/fakedata/profiles/pictures/shogun.jpg diff --git a/sports-matcher/public/index.html b/sports-matcher/public/index.html index c87dbda..aa069f2 100644 --- a/sports-matcher/public/index.html +++ b/sports-matcher/public/index.html @@ -24,12 +24,6 @@ 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`. --> - React App diff --git a/sports-matcher/src/Admin.css b/sports-matcher/src/Admin.css deleted file mode 100644 index c09116c..0000000 --- a/sports-matcher/src/Admin.css +++ /dev/null @@ -1,8 +0,0 @@ - -.MainTable { - padding : 20px; -} - -.Title { - margin-top: 40px; -} \ No newline at end of file diff --git a/sports-matcher/src/Admin.js b/sports-matcher/src/Admin.js deleted file mode 100644 index cf200f2..0000000 --- a/sports-matcher/src/Admin.js +++ /dev/null @@ -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 ; - - } - - deleteButtonClick() { - return ( - - - Are you sure you want to delete this user? - - - ) - } - - newDeleteButtonClick() { - return (
- -
) - } - - deleteButton() { - return ; - - } - - matchDeleteButton() { - return ; - - } - - pardonButton() { - return ; - - } - - userTableData() { - return this.state.users.map((user) => { - const { id, username, name, email, phone } = user; - return ( - - {id} - {username} - {name} - {email} - {phone} - {this.deleteButton()} - {this.editButton()} - - ) - }) - } - - suspendedUserTableData() { - return this.state.suspendedUsers.map((user) => { - const { id, username, name, email, phone } = user - return ( - - {id} - {username} - {name} - {email} - {phone} - {this.deleteButton()} - {this.editButton()} - {this.pardonButton()} - - ) - }) - } - - matchTableData() { - return this.state.matches.map((match) => { - const { id, sport, date, location, description } = match - return ( - - {id} - {sport} - {date} - {location} - {description} - {this.matchDeleteButton()} - {this.editButton()} - - ) - }) - } - - matchTableHead() { - return ( - - - ID - Sport - Date - Location - Description - - - - - ); - - } - - suspendedUserTableHead() { - return ( - - - ID - Username - Name - Email - Phone - - - - - - ); - - } - - userTableHead() { - return ( - - - ID - Username - Name - Email - Phone - - - - - ); - - } - - - 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 ( -
- -

Administration

-
- - -
-
- - - {this.renderTableHead()} - - {this.renderTableData()} - -
- -
-
- ) - } -} - -export default AdminTable \ No newline at end of file diff --git a/sports-matcher/src/App.js b/sports-matcher/src/App.js index 69afc73..eea153f 100644 --- a/sports-matcher/src/App.js +++ b/sports-matcher/src/App.js @@ -1,25 +1,32 @@ -import './App.css'; -import { Routes, Route, Link } from "react-router-dom"; -import SignIn from './SignIn'; -import SignUp from './SignUp'; -import Admin from './Admin'; -import Home from './Home'; -import ChatWindow from './ChatWindow'; -import UserDashboard from "./UserDashboard"; +import './css/App.css'; +import { Route, Routes } from 'react-router-dom'; +import HomePage from './pages/HomePage'; +import { Component, createContext } from 'react'; +import Navbar from './components/Navbar'; +import ChatPage from './pages/ChatPage'; -function App() { - return ( -
- - } /> - } /> - } /> - } /> - } /> - } /> - -
- ); +class App extends Component { + constructor(props) { + super(props); + this.AuthContext = createContext() + this.AuthState = { + authenticated: false + } + } + render() { + return ( +
+ + + + } /> + } /> + } /> + + +
+ ); + } } export default App; diff --git a/sports-matcher/src/CardSuggestedMatches.js b/sports-matcher/src/CardSuggestedMatches.js deleted file mode 100644 index fceb9f1..0000000 --- a/sports-matcher/src/CardSuggestedMatches.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Stack, Typography } from "@mui/material"; -import MatchInfo from "./matchinfo"; - -export default function CardSuggestedMatches() { - return ( -
- - Suggested - - - - - - - - - -
- ); -} \ No newline at end of file diff --git a/sports-matcher/src/Chat.js b/sports-matcher/src/Chat.js deleted file mode 100644 index da3ac21..0000000 --- a/sports-matcher/src/Chat.js +++ /dev/null @@ -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 ( -
-
- {this.props.message} -
-
- ) - } -} - -export default Chat; \ No newline at end of file diff --git a/sports-matcher/src/Filter.js b/sports-matcher/src/Filter.js deleted file mode 100644 index 2ef2795..0000000 --- a/sports-matcher/src/Filter.js +++ /dev/null @@ -1,65 +0,0 @@ -import { InputLabel, MenuItem, Select, TextField, FormControl } from "@mui/material"; - -export default function Filter() { - return ( -
- - Sport - - - - Level - - - - Level - - - - - - - - - - - - - - - - - -
- ); -} \ No newline at end of file diff --git a/sports-matcher/src/Home.css b/sports-matcher/src/Home.css deleted file mode 100644 index 84dede7..0000000 --- a/sports-matcher/src/Home.css +++ /dev/null @@ -1,4 +0,0 @@ -h1, h2{ - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: black; -} \ No newline at end of file diff --git a/sports-matcher/src/Home.js b/sports-matcher/src/Home.js deleted file mode 100644 index c42e1fa..0000000 --- a/sports-matcher/src/Home.js +++ /dev/null @@ -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( - - - - - Connect Slide - -

Connect

-

Connect with other athletes in your area!

- - - - Schedule Slide - -

Schedule

-

Schedule sport meets with other athletes!

- - - - Rent Slide - -

Rent

-

Rent sports equipment from other athletes!

- - - - - ) -} \ No newline at end of file diff --git a/sports-matcher/src/Homebar.js b/sports-matcher/src/Homebar.js deleted file mode 100644 index 7f7e49f..0000000 --- a/sports-matcher/src/Homebar.js +++ /dev/null @@ -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 ( - - - - - Sports Matcher - - - - - - - - - ); -}; diff --git a/sports-matcher/src/ListSuggestedMatch.js b/sports-matcher/src/ListSuggestedMatch.js deleted file mode 100644 index a53e3e0..0000000 --- a/sports-matcher/src/ListSuggestedMatch.js +++ /dev/null @@ -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 ( - - - - - - 12:30PM - 123 Alphabet St. Toronto ON. - - {" — John Smith, Alfred Baker, and Samantha Wright"} - - - } - /> - ); -} \ No newline at end of file diff --git a/sports-matcher/src/MatchesList.js b/sports-matcher/src/MatchesList.js deleted file mode 100644 index d07e804..0000000 --- a/sports-matcher/src/MatchesList.js +++ /dev/null @@ -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 ( - - - - - - - - - - - ); -} diff --git a/sports-matcher/src/ReportForm.js b/sports-matcher/src/ReportForm.js deleted file mode 100644 index 03236c4..0000000 --- a/sports-matcher/src/ReportForm.js +++ /dev/null @@ -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 ( - - - - - ); -} \ No newline at end of file diff --git a/sports-matcher/src/SearchBar.js b/sports-matcher/src/SearchBar.js deleted file mode 100644 index 1dc2b86..0000000 --- a/sports-matcher/src/SearchBar.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Button, TextField } from "@mui/material"; - -export default function SearchBar() { - return ( -
- - -
- ); -} \ No newline at end of file diff --git a/sports-matcher/src/SignIn.js b/sports-matcher/src/SignIn.js deleted file mode 100644 index 0466472..0000000 --- a/sports-matcher/src/SignIn.js +++ /dev/null @@ -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 ( - - - - - - - - Sign in - - - - - - - {"Don't have an account?"} - - - - - ) -} \ No newline at end of file diff --git a/sports-matcher/src/SignUp.js b/sports-matcher/src/SignUp.js deleted file mode 100644 index 36f69c7..0000000 --- a/sports-matcher/src/SignUp.js +++ /dev/null @@ -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 ( - - - - - - - - Sign up - - - - - - - - - - - - - - - - - - - {'Already have an account?'} - - - - - )} \ No newline at end of file diff --git a/sports-matcher/src/UserDashboard.js b/sports-matcher/src/UserDashboard.js deleted file mode 100644 index 8f17e5e..0000000 --- a/sports-matcher/src/UserDashboard.js +++ /dev/null @@ -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 ( -
- - - - -
- ); -} \ No newline at end of file diff --git a/sports-matcher/src/components/Chat.js b/sports-matcher/src/components/Chat.js new file mode 100644 index 0000000..3cbcf84 --- /dev/null +++ b/sports-matcher/src/components/Chat.js @@ -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 ( +
+
+ {this.props.message} +
+
+ ) + } +} + +export default Chat; \ No newline at end of file diff --git a/sports-matcher/src/Contact.js b/sports-matcher/src/components/Contact.js similarity index 51% rename from sports-matcher/src/Contact.js rename to sports-matcher/src/components/Contact.js index ca1ca99..74903e8 100644 --- a/sports-matcher/src/Contact.js +++ b/sports-matcher/src/components/Contact.js @@ -1,35 +1,35 @@ /* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ import React from 'react'; -import './chats.css'; +import '../css/chats.css'; class Contact extends React.Component { constructor(props) { super(props) this.state = { - selected : this.props.selected + selected: this.props.selected } } onClick() { // This toggling of the contact selection is for demo purposes only // Once backend is implemented, only one contact can be selected if (this.state.selected === "false") { - this.setState({selected : "true"}) + this.setState({ selected: "true" }) } else { - this.setState({selected : "false"}) + this.setState({ selected: "false" }) } - + } render() { return (
-
- this.onClick()} - alt="profile" /> -
-
-
this.onClick()}>{this.props.name}
-
+
+ this.onClick()} + alt="profile" /> +
+
+
this.onClick()}>{this.props.name}
+
) } diff --git a/sports-matcher/src/Navbar.js b/sports-matcher/src/components/Navbar.js similarity index 92% rename from sports-matcher/src/Navbar.js rename to sports-matcher/src/components/Navbar.js index 15c6e7a..4a367af 100644 --- a/sports-matcher/src/Navbar.js +++ b/sports-matcher/src/components/Navbar.js @@ -95,17 +95,20 @@ export default function Navbar() { Sports Matcher - + {pages.map((page) => ( + + ))} - { navigate('/chat-window') }} sx={{ p: 0 }}> + { navigate('/chat-page') }} sx={{ p: 0 }}> diff --git a/sports-matcher/src/App.css b/sports-matcher/src/css/App.css similarity index 100% rename from sports-matcher/src/App.css rename to sports-matcher/src/css/App.css diff --git a/sports-matcher/src/chats.css b/sports-matcher/src/css/chats.css similarity index 100% rename from sports-matcher/src/chats.css rename to sports-matcher/src/css/chats.css diff --git a/sports-matcher/src/index.js b/sports-matcher/src/index.js index 78717fc..dd83ddc 100644 --- a/sports-matcher/src/index.js +++ b/sports-matcher/src/index.js @@ -1,14 +1,16 @@ 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'; +import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( - - - , + + + + + , document.getElementById('root') ); diff --git a/sports-matcher/src/matchinfo.js b/sports-matcher/src/matchinfo.js deleted file mode 100644 index f140f8b..0000000 --- a/sports-matcher/src/matchinfo.js +++ /dev/null @@ -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 ( - - - - King of the Court! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} \ No newline at end of file diff --git a/sports-matcher/src/ChatWindow.js b/sports-matcher/src/pages/ChatPage.js similarity index 61% rename from sports-matcher/src/ChatWindow.js rename to sports-matcher/src/pages/ChatPage.js index 20b2adf..be6fc7d 100644 --- a/sports-matcher/src/ChatWindow.js +++ b/sports-matcher/src/pages/ChatPage.js @@ -1,17 +1,15 @@ /* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ import React from 'react'; -import './chats.css' -import Chat from './Chat' -import Contact from './Contact' +import '../css/chats.css' +import Chat from '../components/Chat' +import Contact from '../components/Contact' import { useState } from "react"; -import Navbar from './Navbar'; -class ChatWindow extends React.Component { +class ChatPage extends React.Component { render() { return ( -
- +
@@ -21,14 +19,14 @@ class ChatWindow extends React.Component { } class UserList extends React.Component { - + render() { return ( -
- - - -
+
+ + + +
) } } @@ -37,11 +35,11 @@ class MessageList extends React.Component { render() { return (
- + -
+
) } } @@ -56,8 +54,8 @@ class MessageList extends React.Component { // } // } const ChatInput = () => { - const [message, setMessage] = useState( '' ); - + const [message, setMessage] = useState(''); + // const onKeyPress = (e) => { // // if(e.key === 'Enter'){ // // e.preventDefault(); // Ensure it is only this code that runs @@ -77,39 +75,39 @@ const ChatInput = () => { return ( // onKeyPress={(e) => onKeyPress(e)} -
-