Continuing merge: link tournament view, edit and statistics pages between each other, use new design from merged branch

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>);
+}

js/components/TournamentInformationView.js

@@ -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>;
-}
-

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;
+    }
+}

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
     };
 }

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(

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'>
+    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>
-        </Container>
-    </Navbar>);
+    </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};