From 682db6f8322a80d5628fe941734bf5c9095f5f22 Mon Sep 17 00:00:00 2001
From: Felix Hamme <git@fj.hamme.net>
Date: Mon, 17 Jun 2019 22:26:58 +0200
Subject: [PATCH] Cleanup: Use reactstrap components instead of buggy
 "self-coded" stuff

---
 js/components/WarningPopup.js | 17 +++++-------
 pages/create.js               | 50 ++++++++++++++++++++---------------
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/js/components/WarningPopup.js b/js/components/WarningPopup.js
index 77729dc..0c0152a 100644
--- a/js/components/WarningPopup.js
+++ b/js/components/WarningPopup.js
@@ -1,19 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Alert} from 'reactstrap';
+import {Alert, Collapse} from 'reactstrap';
 
 export class WarningPopup extends React.Component {
     render() {
-        if (this.props.shown) {
-            return (<div>
-                {this.props.children}
-                <Alert className="mt-2" color="danger">
-                    {this.props.text}
-                </Alert>
-            </div>);
-        } else {
-            return this.props.children;
-        }
+        return (<Collapse isOpen={this.props.shown}>
+            <Alert className='mt-2 py-1' color='danger'>
+                {this.props.text}
+            </Alert>
+        </Collapse>);
     }
 }
 
diff --git a/pages/create.js b/pages/create.js
index 1e8f678..1d654f6 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -2,8 +2,20 @@ 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';
@@ -49,14 +61,6 @@ function CreateTournamentCard() {
     </Container>);
 }
 
-const GroupphaseFader = posed.div({
-    visible: {
-        opacity: 1, height: 200
-    }, hidden: {
-        opacity: 0, height: 0
-    }
-});
-
 class CreateTournamentForm extends React.Component {
     constructor(props) {
         super(props);
@@ -106,29 +110,31 @@ class CreateTournamentForm extends React.Component {
                         checked={this.state.groupPhaseEnabled}
                         onChange={this.handleGroupPhaseEnabledInput}/>
                 </FormGroup>
-                <GroupphaseFader pose={this.state.groupPhaseEnabled ? 'visible' : 'hidden'}
-                    className="groupphasefader">
+                <Collapse isOpen={this.state.groupPhaseEnabled}>
                     <FormGroup>
                         <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
-                        <Col xs="3" className="pl-0">
-                            <NumericInput value={this.state.groupSize}
-                                incrementText="+1" incrementCallback={this.increaseGroupSize}
-                                decrementText="-1" decrementCallback={this.decreaseGroupSize}/>
-                        </Col>
+                        <Row>
+                            <Col xs="3">
+                                <NumericInput value={this.state.groupSize}
+                                    incrementText="+1" incrementCallback={this.increaseGroupSize}
+                                    decrementText="-1" decrementCallback={this.decreaseGroupSize}/>
+                            </Col>
+                        </Row>
                     </FormGroup>
                     <FormGroup>
                         <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase
                             weiterkommen?</Label>
-                        <WarningPopup text="Füge bitte noch Teams hinzu, um so viele Teams im Playoff zu haben."
-                            shown={this.state.teams.length < this.state.groupAdvance}>
-                            <Col xs="3" className="pl-0">
+                        <Row>
+                            <Col xs="3">
                                 <NumericInput value={this.state.groupAdvance}
                                     incrementText="&#215;2" incrementCallback={this.increaseGroupAdvance}
                                     decrementText="&#247;2" decrementCallback={this.decreaseGroupAdvance}/>
                             </Col>
-                        </WarningPopup>
+                        </Row>
+                        <WarningPopup text='Füge bitte noch Teams hinzu, um so viele Teams im Playoff zu haben.'
+                            shown={this.state.teams.length < this.state.groupAdvance}/>
                     </FormGroup>
-                </GroupphaseFader>
+                </Collapse>
             </Form>
             <h3 className="custom-font mt-4">Teams</h3>
             <EditableStringList