turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Automatically apply eslint rules

This commit is contained in:
Felix Hamme 2019-05-08 18:26:54 +02:00 committed by Felix Hamme
parent f93f9a57ce
commit b40c0382a8
24 changed files with 439 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
js/api.js
View File

@ -3,74 +3,74 @@ import {
applyMiddleware,
combineReducers
} from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { errorMessages } from './constants';
import {errorMessages} from './constants';
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
const {publicRuntimeConfig} = getConfig();
const api_url = publicRuntimeConfig.api_url;
const axios = require('axios');
const actiontypes_userinfo = {
'REGISTER' : 'REGISTER',
'REGISTER_RESULT_SUCCESS' : 'REGISTER_RESULT_SUCCESS',
'REGISTER_RESULT_ERROR' : 'REGISTER_RESULT_ERROR',
'REGISTER': 'REGISTER',
'REGISTER_RESULT_SUCCESS': 'REGISTER_RESULT_SUCCESS',
'REGISTER_RESULT_ERROR': 'REGISTER_RESULT_ERROR',
'LOGIN' : 'LOGIN',
'LOGIN_RESULT_SUCCESS' : 'LOGIN_RESULT_SUCCESS',
'LOGIN_RESULT_ERROR' : 'LOGIN_RESULT_ERROR',
'LOGIN': 'LOGIN',
'LOGIN_RESULT_SUCCESS': 'LOGIN_RESULT_SUCCESS',
'LOGIN_RESULT_ERROR': 'LOGIN_RESULT_ERROR',
'LOGOUT' : 'LOGOUT',
'LOGOUT': 'LOGOUT',
'VERIFY_CREDENTIALS' : 'VERIFY_CREDENTIALS',
'VERIFY_CREDENTIALS_SUCCESS' : 'VERIFY_CREDENTIALS_SUCCESS',
'VERIFY_CREDENTIALS_ERROR' : 'VERIFY_CREDENTIALS_ERROR',
'VERIFY_CREDENTIALS': 'VERIFY_CREDENTIALS',
'VERIFY_CREDENTIALS_SUCCESS': 'VERIFY_CREDENTIALS_SUCCESS',
'VERIFY_CREDENTIALS_ERROR': 'VERIFY_CREDENTIALS_ERROR',
'STORE_AUTH_HEADERS' : 'STORE_AUTH_HEADERS',
'STORE_AUTH_HEADERS': 'STORE_AUTH_HEADERS',
'REHYDRATE' : 'USERINFO_REHYDRATE',
'CLEAR' : 'USERINFO_CLEAR'
'REHYDRATE': 'USERINFO_REHYDRATE',
'CLEAR': 'USERINFO_CLEAR'
};
const defaultstate_userinfo = {
isSignedIn : false,
username : null,
error : false,
errorMessages : [],
isSignedIn: false,
username: null,
error: false,
errorMessages: [],
accesstoken : null,
client : null,
expiry : null,
uid : null
accesstoken: null,
client: null,
expiry: null,
uid: null
};
const actiontypes_tournamentinfo = {
'REQUEST_TOURNAMENT' : 'REQUEST_TOURNAMENT',
'REQUEST_TOURNAMENT_SUCCESS' : 'REQUEST_TOURNAMENT_SUCCESS',
'REQUEST_TOURNAMENT': 'REQUEST_TOURNAMENT',
'REQUEST_TOURNAMENT_SUCCESS': 'REQUEST_TOURNAMENT_SUCCESS',
'CREATE_TOURNAMENT' : 'CREATE_TOURNAMENT',
'CREATE_TOURNAMENT': 'CREATE_TOURNAMENT',
'MODIFY_TOURNAMENT' : 'MODIFY_TOURNAMENT',
'MODIFY_TOURNAMENT_SUCCESS' : 'MODIFY_TOURNAMENT_SUCCESS',
'MODIFY_TOURNAMENT_ERROR' : 'MODIFY_TOURNAMENT_ERROR',
'MODIFY_TOURNAMENT': 'MODIFY_TOURNAMENT',
'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
'REHYDRATE' : 'TOURNAMENTINFO_REHYDRATE',
'CLEAR' : 'TOURNAMENTINFO_CLEAR',
'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
'CLEAR': 'TOURNAMENTINFO_CLEAR'
};
const defaultstate_tournamentinfo = {
code : '',
description : '',
id : -1,
name : '',
ownerUsername : '',
isPublic : '',
code: '',
description: '',
id: -1,
name: '',
ownerUsername: '',
isPublic: '',
stages: [],
teams : []
teams: []
};
const actiontypes_tournamentlist = {
@ -85,34 +85,34 @@ const defaultstate_tournamentlist = {
export function postRequest(state, url, data) {
return axios.post(api_url + url, data, {
headers : generateHeaders(state)
headers: generateHeaders(state)
});
}
export function getRequest(state, url) {
return axios.get(api_url + url, {
headers : generateHeaders(state)
headers: generateHeaders(state)
});
}
export function deleteRequest(state, url) {
return axios.delete(api_url + url, {
headers : generateHeaders(state)
headers: generateHeaders(state)
});
}
export function patchRequest(state, url, data) {
return axios.patch(api_url + url, data, {
headers : generateHeaders(state)
headers: generateHeaders(state)
});
}
function generateHeaders(state) {
if(state.userinfo.isSignedIn) {
if (state.userinfo.isSignedIn) {
return {
'access-token' : state.userinfo.accesstoken,
'client' : state.userinfo.client,
'uid' : state.userinfo.uid
'access-token': state.userinfo.accesstoken,
'client': state.userinfo.client,
'uid': state.userinfo.uid
};
} else {
return {};
@ -120,26 +120,26 @@ function generateHeaders(state) {
}
function storeOptionalToken(response) {
if(checkForAuthenticationHeaders(response)) {
if (checkForAuthenticationHeaders(response)) {
__store.dispatch({
type : actiontypes_userinfo.STORE_AUTH_HEADERS,
parameters : {
accesstoken : response.headers['access-token'],
client : response.headers['client'],
expiry : response.headers['expiry'],
uid : response.headers['uid']
type: actiontypes_userinfo.STORE_AUTH_HEADERS,
parameters: {
accesstoken: response.headers['access-token'],
client: response.headers['client'],
expiry: response.headers['expiry'],
uid: response.headers['uid']
}
});
}
}
function checkForAuthenticationHeaders(response) {
if(response.headers) {
if (response.headers) {
const requiredHeaders = [
'access-token', 'client', 'uid', 'expiry'
];
for(var i = 0; i < requiredHeaders.length; i++) {
if(!response.headers[requiredHeaders[i]]) {
for (let i = 0; i < requiredHeaders.length; i++) {
if (!response.headers[requiredHeaders[i]]) {
return false;
}
}
@ -149,31 +149,31 @@ function checkForAuthenticationHeaders(response) {
}
const reducer_userinfo = (state = defaultstate_userinfo, action) => {
switch(action.type) {
switch (action.type) {
case actiontypes_userinfo.REGISTER:
postRequest(action.state, '/users', {
'username' : action.parameters.username,
'email' : action.parameters.email,
'password' : action.parameters.password
}).then((resp) => {
'username': action.parameters.username,
'email': action.parameters.email,
'password': action.parameters.password
}).then(resp => {
__store.dispatch({
type : actiontypes_userinfo.REGISTER_RESULT_SUCCESS
type: actiontypes_userinfo.REGISTER_RESULT_SUCCESS
});
storeOptionalToken(resp);
}).catch((error) => {
}).catch(error => {
if (error.response) {
__store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters' : {
'errorMessages' : error.response.data.errors.full_messages
'type': actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters': {
'errorMessages': error.response.data.errors.full_messages
}
});
storeOptionalToken(error.response);
} else {
__store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters' : {
'errorMessages' : [
'type': actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters': {
'errorMessages': [
errorMessages['registration_errorunknown']['en']
]
}
@ -183,41 +183,41 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
return Object.assign({}, state, {});
case actiontypes_userinfo.REGISTER_RESULT_SUCCESS:
return Object.assign({}, state, {
error : false,
errorMessages : []
error: false,
errorMessages: []
});
case actiontypes_userinfo.REGISTER_RESULT_ERROR:
return Object.assign({}, state, {
error : true,
errorMessages : action.parameters.errorMessages
error: true,
errorMessages: action.parameters.errorMessages
});
case actiontypes_userinfo.LOGIN:
postRequest(action.state, '/users/sign_in', {
email : action.parameters.email,
password : action.parameters.password
}).then((resp) => {
email: action.parameters.email,
password: action.parameters.password
}).then(resp => {
__store.dispatch({
type : actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
parameters : {
username : resp.data.username,
type: actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
parameters: {
username: resp.data.username,
successCallback: action.parameters.successCallback
}
});
storeOptionalToken(resp);
}).catch((error) => {
if(error.response) {
}).catch(error => {
if (error.response) {
__store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters' : {
'errorMessages' : error.response.data.errors
'type': actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters': {
'errorMessages': error.response.data.errors
}
});
storeOptionalToken(error.response);
} else {
__store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters' : {
'errorMessages' : [ errorMessages['login_errorunknown']['en'] ]
'type': actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters': {
'errorMessages': [errorMessages['login_errorunknown']['en']]
}
});
}
@ -226,60 +226,60 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
case actiontypes_userinfo.LOGIN_RESULT_SUCCESS:
action.parameters.successCallback(action.parameters.username);
return Object.assign({}, state, {
isSignedIn : true,
error : false,
errorMessages : [],
username : action.parameters.username,
isSignedIn: true,
error: false,
errorMessages: [],
username: action.parameters.username
});
case actiontypes_userinfo.LOGIN_RESULT_ERROR:
return Object.assign({}, state, {
error : true,
errorMessages : action.parameters.errorMessages
error: true,
errorMessages: action.parameters.errorMessages
});
case actiontypes_userinfo.LOGOUT:
deleteRequest(action.state, '/users/sign_out').then(() => {
action.parameters.successCallback();
__store.dispatch({ type : actiontypes_userinfo.CLEAR });
__store.dispatch({type: actiontypes_userinfo.CLEAR});
}).catch(() => {
__store.dispatch({ type : actiontypes_userinfo.CLEAR });
__store.dispatch({type: actiontypes_userinfo.CLEAR});
});
return Object.assign({}, state, {});
case actiontypes_userinfo.STORE_AUTH_HEADERS:
return Object.assign({}, state, {
accesstoken : action.parameters.accesstoken,
client : action.parameters.client,
expiry : action.parameters.expiry,
uid : action.parameters.uid
accesstoken: action.parameters.accesstoken,
client: action.parameters.client,
expiry: action.parameters.expiry,
uid: action.parameters.uid
});
case actiontypes_userinfo.VERIFY_CREDENTIALS:
getRequest(action.state, '/users/validate_token').then((resp) => {
getRequest(action.state, '/users/validate_token').then(resp => {
storeOptionalToken(resp);
}).catch(() => {
__store.dispatch({ type: actiontypes_userinfo.CLEAR });
__store.dispatch({type: actiontypes_userinfo.CLEAR});
});
return Object.assign({}, state, {});
case actiontypes_userinfo.REHYDRATE:
return Object.assign({}, state, action.parameters, { error: false, errorMessages: [] });
return Object.assign({}, state, action.parameters, {error: false, errorMessages: []});
case actiontypes_userinfo.CLEAR:
return Object.assign({}, state, {
isSignedIn : false,
username : null,
error : false,
errorMessages : [],
isSignedIn: false,
username: null,
error: false,
errorMessages: [],
accesstoken : null,
client : null,
expiry : null,
uid : null
accesstoken: null,
client: null,
expiry: null,
uid: null
});
default: return state;
}
};
const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) => {
switch(action.type) {
switch (action.type) {
case actiontypes_tournamentinfo.CREATE_TOURNAMENT:
postRequest(action.state, '/tournaments', action.parameters.tournament).then((resp) => {
postRequest(action.state, '/tournaments', action.parameters.tournament).then(resp => {
storeOptionalToken(resp);
action.parameters.successCallback();
}).catch(() => {
@ -287,7 +287,7 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
});
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT:
getRequest(action.state, '/tournaments/' + action.parameters.code).then((resp) => {
getRequest(action.state, '/tournaments/' + action.parameters.code).then(resp => {
__store.dispatch({
type: actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS,
parameters: resp.data
@ -300,23 +300,23 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS:
return Object.assign({}, state, {
code : action.parameters.code,
description : action.parameters.description,
id : action.parameters.id,
name : action.parameters.name,
ownerUsername : action.parameters.owner_username,
isPublic : action.parameters.public,
code: action.parameters.code,
description: action.parameters.description,
id: action.parameters.id,
name: action.parameters.name,
ownerUsername: action.parameters.owner_username,
isPublic: action.parameters.public,
stages: action.parameters.stages,
teams : action.parameters.teams
teams: action.parameters.teams
});
case actiontypes_tournamentinfo.MODIFY_TOURNAMENT:
patchRequest(action.state, '/teams/' + action.parameters.teamid, {
name: action.parameters.name
}).then((resp) => {
}).then(resp => {
storeOptionalToken(resp);
action.parameters.onSuccess();
}).catch((error) => {
if(error.response) {
}).catch(error => {
if (error.response) {
storeOptionalToken(error.response);
}
action.parameters.onError();
@ -341,15 +341,15 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) => {
switch (action.type) {
case actiontypes_tournamentlist.FETCH:
getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => {
getRequest(action.state, '/tournaments?type=' + action.parameters.type).then(resp => {
__store.dispatch({
type: actiontypes_tournamentlist.FETCH_SUCCESS,
parameters: resp.data
});
storeOptionalToken(resp);
action.parameters.successCallback(resp.data);
}).catch((error) => {
if(error.response) {
}).catch(error => {
if (error.response) {
storeOptionalToken(error.response);
}
action.parameters.errorCallback();
@ -369,13 +369,13 @@ const reducers = {
};
const default_applicationstate = {
userinfo : defaultstate_userinfo,
userinfo: defaultstate_userinfo,
tournamentinfo: defaultstate_tournamentinfo,
tournamentlist: defaultstate_tournamentlist
};
var __store;
var applicationHydrated = false;
let __store;
let applicationHydrated = false;
export function initializeStore(initialState = default_applicationstate) {
__store = createStore(
@ -384,7 +384,7 @@ export function initializeStore(initialState = default_applicationstate) {
composeWithDevTools(applyMiddleware(thunkMiddleware))
);
__store.subscribe(() => {
if(applicationHydrated) {
if (applicationHydrated) {
localStorage.setItem('reduxState', JSON.stringify(__store.getState()));
}
});
@ -394,7 +394,7 @@ export function initializeStore(initialState = default_applicationstate) {
export function verifyCredentials() {
rehydrateApplicationState();
if(__store.getState().userinfo.isSignedIn) {
if (__store.getState().userinfo.isSignedIn) {
__store.dispatch({
type: actiontypes_userinfo.VERIFY_CREDENTIALS,
state: __store.getState()
@ -428,7 +428,7 @@ export function login(email, password, successCallback) {
export function logout(successCallback) {
__store.dispatch({
type : actiontypes_userinfo.LOGOUT,
type: actiontypes_userinfo.LOGOUT,
parameters: {
successCallback: successCallback
},
@ -466,8 +466,8 @@ export function updateTeamName(team, successCB, errorCB) {
parameters: {
teamid: team.id,
name: team.name,
onSuccess : successCB,
onError : errorCB
onSuccess: successCB,
onError: errorCB
},
state: __store.getState()
});
@ -494,18 +494,18 @@ function rehydrateApplicationState() {
JSON.parse(localStorage.getItem('reduxState')) :
undefined;
if(persistedState) {
if (persistedState) {
__store.dispatch({
type : actiontypes_userinfo.REHYDRATE,
parameters : Object.assign({}, persistedState.userinfo)
type: actiontypes_userinfo.REHYDRATE,
parameters: Object.assign({}, persistedState.userinfo)
});
__store.dispatch({
type : actiontypes_tournamentinfo.REHYDRATE,
parameters : Object.assign({}, persistedState.tournamentinfo)
type: actiontypes_tournamentinfo.REHYDRATE,
parameters: Object.assign({}, persistedState.tournamentinfo)
});
__store.dispatch({
type : actiontypes_tournamentlist.REHYDRATE,
parameters : Object.assign({}, persistedState.tournamentlist)
type: actiontypes_tournamentlist.REHYDRATE,
parameters: Object.assign({}, persistedState.tournamentlist)
});
applicationHydrated = true;
}

72
js/components/EditableStringList.js
View File

@ -1,19 +1,18 @@
import React from 'react';
import {
import {
Alert,
Button,
Card,
CardBody,
CardTitle,
Input,
InputGroup,
InputGroupAddon
Input,
InputGroup,
InputGroupAddon
} from 'reactstrap';
import '../../static/css/editablestringlist.css';
export default class EditableStringList extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -31,9 +30,9 @@ export default class EditableStringList extends React.Component {
return false;
}
this.state.teams.push(text);
var lastGroup = this.state.groups[this.state.groups.length - 1];
if(lastGroup === undefined || lastGroup.length >= this.state.groupSize) {
let lastGroup = this.state.groups[this.state.groups.length - 1];
if (lastGroup === undefined || lastGroup.length >= this.state.groupSize) {
this.state.groups[this.state.groups.length] = [];
}
lastGroup = this.state.groups[this.state.groups.length - 1];
@ -51,7 +50,7 @@ export default class EditableStringList extends React.Component {
}
remove(text) {
if(this.removeTeamFromGroup(text) === false) {
if (this.removeTeamFromGroup(text) === false) {
return false;
}
@ -67,20 +66,20 @@ export default class EditableStringList extends React.Component {
removeTeamFromGroup(text) {
this.state.teams = this.state.teams.filter(item => item !== text);
let teamIndex = this.findTeam(text);
if(teamIndex === null) {
const teamIndex = this.findTeam(text);
if (teamIndex === null) {
return false;
}
// Move every first team to the next group
this.state.groups[teamIndex.group].splice(teamIndex.team, 1);
for(var group = teamIndex.group; group < this.state.groups.length - 1; group++) {
let currentGroup = this.state.groups[group];
for (let group = teamIndex.group; group < this.state.groups.length - 1; group++) {
const currentGroup = this.state.groups[group];
currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0];
}
// delete the last group in case it is empty
if(this.state.groups[this.state.groups.length - 1].length === 0) {
if (this.state.groups[this.state.groups.length - 1].length === 0) {
this.state.groups.splice(this.state.groups.length - 1, 1);
}
@ -88,9 +87,9 @@ export default class EditableStringList extends React.Component {
}
findTeam(text) {
for(var group = 0; group < this.state.groups.length; group++) {
for(var team = 0; team < this.state.groups[group].length; team++) {
if(this.state.groups[group][team] === text) {
for (let group = 0; group < this.state.groups.length; group++) {
for (let team = 0; team < this.state.groups[group].length; team++) {
if (this.state.groups[group][team] === text) {
return {
group: group,
team: team
@ -102,17 +101,17 @@ export default class EditableStringList extends React.Component {
}
resizeGroups(newSize) {
let oldGroups = this.state.groups;
var rearrangedGroups = [];
const oldGroups = this.state.groups;
const rearrangedGroups = [];
for(var oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
for(var oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
let index = oldGroupIndex * this.state.groupSize + oldTeamIndex;
for (let oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
for (let oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
const index = oldGroupIndex * this.state.groupSize + oldTeamIndex;
let newGroupIndex = Math.floor(index / newSize);
let newTeamIndex = index % newSize;
const newGroupIndex = Math.floor(index / newSize);
const newTeamIndex = index % newSize;
if(newTeamIndex === 0) {
if (newTeamIndex === 0) {
rearrangedGroups[newGroupIndex] = [];
}
@ -143,11 +142,11 @@ export default class EditableStringList extends React.Component {
}
render() {
if(this.props.groupSize !== this.state.groupSize) {
if (this.props.groupSize !== this.state.groupSize) {
this.resizeGroups(this.props.groupSize);
}
if(this.props.groupPhaseEnabled) {
if (this.props.groupPhaseEnabled) {
if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return (
<div className="bg-light p-3 text-secondary font-italic">
@ -168,7 +167,7 @@ export default class EditableStringList extends React.Component {
return (
<div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
{this.state.teams.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)}
{this.state.teams.map(text => <Item text={text} key={text} removeItem={this.remove}/>)}
</div>
);
} else {
@ -184,7 +183,6 @@ export default class EditableStringList extends React.Component {
}
class GroupView extends React.Component {
constructor(props) {
super(props);
}
@ -199,9 +197,9 @@ class GroupView extends React.Component {
{group.map((team, teamindex) => (
<div key={team} draggable droppable="droppable"
className="grouped-team-item"
onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)}
onDragOver={(e) => this.onDragOver(e)}
onDrop={(e) => this.onDrop(e, groupindex, teamindex)}>
onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
onDragOver={e => this.onDragOver(e)}
onDrop={e => this.onDrop(e, groupindex, teamindex)}>
<Item text={team} removeItem={this.props.removeTeam}/>
@ -231,8 +229,8 @@ class GroupView extends React.Component {
onDrop(e, group, team) {
e.preventDefault();
let src = JSON.parse(e.dataTransfer.getData('text'));
let dest = {
const src = JSON.parse(e.dataTransfer.getData('text'));
const dest = {
group: group,
team: team
};
@ -256,7 +254,7 @@ class StringInput extends React.Component {
render() {
return (
<InputGroup className="mb-3">
<Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required onChange={this.handleChange} onKeyPress={(e) => {
<Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required onChange={this.handleChange} onKeyPress={e => {
if (e.key === 'Enter') {
this.submit();
return false;
@ -298,4 +296,4 @@ class Item extends React.Component {
</Alert>
);
}
}
}

17
js/components/ErrorComponents.js
View File

@ -1,9 +1,9 @@
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import Head from 'next/head';
import React from 'react';
import {Container} from 'reactstrap';
import { TurniereNavigation } from './Navigation';
import { Footer } from './Footer';
import {TurniereNavigation} from './Navigation';
import {Footer} from './Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -11,9 +11,8 @@ import '../../static/everypage.css';
import '../../static/css/error.css';
export class ErrorPageComponent extends React.Component {
static getInitialProps({ statusCode }) {
return { statusCode };
static getInitialProps({statusCode}) {
return {statusCode};
}
render() {
@ -30,7 +29,7 @@ export class ErrorPageComponent extends React.Component {
}
}
export function ErrorPage(props){
export function ErrorPage(props) {
return (
<Container className="mb-5">
<div className="row mb-5">

29
js/components/Login.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import {connect} from 'react-redux';
import Router from 'next/router';
import { login } from '../api';
import {login} from '../api';
import '../../static/css/errormessages.css';
import {notify} from 'react-notify-toast';
@ -28,11 +28,11 @@ export function Login(props) {
class LoginErrorList extends React.Component {
render() {
const { error, errorMessages } = this.props;
if(error) {
const {error, errorMessages} = this.props;
if (error) {
return (
<ul className='mt-3 error-box'>
{ errorMessages.map((message, index) =>
{ errorMessages.map((message, index) =>
<li key={index}>
{message}
</li>
@ -46,9 +46,9 @@ class LoginErrorList extends React.Component {
}
}
const mapStateToErrorMessages = (state) => {
const { errorMessages, error } = state.userinfo;
return { errorMessages, error };
const mapStateToErrorMessages = state => {
const {errorMessages, error} = state.userinfo;
return {errorMessages, error};
};
const VisibleLoginErrorList = connect(
@ -64,7 +64,7 @@ class LoginSuccessRedirectComponent extends React.Component {
}
}
const mapLoginState = (state) => {
const mapLoginState = state => {
const {isSignedIn} = state.userinfo;
return {isSignedIn};
};
@ -72,19 +72,18 @@ const mapLoginState = (state) => {
const LoginSuccessRedirect = connect(mapLoginState)(LoginSuccessRedirectComponent);
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email : '',
password : ''
email: '',
password: ''
};
}
tryLogin(event) {
event.preventDefault();
login(this.state.email, this.state.password, (username) => notify.show('Willkommen, ' + username + '!', 'success', 2500));
login(this.state.email, this.state.password, username => notify.show('Willkommen, ' + username + '!', 'success', 2500));
}
render() {
@ -106,16 +105,16 @@ class LoginForm extends React.Component {
}
handlePasswordInput(input) {
this.setState({ password : input.target.value });
this.setState({password: input.target.value});
}
handleEmailInput(input) {
this.setState({ email : input.target.value });
this.setState({email: input.target.value});
}
}
function Hint(props) {
if(props.hint != null) {
if (props.hint != null) {
return (
<h3>{ props.hint }</h3>
);

25
js/components/Navigation.js
View File

@ -10,14 +10,13 @@ import {
NavItem,
NavLink
} from 'reactstrap';
import { connect } from 'react-redux';
import React from 'react';
import {connect} from 'react-redux';
import React from 'react';
import { logout } from '../api';
import {logout} from '../api';
import {notify} from 'react-notify-toast';
export class TurniereNavigation extends React.Component {
constructor(props) {
super(props);
@ -58,7 +57,6 @@ function Navlink(props) {
}
class SmartNavLinks extends React.Component {
render() {
return (<Nav navbar className="mr-auto">
<Navlink target="/create" text="Turnier erstellen"/>
@ -74,18 +72,17 @@ function Betabadge() {
}
class InvisibleLoginLogoutButtons extends React.Component {
logout(){
logout() {
logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
}
render() {
const { isSignedIn, username } = this.props;
const {isSignedIn, username} = this.props;
if(isSignedIn) {
if (isSignedIn) {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
<Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
<Button outline color="success" onClick={this.logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>
);
@ -100,9 +97,9 @@ class InvisibleLoginLogoutButtons extends React.Component {
}
}
const mapStateToUserinfo = (state) => {
const { isSignedIn, username } = state.userinfo;
return { isSignedIn, username };
const mapStateToUserinfo = state => {
const {isSignedIn, username} = state.userinfo;
return {isSignedIn, username};
};
const LoginLogoutButtons = connect(
@ -111,4 +108,4 @@ const LoginLogoutButtons = connect(
const NavLinks = connect(
mapStateToUserinfo
)(SmartNavLinks);
)(SmartNavLinks);

4
js/components/TournamentList.js
View File

@ -23,7 +23,7 @@ export default class TournamentList extends React.Component {
Turniere vorhanden</p>;
} else {
return this.state.tournaments.map(item => (
//The code should be item.code but the api just supports it this way by now
// The code should be item.code but the api just supports it this way by now
<TournamentListEntry name={item.name} code={item.id} key={item.id}/>
));
}
@ -36,4 +36,4 @@ function TournamentListEntry(props) {
{props.name}
</a>
);
}
}

15
js/components/UserRestrictor.js
View File

@ -3,7 +3,7 @@ import React from 'react';
/**
* This component works just like a switch statement, although the conditions of the first items
* are checked first, and the first component with a condition that is true will be shown.
*
*
* For single conditions and options any kind of component can be taken, while the Option-component
* is dedicated for this job. The only important thing is that this component has to have a condition property.
*
@ -13,7 +13,7 @@ import React from 'react';
*
* function SomeRestrictedContent(props) {
* const { isSignedIn } = props;
*
*
* return (
* <UserRestrictor>
* <Option condition={isSignedIn}>
@ -30,14 +30,13 @@ import React from 'react';
* since it would always be taken otherwise (the options' conditions are checked from top to bottom)
*/
export class UserRestrictor extends React.Component {
render() {
const { children } = this.props;
const {children} = this.props;
for(var i in children) {
var c = children[i];
if(c.props.condition) {
for (const i in children) {
const c = children[i];
if (c.props.condition) {
return c;
}
}

8
js/constants.js
View File

@ -1,11 +1,11 @@
export const errorMessages = {
registration_errorunknown : {
en : 'An unknown error prevented a successful registration.'
registration_errorunknown: {
en: 'An unknown error prevented a successful registration.'
},
login_errorunknown : {
en : 'An unknown error prevented a successful login.'
login_errorunknown: {
en: 'An unknown error prevented a successful login.'
}
};

14
js/redux/reduxStoreBinder.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { initializeStore } from '../api';
import React from 'react';
import {initializeStore} from '../api';
const isServer = typeof window === 'undefined';
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__';
function getOrCreateStore (initialState) {
function getOrCreateStore(initialState) {
// Always make a new store if server, otherwise state is shared between requests
if (isServer) {
return initializeStore(initialState);
@ -17,9 +17,9 @@ function getOrCreateStore (initialState) {
return window[__NEXT_REDUX_STORE__];
}
export default (App) => {
export default App => {
return class AppWithRedux extends React.Component {
static async getInitialProps (appContext) {
static async getInitialProps(appContext) {
// Get or Create the store with `undefined` as initialState
// This allows you to set a custom default initialState
const reduxStore = getOrCreateStore();
@ -38,12 +38,12 @@ export default (App) => {
};
}
constructor (props) {
constructor(props) {
super(props);
this.reduxStore = getOrCreateStore(props.initialReduxState);
}
render () {
render() {
return <App {...this.props} reduxStore={this.reduxStore} />;
}
};

17
pages/_app.js
View File

@ -1,19 +1,18 @@
import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import Notifications from 'react-notify-toast';
import Favicon from 'react-favicon';
import App, {Container} from 'next/app';
import React from 'react';
import {Provider} from 'react-redux';
import Notifications from 'react-notify-toast';
import Favicon from 'react-favicon';
import withReduxStore from '../js/redux/reduxStoreBinder';
import { verifyCredentials } from '../js/api.js';
import withReduxStore from '../js/redux/reduxStoreBinder';
import {verifyCredentials} from '../js/api.js';
class TurniereApp extends App {
componentDidMount() {
verifyCredentials();
}
render () {
render() {
const {Component, pageProps, reduxStore} = this.props;
return (
<Container>

10
pages/_error.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import React from 'react';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import { verifyCredentials } from '../js/api';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import {verifyCredentials} from '../js/api';
export default class Error extends React.Component {
static getInitialProps({ res, err }) {
static getInitialProps({res, err}) {
const statusCode = res ? res.statusCode : err ? err.statusCode : 400;
return { statusCode };
return {statusCode};
}
componentDidMount() {

64
pages/create.js
View File

@ -1,8 +1,8 @@
import Head from 'next/head';
import React from 'react';
import { notify } from 'react-notify-toast';
import { connect } from 'react-redux';
import posed from 'react-pose';
import Head from 'next/head';
import React from 'react';
import {notify} from 'react-notify-toast';
import {connect} from 'react-redux';
import posed from 'react-pose';
import {
Button,
@ -16,19 +16,18 @@ import {
Label
} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { UserRestrictor, Option } from '../js/components/UserRestrictor';
import { Login } from '../js/components/Login';
import EditableStringList from '../js/components/EditableStringList';
import { createTournament } from '../js/api';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import {Login} from '../js/components/Login';
import EditableStringList from '../js/components/EditableStringList';
import {createTournament} from '../js/api';
import '../static/everypage.css';
class CreatePage extends React.Component {
render() {
const { isSignedIn } = this.props;
const {isSignedIn} = this.props;
return (
<UserRestrictor>
@ -62,8 +61,8 @@ class CreatePage extends React.Component {
}
function mapStateToCreatePageProperties(state) {
const { isSignedIn } = state.userinfo;
return { isSignedIn };
const {isSignedIn} = state.userinfo;
return {isSignedIn};
}
export default connect(
@ -97,13 +96,13 @@ const GroupphaseFader = posed.div({
class CreateTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
this.state = {
groupPhaseEnabled: false,
name: '',
description: '',
public: false,
groupSize: 4,
groupAdvance: 1,
teams: [],
@ -156,7 +155,7 @@ class CreateTournamentForm extends React.Component {
</GroupphaseFader>
</Form>
<h3 className="custom-font mt-4">Teams</h3>
<EditableStringList
<EditableStringList
addButtonText="hinzufügen"
teamPlaceholder="Keine Teams hinzugefügt!"
groupPlaceHolder="Keine Gruppen verfügbar!"
@ -181,35 +180,35 @@ class CreateTournamentForm extends React.Component {
}
handleGroupSizeInput(input) {
let newSize = input.target.value;
if(newSize <= this.state.groupAdvance) {
const newSize = input.target.value;
if (newSize <= this.state.groupAdvance) {
this.setState({
groupSize: newSize,
groupAdvance: newSize - 1
});
} else {
this.setState({ groupSize: newSize });
this.setState({groupSize: newSize});
}
}
handleGroupAdvanceInput(input) {
this.setState({ groupAdvance: input.target.value });
this.setState({groupAdvance: input.target.value});
}
handleGroupPhaseEnabledInput(input) {
this.setState({ groupPhaseEnabled: input.target.checked });
this.setState({groupPhaseEnabled: input.target.checked});
}
handleNameInput(input) {
this.setState({ name: input.target.value });
this.setState({name: input.target.value});
}
handleDescriptionInput(input) {
this.setState({ description: input.target.value });
this.setState({description: input.target.value});
}
handlePublicInput(input) {
this.setState({ public: input.target.checked });
this.setState({public: input.target.checked});
}
create() {
@ -225,7 +224,6 @@ class CreateTournamentForm extends React.Component {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
});
}
}
/**
@ -245,11 +243,11 @@ class CreateTournamentForm extends React.Component {
* backend
*/
function createTeamArray(groupphase, groups, teams) {
let result = [];
const result = [];
if(groupphase) {
for(let groupNumber = 0; groupNumber < groups.length; groupNumber++) {
for(let groupMember = 0; groupMember < groups[groupNumber].length; groupMember++) {
if (groupphase) {
for (let groupNumber = 0; groupNumber < groups.length; groupNumber++) {
for (let groupMember = 0; groupMember < groups[groupNumber].length; groupMember++) {
result[result.length] = {
'name': groups[groupNumber][groupMember],
'group': groupNumber
@ -257,8 +255,8 @@ function createTeamArray(groupphase, groups, teams) {
}
}
} else {
for(let i = 0; i < teams.length; i++) {
result[i] = { 'name': teams[i] };
for (let i = 0; i < teams.length; i++) {
result[i] = {'name': teams[i]};
}
}

13
pages/faq.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head';
import React from 'react';
import { Col, Container, Row } from 'reactstrap';
import Head from 'next/head';
import React from 'react';
import {Col, Container, Row} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -222,7 +222,6 @@ function TournamentFaq() {
}
export default class FaqPage extends React.Component {
render() {
return (
<div>

15
pages/imprint.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import Head from 'next/head';
import React from 'react';
import {Container} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
@ -17,7 +17,7 @@ function Main() {
);
}
function ImprintText(){
function ImprintText() {
return (
<Container>
<h3>
@ -74,7 +74,6 @@ function ImprintText(){
export default class ImprintPage extends React.Component {
render() {
return (
<div>

15
pages/index.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Alert,
Button,
@ -8,9 +8,9 @@ import {
CardBody
} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -170,8 +170,7 @@ function PromotedLinkCreateTournament() {
class Index extends React.Component {
render () {
render() {
return (
<div>
<Head>

2
pages/list.js
View File

@ -10,7 +10,6 @@ import TournamentList from '../js/components/TournamentList';
import {connect} from 'react-redux';
export default class PublicTournamentsPage extends React.Component {
render() {
return (
<div className="main generic-fullpage-bg">
@ -46,7 +45,6 @@ function PublicTournaments(props) {
<a href='/private' className="btn btn-success shadow">zu den privaten Turnieren</a>
</Container>
</div>);
} else {
return (<Container className='py-5'>
<PublicTournamentsCard/>

11
pages/login.js
View File

@ -1,14 +1,13 @@
import Head from 'next/head';
import React from 'react';
import Head from 'next/head';
import React from 'react';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { Login } from '../js/components/Login';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
import {Login} from '../js/components/Login';
import '../static/everypage.css';
export default class LoginPage extends React.Component {
render() {
return (
<div className="main generic-fullpage-bg">

15
pages/privacy.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import Head from 'next/head';
import React from 'react';
import {Container} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -18,7 +18,7 @@ function Main() {
);
}
function PrivacyText(){
function PrivacyText() {
return (
<Container>
<p>
@ -494,7 +494,6 @@ function PrivacyText(){
export default class PrivacyPage extends React.Component {
render() {
return (
<div>

5
pages/private.js
View File

@ -2,7 +2,7 @@ import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {Card, CardBody, Container,} from 'reactstrap';
import {Card, CardBody, Container} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
@ -13,7 +13,6 @@ import '../static/everypage.css';
import TournamentList from '../js/components/TournamentList';
class PrivateTournamentsPage extends React.Component {
render() {
const {isSignedIn} = this.props;
@ -80,4 +79,4 @@ class PrivateTournamentsCard extends React.Component {
</Card>
);
}
}
}

37
pages/register.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Button,
Card,
@ -13,9 +13,9 @@ import {
Label
} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { register } from '../js/api';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
import {register} from '../js/api';
import '../static/css/errormessages.css';
import '../static/everypage.css';
@ -39,7 +39,6 @@ export default class RegisterPage extends React.Component {
}
class Register extends React.Component {
render() {
return (
<Container className="py-5">
@ -59,11 +58,11 @@ class Register extends React.Component {
class RegisterErrorList extends React.Component {
render() {
const { error, errorMessages } = this.props;
if(error) {
const {error, errorMessages} = this.props;
if (error) {
return (
<ul className="mt-3 error-box">
{ errorMessages.map((message, index) =>
{ errorMessages.map((message, index) =>
<li key={index}>{message}</li>
) }
</ul>
@ -74,9 +73,9 @@ class RegisterErrorList extends React.Component {
}
}
const mapStateToErrorMessages = (state) => {
const { errorMessages, error } = state.userinfo;
return { errorMessages, error };
const mapStateToErrorMessages = state => {
const {errorMessages, error} = state.userinfo;
return {errorMessages, error};
};
const VisibleRegisterErrorList = connect(
@ -88,9 +87,9 @@ class RegisterForm extends React.Component {
super(props);
this.state = {
username : '',
email : '',
password : ''
username: '',
email: '',
password: ''
};
}
@ -122,15 +121,15 @@ class RegisterForm extends React.Component {
}
handlePasswordInput(input) {
this.setState({ password : input.target.value });
this.setState({password: input.target.value});
}
handleEmailInput(input) {
this.setState({ email : input.target.value });
this.setState({email: input.target.value});
}
handleUsernameInput(input) {
this.setState({ username : input.target.value });
this.setState({username: input.target.value});
}
}

120
pages/tournament-edit.js
View File

@ -1,7 +1,7 @@
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import { notify } from 'react-notify-toast';
import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {notify} from 'react-notify-toast';
import {
Container,
Button,
@ -10,14 +10,14 @@ import {
Table
} from 'reactstrap';
import { requestTournament } from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { UserRestrictor, Option } from '../js/components/UserRestrictor';
import { Footer } from '../js/components/Footer';
import { Login } from '../js/components/Login';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import { updateTeamName } from '../js/api';
import {requestTournament} from '../js/api';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import {Footer} from '../js/components/Footer';
import {Login} from '../js/components/Login';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import {updateTeamName} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -25,7 +25,6 @@ import '../static/everypage.css';
import '../static/css/index.css';
class EditTournamentPage extends React.Component {
static async getInitialProps({query}) {
return {query};
}
@ -40,19 +39,19 @@ class EditTournamentPage extends React.Component {
componentDidMount() {
requestTournament(this.props.query.code, () => {
this.setState({ validCode: true });
this.setState({validCode: true});
if(this._edittournamentcontent != null) {
if (this._edittournamentcontent != null) {
this._edittournamentcontent.notifyOfContentUpdate();
}
}, () => {
this.setState({ validCode: false });
this.setState({validCode: false});
});
}
render() {
const { validCode } = this.state;
const { tournamentname, ownerUsername, isSignedIn, username } = this.props;
const {validCode} = this.state;
const {tournamentname, ownerUsername, isSignedIn, username} = this.props;
return (
<UserRestrictor>
@ -64,7 +63,9 @@ class EditTournamentPage extends React.Component {
<TurniereNavigation/>
<BigImage text={ tournamentname }/>
<EditTournamentContent ref={(edittournamentcontent) => { this._edittournamentcontent = edittournamentcontent; }}/>
<EditTournamentContent ref={edittournamentcontent => {
this._edittournamentcontent = edittournamentcontent;
}}/>
<Footer/>
</div>
</Option>
@ -82,7 +83,7 @@ class EditTournamentPage extends React.Component {
<Login hint="Sie müssen angemeldet sein, um ein Turnier zu bearbeiten."/>
</div>
<Footer/>
</div>
</div>
</Option>
<Option condition={true}>
<ErrorPageComponent statusCode={ 404 }/>
@ -93,9 +94,9 @@ class EditTournamentPage extends React.Component {
}
function mapStateToTournamentInfo(state) {
const { tournamentname, ownerUsername } = state.tournamentinfo;
const { isSignedIn, username } = state.userinfo;
return { tournamentname, ownerUsername, isSignedIn, username };
const {tournamentname, ownerUsername} = state.tournamentinfo;
const {isSignedIn, username} = state.userinfo;
return {tournamentname, ownerUsername, isSignedIn, username};
}
export default connect(
@ -103,13 +104,16 @@ export default connect(
)(EditTournamentPage);
class EditTournamentContent extends React.Component {
render() {
return (
<div className='mb-5'>
<ReturnToTournamentButton/>
<EditTournamentPropertiesField ref={(field) => { this._edittournamentpropertiesfield = field; }}/>
<EditTeamField ref={(field) => { this._editteamfield = field; }}/>
<EditTournamentPropertiesField ref={field => {
this._edittournamentpropertiesfield = field;
}}/>
<EditTeamField ref={field => {
this._editteamfield = field;
}}/>
</div>
);
}
@ -129,13 +133,14 @@ function ReturnToTournamentButton() {
}
class EditTournamentPropertiesField extends React.Component {
render() {
return (
<Card className="container">
<CardBody>
<h2>Turnier-Eigenschaften ändern</h2>
<VisibleEditTournamentForm ref={(form) => { this._visibleedittournamentform = form; }}/>
<VisibleEditTournamentForm ref={form => {
this._visibleedittournamentform = form;
}}/>
</CardBody>
</Card>
);
@ -147,19 +152,18 @@ class EditTournamentPropertiesField extends React.Component {
}
class EditTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name : '',
description : '',
isPublic : false
name: '',
description: '',
isPublic: false
};
}
render() {
const { name, description, isPublic } = this.state;
const {name, description, isPublic} = this.state;
return (
<div>
@ -185,12 +189,12 @@ class EditTournamentForm extends React.Component {
}
notifyOfContentUpdate() {
const { name, description, isPublic } = this.props;
const {name, description, isPublic} = this.props;
this.setState({
name : name? name : '',
description : description? description : '',
isPublic : isPublic
name: name? name : '',
description: description? description : '',
isPublic: isPublic
});
}
@ -199,36 +203,37 @@ class EditTournamentForm extends React.Component {
}
handleNameInput(input) {
this.setState({ name : input.target.value });
this.setState({name: input.target.value});
}
handleDescriptionInput(input) {
this.setState({ description : input.target.value });
this.setState({description: input.target.value});
}
handlePublicInput(input) {
this.setState({ public : input.target.value });
this.setState({public: input.target.value});
}
}
function mapStateToTournamentFormProps(state) {
const { name, description, isPublic } = state.tournamentinfo;
return { name, description, isPublic };
const {name, description, isPublic} = state.tournamentinfo;
return {name, description, isPublic};
}
const VisibleEditTournamentForm = connect(
mapStateToTournamentFormProps,
null, null, { withRef : true}
null, null, {withRef: true}
)(EditTournamentForm);
class EditTeamField extends React.Component {
render() {
return (
<Card className="container my-4">
<CardBody>
<h2>Team-Namen ändern</h2>
<VisibleEditTeamNamesForm ref={(form) => { this._visibleeditteamnamesform = form; }}/>
<VisibleEditTeamNamesForm ref={form => {
this._visibleeditteamnamesform = form;
}}/>
</CardBody>
</Card>
);
@ -240,24 +245,23 @@ class EditTeamField extends React.Component {
}
class EditTeamNamesForm extends React.Component {
constructor(props) {
super(props);
this.state = {
teams : []
teams: []
};
}
render() {
const { teams } = this.state;
const {teams} = this.state;
return (
<div>
<Table className="table-striped mt-3">
<tbody>
{
teams.map((team, index) =>
teams.map((team, index) =>
<tr key={index}>
<td><Button outline size="sm" className="changeTeamnameButton" id={ 'editteam-button-team_' + team.id } onClick={ this.handleClick.bind(this, index) }>Ändern</Button></td>
<td className="w-100"><input className="form-control" type="text" id={ 'editteam-textfield-team_' + team.id } value={ team.name } placeholder={ team.name } onChange={ this.handleNameInput.bind(this, index) } /></td>
@ -271,20 +275,20 @@ class EditTeamNamesForm extends React.Component {
}
notifyOfContentUpdate() {
const { teams } = this.props;
const {teams} = this.props;
this.setState({
teams : teams
teams: teams
});
}
handleNameInput(index, input) {
let team = this.state.teams.slice();
const team = this.state.teams.slice();
team[index].name = input.target.value;
this.setState({
teams : team
teams: team
});
}
@ -298,12 +302,12 @@ class EditTeamNamesForm extends React.Component {
}
function mapStateToTeamFormProps(state) {
const { teams } = state.tournamentinfo;
return { teams };
const {teams} = state.tournamentinfo;
return {teams};
}
const VisibleEditTeamNamesForm = connect(
mapStateToTeamFormProps,
null, null, { withRef : true }
null, null, {withRef: true}
)(EditTeamNamesForm);

3
pages/tournament-fullscreen.js
View File

@ -1,8 +1,7 @@
import Head from 'next/head';
import Head from 'next/head';
import React from 'react';
class FullscreenTournamentPage extends React.Component {
static async getInitialProps({query}) {
return {query};
}

90
pages/tournament.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Button,
Card,
@ -20,10 +20,10 @@ import {
Table
} from 'reactstrap';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import { Footer } from '../js/components/Footer';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import {Footer} from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {
getRequest,
getState
@ -35,11 +35,10 @@ import '../static/everypage.css';
import '../static/css/tournament.css';
class PrivateTournamentPage extends React.Component {
render() {
const { id, description, isPublic, code, ownerUsername, playoffStages } = this.props.tournament;
const { isSignedIn, username } = this.props;
const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
const {isSignedIn, username} = this.props;
// TODO: Change href-prop of the anchor tag to contain the tournament code
return (
<div className='pb-5'>
@ -64,8 +63,8 @@ class PrivateTournamentPage extends React.Component {
}
function mapStateToTournamentPageProperties(state) {
const { isSignedIn, username } = state.userinfo;
return { isSignedIn, username };
const {isSignedIn, username} = state.userinfo;
return {isSignedIn, username};
}
const TournamentPage = connect(
@ -73,9 +72,9 @@ const TournamentPage = connect(
)(PrivateTournamentPage);
function EditButton(props) {
const { id, ownerName, isSignedIn, username } = props;
const {id, ownerName, isSignedIn, username} = props;
if(isSignedIn && ownerName === username) {
if (isSignedIn && ownerName === username) {
return (
<a href={'/t/' + id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a>
);
@ -86,15 +85,15 @@ function EditButton(props) {
function getLevelName(levelNumber) {
const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale'];
if(levelNumber < names.length){
if (levelNumber < names.length) {
return names[levelNumber];
}else {
} else {
return Math.pow(2, levelNumber) + 'tel-Finale';
}
}
function Stage(props) {
const { isSignedIn, isOwner } = props;
const {isSignedIn, isOwner} = props;
return (<div>
<Container className='py-5'>
@ -118,16 +117,16 @@ class Match extends React.Component {
}
toggleModal() {
const { isSignedIn, isOwner } = this.props;
const {isSignedIn, isOwner} = this.props;
if(isSignedIn && isOwner) {
if (isSignedIn && isOwner) {
this.setState({modal: !this.state.modal});
}
}
render() {
let cardClass, smallMessage, borderClass;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
let cardClass; let smallMessage; let borderClass;
// possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (this.props.match.state) {
case 'in_progress':
cardClass = 'table-warning';
@ -178,7 +177,7 @@ class Match extends React.Component {
function MatchModal(props) {
let title;
let actionButton = '';
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
// possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) {
case 'in_progress':
title = 'Spiel läuft';
@ -220,8 +219,8 @@ function MatchModal(props) {
}
function MatchTable(props) {
let team1Class, team2Class;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
let team1Class; let team2Class;
// possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) {
case 'in_progress':
break;
@ -243,7 +242,7 @@ function MatchTable(props) {
case 'undecided':
break;
}
if(props.match.state === 'single_team'){
if (props.match.state === 'single_team') {
return (
<Table className='mb-0'>
<tbody>
@ -304,15 +303,15 @@ class ScoreInput extends React.Component {
this.decreaseScore = this.decreaseScore.bind(this);
}
updateScore(event){
updateScore(event) {
this.setState({score: event.target.value});
}
increaseScore(){
increaseScore() {
this.setState({score: Number(this.state.score) + 1});
}
decreaseScore(){
decreaseScore() {
this.setState({score: Number(this.state.score) - 1});
}
@ -327,13 +326,13 @@ class ScoreInput extends React.Component {
function convertTournament(apiTournament) {
let groupStage = null;
let playoffStages = [];
for (let stage of apiTournament.stages) {
if(stage.groups.length > 0){
//group stage
const playoffStages = [];
for (const stage of apiTournament.stages) {
if (stage.groups.length > 0) {
// group stage
groupStage = {groups: stage.groups.map(group => convertGroup(group))};
}else{
//playoff stage
} else {
// playoff stage
playoffStages.push({
id: stage.id,
level: stage.level,
@ -363,17 +362,17 @@ function convertGroup(apiGroup) {
}
function convertMatch(apiMatch) {
let result = {
const result = {
id: apiMatch.id,
state: apiMatch.state
};
if(apiMatch.match_scores.length === 2) {
if (apiMatch.match_scores.length === 2) {
result.team1 = apiMatch.match_scores[0].team.name;
result.scoreTeam1 = apiMatch.match_scores[0].points;
result.team2 = apiMatch.match_scores[1].team.name;
result.scoreTeam2 = apiMatch.match_scores[1].points;
} else if(apiMatch.match_scores.length === 1) {
} else if (apiMatch.match_scores.length === 1) {
result.team1 = apiMatch.match_scores[0].team.name;
result.scoreTeam1 = apiMatch.match_scores[0].points;
result.team2 = 'TBD';
@ -389,7 +388,6 @@ function convertMatch(apiMatch) {
}
class Main extends React.Component {
static async getInitialProps({query}) {
return {query};
}
@ -398,7 +396,7 @@ class Main extends React.Component {
super(props);
this.state = {
tournament : null
tournament: null
};
}
@ -407,13 +405,13 @@ class Main extends React.Component {
getRequest(getState(), '/tournaments/' + code)
.then(response => {
this.setState({ status : response.status, tournament : convertTournament(response.data)});
this.setState({status: response.status, tournament: convertTournament(response.data)});
})
.catch((err) => {
if(err.response) {
this.setState({ status : err.response.status });
.catch(err => {
if (err.response) {
this.setState({status: err.response.status});
} else {
this.setState({ status : -1 });
this.setState({status: -1});
}
});
}
@ -422,7 +420,7 @@ class Main extends React.Component {
render() {
const tournamentName = this.state.tournament === null ? 'Turnier' : this.state.tournament.name;
const { status, tournament } = this.state;
const {status, tournament} = this.state;
if (status === 200) {
return (

10
server.js
View File

@ -2,7 +2,7 @@ const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const app = next({dev});
const handle = app.getRequestHandler();
app.prepare()
@ -11,19 +11,19 @@ app.prepare()
server.get('/t/:code', (req, res) => {
const actualPage = '/tournament';
const queryParam = { code: req.params.code };
const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam);
});
server.get('/t/:code/fullscreen', (req, res) => {
const actualPage = '/tournament-fullscreen';
const queryParam = { code: req.params.code };
const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam);
});
server.get('/t/:code/edit', (req, res) => {
const actualPage = '/tournament-edit';
const queryParam = { code: req.params.code };
const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam);
});
@ -31,7 +31,7 @@ app.prepare()
return handle(req, res);
});
server.listen(dev ? 3000 : 80, (err) => {
server.listen(dev ? 3000 : 80, err => {
if (err) throw err;
});
})