From d957ad417df54f6ff47ac4ab57f6c802e7fb8583 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Mon, 15 Apr 2019 12:35:09 +0200 Subject: [PATCH 01/13] Rename property 'fadeIn' to 'groupPhaseEnabled' I think this name is much more descriptive of what this property actually represents. --- pages/create.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/pages/create.js b/pages/create.js index b8ad288..895eaee 100644 --- a/pages/create.js +++ b/pages/create.js @@ -91,8 +91,11 @@ function CreateTournamentCard() { class CreateTournamentForm extends React.Component { constructor(props) { super(props); - this.state = {fadeIn: false, teams: []}; - this.toggle = this.toggle.bind(this); + this.state = { + groupPhaseEnabled: false, + teams: [] + }; + this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this); this.teamListUpdate = this.teamListUpdate.bind(this); } @@ -112,9 +115,10 @@ class CreateTournamentForm extends React.Component { - + - @@ -139,9 +143,7 @@ class CreateTournamentForm extends React.Component { this.setState({teams: list}); } - toggle() { - this.setState({ - fadeIn: !this.state.fadeIn - }); + handleGroupPhaseEnabledInput(input) { + this.setState({ groupPhaseEnabled: input.target.checked }); } -} \ No newline at end of file +} From b0949f28d5cf20f6f1b134d15886e6c23819f0a0 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Mon, 15 Apr 2019 13:38:33 +0200 Subject: [PATCH 02/13] Create proper animation for the group phase section The appearance and disappearance of the group phase section will now be animated. The animation will have to be adjusted at some point, since currently the height is hardcoded. The reason for the library is, that react-bootstrap doesn't support animations anymore as of https://github.com/react-bootstrap/react-overlays/issues/146#issuecomment-282036734 --- package.json | 1 + pages/create.js | 17 +++++-- yarn.lock | 116 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 130 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ae3ad3d..1d7d4fe 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-dom": "^16.6.1", "react-favicon": "^0.0.14", "react-notify-toast": "^0.5.0", + "react-pose": "^4.0.8", "react-redux": "^5.1.1", "reactstrap": "^6.5.0", "redux": "^4.0.1", diff --git a/pages/create.js b/pages/create.js index 895eaee..8a3de6d 100644 --- a/pages/create.js +++ b/pages/create.js @@ -1,6 +1,7 @@ import Head from 'next/head'; import React from 'react'; import { connect } from 'react-redux'; +import posed from 'react-pose'; import { Button, @@ -88,6 +89,17 @@ function CreateTournamentCard() { ); } +const GroupphaseFader = posed.div({ + visible: { + opacity: 1, + height: 150 + }, + hidden: { + opacity: 0, + height: 0 + } +}); + class CreateTournamentForm extends React.Component { constructor(props) { super(props); @@ -118,8 +130,7 @@ class CreateTournamentForm extends React.Component { - + @@ -129,7 +140,7 @@ class CreateTournamentForm extends React.Component { weiterkommen? - +

Teams

Date: Tue, 16 Apr 2019 08:44:02 +0200 Subject: [PATCH 03/13] Create rational bounds for the group size and number of advancing teams --- pages/create.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/pages/create.js b/pages/create.js index 8a3de6d..2d69b01 100644 --- a/pages/create.js +++ b/pages/create.js @@ -105,10 +105,17 @@ class CreateTournamentForm extends React.Component { super(props); this.state = { groupPhaseEnabled: false, + + groupSize: 4, + groupAdvance: 1, + teams: [] }; this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this); this.teamListUpdate = this.teamListUpdate.bind(this); + + this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this); + this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this); } render() { @@ -133,12 +140,14 @@ class CreateTournamentForm extends React.Component { - + - + @@ -154,6 +163,22 @@ class CreateTournamentForm extends React.Component { this.setState({teams: list}); } + handleGroupSizeInput(input) { + let newSize = input.target.value; + if(newSize <= this.state.groupAdvance) { + this.setState({ + groupSize: newSize, + groupAdvance: newSize - 1 + }); + } else { + this.setState({ groupSize: newSize }); + } + } + + handleGroupAdvanceInput(input) { + this.setState({ groupAdvance: input.target.value }); + } + handleGroupPhaseEnabledInput(input) { this.setState({ groupPhaseEnabled: input.target.checked }); } From 0bd92b2ada956eecd3e589618261abfdf51bc7f3 Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 09:47:20 +0200 Subject: [PATCH 04/13] Create / Rename properties needed for the group view --- js/components/EditableStringList.js | 23 ++++++++++++----------- pages/create.js | 20 +++++++++++++++++--- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index 08bf284..2f0e84f 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -11,41 +11,42 @@ export default class EditableStringList extends React.Component { constructor(props) { super(props); this.state = { - entries: props.entries + teams: props.teams, + groups: props.groups }; this.add = this.add.bind(this); this.remove = this.remove.bind(this); } add(text) { - if (text === '' || this.state.entries.includes(text)) { + if (text === '' || this.props.teams.includes(text)) { return false; } - this.state.entries.push(text); - this.setState({entries: this.state.entries}); - this.props.onChange(this.state.entries); + this.props.teams.push(text); + this.setState({teams: this.state.teams}); + this.props.onTeamsChange(this.state.teams); return true; } remove(text) { - let tmp = this.state.entries.filter(item => item !== text); - this.setState({entries: tmp}); - this.props.onChange(tmp); + let tmp = this.state.teams.filter(item => item !== text); + this.setState({teams: tmp}); + this.props.onTeamsChange(tmp); } render() { - if ((typeof this.state.entries !== 'undefined') && this.state.entries.length > 0) { + if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) { return (
- {this.state.entries.map((text) => )} + {this.state.teams.map((text) => )}
); } else { return (
- {this.props.placeholder} + {this.props.teamPlaceholder}
); } diff --git a/pages/create.js b/pages/create.js index 2d69b01..5c7f6fc 100644 --- a/pages/create.js +++ b/pages/create.js @@ -109,7 +109,8 @@ class CreateTournamentForm extends React.Component { groupSize: 4, groupAdvance: 1, - teams: [] + teams: [], + groups: [] }; this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this); this.teamListUpdate = this.teamListUpdate.bind(this); @@ -152,8 +153,17 @@ class CreateTournamentForm extends React.Component {

Teams

- + ); @@ -163,6 +173,10 @@ class CreateTournamentForm extends React.Component { this.setState({teams: list}); } + groupListUpdate(list) { + this.setState({groups: list}); + } + handleGroupSizeInput(input) { let newSize = input.target.value; if(newSize <= this.state.groupAdvance) { From 8aad4d614d7c94370b9295f9e561bb89bb318c7b Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 10:51:48 +0200 Subject: [PATCH 05/13] 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 ( -
- - {this.state.teams.map((text) => )} -
- ); + if(this.props.groupPhaseEnabled) { + if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) { + return ( +
+ + +
+ ); + } else { + return ( +
+ + {this.props.groupPlaceHolder} +
+ ); + } } else { - return ( -
- - {this.props.teamPlaceholder} -
- ); + if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) { + return ( +
+ + {this.state.teams.map((text) => )} +
+ ); + } else { + return ( +
+ + {this.props.teamPlaceholder} +
+ ); + } } } } +class GroupView extends React.Component { + + constructor(props) { + super(props); + } + + render() { + return ( +
+ {this.props.groups.map((group, groupindex) => ( +
+ Group {groupindex + 1} + {group.map((team, teamindex) => ( +
{team}
+ ))} +
+ ))} +
+ ); + } +} + 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); From 89f2fa79c500d5a43d58c61f63ccb8ffc57dd4bf Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 11:41:13 +0200 Subject: [PATCH 06/13] Properly format the groups and the teams in them --- js/components/EditableStringList.js | 26 +++++++++++++++++--------- static/css/editablestringlist.css | 15 +++++++++++++++ 2 files changed, 32 insertions(+), 9 deletions(-) create mode 100644 static/css/editablestringlist.css diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index 24b33de..a02c15c 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -1,12 +1,18 @@ import React from 'react'; import { Alert, - Button, + Button, + Card, + CardBody, + CardTitle, + CardText, Input, InputGroup, InputGroupAddon } from 'reactstrap'; +import '../../static/css/editablestringlist.css'; + export default class EditableStringList extends React.Component { constructor(props) { super(props); @@ -54,7 +60,7 @@ export default class EditableStringList extends React.Component { return (
- +
); } else { @@ -95,12 +101,14 @@ class GroupView extends React.Component { return (
{this.props.groups.map((group, groupindex) => ( -
- Group {groupindex + 1} - {group.map((team, teamindex) => ( -
{team}
- ))} -
+ + + Group {groupindex + 1} + {group.map((team, teamindex) => ( + + ))} + + ))}
); @@ -159,7 +167,7 @@ class Item extends React.Component { render() { return ( - + {this.props.text} ); diff --git a/static/css/editablestringlist.css b/static/css/editablestringlist.css new file mode 100644 index 0000000..d464abd --- /dev/null +++ b/static/css/editablestringlist.css @@ -0,0 +1,15 @@ + +.group-card { + margin-top: 15px; + margin-right: 15px; + display: inline-block; + vertical-align: top; +} + +.team-item { + display: inline-block; +} + +.group-card .team-item { + display: block; +} From e50dc7d293289aeca4fecf16c5f09f20b60fc21d Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 12:38:35 +0200 Subject: [PATCH 07/13] Add proper logic for removing teams with the group stage --- js/components/EditableStringList.js | 54 ++++++++++++++++++++++++++--- pages/create.js | 1 - 2 files changed, 49 insertions(+), 6 deletions(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index a02c15c..06af179 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -5,7 +5,6 @@ import { Card, CardBody, CardTitle, - CardText, Input, InputGroup, InputGroupAddon @@ -49,9 +48,54 @@ export default class EditableStringList extends React.Component { } remove(text) { - let tmp = this.state.teams.filter(item => item !== text); - this.setState({teams: tmp}); - this.props.onTeamsChange(tmp); + if(this.removeTeamFromGroup(text) === false) { + return false; + } + + this.setState({ + teams: this.state.teams, + groups: this.state.groups + }); + + this.props.onTeamsChange(this.state.teams); + this.props.onGroupsChange(this.state.groups); + } + + removeTeamFromGroup(text) { + this.state.teams = this.state.teams.filter(item => item !== text); + + let teamIndex = this.findTeam(text); + if(teamIndex === null) { + return false; + } + + // Move every first team to the next group + this.state.groups[teamIndex.group].splice(teamIndex.team, 1); + for(var group = teamIndex.group; group < this.state.groups.length - 1; group++) { + let currentGroup = this.state.groups[group]; + currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0]; + } + + // delete the last group in case it is empty + if(this.state.groups[this.state.groups.length - 1].length === 0) { + this.state.groups.splice(this.state.groups.length - 1, 1); + } + + return true; + } + + findTeam(text) { + for(var group = 0; group < this.state.groups.length; group++) { + for(var team = 0; team < this.state.groups[group].length; team++) { + if(this.state.groups[group][team] === text) { + return { + group: group, + team: team + }; + } + } + } + return null; } render() { @@ -104,7 +148,7 @@ class GroupView extends React.Component { Group {groupindex + 1} - {group.map((team, teamindex) => ( + {group.map((team) => ( ))} diff --git a/pages/create.js b/pages/create.js index 00417f3..55e3ac8 100644 --- a/pages/create.js +++ b/pages/create.js @@ -9,7 +9,6 @@ import { CardBody, Container, CustomInput, - Fade, Form, FormGroup, Input, From 6890ecc7fb3c2041b7f66d436950526e0bc1209d Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 12:50:41 +0200 Subject: [PATCH 08/13] Fix a bug with the adding of teams to groups Due to the equals one could fill up one group, decrease the max size of it and then add indefinitely many teams to the last group without a new group being created. --- js/components/EditableStringList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index 06af179..c061ac6 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -30,7 +30,7 @@ export default class EditableStringList extends React.Component { this.state.teams.push(text); var lastGroup = this.state.groups[this.state.groups.length - 1]; - if(lastGroup === undefined || lastGroup.length === this.props.groupSize) { + if(lastGroup === undefined || lastGroup.length >= this.props.groupSize) { this.state.groups[this.state.groups.length] = []; } lastGroup = this.state.groups[this.state.groups.length - 1]; From e877cf1a7fb0e4955960a85d8dbc4083b3728e87 Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 13:05:24 +0200 Subject: [PATCH 09/13] Add detection and handling of changes of max group sizes --- js/components/EditableStringList.js | 33 ++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index c061ac6..ac83afd 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -16,6 +16,7 @@ export default class EditableStringList extends React.Component { constructor(props) { super(props); this.state = { + groupSize: props.groupSize, teams: props.teams, groups: props.groups }; @@ -30,7 +31,7 @@ export default class EditableStringList extends React.Component { this.state.teams.push(text); var lastGroup = this.state.groups[this.state.groups.length - 1]; - if(lastGroup === undefined || lastGroup.length >= this.props.groupSize) { + if(lastGroup === undefined || lastGroup.length >= this.state.groupSize) { this.state.groups[this.state.groups.length] = []; } lastGroup = this.state.groups[this.state.groups.length - 1]; @@ -98,7 +99,37 @@ export default class EditableStringList extends React.Component { return null; } + resizeGroups(newSize) { + let oldGroups = this.state.groups; + var rearrangedGroups = []; + + for(var oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) { + for(var oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) { + let index = oldGroupIndex * this.state.groupSize + oldTeamIndex; + + let newGroupIndex = Math.floor(index / newSize); + let newTeamIndex = index % newSize; + + if(newTeamIndex === 0) { + rearrangedGroups[newGroupIndex] = []; + } + + rearrangedGroups[newGroupIndex][newTeamIndex] = oldGroups[oldGroupIndex][oldTeamIndex]; + } + } + + this.setState({ + groupSize: newSize, + groups: rearrangedGroups + }); + this.props.onGroupsChange(this.state.groups); + } + render() { + if(this.props.groupSize !== this.state.groupSize) { + this.resizeGroups(this.props.groupSize); + } + if(this.props.groupPhaseEnabled) { if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) { return ( From 88408b75430f64de5e67ac15ae5d9bbada439e27 Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 13:40:12 +0200 Subject: [PATCH 10/13] Implement drag and drop for teams in groups --- js/components/EditableStringList.js | 43 +++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index ac83afd..b9027e4 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -13,6 +13,7 @@ import { import '../../static/css/editablestringlist.css'; export default class EditableStringList extends React.Component { + constructor(props) { super(props); this.state = { @@ -22,6 +23,7 @@ export default class EditableStringList extends React.Component { }; this.add = this.add.bind(this); this.remove = this.remove.bind(this); + this.onGroupSwitch = this.onGroupSwitch.bind(this); } add(text) { @@ -125,6 +127,10 @@ export default class EditableStringList extends React.Component { this.props.onGroupsChange(this.state.groups); } + onGroupSwitch(src, dest) { + console.log('Switched src (' + JSON.stringify(src) + ') to dest (' + JSON.stringify(dest) + ')' ); + } + render() { if(this.props.groupSize !== this.state.groupSize) { this.resizeGroups(this.props.groupSize); @@ -179,8 +185,15 @@ class GroupView extends React.Component { Group {groupindex + 1} - {group.map((team) => ( - + {group.map((team, teamindex) => ( +
this.onDragStart(e, groupindex,teamindex)} + onDragOver={(e) => this.onDragOver(e)} + onDrop={(e) => this.onDrop(e, groupindex, teamindex)}> + + + +
))} @@ -188,6 +201,32 @@ class GroupView extends React.Component { ); } + + onDragStart(e, group, team) { + e.dataTransfer.setData( + 'text/plain', + JSON.stringify({ + group: group, + team: team + }) + ); + } + + onDragOver(e) { + e.preventDefault(); + } + + onDrop(e, group, team) { + e.preventDefault(); + + let src = JSON.parse(e.dataTransfer.getData('text')); + let dest = { + group: group, + team: team + }; + + this.props.onGroupSwitched(src, dest); + } } class StringInput extends React.Component { From 11d607c08b12dfc52d32cb5e40268c664adca0b6 Mon Sep 17 00:00:00 2001 From: Jonny Date: Tue, 16 Apr 2019 13:51:23 +0200 Subject: [PATCH 11/13] Implement actual swapping on drag and drop --- js/components/EditableStringList.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index b9027e4..356fafb 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -128,7 +128,18 @@ export default class EditableStringList extends React.Component { } onGroupSwitch(src, dest) { - console.log('Switched src (' + JSON.stringify(src) + ') to dest (' + JSON.stringify(dest) + ')' ); + const groupCopy = this.state.groups.slice(); + + const srcTeam = groupCopy[src.group][src.team]; + const destTeam = groupCopy[dest.group][dest.team]; + + groupCopy[src.group].splice(src.team, 1, destTeam); + groupCopy[dest.group].splice(dest.team, 1, srcTeam); + + this.setState({ + groups: groupCopy + }); + this.props.onGroupsChange(this.state.groups); } render() { @@ -187,9 +198,9 @@ class GroupView extends React.Component { Group {groupindex + 1} {group.map((team, teamindex) => (
this.onDragStart(e, groupindex,teamindex)} - onDragOver={(e) => this.onDragOver(e)} - onDrop={(e) => this.onDrop(e, groupindex, teamindex)}> + onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)} + onDragOver={(e) => this.onDragOver(e)} + onDrop={(e) => this.onDrop(e, groupindex, teamindex)}> From dc3b1a2cacbe467cfff656f98c0a4b4fe0ec8619 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Tue, 16 Apr 2019 19:17:28 +0200 Subject: [PATCH 12/13] Fix design with white borders being visible while dragging teams --- js/components/EditableStringList.js | 1 + static/css/editablestringlist.css | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js index 356fafb..38e7cf7 100644 --- a/js/components/EditableStringList.js +++ b/js/components/EditableStringList.js @@ -198,6 +198,7 @@ class GroupView extends React.Component { Group {groupindex + 1} {group.map((team, teamindex) => (
this.onDragStart(e, groupindex,teamindex)} onDragOver={(e) => this.onDragOver(e)} onDrop={(e) => this.onDrop(e, groupindex, teamindex)}> diff --git a/static/css/editablestringlist.css b/static/css/editablestringlist.css index d464abd..b0012b0 100644 --- a/static/css/editablestringlist.css +++ b/static/css/editablestringlist.css @@ -10,6 +10,16 @@ display: inline-block; } -.group-card .team-item { +.grouped-team-item { display: block; + margin-bottom: .5rem; + border-radius: .25rem; +} + +.grouped-team-item:last-child { + margin-bottom: 0px; +} + +.grouped-team-item > .m-2 { + margin: 0 !important; } From 75f7186ca7fb1d731db39cd9d6721f6793e6612d Mon Sep 17 00:00:00 2001 From: JP1998 Date: Tue, 16 Apr 2019 23:20:44 +0200 Subject: [PATCH 13/13] Fix a bug logging the user out when calling certain sites This has happened because the store was being updated before it was rehydrated, and thus first saving an empty state, which is thereafter being loaded when rehydrating the application state. --- js/api.js | 10 +++++++--- pages/create.js | 8 +++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/js/api.js b/js/api.js index afc81c7..a065064 100644 --- a/js/api.js +++ b/js/api.js @@ -340,6 +340,7 @@ const default_applicationstate = { }; var __store; +var applicationHydrated = false; export function initializeStore(initialState = default_applicationstate) { __store = createStore( @@ -348,7 +349,9 @@ export function initializeStore(initialState = default_applicationstate) { composeWithDevTools(applyMiddleware(thunkMiddleware)) ); __store.subscribe(() => { - localStorage.setItem('reduxState', JSON.stringify(__store.getState())); + if(applicationHydrated) { + localStorage.setItem('reduxState', JSON.stringify(__store.getState())); + } }); return __store; } @@ -449,11 +452,12 @@ function rehydrateApplicationState() { if(persistedState) { __store.dispatch({ type : actiontypes_userinfo.REHYDRATE, - parameters : Object.assign({}, persistedState.userinfo, {}) + parameters : Object.assign({}, persistedState.userinfo) }); __store.dispatch({ type : actiontypes_tournamentinfo.REHYDRATE, - parameters : Object.assign({}, persistedState.tournamentinfo, {}) + parameters : Object.assign({}, persistedState.tournamentinfo) }); + applicationHydrated = true; } } diff --git a/pages/create.js b/pages/create.js index c6503ad..8d079dd 100644 --- a/pages/create.js +++ b/pages/create.js @@ -25,7 +25,7 @@ import { createTournament } from '../js/api'; import '../static/everypage.css'; -class PrivateCreatePage extends React.Component { +class CreatePage extends React.Component { render() { const { isSignedIn } = this.props; @@ -66,11 +66,9 @@ function mapStateToCreatePageProperties(state) { return { isSignedIn }; } -const CreatePage = connect( +export default connect( mapStateToCreatePageProperties -)(PrivateCreatePage); - -export default CreatePage; +)(CreatePage); function CreateTournamentCard() { return (