From 8aad4d614d7c94370b9295f9e561bb89bb318c7b Mon Sep 17 00:00:00 2001
From: Jonny <littlebigjonny06@gmail.com>
Date: Tue, 16 Apr 2019 10:51:48 +0200
Subject: [PATCH] Make groups visible and add the teams to the groups

---
 js/components/EditableStringList.js | 86 +++++++++++++++++++++++------
 pages/create.js                     |  1 +
 2 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js
index 2f0e84f..24b33de 100644
--- a/js/components/EditableStringList.js
+++ b/js/components/EditableStringList.js
@@ -19,12 +19,26 @@ export default class EditableStringList extends React.Component {
     }
 
     add(text) {
-        if (text === '' || this.props.teams.includes(text)) {
+        if (text === '' || this.state.teams.includes(text)) {
             return false;
         }
-        this.props.teams.push(text);
-        this.setState({teams: this.state.teams});
+        this.state.teams.push(text);
+        
+        var lastGroup = this.state.groups[this.state.groups.length - 1];
+        if(lastGroup === undefined || lastGroup.length === this.props.groupSize) {
+            this.state.groups[this.state.groups.length] = [];
+        }
+        lastGroup = this.state.groups[this.state.groups.length - 1];
+        lastGroup[lastGroup.length] = text;
+
+        this.setState({
+            teams: this.state.teams,
+            groups: this.state.groups
+        });
+
         this.props.onTeamsChange(this.state.teams);
+        this.props.onGroupsChange(this.state.groups);
+
         return true;
     }
 
@@ -35,24 +49,64 @@ export default class EditableStringList extends React.Component {
     }
 
     render() {
-        if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
-            return (
-                <div className="bg-light p-3 text-secondary font-italic">
-                    <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
-                    {this.state.teams.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)}
-                </div>
-            );
+        if(this.props.groupPhaseEnabled) {
+            if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
+                return (
+                    <div className="bg-light p-3 text-secondary font-italic">
+                        <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
+                        <GroupView groups={this.state.groups} onGroupSwitched={this.onGroupSwitch}/>
+                    </div>
+                );
+            } else {
+                return (
+                    <div className="bg-light p-3 text-secondary text-center font-italic">
+                        <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
+                        {this.props.groupPlaceHolder}
+                    </div>
+                );
+            }
         } else {
-            return (
-                <div className="bg-light p-3 text-secondary text-center font-italic">
-                    <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
-                    {this.props.teamPlaceholder}
-                </div>
-            );
+            if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
+                return (
+                    <div className="bg-light p-3 text-secondary font-italic">
+                        <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
+                        {this.state.teams.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)}
+                    </div>
+                );
+            } else {
+                return (
+                    <div className="bg-light p-3 text-secondary text-center font-italic">
+                        <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
+                        {this.props.teamPlaceholder}
+                    </div>
+                );
+            }
         }
     }
 }
 
+class GroupView extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                {this.props.groups.map((group, groupindex) => (
+                    <div className="group-container" key={groupindex}>
+                        Group {groupindex + 1}
+                        {group.map((team, teamindex) => (
+                            <div className="team" key={teamindex}>{team}</div>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
 class StringInput extends React.Component {
     constructor(props) {
         super(props);
diff --git a/pages/create.js b/pages/create.js
index 5c7f6fc..00417f3 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -114,6 +114,7 @@ class CreateTournamentForm extends React.Component {
         };
         this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this);
         this.teamListUpdate = this.teamListUpdate.bind(this);
+        this.groupListUpdate = this.groupListUpdate.bind(this);
 
         this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this);
         this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this);