turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Only open single groups

This commit is contained in:
Daniel Schädler 2025-03-17 16:12:16 +01:00
parent e1bfa05b9f
commit 8a9dc704c0
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/components/GroupStage.js
View File

@ -9,18 +9,12 @@ import {FaChevronDown} from 'react-icons/fa6';
export default class GroupStage extends Component {
constructor(props) {
super(props);
this.state = {showMatches: this.props.showMatches};
this.toggleShowMatches = this.toggleShowMatches.bind(this);
this.groupRefs = this.props.groups.reduce((acc, group) => {
acc[group.id] = React.createRef();
return acc;
}, {});
}
toggleShowMatches() {
this.setState({showMatches: !this.state.showMatches});
}
render() {
return (
<div className="py-2 px-1">
@ -34,8 +28,6 @@ export default class GroupStage extends Component {
key={group.id}
isSignedIn={this.props.isSignedIn}
isOwner={this.props.isOwner}
showMatches={this.state.showMatches}
showMatchesToggle={this.toggleShowMatches}
groupRef={this.groupRefs[group.id]}
/>
))}
@ -61,7 +53,10 @@ function ShowMatchesToggleChevron(props) {
export class Group extends Component {
constructor(props) {
super(props);
this.state = props.group;
this.state = {
...props.group,
showMatches: false
};
this.reload = this.reload.bind(this);
this.handleToggle = this.handleToggle.bind(this);
this.onReloadSuccess = this.onReloadSuccess.bind(this);
@ -69,7 +64,7 @@ export class Group extends Component {
}
handleToggle() {
this.props.showMatchesToggle();
this.setState(prevState => ({ showMatches: !prevState.showMatches }));
if (this.props.groupRef.current) {
this.props.groupRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
}
@ -96,10 +91,10 @@ export class Group extends Component {
Gruppe {this.state.number}
</h3>
<ShowMatchesToggleChevron
show={this.props.showMatches}
show={this.state.showMatches}
toggle={this.handleToggle}
/>
<Collapse isOpen={this.props.showMatches}>
<Collapse isOpen={this.state.showMatches}>
{this.state.matches.sort(sortMatchesByPositionAscending()).map(match => (
<Match
match={match}