Extract the standings table view

js/components/StandingsTable.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+    Button,
+    Card,
+    CardBody,
+    Collapse,
+    Table
+} from 'reactstrap';
+
+import { rangedmap } from '../utils/rangedmap';
+import { findTeam } from '../utils/findTeam';
+import { Order, sort } from '../utils/sort';
+
+export class StandingsTable extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showFullTable: false
+        };
+        this.toggleShowFullTable = this.toggleShowFullTable.bind(this);
+    }
+
+    render() {
+        let performances = this.props.data.groupPhasePerformances;
+
+        /**
+         * comparison(p1, p2) < 0 => p1 < p2
+         * comparison(p1, p2) = 0 => p1 = p2
+         * comparison(p1, p2) > 0 => p1 > p2
+         */
+        let sortedPerformances = sort(performances, (p1, p2) => p1.rank - p2.rank, Order.descending);
+
+        return (
+            <Card className="shadow-sm">
+                <CardBody>
+                    <h1 className="custom-font">Aktuelle Rangliste</h1>
+                    <Table striped className="mt-3 mb-0">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Team Name</th>
+                                <th className="text-center">Match Differenz</th>
+                                <th className="text-center">Punkt Differenz</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { rangedmap(sortedPerformances, (team, index) => (
+                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
+                            ), 0, 3) }
+                        </tbody>
+                        <Collapse isOpen={ this.state.showFullTable } tag="tbody">
+                            { rangedmap(sortedPerformances, (team, index) => (
+                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
+                            ), 3) }
+                        </Collapse>
+                        <tfoot>
+                            <tr>
+                                <td colSpan='4'>
+                                    <TableButton isFullTableShown={this.state.showFullTable} onToggle={this.toggleShowFullTable}/>
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </Table>
+                </CardBody>
+            </Card>
+        );
+    }
+
+    toggleShowFullTable() {
+        this.setState({ showFullTable: !this.state.showFullTable });
+    }
+}
+
+class TeamRow extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <tr>
+                <td>{ this.props.teamToShow.rank }</td>
+                <td className="w-100">{findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
+                <td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
+                <td className="text-center">{ this.props.teamToShow.pointDifferential }</td>
+            </tr>
+        );
+    }
+}
+
+class TableButton extends React.Component {
+
+    render() {
+        const { isFullTableShown } = this.props;
+
+        if(isFullTableShown) {
+            return <Button className="w-100" onClick={this.props.onToggle}>Zeige nur die 3 besten Teams</Button>;
+        } else {
+            return <Button className="w-100" onClick={this.props.onToggle}>Zeige alle Teams</Button>;
+        }
+    }
+}

js/components/TournamentInformationView.js

@@ -57,28 +57,28 @@ function ButtonsBadge(props) {
     const { id, ownerName, isSignedIn, username, currentpage } = props;
     
     switch(currentpage) {
-        case 'statistics':
+    case 'statistics':
-            return (
+        return (
-                <ButtonGroup className={props.className}>
+            <ButtonGroup className={props.className}>
-                    <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
+                <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
-                    <TournamentButton id={id}/>
+                <TournamentButton id={id}/>
-                </ButtonGroup>
+            </ButtonGroup>
-            );
+        );
-        case 'tournament':
+    case 'tournament':
-            return (
+        return (
-                <ButtonGroup className={props.className}>
+            <ButtonGroup className={props.className}>
-                    <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
+                <EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
-                    <StatisticsButton id={id}/>
+                <StatisticsButton id={id}/>
-                </ButtonGroup>
+            </ButtonGroup>
-            );
+        );
-        case 'edit':
+    case 'edit':
-            return (
+        return (
-                <ButtonGroup className={props.className}>
+            <ButtonGroup className={props.className}>
-                    <StatisticsButton id={id}/>
+                <StatisticsButton id={id}/>
-                    <TournamentButton id={id}/>
+                <TournamentButton id={id}/>
-                </ButtonGroup>
+            </ButtonGroup>
-            );
+        );
-        default: return null;
+    default: return null;
     }
 }
 

pages/tournament-statistics.js

@@ -2,15 +2,11 @@ import Head                   from 'next/head';
 import React                  from 'react';
 import { connect }            from 'react-redux';
 import {
-    Button,
     Card,
     CardBody,
     CardTitle,
     Col,
-    Collapse,
     Container,
-    ListGroup,
-    ListGroupItem,
     Row,
     Table
 } from 'reactstrap';
@@ -18,10 +14,9 @@ import {
 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 { Footer } from '../js/components/Footer';
 import { findTeam } from '../js/utils/findTeam';
-import { rangedmap } from '../js/utils/rangedmap';
-import { Order, sort } from '../js/utils/sort';
 
 class DominanceShower extends React.Component {
 
@@ -51,98 +46,6 @@ class DominanceShower extends React.Component {
     }
 }
 
-class StandingsTable extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showFullTable: false
-        };
-        this.toggleShowFullTable = this.toggleShowFullTable.bind(this);
-    }
-
-    render() {
-        let performances = this.props.data.groupPhasePerformances;
-
-        /**
-         * comparison(p1, p2) < 0 => p1 < p2
-         * comparison(p1, p2) = 0 => p1 = p2
-         * comparison(p1, p2) > 0 => p1 > p2
-         */
-        let sortedPerformances = sort(performances, (p1, p2) => p1.rank - p2.rank, Order.descending);
-
-        return (
-            <Card className="shadow-sm">
-                <CardBody>
-                    <h1 className="custom-font">Aktuelle Rangliste</h1>
-                    <Table striped className="mt-3 mb-0">
-                        <thead>
-                            <tr>
-                                <th>#</th>
-                                <th>Team Name</th>
-                                <th className="text-center">Match Differenz</th>
-                                <th className="text-center">Punkt Differenz</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            { rangedmap(sortedPerformances, (team, index) => (
-                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
-                            ), 0, 3) }
-                        </tbody>
-                        <Collapse isOpen={ this.state.showFullTable } tag="tbody">
-                            { rangedmap(sortedPerformances, (team, index) => (
-                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
-                            ), 3) }
-                        </Collapse>
-                        <tfoot>
-                            <tr>
-                                <td colSpan='4'>
-                                    <TableButton isFullTableShown={this.state.showFullTable} onToggle={this.toggleShowFullTable}/>
-                                </td>
-                            </tr>
-                        </tfoot>
-                    </Table>
-                </CardBody>
-            </Card>
-        );
-    }
-
-    toggleShowFullTable() {
-        this.setState({ showFullTable: !this.state.showFullTable });
-    }
-}
-
-class TeamRow extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <tr>
-                <td>{ this.props.teamToShow.rank }</td>
-                <td className="w-100">{findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
-                <td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
-                <td className="text-center">{ this.props.teamToShow.pointDifferential }</td>
-            </tr>
-        );
-    }
-}
-
-class TableButton extends React.Component {
-
-    render() {
-        const { isFullTableShown } = this.props;
-
-        if(isFullTableShown) {
-            return <Button className="w-100" onClick={this.props.onToggle}>Zeige nur die 3 besten Teams</Button>;
-        } else {
-            return <Button className="w-100" onClick={this.props.onToggle}>Zeige alle Teams</Button>;
-        }
-    }
-}
-
 class StatisticsTournamentPage extends React.Component {
 
     static async getInitialProps({query}) {

pages/tournament.js

@@ -19,7 +19,7 @@ import {Match} from '../js/components/Match';
 
 class PrivateTournamentPage extends React.Component {
     render() {
-        const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
+        const {ownerUsername, playoffStages} = this.props.tournament;
         const {isSignedIn, username} = this.props;
         
         // TODO: Change href-prop of the anchor tag to contain the tournament code