diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a3c03c6 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "team58", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/sports-matcher/package.json b/sports-matcher/package.json index 2f1f97b..e8e0974 100644 --- a/sports-matcher/package.json +++ b/sports-matcher/package.json @@ -10,8 +10,11 @@ "@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", "web-vitals": "^2.1.4" }, diff --git a/sports-matcher/public/chief.jpg b/sports-matcher/public/chief.jpg new file mode 100644 index 0000000..3335964 Binary files /dev/null and b/sports-matcher/public/chief.jpg differ diff --git a/sports-matcher/public/freeman.jpg b/sports-matcher/public/freeman.jpg new file mode 100644 index 0000000..45d5175 Binary files /dev/null and b/sports-matcher/public/freeman.jpg differ diff --git a/sports-matcher/public/index.html b/sports-matcher/public/index.html index aa069f2..c87dbda 100644 --- a/sports-matcher/public/index.html +++ b/sports-matcher/public/index.html @@ -24,6 +24,12 @@ 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/public/shogun.jpg b/sports-matcher/public/shogun.jpg new file mode 100644 index 0000000..276e987 Binary files /dev/null and b/sports-matcher/public/shogun.jpg differ diff --git a/sports-matcher/src/Admin.css b/sports-matcher/src/Admin.css new file mode 100644 index 0000000..59c9b92 --- /dev/null +++ b/sports-matcher/src/Admin.css @@ -0,0 +1,4 @@ + +.MainTable { + padding : 20px; +} \ No newline at end of file diff --git a/sports-matcher/src/Admin.js b/sports-matcher/src/Admin.js new file mode 100644 index 0000000..9d48546 --- /dev/null +++ b/sports-matcher/src/Admin.js @@ -0,0 +1,249 @@ +import * as React from 'react'; +import './Admin.css'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Container from '@mui/material/Container'; +import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material'; + + + +class AdminTable extends React.Component { + constructor(props) { + super(props) + + + + this.state = { + users: [ + { id: 1, username: 'username1', name: 'name1', email: 'user1@email.com', phone: '123-456-7890' }, + { id: 2, username: 'username2', name: 'name2', email: 'user2@email.com', phone: '123-456-7890' }, + { id: 3, username: 'username3', name: 'name3', email: 'user3@email.com', phone: '123-456-7890' }, + { id: 4, username: 'username4', name: 'name4', email: 'user4@email.com', phone: '123-456-7890' } + ], + suspendedUsers: [ + { id: 1, username: 'suspended1', name: 's1', email: 's1@email.com', phone: '123-456-7890' }, + { id: 2, username: 'suspended2', name: 's2', email: 's2@email.com', phone: '123-456-7890' }, + { id: 3, username: 'suspended3', name: 's3', email: 's3@email.com', phone: '123-456-7890' }, + { id: 4, username: 'suspended4', name: 's4', email: 's4@email.com', phone: '123-456-7890' } + ], + matches: [ + { id: 1, sport: "Tennis", date: '08/08/2021', location: 'toronto', description: 'Tennis match' }, + { id: 2, sport: "Basketball", date: '09/09/2021', location: 'toronto', description: 'Basketball match' } + ], + buttonColors: ['black', '', ''] + } + + + } + + EditButton() { + return ; + + } + + DeleteButtonClick() { + return ( + + + Are you sure you want to delete this user? + + + ) + } + + NewDeleteButtonClick() { + return (
+ +
) + } + + DeleteButton() { + 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.DeleteButton()} + {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 7ced89c..e631343 100644 --- a/sports-matcher/src/App.js +++ b/sports-matcher/src/App.js @@ -1,15 +1,16 @@ import './App.css'; -import Filter from './Filter'; -import MatchesList from './MatchesList'; -import ReportForm from "./ReportForm"; -import SearchBar from './SearchBar'; - +import { Routes, Route, Link } from "react-router-dom"; +import SignIn from './SignIn'; +import SignUp from './SignUp'; +import Home from './Home'; function App() { return (
-
- -
+ + } /> + } /> + } /> +
); } diff --git a/sports-matcher/src/Chat.js b/sports-matcher/src/Chat.js new file mode 100644 index 0000000..da3ac21 --- /dev/null +++ b/sports-matcher/src/Chat.js @@ -0,0 +1,18 @@ +/* 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/ChatWindow.js b/sports-matcher/src/ChatWindow.js new file mode 100644 index 0000000..036ad55 --- /dev/null +++ b/sports-matcher/src/ChatWindow.js @@ -0,0 +1,113 @@ +/* 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 { useState } from "react"; + +class ChatWindow extends React.Component { + render() { + return ( +
+ + + +
+ ) + } +} + +class UserList extends React.Component { + + render() { + return ( +
+ + + +
+ ) + } +} + +class MessageList extends React.Component { + render() { + return ( +
+ + + + +
+ ) + } +} +// class ChatWindow extends React.Component { +// render() { +// return ( +//
+// +// {/* */} +//
+// ) +// } +// } +const ChatInput = () => { + const [message, setMessage] = useState( '' ); + + // const onKeyPress = (e) => { + // // if(e.key === 'Enter'){ + // // e.preventDefault(); // Ensure it is only this code that runs + // // setMessage("") + // // } + // } + + const onKeyDown = (e) => { + const keyCode = e.which || e.keyCode; + + // 13 represents the Enter key + if (keyCode === 13 && !e.shiftKey) { + e.preventDefault(); + setMessage("") + } + } + + return ( + // onKeyPress={(e) => onKeyPress(e)} +
+