From 778d0173024293ea3fa2e39b1f216c0c9c2efd4c Mon Sep 17 00:00:00 2001
From: Felix Hamme <git@fj.hamme.net>
Date: Wed, 19 Jun 2019 18:55:04 +0200
Subject: [PATCH] Continuing merge: link tournament view, edit and statistics
 pages between each other, use new design from merged branch

---
 js/components/TournamentBigImage.js        |  22 +++++
 js/components/TournamentInformationView.js | 105 ---------------------
 js/components/TournamentStatusBar.js       |  29 ++++++
 js/redux/tournamentStatistics.js           |   2 +-
 pages/tournament-statistics.js             |  28 ++++--
 pages/tournament.js                        |  56 +++--------
 6 files changed, 81 insertions(+), 161 deletions(-)
 create mode 100644 js/components/TournamentBigImage.js
 delete mode 100644 js/components/TournamentInformationView.js
 create mode 100644 js/components/TournamentStatusBar.js

diff --git a/js/components/TournamentBigImage.js b/js/components/TournamentBigImage.js
new file mode 100644
index 0000000..ed304f0
--- /dev/null
+++ b/js/components/TournamentBigImage.js
@@ -0,0 +1,22 @@
+import {Container, ListGroup, ListGroupItem} from 'reactstrap';
+import React from 'react';
+
+export function TournamentBigImage(props) {
+    return (<div className="big-image mb-0">
+        <h1 className="display-1">{props.name}</h1>
+        <Container>
+            <TournamentProperties {...props}/>
+        </Container>
+    </div>);
+}
+
+function TournamentProperties(props) {
+    return (<ListGroup className='text-dark text-left shadow'>
+        {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
+        <ListGroupItem>
+            {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
+        </ListGroupItem>
+        <ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem>
+        <ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem>
+    </ListGroup>);
+}
diff --git a/js/components/TournamentInformationView.js b/js/components/TournamentInformationView.js
deleted file mode 100644
index b31c695..0000000
--- a/js/components/TournamentInformationView.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import {
-    Button,
-    ButtonGroup,
-    Col,
-    Container,
-    ListGroup,
-    ListGroupItem,
-    Row
-} from 'reactstrap';
-
-
-class PrivateTournamentInformationView extends React.Component {
-    render() {
-        const {tournament, isSignedIn, username, currentpage} = this.props;
-
-        return (
-            <Container>
-                <Row>
-                    <Col xs="6">
-                        <ButtonsBadge
-                            id={tournament.id}
-                            ownerName={tournament.owner_username}
-                            isSignedIn={isSignedIn}
-                            username={username}
-                            currentpage={currentpage}
-                            className="pb-3"/>
-                        <p>{tournament.description}</p>
-                    </Col>
-                    <Col xs="6">
-                        <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>
-                    </Col>
-                </Row>
-            </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 className={props.className}>
-                <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
-                <TournamentButton id={id}/>
-            </ButtonGroup>
-        );
-    case 'tournament':
-        return (
-            <ButtonGroup className={props.className}>
-                <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
-                <StatisticsButton id={id}/>
-            </ButtonGroup>
-        );
-    case 'edit':
-        return (
-            <ButtonGroup className={props.className}>
-                <StatisticsButton id={id}/>
-                <TournamentButton id={id}/>
-            </ButtonGroup>
-        );
-    default: return null;
-    }
-}
-
-function TournamentButton(props) {
-    const {id} = props;
-    return <Button href={'/t/' + id} color='success'>Zum Turnier</Button>;
-}
-
-function EditButton(props) {
-    const {id, ownerName, isSignedIn, username} = props;
-
-    if (isSignedIn && ownerName === username) {
-        return (
-            <Button href={'/t/' + id + '/edit'} color='success'>Turnier bearbeiten</Button>
-        );
-    } else {
-        return null;
-    }
-}
-
-function StatisticsButton(props) {
-    const {id} = props;
-    return <Button href={'/t/' + id + '/statistics'} color='success'>Statistiken zum Turnier</Button>;
-}
-
diff --git a/js/components/TournamentStatusBar.js b/js/components/TournamentStatusBar.js
new file mode 100644
index 0000000..0fd018a
--- /dev/null
+++ b/js/components/TournamentStatusBar.js
@@ -0,0 +1,29 @@
+import Navbar from 'react-bootstrap/Navbar';
+import {Container} from 'reactstrap';
+import React from 'react';
+
+export function TournamentStatusBar(props) {
+    return (<Navbar sticky='top' bg='light' className='border-bottom border-top'>
+        <Container className='px-3'>
+            {props.children}
+        </Container>
+    </Navbar>);
+}
+
+export function TournamentStatusBarButton(props) {
+    return (<a href={props.href} className='ml-3 btn btn-outline-secondary default-font-family'>
+        {props.children}
+    </a>);
+}
+
+export function EditButton(props) {
+    const {tournamentId, isOwner, isSignedIn} = props;
+
+    if (isSignedIn && isOwner) {
+        return (<TournamentStatusBarButton href={'/t/' + tournamentId + '/edit'}>
+            Turnier bearbeiten
+        </TournamentStatusBarButton>);
+    } else {
+        return null;
+    }
+}
diff --git a/js/redux/tournamentStatistics.js b/js/redux/tournamentStatistics.js
index 4d426ec..4004982 100644
--- a/js/redux/tournamentStatistics.js
+++ b/js/redux/tournamentStatistics.js
@@ -30,7 +30,7 @@ export function transformTournamentInfoToStatistics(data) {
         description: data.description,
         id: data.id,
         name: data.name,
-        owner_username: data.owner_username,
+        ownerUsername: data.owner_username,
         isPublic: data.public
     };
 }
diff --git a/pages/tournament-statistics.js b/pages/tournament-statistics.js
index 1fb27bb..0beb23b 100644
--- a/pages/tournament-statistics.js
+++ b/pages/tournament-statistics.js
@@ -1,19 +1,16 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import {
-    Col,
-    Container,
-    Row
-} from 'reactstrap';
+import {Col, Container, Row} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
-import {TournamentInformationView} from '../js/components/TournamentInformationView';
-import {BigImage} from '../js/components/BigImage';
 import {StandingsTable} from '../js/components/StandingsTable';
 import {DominanceShower} from '../js/components/DominanceShower';
 import {Footer} from '../js/components/Footer';
 import {requestTournamentStatistics} from '../js/api';
+import {EditButton, TournamentStatusBar, TournamentStatusBarButton} from '../js/components/TournamentStatusBar';
+import Navbar from 'react-bootstrap/Navbar';
+import {TournamentBigImage} from '../js/components/TournamentBigImage';
 
 class StatisticsTournamentPage extends React.Component {
     static async getInitialProps({query}) {
@@ -33,9 +30,19 @@ class StatisticsTournamentPage extends React.Component {
                     <title>{tournamentStatistics.name}: turnie.re</title>
                 </Head>
                 <TurniereNavigation/>
-                <BigImage text={tournamentStatistics.name}/>
+                <TournamentBigImage {...tournamentStatistics}/>
+                <TournamentStatusBar>
+                    <Navbar.Brand>
+                        {tournamentStatistics.name}
+                        <EditButton tournamentId={tournamentStatistics.id}
+                            isOwner={this.props.username === tournamentStatistics.ownerUsername}
+                            isSignedIn={this.props.isSignedIn}/>
+                        <TournamentStatusBarButton href={'/t/' + tournamentStatistics.id}>
+                            zurück zum Turnier
+                        </TournamentStatusBarButton>
+                    </Navbar.Brand>
+                </TournamentStatusBar>
                 <div className='pb-5'>
-                    <TournamentInformationView tournament={tournamentStatistics} currentpage='statistics'/>
                     <StatisticsView tournamentStatistics={tournamentStatistics} />
                 </div>
                 <Footer/>
@@ -72,7 +79,8 @@ function StatisticsView(props) {
 
 function mapTournamentStatisticsToProps(state) {
     const {tournamentStatistics} = state;
-    return {tournamentStatistics};
+    const {isSignedIn, username} = state.userinfo;
+    return {tournamentStatistics, isSignedIn, username};
 }
 
 export default connect(
diff --git a/pages/tournament.js b/pages/tournament.js
index eac688a..341adfe 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -1,7 +1,6 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import {Container, ListGroup, ListGroupItem} from 'reactstrap';
 import Navbar from 'react-bootstrap/Navbar';
 
 
@@ -16,6 +15,8 @@ import '../static/css/tournament.css';
 import {getTournament} from '../js/redux/tournamentApi';
 import {PlayoffStages} from '../js/components/PlayoffStages';
 import GroupStage from '../js/components/GroupStage';
+import {TournamentBigImage} from '../js/components/TournamentBigImage';
+import {EditButton, TournamentStatusBar, TournamentStatusBarButton} from '../js/components/TournamentStatusBar';
 
 class PrivateTournamentPage extends React.Component {
     render() {
@@ -38,45 +39,22 @@ class PrivateTournamentPage extends React.Component {
 }
 
 function StatusBar(props) {
-    return (<Navbar sticky='top' bg='light' className='border-bottom border-top'>
-        <Container className='px-3'>
-            <Navbar.Brand>
-                {props.tournament.name}
-                <EditButton tournamentId={props.tournament.id} isOwner={props.isOwner} isSignedIn={props.isSignedIn}/>
-                <StatisticsButton tournamentId={props.tournament.id}/>
-            </Navbar.Brand>
-        </Container>
-    </Navbar>);
+    return (<TournamentStatusBar>
+        <Navbar.Brand>
+            {props.tournament.name}
+            <EditButton tournamentId={props.tournament.id} isOwner={props.isOwner} isSignedIn={props.isSignedIn}/>
+            <StatisticsButton tournamentId={props.tournament.id}/>
+        </Navbar.Brand>
+    </TournamentStatusBar>);
 }
 
 function StatisticsButton(props) {
-    return (<a href={'/t/' + props.tournamentId + '/statistics'}
-        className='ml-3 btn btn-outline-secondary default-font-family'>
+    return (<TournamentStatusBarButton href={'/t/' + props.tournamentId + '/statistics'}>
         Statistiken
-    </a>);
+    </TournamentStatusBarButton>);
 }
 
 
-function TournamentBigImage(props) {
-    return (<div className="big-image mb-0">
-        <h1 className="display-1">{props.name}</h1>
-        <Container>
-            <TournamentProperties {...props}/>
-        </Container>
-    </div>);
-}
-
-function TournamentProperties(props) {
-    return (<ListGroup className='text-dark text-left shadow'>
-        {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
-        <ListGroupItem>
-            {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
-        </ListGroupItem>
-        <ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem>
-        <ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem>
-    </ListGroup>);
-}
-
 function mapStateToTournamentPageProperties(state) {
     const {isSignedIn, username} = state.userinfo;
     return {isSignedIn, username};
@@ -84,18 +62,6 @@ function mapStateToTournamentPageProperties(state) {
 
 const TournamentPage = connect(mapStateToTournamentPageProperties)(PrivateTournamentPage);
 
-function EditButton(props) {
-    const {tournamentId, isOwner, isSignedIn} = props;
-
-    if (isSignedIn && isOwner) {
-        return (<a href={'/t/' + tournamentId + '/edit'} className='ml-3 btn btn-outline-secondary default-font-family'>
-            Turnier bearbeiten
-        </a>);
-    } else {
-        return null;
-    }
-}
-
 class Main extends React.Component {
     static async getInitialProps({query}) {
         return {query};