From beffd2485579b7b32e9db26647489cc19bf701df Mon Sep 17 00:00:00 2001
From: Jonny <littlebigjonny06@gmail.com>
Date: Fri, 3 May 2019 12:57:20 +0200
Subject: [PATCH] Extract the standings table view

---
 js/components/StandingsTable.js            | 104 +++++++++++++++++++++
 js/components/TournamentInformationView.js |  44 ++++-----
 pages/tournament-statistics.js             |  99 +-------------------
 pages/tournament.js                        |   4 +-
 4 files changed, 129 insertions(+), 122 deletions(-)
 create mode 100644 js/components/StandingsTable.js

diff --git a/js/components/StandingsTable.js b/js/components/StandingsTable.js
new file mode 100644
index 0000000..ecdb6ce
--- /dev/null
+++ b/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>;
+        }
+    }
+}
diff --git a/js/components/TournamentInformationView.js b/js/components/TournamentInformationView.js
index 99c465c..c34b4b4 100644
--- a/js/components/TournamentInformationView.js
+++ b/js/components/TournamentInformationView.js
@@ -57,28 +57,28 @@ 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;
+    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;
     }
 }
 
diff --git a/pages/tournament-statistics.js b/pages/tournament-statistics.js
index 0a33e5b..e65710c 100644
--- a/pages/tournament-statistics.js
+++ b/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}) {
diff --git a/pages/tournament.js b/pages/tournament.js
index 6066739..13d6b6d 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -19,9 +19,9 @@ 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
         return (<div className='pb-5'>
             <TournamentInformationView tournament={this.props.tournament} currentpage='tournament'/>