Extract the tournament information view for more consisten looks

js/components/TournamentInformationView.js

@@ -0,0 +1,116 @@
+import React                  from 'react';
+import { connect }            from 'react-redux';
+import {
+    Button,
+    ButtonGroup,
+    Col,
+    Container,
+    ListGroup,
+    ListGroupItem
+} from 'reactstrap';
+
+
+class PrivateTournamentInformationView extends React.Component {
+
+    render() {
+        const { tournament, isSignedIn, username, currentpage } = this.props;
+
+        return (
+            <Container>
+                
+                <ButtonsBadge 
+                    id={tournament.id}
+                    ownerName={tournament.owner_username}
+                    isSignedIn={isSignedIn}
+                    username={username}
+                    currentpage={currentpage}/>
+
+                <p>{tournament.description}</p>
+                <ListGroup>
+                    <ListGroupItem>
+                        {tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
+                    </ListGroupItem>
+                    <ListGroupItem>Turnier-Code: <b>{tournament.code}</b></ListGroupItem>
+                    <ListGroupItem>von <b>{tournament.owner_username}</b></ListGroupItem>
+                </ListGroup>
+            </Container>
+        );
+    }
+}
+
+function mapStateToPrivateTournamentInformationViewProps(state) {
+    const { isSignedIn, username } = state.userinfo;
+    return { isSignedIn, username };
+}
+
+export const TournamentInformationView = connect(
+    mapStateToPrivateTournamentInformationViewProps
+)(PrivateTournamentInformationView);
+
+function ButtonsBadge(props) {
+    const { id, ownerName, isSignedIn, username, currentpage } = props;
+    
+    switch(currentpage) {
+        case 'statistics':
+            return (
+                <ButtonGroup>
+                    <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
+                    <TournamentButton id={id}/>
+                </ButtonGroup>
+            );
+        case 'tournament':
+            return (
+                <ButtonGroup>
+                    <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
+                    <StatisticsButton id={id}/>
+                </ButtonGroup>
+            );
+        case 'edit':
+            return (
+                <ButtonGroup>
+                    <StatisticsButton id={id}/>
+                    <TournamentButton id={id}/>
+                </ButtonGroup>
+            );
+        default: return null;
+    }
+}
+
+function TournamentButton(props) {
+    const { id } = props;
+    return <Button href={'/t/' + id} color='secondary'>Zum Turnier</Button>;
+}
+
+function EditButton(props) {
+    const { id, ownerName, isSignedIn, username } = props;
+
+    if(isSignedIn && ownerName === username) {
+        return (
+            <Button href={'/t/' + id + '/edit'} color='secondary'>Turnier bearbeiten</Button>
+        );
+    } else {
+        return null;
+    }
+}
+
+function StatisticsButton(props) {
+    const { id } = props;
+    return <Button href={'/t/' + id + '/statistics'} color='secondary'>Statistiken zum Turnier</Button>;
+}
+
+
+
+/*
+                <Container>
+                    <ButtonsBadge id={id} ownerName={ownerUsername} isSignedIn={isSignedIn} username={username}/>
+                    <p>{description}</p>
+                    <ListGroup>
+                        <ListGroupItem>
+                            {isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
+                        </ListGroupItem>
+                        <ListGroupItem>Turnier-Code: <b>{code}</b></ListGroupItem>
+                        <ListGroupItem>von <b>{ownerUsername}</b></ListGroupItem>
+                    </ListGroup>
+                </Container>
+
+*/

pages/tournament-statistics.js

@@ -16,6 +16,7 @@ import {
 } from 'reactstrap';
 
 import { TurniereNavigation } from '../js/components/Navigation';
+import { TournamentInformationView } from '../js/components/TournamentInformationView';
 import { BigImage } from '../js/components/BigImage';
 import { Footer } from '../js/components/Footer';
 import { Order, sort } from '../js/utils/sort';
@@ -332,7 +333,7 @@ class StatisticsTournamentPage extends React.Component {
                 <TurniereNavigation/>
                 <BigImage text={tournamentStatistics.tournament.name}/>
                 <div className='pb-5'>
-                    <TournamentInformationView tournament={tournamentStatistics.tournament}/>
+                    <TournamentInformationView tournament={tournamentStatistics.tournament} currentpage='statistics'/>
                     <Container className="py-5">
                         <Row>
                             <Col xs="6">
@@ -354,40 +355,3 @@ class StatisticsTournamentPage extends React.Component {
 }
 
 export default connect()(StatisticsTournamentPage);
-
-class PrivateTournamentInformationView extends React.Component {
-
-    render() {
-        const { tournament, isSignedIn, username } = this.props;
-
-        return (
-            <Container>
-                <TournamentButton id={tournament.id} ownerName={tournament.owner_username} isSignedIn={isSignedIn} username={username}/>
-                <p>{tournament.description}</p>
-                <ListGroup>
-                    <ListGroupItem>
-                        {tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
-                    </ListGroupItem>
-                    <ListGroupItem>Turnier-Code: <b>{tournament.code}</b></ListGroupItem>
-                    <ListGroupItem>von <b>{tournament.owner_username}</b></ListGroupItem>
-                </ListGroup>
-            </Container>
-        );
-    }
-}
-
-function mapStateToPrivateTournamentInformationViewProps(state) {
-    const { isSignedIn, username } = state.userinfo;
-    return { isSignedIn, username };
-}
-
-const TournamentInformationView = connect(
-    mapStateToPrivateTournamentInformationViewProps
-)(PrivateTournamentInformationView);
-
-class TournamentButton extends React.Component {
-    render() {
-        const { id } = this.props;
-        return <Button href={'/t/' + id} outline color='secondary'>Zum Turnier</Button>;
-    }
-}

pages/tournament.js

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
@@ -8,41 +7,9 @@ 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 {TournamentInformationView} from '../js/components/TournamentInformationView';
 import {getState} from '../js/api';
 import {getRequest} from '../js/redux/backendApi';
-=======
-import Head                   from 'next/head';
-import React                  from 'react';
-import { connect }            from 'react-redux';
-import {
-    Button,
-    ButtonGroup,
-    Card,
-    CardBody,
-    Col,
-    Container,
-    Input,
-    InputGroup,
-    InputGroupAddon,
-    ListGroup,
-    ListGroupItem,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-    Row,
-    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 {
-    getRequest,
-    getState
-} from '../js/api';
->>>>>>> Properly style the buttons on the tournament and its statistics
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -57,17 +24,7 @@ class PrivateTournamentPage extends React.Component {
 
         // TODO: Change href-prop of the anchor tag to contain the tournament code
         return (<div className='pb-5'>
-            <Container>
+            <TournamentInformationView tournament={this.props.tournament} currentpage='tournament'/>
-                <ButtonsBadge id={id} ownerName={ownerUsername} isSignedIn={isSignedIn} username={username}/>
-                <p>{description}</p>
-                <ListGroup>
-                    <ListGroupItem>
-                        {isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
-                    </ListGroupItem>
-                    <ListGroupItem>Turnier-Code: <b>{code}</b></ListGroupItem>
-                    <ListGroupItem>von <b>{ownerUsername}</b></ListGroupItem>
-                </ListGroup>
-            </Container>
             <div className='stages pt-5'>
                 {playoffStages.map(stage => <Stage isSignedIn={isSignedIn} isOwner={username === ownerUsername}
                     level={getLevelName(stage.level)} matches={stage.matches}
@@ -84,31 +41,6 @@ function mapStateToTournamentPageProperties(state) {
 
 const TournamentPage = connect(mapStateToTournamentPageProperties)(PrivateTournamentPage);
 
-function ButtonsBadge(props) {
-    const { id, ownerName, isSignedIn, username } = props;
-    return (
-        <ButtonGroup>
-            <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
-            <StatisticsButton id={id}/>
-        </ButtonGroup>
-    );
-}
-
-function EditButton(props) {
-    const {id, ownerName, isSignedIn, username} = props;
-
-    if(isSignedIn && ownerName === username) {
-        return (<Button href={'/t/' + id + '/edit'} outline color='secondary'>Turnier bearbeiten</Button>);
-    } else {
-        return null;
-    }
-}
-
-function StatisticsButton(props) {
-    const { id } = props;
-    return <Button href={'/t/' + id + '/statistics'} outline color='secondary'>Statistiken zum Turnier</Button>;
-}
-
 function getLevelName(levelNumber) {
     const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale'];
     if (levelNumber < names.length) {
@@ -153,7 +85,7 @@ function convertTournament(apiTournament) {
         description: apiTournament.description,
         name: apiTournament.name,
         isPublic: apiTournament.public,
-        ownerUsername: apiTournament.owner_username,
+        owner_username: apiTournament.owner_username,
         groupStage: groupStage,
         playoffStages: playoffStages
     };