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