diff --git a/js/api.js b/js/api.js index a29021c..bf66369 100644 --- a/js/api.js +++ b/js/api.js @@ -183,7 +183,10 @@ const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => { postRequest(action.state, '/tournaments', action.parameters.tournament).then(resp => { storeOptionalToken(resp); action.parameters.successCallback(); - }).catch(() => { + }).catch(error => { + if (error.response) { + storeOptionalToken(error.response); + } action.parameters.errorCallback(); }); return Object.assign({}, state, {}); diff --git a/js/components/WarningPopup.js b/js/components/WarningPopup.js new file mode 100644 index 0000000..0c0152a --- /dev/null +++ b/js/components/WarningPopup.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Alert, Collapse} from 'reactstrap'; + +export class WarningPopup extends React.Component { + render() { + return ( + + {this.props.text} + + ); + } +} + +WarningPopup.propTypes = { + text: PropTypes.string.isRequired, + shown: PropTypes.bool.isRequired +}; diff --git a/pages/create.js b/pages/create.js index 9165c1b..0883b4a 100644 --- a/pages/create.js +++ b/pages/create.js @@ -2,12 +2,25 @@ 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, Card, CardBody, Col, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap'; +import { + Button, + Card, + CardBody, + Col, + Collapse, + Container, + CustomInput, + Form, + FormGroup, + Input, + Label, + Row +} from 'reactstrap'; import {TurniereNavigation} from '../js/components/Navigation'; import {Footer} from '../js/components/Footer'; import EditableStringList from '../js/components/EditableStringList'; import {createTournament} from '../js/api'; +import {WarningPopup} from '../js/components/WarningPopup'; import '../static/css/everypage.css'; import RequireLogin from '../js/components/RequireLogin'; @@ -48,14 +61,6 @@ function CreateTournamentCard() { ); } -const GroupphaseFader = posed.div({ - visible: { - opacity: 1, height: 150 - }, hidden: { - opacity: 0, height: 0 - } -}); - class CreateTournamentForm extends React.Component { constructor(props) { super(props); @@ -78,6 +83,7 @@ class CreateTournamentForm extends React.Component { this.increaseGroupSize = this.increaseGroupSize.bind(this); this.decreaseGroupSize = this.decreaseGroupSize.bind(this); this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this); + this.valuesAreCredible = this.valuesAreCredible.bind(this); this.create = this.create.bind(this); } @@ -104,26 +110,34 @@ class CreateTournamentForm extends React.Component { checked={this.state.groupPhaseEnabled} onChange={this.handleGroupPhaseEnabledInput}/> - + - - - + + + + + + - - - + + + + + + - +

Teams

); } + areGroupsIncomplete() { + return this.state.groups.filter(group => group.length !== this.state.groupSize).length !== 0; + } + teamListUpdate(list) { this.setState({teams: list}); } @@ -153,11 +171,9 @@ class CreateTournamentForm extends React.Component { increaseGroupAdvance() { const newGroupAdvance = this.state.groupAdvance * 2; - if (newGroupAdvance <= this.state.groupSize) { - this.setState({ - groupAdvance: newGroupAdvance - }); - } + this.setState({ + groupAdvance: newGroupAdvance + }); } decreaseGroupAdvance() { @@ -171,21 +187,14 @@ class CreateTournamentForm extends React.Component { } increaseGroupSize() { - this.setState({groupSize: this.state.groupSize+1}); + this.setState({groupSize: this.state.groupSize + 1}); } decreaseGroupSize() { const newGroupSize = this.state.groupSize - 1; if (newGroupSize >= 3) { - if (newGroupSize >= this.state.groupAdvance) { - this.setState({groupSize: newGroupSize}); - } else { - this.setState({ - groupSize: newGroupSize, - groupAdvance: Math.floor(this.state.groupAdvance / 2) - }); - } + this.setState({groupSize: newGroupSize}); } } @@ -206,11 +215,19 @@ class CreateTournamentForm extends React.Component { } create() { - createTournament(this.generateTournamentCreationObject(), () => { - notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000); - }, () => { - notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); - }); + if (this.valuesAreCredible()) { + createTournament(this.generateTournamentCreationObject(), () => { + notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000); + }, () => { + notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); + }); + } else { + notify.show('Bitte korrigiere deine Eingaben zuerst.', 'warning', 5000); + } + } + + valuesAreCredible() { + return this.state.teams.length >= this.state.groupAdvance && !this.areGroupsIncomplete(); } generateTournamentCreationObject() {