Merge branch 'develop'
This commit is contained in:
commit
bb911173ec
357
sports-matcher/.gitignore
vendored
357
sports-matcher/.gitignore
vendored
@ -1,25 +1,350 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux,node,python,react
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,linux,node,python,react
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
### Linux ###
|
||||
*~
|
||||
|
||||
# production
|
||||
/build
|
||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||
.fuse_hidden*
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
# KDE directory preferences
|
||||
.directory
|
||||
|
||||
# Linux trash folder which might appear on any partition or disk
|
||||
.Trash-*
|
||||
|
||||
# .nfs files are created when an open file is removed but is still being accessed
|
||||
.nfs*
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
package-lock.json
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
### Node Patch ###
|
||||
# Serverless Webpack directories
|
||||
.webpack/
|
||||
|
||||
# Optional stylelint cache
|
||||
|
||||
# SvelteKit build / generate output
|
||||
.svelte-kit
|
||||
|
||||
### Python ###
|
||||
# Byte-compiled / optimized / DLL files
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# C extensions
|
||||
*.so
|
||||
|
||||
# Distribution / packaging
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
share/python-wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
MANIFEST
|
||||
|
||||
# PyInstaller
|
||||
# Usually these files are written by a python script from a template
|
||||
# before PyInstaller builds the exe, so as to inject date/other infos into it.
|
||||
*.manifest
|
||||
*.spec
|
||||
|
||||
# Installer logs
|
||||
pip-log.txt
|
||||
pip-delete-this-directory.txt
|
||||
|
||||
# Unit test / coverage reports
|
||||
htmlcov/
|
||||
.tox/
|
||||
.nox/
|
||||
.coverage
|
||||
.coverage.*
|
||||
nosetests.xml
|
||||
coverage.xml
|
||||
*.cover
|
||||
*.py,cover
|
||||
.hypothesis/
|
||||
.pytest_cache/
|
||||
cover/
|
||||
|
||||
# Translations
|
||||
*.mo
|
||||
*.pot
|
||||
|
||||
# Django stuff:
|
||||
local_settings.py
|
||||
db.sqlite3
|
||||
db.sqlite3-journal
|
||||
|
||||
# Flask stuff:
|
||||
instance/
|
||||
.webassets-cache
|
||||
|
||||
# Scrapy stuff:
|
||||
.scrapy
|
||||
|
||||
# Sphinx documentation
|
||||
docs/_build/
|
||||
|
||||
# PyBuilder
|
||||
.pybuilder/
|
||||
target/
|
||||
|
||||
# Jupyter Notebook
|
||||
.ipynb_checkpoints
|
||||
|
||||
# IPython
|
||||
profile_default/
|
||||
ipython_config.py
|
||||
|
||||
# pyenv
|
||||
# For a library or package, you might want to ignore these files since the code is
|
||||
# intended to run in multiple environments; otherwise, check them in:
|
||||
# .python-version
|
||||
|
||||
# pipenv
|
||||
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
|
||||
# However, in case of collaboration, if having platform-specific dependencies or dependencies
|
||||
# having no cross-platform support, pipenv may install dependencies that don't work, or not
|
||||
# install all needed dependencies.
|
||||
#Pipfile.lock
|
||||
|
||||
# poetry
|
||||
# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
|
||||
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
||||
# commonly ignored for libraries.
|
||||
# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
|
||||
#poetry.lock
|
||||
|
||||
# PEP 582; used by e.g. github.com/David-OConnor/pyflow
|
||||
__pypackages__/
|
||||
|
||||
# Celery stuff
|
||||
celerybeat-schedule
|
||||
celerybeat.pid
|
||||
|
||||
# SageMath parsed files
|
||||
*.sage.py
|
||||
|
||||
# Environments
|
||||
.venv
|
||||
env/
|
||||
venv/
|
||||
ENV/
|
||||
env.bak/
|
||||
venv.bak/
|
||||
|
||||
# Spyder project settings
|
||||
.spyderproject
|
||||
.spyproject
|
||||
|
||||
# Rope project settings
|
||||
.ropeproject
|
||||
|
||||
# mkdocs documentation
|
||||
/site
|
||||
|
||||
# mypy
|
||||
.mypy_cache/
|
||||
.dmypy.json
|
||||
dmypy.json
|
||||
|
||||
# Pyre type checker
|
||||
.pyre/
|
||||
|
||||
# pytype static type analyzer
|
||||
.pytype/
|
||||
|
||||
# Cython debug symbols
|
||||
cython_debug/
|
||||
|
||||
# PyCharm
|
||||
# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
|
||||
# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
|
||||
# and can be added to the global gitignore or merged into this file. For a more nuclear
|
||||
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
||||
#.idea/
|
||||
|
||||
### react ###
|
||||
.DS_*
|
||||
**/*.backup.*
|
||||
**/*.back.*
|
||||
|
||||
node_modules
|
||||
|
||||
*.sublime*
|
||||
|
||||
psd
|
||||
thumb
|
||||
sketch
|
||||
|
||||
### VisualStudioCode ###
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
### VisualStudioCode Patch ###
|
||||
# Ignore all local history of files
|
||||
.history
|
||||
.ionide
|
||||
|
||||
# Support for Project snippet scope
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux,node,python,react
|
||||
|
||||
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
|
||||
|
||||
server/mongo-data/**
|
||||
@ -1,70 +1,3 @@
|
||||
# Getting Started with Create React App
|
||||
# Sports Matcher
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
A CSC309 Project.
|
||||
40
sports-matcher/client/.eslintrc.json
Normal file
40
sports-matcher/client/.eslintrc.json
Normal file
@ -0,0 +1,40 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react/jsx-runtime"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
4
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
]
|
||||
}
|
||||
}
|
||||
23
sports-matcher/client/.gitignore
vendored
Normal file
23
sports-matcher/client/.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
70
sports-matcher/client/README.md
Normal file
70
sports-matcher/client/README.md
Normal file
@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
28039
sports-matcher/client/package-lock.json
generated
Normal file
28039
sports-matcher/client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,26 +1,23 @@
|
||||
{
|
||||
"name": "sports-matcher",
|
||||
"name": "client",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.8.1",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/icons-material": "^5.4.4",
|
||||
"@mui/material": "^5.4.4",
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^12.1.3",
|
||||
"@testing-library/jest-dom": "^5.16.3",
|
||||
"@testing-library/react": "^12.1.4",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^0.26.1",
|
||||
"bootstrap": "^5.1.3",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^2.2.0",
|
||||
"react-bootstrap": "^2.2.2",
|
||||
"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": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"start": "NODE_ENV='development' REACT_APP_API_HOST='http://localhost:5000' react-scripts start",
|
||||
"build": "../scripts/build.py",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
@ -41,5 +38,9 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.12.0",
|
||||
"eslint-plugin-react": "^7.29.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 894 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
@ -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`.
|
||||
-->
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
91
sports-matcher/client/src/Layout.js
Normal file
91
sports-matcher/client/src/Layout.js
Normal file
@ -0,0 +1,91 @@
|
||||
import "./styles/Layout.css";
|
||||
import "./styles/extra.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
|
||||
import Welcome from "./pages/Welcome";
|
||||
import Navbar from "react-bootstrap/Navbar";
|
||||
import { Container, Nav, NavbarBrand } from "react-bootstrap";
|
||||
import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
|
||||
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import Login from "./pages/Login";
|
||||
import { apiClient } from "./utils/httpClients";
|
||||
import { globalContext } from "./context.js";
|
||||
|
||||
|
||||
export default function layout() {
|
||||
const navigate = useNavigate();
|
||||
const [state, setState] = useState({
|
||||
user: null,
|
||||
});
|
||||
|
||||
useEffect(async () => {
|
||||
await updateAuthStatus();
|
||||
});
|
||||
|
||||
async function updateAuthStatus() {
|
||||
const getUserResponse = await apiClient.get("/user");
|
||||
if (getUserResponse !== 200) {
|
||||
setState({ user: null });
|
||||
} else {
|
||||
setState({ user: getUserResponse.data });
|
||||
}
|
||||
}
|
||||
|
||||
let indentityDisplay = (
|
||||
<Nav>
|
||||
<li className="nav-item">
|
||||
<NavLink className="nav-link" to="/login" >Login</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink className="nav-link" to="/signup" >Sign up!</NavLink>
|
||||
</li>
|
||||
</Nav>
|
||||
);
|
||||
|
||||
if (state.user) {
|
||||
indentityDisplay = (
|
||||
<Nav>
|
||||
<li className="nav-item">
|
||||
<NavLink className="nav-link" to="/" >Hi, {this.state.user.firstName}</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink className="nav-link" to="/logout" >Logout</NavLink>
|
||||
</li>
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="app">
|
||||
<globalContext.Provider value={{ navigate: navigate }}>
|
||||
<header>
|
||||
<Navbar bg="light" expand="md">
|
||||
<Container>
|
||||
<NavbarBrand href="/">Sports Matcher</NavbarBrand>
|
||||
<NavbarToggle aria-controls="navigation"></NavbarToggle>
|
||||
<NavbarCollapse id="main-nav">
|
||||
<Nav className="me-auto">
|
||||
<li className="nav-item">
|
||||
<NavLink className="nav-link" to="/" >Home</NavLink>
|
||||
</li>
|
||||
</Nav>
|
||||
{indentityDisplay}
|
||||
</NavbarCollapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</header>
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="/" element={<Welcome />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</globalContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
sports-matcher/client/src/components/HomeCarousel.js
Normal file
53
sports-matcher/client/src/components/HomeCarousel.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import { Carousel } from "react-bootstrap";
|
||||
export default class HomeCarousel extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Carousel className="jumbotron" variant="light">
|
||||
<Carousel.Item>
|
||||
<img
|
||||
className="d-block w-100"
|
||||
src='/images/carousel/volleyball_normalized.jpg'
|
||||
alt="Connect Slide"
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<div className="captionStyle">
|
||||
<h1>Connect</h1>
|
||||
<h2>Connect with other athletes in your area!</h2>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<img
|
||||
className="d-block w-100"
|
||||
src='/images/carousel/schedule_normalized.jpg'
|
||||
alt="Schedule Slide"
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<div className="captionStyle">
|
||||
<h1>Schedule</h1>
|
||||
<h2>Schedule sport meets with other athletes!</h2>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<img
|
||||
src='/images/carousel/rentals_normalized.jpg'
|
||||
alt="Rent Slide"
|
||||
className="d-block w-100"
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<div className="captionStyle">
|
||||
<h1>Rent</h1>
|
||||
<h2>Rent sports equipment from other athletes!</h2>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
36
sports-matcher/client/src/components/MatchInfoCard.js
Normal file
36
sports-matcher/client/src/components/MatchInfoCard.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { Button, Card } from "react-bootstrap";
|
||||
import propTypes from "prop-types";
|
||||
import { grammaticalListString } from "../utils/strings";
|
||||
export default class MatchInfoCard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
getParticipants() {
|
||||
let participants = [];
|
||||
this.props.match.participants.forEach(user => {
|
||||
participants.push(user.firstName);
|
||||
});
|
||||
return participants;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card style={{ width: "20rem" }}>
|
||||
<Card.Body>
|
||||
<Card.Title>{this.props.match.sport.name}</Card.Title>
|
||||
<Card.Subtitle className="mb-2 text-muted">{this.props.match.title}</Card.Subtitle>
|
||||
<Card.Text>
|
||||
Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport.name}</strong> at <strong>{this.props.match.location.toString()}</strong> on <strong>{new Date(this.props.match.when).toLocaleDateString("en-US")}</strong>!
|
||||
</Card.Text>
|
||||
<Button variant="primary">Join!</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MatchInfoCard.propTypes = {
|
||||
match: propTypes.object,
|
||||
};
|
||||
24
sports-matcher/client/src/components/MatchInfoCardDisplay.js
Normal file
24
sports-matcher/client/src/components/MatchInfoCardDisplay.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import propTypes from "prop-types";
|
||||
import MatchInfoCard from "./MatchInfoCard";
|
||||
import "../styles/MatchInfoCardDisplay.css";
|
||||
export default class MatchInfoCardDisplay extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
let matches = null;
|
||||
if (this.props.recommendedmatches.length > 0) {
|
||||
matches = this.props.recommendedmatches.map((match) => <MatchInfoCard key={match._id} match={match}></MatchInfoCard>);
|
||||
}
|
||||
return (
|
||||
<div className="horizontal-scroller">
|
||||
{matches}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MatchInfoCardDisplay.propTypes = {
|
||||
recommendedmatches: propTypes.array,
|
||||
};
|
||||
26
sports-matcher/client/src/components/SportInfoCard.js
Normal file
26
sports-matcher/client/src/components/SportInfoCard.js
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import { Card } from "react-bootstrap";
|
||||
import propTypes from "prop-types";
|
||||
export default class SportInfoCard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card style={{ width: "20rem" }}>
|
||||
<Card.Body>
|
||||
<Card.Title>{this.props.sport.name}</Card.Title>
|
||||
<Card.Subtitle className="mb-2 text-muted">{this.props.sport.minPlayers.toString()}</Card.Subtitle>
|
||||
<Card.Text>
|
||||
<p>{this.props.sport.description}</p>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SportInfoCard.propTypes = {
|
||||
sport: propTypes.object,
|
||||
};
|
||||
24
sports-matcher/client/src/components/SportInfoCardDisplay.js
Normal file
24
sports-matcher/client/src/components/SportInfoCardDisplay.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import propTypes from "prop-types";
|
||||
import SportInfoCard from "./SportInfoCard";
|
||||
import "../styles/MatchInfoCardDisplay.css";
|
||||
export default class SportInfoCardDisplay extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
let sports = null;
|
||||
if(this.props.recommendedsports && this.props.recommendedsports.length > 0) {
|
||||
sports = this.props.recommendedsports.map((sport) => <SportInfoCard key={sport._id} sport={sport}></SportInfoCard>);
|
||||
}
|
||||
return (
|
||||
<div className="horizontal-scroller">
|
||||
{sports}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SportInfoCardDisplay.propTypes = {
|
||||
recommendedsports: propTypes.array,
|
||||
};
|
||||
3
sports-matcher/client/src/context.js
Normal file
3
sports-matcher/client/src/context.js
Normal file
@ -0,0 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export const globalContext = React.createContext({});
|
||||
22
sports-matcher/client/src/index.js
Normal file
22
sports-matcher/client/src/index.js
Normal file
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Layout from "./Layout";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import "bootstrap/dist/css/bootstrap.min.css"; // This could be optimized by importing individual css components.
|
||||
|
||||
console.log(process.env);
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Layout />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
85
sports-matcher/client/src/pages/Dashboard.js
Normal file
85
sports-matcher/client/src/pages/Dashboard.js
Normal file
@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import { Button, InputGroup, FormControl } from "react-bootstrap";
|
||||
import "../styles/Dashboard.css";
|
||||
import { apiClient } from "../utils/httpClients.js";
|
||||
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
|
||||
import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
|
||||
// import { needUser } from "../utils/routing.js";
|
||||
export default class Dashboard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayedMatches: [],
|
||||
displayedSports: [],
|
||||
displayedEquipment: [],
|
||||
user: null
|
||||
};
|
||||
// this.getFirstName();
|
||||
}
|
||||
// async componentDidMount() {
|
||||
// this.setState({ user: await needUser() }); // needUser says this page needs a user, and therefore, if there isn't a user, get them to login first. It returns the authenticated user.
|
||||
// this.setState({ displayedMatches: await this.latestMatches() });
|
||||
// }
|
||||
async componentDidMount() {
|
||||
await this.latestMatches();
|
||||
await this.availableSports();
|
||||
// await this.availableEquipment();
|
||||
}
|
||||
async latestMatches() {
|
||||
let recentMatchesRes = await apiClient.get("/match/recent/15");
|
||||
if (recentMatchesRes.status === 200) {
|
||||
this.setState({ displayedMatches: recentMatchesRes.data.recent });
|
||||
}
|
||||
}
|
||||
|
||||
async availableSports() {
|
||||
let availableSportsRes = await apiClient.get("/sport");
|
||||
if (availableSportsRes.status === 200) {
|
||||
this.setState({ displayedSports: availableSportsRes.data.recent });
|
||||
}
|
||||
}
|
||||
|
||||
// async availableEquipment() {
|
||||
// let availableEquipmentRes = await apiClient.get("/rentals");
|
||||
// if (availableEquipmentRes.status === 200) {
|
||||
// this.setState({ displayedEquipment: availableEquipmentRes.data.recent });
|
||||
// }
|
||||
// }
|
||||
|
||||
// async getFirstName() {
|
||||
// // let result = await apiClient.post("/user/login", {"email": "johndoe@gmail.com", "password": "csc309h1"}).then(apiClient.get("/user"));
|
||||
// let user = await apiClient.get("/user");
|
||||
// let tags = document.getElementsByTagName("h1");
|
||||
// tags[0].innerHTML = user.firstName;
|
||||
// }
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h1></h1>
|
||||
<InputGroup className="w-50">
|
||||
<FormControl
|
||||
placeholder="Search for Matches"
|
||||
aria-label="Search Bar"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<Button variant="outline-secondary" id="button-addon2">
|
||||
Search
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<div className="p-4">
|
||||
<h2>Available Matches</h2>
|
||||
<MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h2>Available Sports</h2>
|
||||
<SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
|
||||
</div>
|
||||
{/* <div className="p-4">
|
||||
<h2>Available Equipment</h2>
|
||||
<MatchInfoCardDisplay recommendedmatches={this.state.displayedEquipment} />
|
||||
</div> */}
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
94
sports-matcher/client/src/pages/Login.js
Normal file
94
sports-matcher/client/src/pages/Login.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import { Alert, Button, Card, Container, Form } from "react-bootstrap";
|
||||
import { globalContext } from "../context";
|
||||
import { apiClient } from "../utils/httpClients";
|
||||
import { guard } from "../utils/routing";
|
||||
|
||||
export default class Login extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
email: "",
|
||||
password: "",
|
||||
errorDisplayed: false,
|
||||
};
|
||||
|
||||
this.attemptLogin = this.attemptLogin.bind(this);
|
||||
}
|
||||
|
||||
static contextType = globalContext;
|
||||
|
||||
async componentDidMount() {
|
||||
try {
|
||||
const getUserResponse = await apiClient.get("/user");
|
||||
guard(this.context.navigate, () => getUserResponse.status === 401, "/dashboard"); // If it's not 401, then we redirect to dashboard.
|
||||
} catch (error) {
|
||||
if (error.message !== "Request failed with status code 401") {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async attemptLogin(e) {
|
||||
e.preventDefault();
|
||||
const loginResponse = await apiClient.post("/user/login", {
|
||||
email: this.state.email,
|
||||
password: this.state.password,
|
||||
}, {
|
||||
validateStatus: function (status) {
|
||||
return status === 200 || status === 401 || status === 400;
|
||||
}
|
||||
});
|
||||
if (loginResponse.status === 200) {
|
||||
this.context.navigate("/dashboard", { replace: true });
|
||||
} else if (loginResponse.status === 401) {
|
||||
this.setState({ errorDisplayed: true });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let errorMsg = (
|
||||
<div></div>
|
||||
);
|
||||
if (this.state.errorDisplayed) {
|
||||
errorMsg = (
|
||||
< Alert variant="danger" onClose={() => this.setState({ errorDisplayed: false })} dismissible >
|
||||
<Alert.Heading>Incorrect credentials</Alert.Heading>
|
||||
<p>Double check your provided e-mail and password!</p>
|
||||
</Alert >
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="d-flex justify-content-center align-items-center
|
||||
page-root">
|
||||
{errorMsg}
|
||||
<Container style={{ maxWidth: "35rem" }}>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Login</Card.Title>
|
||||
<Card.Subtitle>Welcome back!</Card.Subtitle>
|
||||
<Form onSubmit={this.attemptLogin}>
|
||||
<Form.Group className="mb-3" controlId="loginEmail">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={(e) => {
|
||||
this.setState({ email: e.target.value });
|
||||
}} />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="loginPassword">
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter password" onChange={(e) => {
|
||||
this.setState({ password: e.target.value });
|
||||
}} />
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
36
sports-matcher/client/src/pages/Logout.js
Normal file
36
sports-matcher/client/src/pages/Logout.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { apiClient } from "../utils/httpClients";
|
||||
|
||||
export default class Logout extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const logoutResponse = await apiClient.get("/user/logout");
|
||||
let navigation = useNavigate();
|
||||
if (logoutResponse.status === 401) {
|
||||
navigation("/dashboard", { replace: true });
|
||||
} else {
|
||||
this.redirectTimer = setTimeout(() => {
|
||||
navigation("/", { replace: true });
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
clearTimeout(this.redirectTimer);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="page-root">
|
||||
<div>
|
||||
<h1>You are now logged out. See you later!</h1>
|
||||
<p className="text-muted">We will redirect you shortly...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
42
sports-matcher/client/src/pages/Welcome.js
Normal file
42
sports-matcher/client/src/pages/Welcome.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import { apiClient } from "../utils/httpClients";
|
||||
import HomeCarousel from "../components/HomeCarousel";
|
||||
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
|
||||
export default class Welcome extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayedMatches: [],
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
await this.latestMatches();
|
||||
|
||||
}
|
||||
|
||||
async latestMatches() {
|
||||
let recentMatchesRes = await apiClient.get("/match/recent/15");
|
||||
if (recentMatchesRes.status === 200) {
|
||||
this.setState({ displayedMatches: recentMatchesRes.data.recent });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="page-root">
|
||||
<HomeCarousel />
|
||||
<div className="text-center p-3 mt-2">
|
||||
<h2>Why?</h2>
|
||||
<p>Because you want to play the sports you love while meeting new friends!</p>
|
||||
{/* TODO: All this text should be expanded on. */}
|
||||
</div>
|
||||
<hr />
|
||||
<div className="p-4">
|
||||
<h2>Available Matches</h2>
|
||||
<MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
13
sports-matcher/client/src/reportWebVitals.js
Normal file
13
sports-matcher/client/src/reportWebVitals.js
Normal file
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -2,4 +2,4 @@
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
import "@testing-library/jest-dom";
|
||||
5
sports-matcher/client/src/styles/Dashboard.css
Normal file
5
sports-matcher/client/src/styles/Dashboard.css
Normal file
@ -0,0 +1,5 @@
|
||||
.w-50{
|
||||
margin-top: 5%;
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
}
|
||||
16
sports-matcher/client/src/styles/Layout.css
Normal file
16
sports-matcher/client/src/styles/Layout.css
Normal file
@ -0,0 +1,16 @@
|
||||
.page-root,
|
||||
main,
|
||||
#app,
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
.horizontal-scroller{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
5
sports-matcher/client/src/styles/extra.css
Normal file
5
sports-matcher/client/src/styles/extra.css
Normal file
@ -0,0 +1,5 @@
|
||||
.horizontal-scroller {
|
||||
overflow-x: scroll;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
7
sports-matcher/client/src/utils/httpClients.js
Normal file
7
sports-matcher/client/src/utils/httpClients.js
Normal file
@ -0,0 +1,7 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: process.env.REACT_APP_API_HOST + "/api/",
|
||||
timeout: 5000,
|
||||
withCredentials: process.env.NODE_ENV === "development",
|
||||
});
|
||||
22
sports-matcher/client/src/utils/routing.js
Normal file
22
sports-matcher/client/src/utils/routing.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { apiClient } from "./httpClients";
|
||||
|
||||
export function guard(navigator, evaluator, redirect, navigateOptions, onRedirect) {
|
||||
if (!evaluator) throw new Error("evaluator required.");
|
||||
if (!redirect) throw new Error("redirect required.");
|
||||
if (!navigateOptions) {
|
||||
navigateOptions = {
|
||||
replace: true
|
||||
};
|
||||
}
|
||||
let redirecting = !evaluator();
|
||||
if (redirecting) {
|
||||
if (onRedirect) onRedirect();
|
||||
navigator(redirect, navigateOptions);
|
||||
}
|
||||
}
|
||||
|
||||
export async function needUser(navigator) {
|
||||
let userDataResponse = await apiClient.get("/user");
|
||||
guard(navigator, () => userDataResponse.status === 200, "/login");
|
||||
return userDataResponse.data;
|
||||
}
|
||||
24
sports-matcher/client/src/utils/strings.js
Normal file
24
sports-matcher/client/src/utils/strings.js
Normal file
@ -0,0 +1,24 @@
|
||||
export function grammaticalListString(items, max) {
|
||||
if (!items) return null;
|
||||
if (max < 1) return "";
|
||||
let built = "";
|
||||
|
||||
let index = 0;
|
||||
items.forEach(item => {
|
||||
if (index > max) {
|
||||
built += "and " + items.length + " more ";
|
||||
return;
|
||||
}
|
||||
built += item;
|
||||
if (index < items.length - 1) {
|
||||
built += ", ";
|
||||
}
|
||||
if (index == max - 1) {
|
||||
built += "and ";
|
||||
}
|
||||
|
||||
index += 1;
|
||||
});
|
||||
|
||||
return built;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
17
sports-matcher/scripts/build.py
Normal file
17
sports-matcher/scripts/build.py
Normal file
@ -0,0 +1,17 @@
|
||||
#!/usr/bin/python
|
||||
import os
|
||||
import shutil
|
||||
|
||||
DEST_DIR = os.path.abspath("../server/public/")
|
||||
BUILD_CMD = "react-scripts build"
|
||||
os.chdir(os.path.abspath(os.path.join(__file__, "../../client")))
|
||||
errorcode = os.system(BUILD_CMD)
|
||||
if (errorcode):
|
||||
print("There was an issue building the client via {}. See above log (exited with error code {}).".format(
|
||||
BUILD_CMD, errorcode))
|
||||
else:
|
||||
print("Received error code of 0. Proceeding with copying files to the public server directory.")
|
||||
|
||||
shutil.copytree("./build/", "../server/public/.", dirs_exist_ok=True)
|
||||
print("Completed copying built files to the public server directory \"{0}\".".format(
|
||||
DEST_DIR))
|
||||
1
sports-matcher/scripts/start_mongo.bat
Normal file
1
sports-matcher/scripts/start_mongo.bat
Normal file
@ -0,0 +1 @@
|
||||
mongod --dbpath ./server/mongo-data
|
||||
3
sports-matcher/scripts/start_mongo.sh
Executable file
3
sports-matcher/scripts/start_mongo.sh
Executable file
@ -0,0 +1,3 @@
|
||||
#!/bin/bash
|
||||
|
||||
mongod --dbpath ../server/mongo-data
|
||||
29
sports-matcher/server/.eslintrc.json
Normal file
29
sports-matcher/server/.eslintrc.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"env": {
|
||||
"es2021": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
4
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
]
|
||||
}
|
||||
}
|
||||
16
sports-matcher/server/.vscode/launch.json
vendored
Normal file
16
sports-matcher/server/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Python: Current File",
|
||||
"type": "python",
|
||||
"request": "launch",
|
||||
"program": "${file}",
|
||||
"console": "integratedTerminal",
|
||||
"justMyCode": true
|
||||
}
|
||||
]
|
||||
}
|
||||
219
sports-matcher/server/controllers/matchController.js
Normal file
219
sports-matcher/server/controllers/matchController.js
Normal file
@ -0,0 +1,219 @@
|
||||
import express from "express";
|
||||
import { requireAuthenticated } from "../middleware/authority.js";
|
||||
import { needDatabase } from "../middleware/database.js";
|
||||
import matchModel from "../schemas/matchModel.js";
|
||||
import sportModel from "../schemas/sportModel.js";
|
||||
import userModel from "../schemas/userModel.js";
|
||||
const MatchController = express.Router();
|
||||
|
||||
MatchController.get("/search/:sport", needDatabase, async (req, res) => {
|
||||
try {
|
||||
let sport = sportModel.findByName(req.params.sport);
|
||||
let query = matchModel.find({ sport: sport._id });
|
||||
query.where("when").gte(Date.now); // We don't want to return any results of matches that have already occurred.
|
||||
if (req.session.userId) query.where("publicity").gte(1).where("friends").in(req.session.userId);
|
||||
if (req.query.within) query.where("location").within({ center: req.query.location.split(","), radius: req.query.within });
|
||||
if (req.query.minDifficulty) query.where("difficulty").gte(req.query.minDifficulty);
|
||||
if (req.query.maxDifficulty) query.where("difficulty").lte(req.query.maxDifficulty);
|
||||
if (req.query.beforeDate) query.where("when").lte(req.query.beforeDate);
|
||||
|
||||
let queryResults = await query;
|
||||
res.send({ results: queryResults });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
|
||||
try {
|
||||
let user = null;
|
||||
if (req.session.userId) {
|
||||
user = await userModel.findById(req.session.userId);
|
||||
}
|
||||
let limit = parseInt(req.params.limit);
|
||||
if (!req.params.limit) limit = 10;
|
||||
if (isNaN(limit)) {
|
||||
console.log(typeof (limit));
|
||||
res.status(400).send("Limit parameter is not a number.");
|
||||
return;
|
||||
}
|
||||
if (isNaN(limit)) {
|
||||
res.status(400).send("Limit parameter not a number.");
|
||||
return;
|
||||
}
|
||||
if (limit > 50) {
|
||||
res.status(400).send("Limit greater than maximum limit of 50.");
|
||||
return;
|
||||
}
|
||||
let recent = null;
|
||||
if (user) {
|
||||
recent = matchModel.find({ creator: user._id });
|
||||
} else {
|
||||
recent = matchModel.find().where("publicity").gte(2);
|
||||
}
|
||||
recent = await recent.sort({ createDate: -1 }).limit(limit).populate(["sport", "participants"]);
|
||||
res.status(200).send({ recent: recent });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Check and improve error handling.
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const userId = req.session.userId;
|
||||
const user = await userModel.findById(userId);
|
||||
const match = new matchModel({
|
||||
title: req.body.title,
|
||||
when: req.body.when,
|
||||
public: req.body.public,
|
||||
location: req.body.location,
|
||||
creator: userId,
|
||||
difficulty: req.body.difficulty,
|
||||
sport: await sportModel.findByName(req.body.sport),
|
||||
participants: [user._id]
|
||||
});
|
||||
if (!match.sport) {
|
||||
res.status(400).send("Invalid sport name provided.");
|
||||
return;
|
||||
}
|
||||
await match.save();
|
||||
user.createdMatches.push(match._id);
|
||||
user.participatingMatches.push(match._id);
|
||||
await user.save();
|
||||
res.status(201).send({ createdMatch: match });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Develop the error handling.
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.patch("/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const match = await matchModel.findById(req.params.id);
|
||||
if (!match) {
|
||||
res.status(400).send("Invalid match ID provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.user._id !== match.creator && req.user.accessLevel < 3) {
|
||||
res.status(401).send("Not authorized.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body._id) {
|
||||
res.status(400).send("Cannot change ID of match.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.creator) {
|
||||
res.status(400).send("Cannot change creator of match.");
|
||||
return;
|
||||
}
|
||||
await match.updateOne(req.body);
|
||||
res.status(200).send({ updatedMatch: match });
|
||||
|
||||
} catch (error) {
|
||||
res.status(200).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.delete("/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const match = await matchModel.findById(req.params.id);
|
||||
if (!match) {
|
||||
res.status(400).send("Invalid match ID provided.");
|
||||
return;
|
||||
}
|
||||
if (req.user._id !== match.creator && req.user.accessLevel < 3) {
|
||||
res.status(401).send("Not authorized.");
|
||||
return;
|
||||
}
|
||||
await match.deleteOne();
|
||||
res.status(200).send("Deleted.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error");
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.get("/:id", needDatabase, async (req, res) => {
|
||||
try {
|
||||
if (!req.params.id) {
|
||||
res.status(404).send("Id must be provided to retrieve match");
|
||||
return;
|
||||
}
|
||||
const match = await matchModel.findById(req.params.id).populate("sport");
|
||||
if (match) {
|
||||
res.status(200).send({ match: match });
|
||||
} else {
|
||||
res.status(404).send("Could not find match with ID: " + req.params.id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Improve the error handling.
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.get("/join/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const match = await matchModel.findById(req.params.id);
|
||||
const user = req.user;
|
||||
if (!match) {
|
||||
res.status(400).send("Invalid match ID provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (user.participatingMatches.includes(match._id)) {
|
||||
res.status(400).send("Already participating in match.");
|
||||
return;
|
||||
}
|
||||
|
||||
match.participants.push(user._id);
|
||||
user.participatingMatches.push(match._id);
|
||||
|
||||
await match.save();
|
||||
await user.save();
|
||||
|
||||
res.status(200).send("Joined.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
MatchController.get("/leave/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const match = await matchModel.findById(req.params.id);
|
||||
const user = req.user;
|
||||
|
||||
if (!match) {
|
||||
res.status(400).send("Invalid match ID provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!user.participatingMatches.includes(match._id)) {
|
||||
res.status(400).send("Not part of match.");
|
||||
return;
|
||||
}
|
||||
|
||||
const userIndex = match.participants.indexOf(user._id);
|
||||
match.participants.splice(userIndex, 1);
|
||||
await match.save();
|
||||
|
||||
const matchIndex = user.participatingMatches.indexOf(match._id);
|
||||
user.participatingMatches.splice(matchIndex, 1);
|
||||
await user.save();
|
||||
|
||||
res.status(200).send("Left match.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
export default MatchController;
|
||||
116
sports-matcher/server/controllers/rentalController.js
Normal file
116
sports-matcher/server/controllers/rentalController.js
Normal file
@ -0,0 +1,116 @@
|
||||
import express from "express";
|
||||
import { requireAuthenticated } from "../middleware/authority.js";
|
||||
import { needDatabase } from "../middleware/database.js";
|
||||
import rentalModel from "../schemas/rentalModel.js";
|
||||
import userModel from "../schemas/userModel.js";
|
||||
const rentalController = express.Router();
|
||||
|
||||
|
||||
rentalController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const user = req.user;
|
||||
req.body.createDate = undefined;
|
||||
req.body.creator = user._id;
|
||||
const rental = new rentalModel(req.body);
|
||||
await rental.save();
|
||||
res.status(201).send({ createdRental: rental });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
rentalController.get("/:id", needDatabase, async (req, res) => {
|
||||
try {
|
||||
const rental = await rentalModel.findById(req.params.id).populate("creator");
|
||||
res.status(200).send({ rental: rental });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error");
|
||||
}
|
||||
});
|
||||
|
||||
rentalController.get("/recent/:limit?", needDatabase, async (req, res) => {
|
||||
try {
|
||||
let user = null;
|
||||
if (req.session.userId) {
|
||||
user = await userModel.findById(req.session.userId);
|
||||
}
|
||||
let limit = parseInt(req.params.limit);
|
||||
if (!req.params.limit) limit = 10;
|
||||
if (isNaN(limit)) {
|
||||
console.log(typeof (limit));
|
||||
res.status(400).send("Limit parameter is not a number.");
|
||||
return;
|
||||
}
|
||||
if (isNaN(limit)) {
|
||||
res.status(400).send("Limit parameter not a number.");
|
||||
return;
|
||||
}
|
||||
if (limit > 50) {
|
||||
res.status(400).send("Limit greater than maximum limit of 50.");
|
||||
return;
|
||||
}
|
||||
let recent = null;
|
||||
if (user) {
|
||||
await user.populate("createdRentals");
|
||||
recent = user.createdRentals.slice(-limit);
|
||||
} else {
|
||||
recent = await rentalModel.find().limit(limit).sort({ createDate: -1 });
|
||||
}
|
||||
await recent.populate("members.$");
|
||||
res.status(200).send({ recent: recent });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
rentalController.patch("/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const rental = await rentalModel.findById(req.params.id);
|
||||
if (!rental) {
|
||||
res.status(400).send("Invalid rental ID provided.");
|
||||
return;
|
||||
}
|
||||
if (req.body._id) {
|
||||
res.status(400).send("Cannot change ID of rental.");
|
||||
return;
|
||||
}
|
||||
if (req.body.creator) {
|
||||
res.status(400).send("Cannot change creator of rental.");
|
||||
return;
|
||||
}
|
||||
if (req.user._id !== rental.creator && req.user.accessLevel < 3) {
|
||||
res.status(401).send("Not authorized.");
|
||||
return;
|
||||
}
|
||||
await rental.updateOne(req.body);
|
||||
res.status(200).send({ updated: rental });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error.");
|
||||
}
|
||||
});
|
||||
|
||||
rentalController.delete("/:id", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
try {
|
||||
const rental = await rentalModel.findById(req.params.id);
|
||||
if (!rental) {
|
||||
res.status(400).send("Invalid match ID provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.user._id !== rental.creator && req.user.accessLevel < 3) {
|
||||
res.status(401).send("Not authorized.");
|
||||
return;
|
||||
}
|
||||
await rental.deleteOne();
|
||||
res.status(200).send("Deleted.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).send("Internal server error");
|
||||
}
|
||||
});
|
||||
|
||||
export default rentalController;
|
||||
48
sports-matcher/server/controllers/sportController.js
Normal file
48
sports-matcher/server/controllers/sportController.js
Normal file
@ -0,0 +1,48 @@
|
||||
import express from "express";
|
||||
import { requireAuthenticated } from "../middleware/authority.js";
|
||||
import { needDatabase } from "../middleware/database.js";
|
||||
import sportModel from "../schemas/sportModel.js";
|
||||
import userModel from "../schemas/userModel.js";
|
||||
|
||||
const SportController = express.Router();
|
||||
|
||||
SportController.post("/", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
const user = await userModel.findById(req.session.userId);
|
||||
try {
|
||||
if (user.accessLevel <= 2) {
|
||||
res.status(403).send("Insufficient privileges.");
|
||||
return;
|
||||
}
|
||||
const sport = new sportModel({
|
||||
name: req.body.name,
|
||||
maxPlayers: req.body.maxPlayers,
|
||||
minPlayers: req.body.minPlayers,
|
||||
description: req.body.description
|
||||
});
|
||||
await sport.save();
|
||||
res.status(201).send("Successfully created new sport.");
|
||||
} catch (error) {
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Add proper error checking here.
|
||||
}
|
||||
});
|
||||
|
||||
SportController.get("/:sportId", needDatabase, async (req, res) => {
|
||||
try {
|
||||
res.status(200).send(await sportModel.findById(req.params.sportId));
|
||||
} catch (error) {
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Add proper error checking here.
|
||||
}
|
||||
});
|
||||
|
||||
SportController.get("/", needDatabase, async (req, res) => {
|
||||
try {
|
||||
res.status(200).send(await sportModel.find());
|
||||
} catch (error) {
|
||||
res.status(500).send("Internal server error.");
|
||||
// TODO: Add proper error checking here.
|
||||
}
|
||||
});
|
||||
|
||||
export default SportController;
|
||||
174
sports-matcher/server/controllers/userController.js
Normal file
174
sports-matcher/server/controllers/userController.js
Normal file
@ -0,0 +1,174 @@
|
||||
import express from "express";
|
||||
import { requireAuthenticated } from "../middleware/authority.js";
|
||||
import { needDatabase } from "../middleware/database.js";
|
||||
import userModel from "../schemas/userModel.js";
|
||||
import User from "../schemas/userModel.js";
|
||||
const UserController = express.Router();
|
||||
|
||||
UserController.post("/login", needDatabase, async (req, res) => {
|
||||
try {
|
||||
const email = req.body.email;
|
||||
const pwd = req.body.password;
|
||||
const user = await User.credentialsExist(email, pwd);
|
||||
if (!user) {
|
||||
res.sendStatus(401);
|
||||
return;
|
||||
} else {
|
||||
req.session.userId = user._id;
|
||||
req.session.email = user.email;
|
||||
res.status(200).send("Authenticated.");
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.name === "TypeError") {
|
||||
res.status(400).send("Missing required user info.");
|
||||
} else if (error.message === "Credentials do not exist.") {
|
||||
res.status(401).send("Credentials do not exist.");
|
||||
} else {
|
||||
console.error(error);
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
res.status(500).send(error.toString());
|
||||
} else {
|
||||
res.status(500).send("Internal server error. This issue has been noted.");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
UserController.get("/logout", requireAuthenticated, (req, res) => {
|
||||
req.session.destroy((err) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
res.status(500).send(err.toString());
|
||||
} else {
|
||||
res.status(500).send("Internal server error. This issue has been noted.");
|
||||
}
|
||||
res.status(500).send("");
|
||||
} else {
|
||||
res.sendStatus(200);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
UserController.get("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
let user = null;
|
||||
if (req.params.id) {
|
||||
if (req.user.accessLevel > 2) {
|
||||
user = await userModel.findById(req.params.id);
|
||||
} else {
|
||||
res.status(401).send("Unauthorized.");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
user = req.user;
|
||||
}
|
||||
user.password = undefined;
|
||||
res.status(200).send(user);
|
||||
});
|
||||
|
||||
UserController.patch("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
let user = null;
|
||||
if (req.params.id) {
|
||||
if (req.user.accessLevel > 2) {
|
||||
user = await userModel.findById(req.params.id);
|
||||
} else {
|
||||
res.status(401).send("Unauthorized.");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
user = req.user;
|
||||
}
|
||||
if (req.body._id) {
|
||||
res.status(400).send("Cannot change user ID.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.createdMatches) {
|
||||
res.status(400).send("Cannot directly change the list of created matches.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.password) {
|
||||
res.status(400).send("Cannot directly change user password.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.participatingMatches) {
|
||||
res.status(400).send("Cannot directly change the list of participating matches.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.joinDate) {
|
||||
res.status(400).send("Cannot change the join date.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.body.accessLevel && req.user.accessLevel < 3) {
|
||||
res.status(401).send("Unauthorized to change the access level of this user.");
|
||||
return;
|
||||
}
|
||||
|
||||
await user.updateOne(req.body);
|
||||
res.status(200).send("Updated.");
|
||||
});
|
||||
|
||||
/* TODO: Implement middleware for removing users.
|
||||
|
||||
UserController.delete("/:id?", needDatabase, requireAuthenticated, async (req, res) => {
|
||||
let user = null;
|
||||
if (req.params.id) {
|
||||
if (req.user.accessLevel > 2) {
|
||||
user = await userModel.findById(req.params.id);
|
||||
} else {
|
||||
res.status(401).send("Unauthorized.");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
user = req.user;
|
||||
}
|
||||
|
||||
await user.deleteOne();
|
||||
res.status(200).send("Deleted user.");
|
||||
});
|
||||
|
||||
*/
|
||||
|
||||
UserController.post("/", needDatabase, async (req, res) => {
|
||||
try {
|
||||
let createdUser = new User({
|
||||
email: req.body.email,
|
||||
firstName: req.body.firstName,
|
||||
lastName: req.body.lastName,
|
||||
phone: req.body.phone,
|
||||
password: req.body.password,
|
||||
});
|
||||
await createdUser.save();
|
||||
res.sendStatus(201);
|
||||
return;
|
||||
} catch (err) {
|
||||
if (err.name === "TypeError" || err.name === "ValidationError") {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.error(err);
|
||||
res.status(400).send(err.toString());
|
||||
} else {
|
||||
res.status(400).send("Missing required user info.");
|
||||
}
|
||||
} else if (err.name === "MongoServerError" && err.message.startsWith("E11000")) {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.error(err);
|
||||
res.status(409).send(err.toString());
|
||||
} else {
|
||||
res.status(409).send("User already exists.");
|
||||
}
|
||||
} else {
|
||||
console.error(err);
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
res.status(500).send(err.toString());
|
||||
} else {
|
||||
res.status(500).send("Internal server error. This issue has been noted.");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default UserController;
|
||||
2
sports-matcher/server/database/mongoose.js
Normal file
2
sports-matcher/server/database/mongoose.js
Normal file
@ -0,0 +1,2 @@
|
||||
export const mongooseDbName = process.env.DB_NAME || "sm_db";
|
||||
export const mongoURI = process.env.MONGODB_URI || "mongodb://127.0.0.1:27017";
|
||||
28
sports-matcher/server/middleware/authority.js
Normal file
28
sports-matcher/server/middleware/authority.js
Normal file
@ -0,0 +1,28 @@
|
||||
import MongoStore from "connect-mongo";
|
||||
import session from "express-session";
|
||||
import { mongooseDbName, mongoURI } from "../database/mongoose.js";
|
||||
import userModel from "../schemas/userModel.js";
|
||||
const sessionConf = {
|
||||
secret: process.env.SESSION_SECRET || "super duper secret string.",
|
||||
cookie: {
|
||||
expires: process.env.SESSION_TIMEOUT || 300000,
|
||||
httpOnly: true,
|
||||
},
|
||||
saveUninitialized: false,
|
||||
resave: false,
|
||||
};
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
sessionConf.cookie.secure = true;
|
||||
sessionConf.store = MongoStore.create({ mongoUrl: mongoURI, dbName: mongooseDbName });
|
||||
}
|
||||
export const userSession = session(sessionConf);
|
||||
|
||||
export async function requireAuthenticated(req, res, next) {
|
||||
if (req.session.userId) {
|
||||
req.user = await userModel.findById(req.session.userId);
|
||||
next();
|
||||
} else {
|
||||
res.status(401).send("Not authorized.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
9
sports-matcher/server/middleware/database.js
Normal file
9
sports-matcher/server/middleware/database.js
Normal file
@ -0,0 +1,9 @@
|
||||
import mongoose from "mongoose";
|
||||
|
||||
export function needDatabase(res, req, next) {
|
||||
if (mongoose.connection.readyState != 1) {
|
||||
res.status(500).send("Internal server error: Database connection faulty.");
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
5627
sports-matcher/server/package-lock.json
generated
Normal file
5627
sports-matcher/server/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
sports-matcher/server/package.json
Normal file
29
sports-matcher/server/package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"develop": "NODE_ENV=development nodemon server.js",
|
||||
"start": "NODE_ENV=production node server.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"eslint": "^8.12.0",
|
||||
"nodemon": "^2.0.15"
|
||||
},
|
||||
"dependencies": {
|
||||
"bcrypt": "^5.0.1",
|
||||
"body-parser": "^1.19.2",
|
||||
"connect-mongo": "^4.6.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.17.3",
|
||||
"express-session": "^1.17.2",
|
||||
"mongoose": "^6.2.8",
|
||||
"validator": "^13.7.0"
|
||||
}
|
||||
}
|
||||
40
sports-matcher/server/schemas/matchModel.js
Normal file
40
sports-matcher/server/schemas/matchModel.js
Normal file
@ -0,0 +1,40 @@
|
||||
import mongoose from "mongoose";
|
||||
import ModelNameRegister from "./modelNameRegister.js";
|
||||
|
||||
const Types = mongoose.Schema.Types; // Some types require defining from this object.
|
||||
|
||||
const matchSchema = new mongoose.Schema({
|
||||
title: { type: String, required: true, trim: true },
|
||||
when: { type: Date, required: true },
|
||||
publicity: { type: Number, required: true, default: 2 },
|
||||
location: {
|
||||
type: [Number],
|
||||
required: true,
|
||||
validate: {
|
||||
validator: function (v) {
|
||||
return v.length === 2;
|
||||
},
|
||||
message: "Invalid coordinate format (array not length of 2)."
|
||||
}
|
||||
},
|
||||
creator: { type: Types.ObjectId, ref: ModelNameRegister.User },
|
||||
participants: { type: [{ type: Types.ObjectId, ref: ModelNameRegister.User }], required: true, default: [] },
|
||||
difficulty: { type: Number, required: true },
|
||||
sport: { type: Types.ObjectId, ref: ModelNameRegister.Sport },
|
||||
createDate: { type: Date, required: true, default: Date.now }
|
||||
});
|
||||
|
||||
matchSchema.pre("remove", function (next) {
|
||||
const match = this;
|
||||
match.populate("creator").populate("participants");
|
||||
|
||||
match.participants.forEach(participant => {
|
||||
const index = participant.participatingMatches.indexOf(match._id);
|
||||
participant.participatingMatches.splice(index, 1);
|
||||
});
|
||||
|
||||
match.creator.createdMatches.splice(match.creator.createdMatches.indexOf(match._id), 1);
|
||||
next();
|
||||
});
|
||||
|
||||
export default mongoose.model(ModelNameRegister.Match, matchSchema);
|
||||
6
sports-matcher/server/schemas/modelNameRegister.js
Normal file
6
sports-matcher/server/schemas/modelNameRegister.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
Match: "match",
|
||||
User: "user",
|
||||
Sport: "sport",
|
||||
Rental: "rental",
|
||||
};
|
||||
23
sports-matcher/server/schemas/rentalModel.js
Normal file
23
sports-matcher/server/schemas/rentalModel.js
Normal file
@ -0,0 +1,23 @@
|
||||
import mongoose from "mongoose";
|
||||
import modelNameRegister from "./modelNameRegister.js";
|
||||
|
||||
const Types = mongoose.Schema.Types;
|
||||
|
||||
const rentalSchema = new mongoose.Schema({
|
||||
title: { type: String, required: true, trim: true },
|
||||
rate: { type: String, required: true, trim: true },
|
||||
description: { type: String, required: true },
|
||||
contact: { type: String, required: true },
|
||||
createDate: { type: Date, required: true, default: Date.now },
|
||||
creator: { type: Types.ObjectId, ref: modelNameRegister.User }
|
||||
});
|
||||
|
||||
rentalSchema.pre("remove", async function (next) {
|
||||
const rental = this;
|
||||
const rentalInd = rental.creator.createdRentals.indexOf(rental._id);
|
||||
rental.creator.createdRentals.splice(rentalInd, 1);
|
||||
await rental.save();
|
||||
next();
|
||||
});
|
||||
|
||||
export default mongoose.model(modelNameRegister.Rental, rentalSchema);
|
||||
19
sports-matcher/server/schemas/sportModel.js
Normal file
19
sports-matcher/server/schemas/sportModel.js
Normal file
@ -0,0 +1,19 @@
|
||||
import mongoose from "mongoose";
|
||||
import ModelNameRegister from "./modelNameRegister.js";
|
||||
|
||||
const sportSchema = new mongoose.Schema({
|
||||
name: { type: String, required: true, unique: true, trim: true },
|
||||
minPlayers: { type: Number, required: true, default: 1 },
|
||||
description: { type: String, required: true, trim: true }
|
||||
});
|
||||
|
||||
sportSchema.pre("save", function (next) {
|
||||
this.name = this.name.toLowerCase();
|
||||
next();
|
||||
});
|
||||
|
||||
sportSchema.statics.findByName = function (name) {
|
||||
return this.findOne({ name: name.trim().toLowerCase() });
|
||||
};
|
||||
|
||||
export default mongoose.model(ModelNameRegister.Sport, sportSchema);
|
||||
69
sports-matcher/server/schemas/userModel.js
Normal file
69
sports-matcher/server/schemas/userModel.js
Normal file
@ -0,0 +1,69 @@
|
||||
import mongoose from "mongoose";
|
||||
import validator from "validator";
|
||||
import bcrypt from "bcrypt";
|
||||
import modelNameRegister from "./modelNameRegister.js";
|
||||
|
||||
const Types = mongoose.Schema.Types;
|
||||
|
||||
const userSchema = new mongoose.Schema({
|
||||
email: {
|
||||
type: String,
|
||||
required: true,
|
||||
minlength: 1,
|
||||
trim: true,
|
||||
unique: true,
|
||||
validate: {
|
||||
validator: validator.isEmail,
|
||||
message: "String not email.",
|
||||
}
|
||||
},
|
||||
firstName: { type: String, required: true, trim: true },
|
||||
lastName: { type: String, required: true, trim: true },
|
||||
joinDate: { type: Date, default: Date.now, required: true },
|
||||
phone: { type: Number, required: false, min: 0 },
|
||||
password: {
|
||||
type: String,
|
||||
required: true,
|
||||
minlength: 8
|
||||
// TODO: Custom validator for password requirements?
|
||||
},
|
||||
createdMatches: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Match }], required: true, default: [] },
|
||||
participatingMatches: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Match }], required: true, default: [] },
|
||||
createdRentals: { type: [{ type: Types.ObjectId, ref: modelNameRegister.Rental }], required: true, default: [] },
|
||||
emailPublicity: { type: Number, required: true, default: 0 },
|
||||
bioPublicity: { type: Boolean, required: true, default: false },
|
||||
phonePublicity: { type: Boolean, required: true, default: false },
|
||||
participatingMatchesPublicity: { type: Boolean, required: true, default: false },
|
||||
friends: { type: Types.ObjectId, ref: modelNameRegister.User },
|
||||
accessLevel: { type: Number, required: true, default: 0 },
|
||||
});
|
||||
|
||||
userSchema.statics.credentialsExist = async function (email, password) {
|
||||
let userModel = this;
|
||||
let user = await userModel.findOne({ email: email });
|
||||
if (!user) {
|
||||
return Promise.reject(new Error("Credentials do not exist."));
|
||||
}
|
||||
if (await bcrypt.compare(password, user.password)) {
|
||||
return user;
|
||||
}
|
||||
};
|
||||
|
||||
userSchema.pre("save", function (next) {
|
||||
let user = this;
|
||||
if (user.isModified("password")) { // Only perform hashing if the password has changed.
|
||||
bcrypt.genSalt(10, (err, salt) => {
|
||||
bcrypt.hash(user.password, salt, (err, hash) => {
|
||||
if (err) {
|
||||
throw err; // Probably not, but I'm gonna leave this here for now.
|
||||
}
|
||||
user.password = hash;
|
||||
next();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
export default mongoose.model(modelNameRegister.User, userSchema);
|
||||
48
sports-matcher/server/server.js
Normal file
48
sports-matcher/server/server.js
Normal file
@ -0,0 +1,48 @@
|
||||
import express from "express";
|
||||
import bodyParser from "body-parser";
|
||||
import mongoose from "mongoose";
|
||||
import UserController from "./controllers/userController.js";
|
||||
import MatchController from "./controllers/matchController.js";
|
||||
import SportController from "./controllers/sportController.js";
|
||||
import { userSession } from "./middleware/authority.js";
|
||||
import { mongooseDbName, mongoURI } from "./database/mongoose.js";
|
||||
import cors from "cors";
|
||||
import rentalController from "./controllers/rentalController.js";
|
||||
|
||||
const server = express();
|
||||
const port = process.env.PORT || 5000;
|
||||
|
||||
server.use(express.static("public")); // For all client files.
|
||||
|
||||
// Connection documentation: https://mongoosejs.com/docs/connections.html
|
||||
try {
|
||||
mongoose.connect(mongoURI, {
|
||||
useNewUrlParser: true,
|
||||
useUnifiedTopology: true,
|
||||
dbName: mongooseDbName,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("We are running in development mode.");
|
||||
mongoose.set("bufferCommands", false); // We want to know if there are connection issues immediately for development. Disables globally.
|
||||
server.use(cors({ credentials: true, origin: "http://localhost:3000" }));
|
||||
}
|
||||
|
||||
// Docs: https://www.npmjs.com/package/body-parser
|
||||
server.use(bodyParser.json());
|
||||
server.use(bodyParser.urlencoded({ extended: true }));
|
||||
|
||||
server.use(userSession);
|
||||
|
||||
server.use("/api/user", UserController);
|
||||
server.use("/api/match", MatchController);
|
||||
server.use("/api/sport", SportController);
|
||||
server.use("/api/rental", rentalController);
|
||||
|
||||
server.listen(port, () => {
|
||||
console.log(`Server listening on port ${port}.`);
|
||||
});
|
||||
@ -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,38 +0,0 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
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';
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Routes>
|
||||
<Route path="" element={<Home />} />
|
||||
<Route path="sign-in" element={<SignIn />} />
|
||||
<Route path="sign-up" element={<SignUp />} />
|
||||
<Route path="admin" element={<Admin />} />
|
||||
<Route path="chat-window" element={<ChatWindow />} />
|
||||
<Route path="user-dashboard" element={<UserDashboard />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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,115 +0,0 @@
|
||||
/* 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";
|
||||
import Navbar from './Navbar';
|
||||
|
||||
class ChatWindow extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div class="chatcomponent">
|
||||
<Navbar></Navbar>
|
||||
<UserList />
|
||||
<MessageList />
|
||||
<ChatInput />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class UserList extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="contactlist">
|
||||
<Contact pfpsrc="./chief.jpg" name="Master Chief"/>
|
||||
<Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
|
||||
<Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class MessageList extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div class="messagelist">
|
||||
<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="Aiight, see you at 4" side="right" />
|
||||
<Chat message="As you wish." side="left" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
// class ChatWindow extends React.Component {
|
||||
// render() {
|
||||
// return (
|
||||
// <div>
|
||||
// <ChatUserList />
|
||||
// {/* <MessageList /> */}
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
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)}
|
||||
<div>
|
||||
<textarea
|
||||
class="chatinput"
|
||||
value={message}
|
||||
placeholder="Press ENTER to send, SHIFT + ENTER for new line"
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
class ChatInput2 extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.setState({inputVal : ""})
|
||||
}
|
||||
|
||||
handleUserInput(e) {
|
||||
this.setState(this.setState({inputVal : e.target.value}));
|
||||
};
|
||||
|
||||
render() {
|
||||
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) {
|
||||
if(e.key === 'Enter'){
|
||||
e.preventDefault(); // Ensure it is only this code that runs
|
||||
this.setState({inputVal : ""});
|
||||
}
|
||||
}
|
||||
}
|
||||
export default ChatWindow;
|
||||
@ -1,38 +0,0 @@
|
||||
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
|
||||
|
||||
import React from 'react';
|
||||
import './chats.css';
|
||||
|
||||
class Contact extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
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"})
|
||||
} else {
|
||||
this.setState({selected : "false"})
|
||||
}
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div class={this.state.selected === "true" ? "contact dark" : "contact"}>
|
||||
<div class="profilepiccontainer">
|
||||
<img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()}
|
||||
alt="profile" />
|
||||
</div>
|
||||
<div class="profilenamecontainer">
|
||||
<div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Contact;
|
||||
@ -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,30 +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 { ListItemIcon } from '@mui/material';
|
||||
|
||||
export default function ListSuggestedMatch() {
|
||||
return (<ListItem alignItems="flex-start">
|
||||
<ListItemIcon>
|
||||
<SportsTennisIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Tennis - King of The Court"
|
||||
secondary={
|
||||
<React.Fragment>
|
||||
<Typography
|
||||
sx={{ display: 'inline' }}
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="text.primary"
|
||||
>
|
||||
12:30PM - 123 Alphabet St. Toronto ON.
|
||||
</Typography>
|
||||
{" — John Smith, Alfred Baker, and Samantha Wright"}
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
</ListItem>);
|
||||
}
|
||||
@ -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,153 +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 IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import Container from '@mui/material/Container';
|
||||
import Button from '@mui/material/Button';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import AccountCircle from '@mui/icons-material/AccountCircle';
|
||||
import ForumIcon from '@mui/icons-material/Forum';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const pages = ['Dashboard'];
|
||||
|
||||
export default function Navbar() {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{ background: '#00226D' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ mr: 2, display: { xs: 'none', md: 'flex' }, fontSize: '150%', borderRight: '0.05em solid black', borderColor: 'white', paddingRight: '1.5em' }}
|
||||
>
|
||||
Sports Matcher
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
{pages.map((page) => (
|
||||
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center">{page}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
||||
>
|
||||
Sports Matcher
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
onClick={() => { navigate('/user-dashboard') }}
|
||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0, marginRight: '1%' }}>
|
||||
<Tooltip title="Chats">
|
||||
<IconButton onClick={() => { navigate('/chat-window') }} sx={{ p: 0 }}>
|
||||
<ForumIcon sx={{ color: 'white' }}></ForumIcon>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<AccountCircle sx={{ color: 'white' }}></AccountCircle>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '30px' }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">Profile</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">Account</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate('/sign-in')}>
|
||||
<Typography textAlign="center">Sign Out</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
|
||||
|
||||
.chatcomponent > * {
|
||||
display: inline-block;
|
||||
}
|
||||
.contact {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-bottom: 1px;
|
||||
border-color:rgb(75, 75, 75);
|
||||
|
||||
background-color: rgb(80, 80, 80);
|
||||
height: 80px;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
.contact.dark {
|
||||
background-color: black;
|
||||
}
|
||||
.contactlist {
|
||||
height: 90%;
|
||||
width: 13%;
|
||||
top: 10%;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2%;
|
||||
background: rgb(48, 45, 45);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
.messagelist {
|
||||
height: 70%;
|
||||
width: 87%;
|
||||
top: 10%;
|
||||
left: 13%;
|
||||
|
||||
position: absolute;
|
||||
background-color: rgb(80, 80, 80);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.messagelist > * {
|
||||
display: block;
|
||||
}
|
||||
.profilepiccontainer {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
.profilepic {
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.profilenamecontainer {
|
||||
text-align: center;
|
||||
padding: 7%;
|
||||
}
|
||||
.profilename {
|
||||
color: white;
|
||||
}
|
||||
.chatbubble {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
}
|
||||
.left {
|
||||
background-color: rgba(0, 57, 163, 0.637);
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
background-color: khaki;
|
||||
color: black;
|
||||
margin-right: 20px;
|
||||
float: right;
|
||||
}
|
||||
.chatbubble-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
.chatinput {
|
||||
background-color: rgb(75, 75, 75);
|
||||
top: 80%;
|
||||
left: 13%;
|
||||
position: absolute;
|
||||
|
||||
height: 20%;
|
||||
width: 87%;
|
||||
|
||||
color: antiquewhite;
|
||||
|
||||
border-width: 2px;
|
||||
border-color: rgb(48, 45, 45);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
@ -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,13 +0,0 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
Loading…
Reference in New Issue
Block a user