Rewrite phase 1.

Started improved client code structure.

Implemented session based authentication serverside.

Implemented user, match, and sport database models serverside.

Implemented Controllers for variety of C and R operations of CRUD.
This commit is contained in:
Harrison Deng 2022-04-04 20:15:43 -05:00
parent eea74dab09
commit ba566040b1
58 changed files with 34986 additions and 670 deletions

View File

@ -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 # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux,node,python,react
/node_modules # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,linux,node,python,react
/.pnp
.pnp.js
# testing ### Linux ###
/coverage *~
# production # temporary files which can be created if a process still has a handle open of a deleted file
/build .fuse_hidden*
# misc # KDE directory preferences
.DS_Store .directory
.env.local
.env.development.local
.env.test.local
.env.production.local
# 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* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.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/**

View File

@ -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). A CSC309 Project.
## 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)

View 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
View 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*

View 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

File diff suppressed because it is too large Load Diff

View File

@ -1,24 +1,23 @@
{ {
"name": "sports-matcher", "name": "client",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.8.1", "@testing-library/jest-dom": "^5.16.3",
"@emotion/styled": "^11.8.1", "@testing-library/react": "^12.1.4",
"@mui/icons-material": "^5.5.0",
"@mui/material": "^5.5.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^2.2.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.2.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "NODE_ENV=development API_HOST=http://localhost:5000 react-scripts start",
"build": "react-scripts build", "build": "../scripts/build.py",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
@ -39,5 +38,9 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"eslint": "^8.12.0",
"eslint-plugin-react": "^7.29.4"
} }
} }

View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -0,0 +1,41 @@
import "./styles/Layout.css";
import "./styles/extra.css";
import React from "react";
import { NavLink, Route, Routes } 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";
export default class Layout extends React.Component {
render() {
return (
<div id="app">
<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>
</NavbarCollapse>
</Container>
</Navbar>
</header>
<main>
<Routes>
<Route path="/" element={<Welcome></Welcome>}>
</Route>
</Routes>
</main>
<footer>
</footer>
</div>
);
}
}

View 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 GameInfoCard extends React.Component {
constructor(props) {
super(props);
}
getParticipants() {
let participants = [];
this.props.match.registeredUsers.array.forEach(user => {
participants.push(user.firstName);
});
return participants;
}
render() {
return (
<Card style={{ width: "20rem" }}>
<Card.Body>
<Card.Title>{this.props.match.sport}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
<Card.Text>
Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
</Card.Text>
<Button variant="primary">Join!</Button>
</Card.Body>
</Card>
);
}
}
GameInfoCard.propTypes = {
match: propTypes.object,
};

View File

@ -0,0 +1,21 @@
import React from "react";
import propTypes from "prop-types";
import GameInfoCard from "./GameInfoCard";
export default class GameInfoCardDisplay extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="horizontal-scroller">
{this.props.recommendedMatches.map((match) => <GameInfoCard key={match.id} match={match}></GameInfoCard>)}
</div>
);
}
}
GameInfoCardDisplay.propTypes = {
recommendedMatches: propTypes.array,
};

View File

@ -0,0 +1,19 @@
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.
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();

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,28 @@
import React from "react";
import { apiClient } from "../utils/httpClients";
export default class Welcome extends React.Component {
constructor(props) {
super(props);
this.recentMatchesRequest = apiClient.get("/match/recent/15");
}
render() {
return (
<div className="page-root">
<div className="jumbotron" >
<h1>Sports Matcher</h1>
<p>The best place to find a local match for a good game of your favourite sport!</p>
</div>
<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>
</div>
</div>
);
}
}

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

View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";

View 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;
}

View File

@ -0,0 +1,19 @@
.jumbotron {
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 12rem;
padding-bottom: 1rem;
text-align: center;
background-size: cover;
background-color: black;
color: white;
}
.jumbotron h1 {
font-size: 1.5rem;
}
.horizontal-scroller {
overflow-x: scroll;
}

View File

@ -0,0 +1,6 @@
import axios from "axios";
export const apiClient = axios.create({
baseURL: process.env.API_HOST,
timeout: 5000,
});

View File

@ -0,0 +1,22 @@
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;
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

View 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))

View 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"
]
}
}

View 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
}
]
}

View File

@ -0,0 +1,94 @@
import express from "express";
import { authenticationGuard } 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({ queryResults });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
let limit = req.params.limit;
if (!req.params.limit) limit = 10;
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;
}
try {
const recent = await matchModel.find().where("publicity").gte(2).limit(limit).sort({ createDate: -1 });
res.status(200).send({ recent: recent });
} catch (err) {
console.error(err);
res.status(500).send("Internal server error.");
// TODO: Check and improve error handling.
}
});
// TODO: delete, update match.
MatchController.post("/", needDatabase, authenticationGuard, 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]
});
await match.save();
user.createdMatches.push(match._id);
user.participatingMatches.push(match._id);
await user.save();
res.status(201).send(match);
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
// TODO: Develop the error handling.
}
});
MatchController.get("/:matchId", needDatabase, async (req, res) => {
if (!req.params.matchId) {
res.status(404).send("Id must be provided to retrieve match");
return;
}
try {
const match = await matchModel.findById(req.params.matchId);
if (match) {
res.status(200).send(match);
} else {
res.status(404).send("Could not find match with ID: " + req.params.matchId);
}
} catch (error) {
res.status(500).send("Internal server error.");
// TODO: Develop the error handling.
}
});
export default MatchController;

View File

@ -0,0 +1,48 @@
import express from "express";
import { authenticationGuard } 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, authenticationGuard, 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;

View File

@ -0,0 +1,169 @@
import express from "express";
import { authenticationGuard } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.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", authenticationGuard, (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("/email/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.email.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ email: selUser.email });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/firstName/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.firstName.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ firstName: selUser.firstName });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/lastName/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.lastName.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ email: selUser.lastName });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/phone/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.phone.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ phone: selUser.phone });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/participatingMatches/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (selUser.participatingMatches.public || curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ participatingMatches: selUser.participatingMatches });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/joinDate/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ joinDate: selUser.joinDate });
} else {
res.status(401).send("Could not authenticate request.");
}
});
UserController.get("/createdMatches/:userId?", needDatabase, authenticationGuard, async (req, res) => {
if (!req.params.userId) req.params.userId = req.session.userId;
const curUser = await User.findById(req.session.userId);
const selUser = req.session.userId === req.params.userId ? curUser : await User.findById(req.params.userId);
if (curUser._id === selUser._id || curUser.accessLevel > 2) {
res.status(200).send({ createdMatches: selUser.createdMatches });
} else {
res.status(401).send("Could not authenticate request.");
}
});
// TODO: Finish update requests using put.
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;

View 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";

View File

@ -0,0 +1,30 @@
import MongoStore from "connect-mongo";
import session from "express-session";
import { mongooseDbName, mongoURI } from "../database/mongoose.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 function authenticationGuard(req, res, next) {
if (req.session.userId) {
next();
} else {
res.sendStatus(401);
return;
}
}
// TODO: Authentication
// TODO: Identity
// TODO: Authority

View 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

File diff suppressed because it is too large Load Diff

View 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"
}
}

View File

@ -0,0 +1,27 @@
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 }
});
export default mongoose.model(ModelNameRegister.Match, matchSchema);

View File

@ -0,0 +1,5 @@
export default {
Match: "match",
User: "user",
Sport: "sport"
};

View 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);

View File

@ -0,0 +1,68 @@
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: [] },
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);

View File

@ -0,0 +1,47 @@
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";
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") {
mongoose.set("bufferCommands", false); // We want to know if there are connection issues immediately for development. Disables globally.
server.use(cors());
}
// Docs: https://www.npmjs.com/package/body-parser
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: true }));
server.use(userSession);
server.use("/user", UserController);
server.use("/match", MatchController);
server.use("/sport", SportController);
server.listen(port, () => {
console.log(`Server listening on port ${port}.`);
});

View File

@ -1,32 +0,0 @@
import './css/App.css';
import { Route, Routes } from 'react-router-dom';
import HomePage from './pages/HomePage';
import { Component, createContext } from 'react';
import Navbar from './components/Navbar';
import ChatPage from './pages/ChatPage';
class App extends Component {
constructor(props) {
super(props);
this.AuthContext = createContext()
this.AuthState = {
authenticated: false
}
}
render() {
return (
<div className='App'>
<this.AuthContext.Provider value={this.AuthState} >
<Navbar />
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='/chat-page' element={<ChatPage />} />
<Route path='/' element={<HomePage />} />
</Routes>
</this.AuthContext.Provider>
</div >
);
}
}
export default App;

View File

@ -1,18 +0,0 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import '../css/chats.css'
class Chat extends React.Component {
render() {
return (
<div class="chatbubble-container">
<div class={this.props.side === "left" ? "chatbubble left" : "chatbubble right"}>
{this.props.message}
</div>
</div>
)
}
}
export default Chat;

View File

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

View File

@ -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={handleCloseNavMenu}
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-page') }} 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>
);
};

View File

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

View File

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

View File

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

View File

@ -1,20 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</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();

View File

@ -1,113 +0,0 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import '../css/chats.css'
import Chat from '../components/Chat'
import Contact from '../components/Contact'
import { useState } from "react";
class ChatPage extends React.Component {
render() {
return (
<div className="chatcomponent">
<UserList />
<MessageList />
<ChatInput />
</div>
)
}
}
class UserList extends React.Component {
render() {
return (
<div className="contactlist" >
<Contact pfpsrc="../fakedata/profiles/pictures/chief.jpg" name="Master Chief" />
<Contact pfpsrc="../fakedata/profiles/pictures/freeman.jpg" name="Gordon Freeman" />
<Contact pfpsrc="../fakedata/profiles/pictures/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 ChatPage;

View File

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

View File

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

View File

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

View File

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