Hi, could anyone take a look and tell me where is problem in below code.
I expected meteor to rerender ui on Players
collection update but there is no UI update. When Players collection is update i have to manually refresh browser to see PlayCard
component updated.
class PlayCard extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Card.Group>
{this.props.players.map(player => {
return (
<Card key={player._id}>
<Card.Content>
<Card.Header>Name: {player.name}</Card.Header>
<Card.Description>
<List divided relaxed>
<List.Item>
<List.Content>
<List.Header> Points : {player.points}</List.Header>
</List.Content>
</List.Item>
<List.Item>
<List.Content>
<List.Header> Turn : {player.turn}</List.Header>
</List.Content>
</List.Item>
</List>
</Card.Description>
</Card.Content>
</Card>
);
})}
</Card.Group>
);
}
}
const PlayCardWithTracker = withTracker(props => {
const play = props.play;
return {
players: Players.find({ _id: { $in: play.players } })
};
})(PlayCard);
class TrainerDashboard extends React.Component {
constructor(props) {
super(props);
}
render() {
if (this.props.ready) {
return (
<div>
{this.props.plays.map(play => (
<PlayCardWithTracker play={play} key={play._id}/>
))}
<NewGameModal />
</div>
);
} else {
return <div />;
}
}
}
export default withTracker(props => {
const handle = Meteor.subscribe("trainerCurrentPlays");
return {
ready: handle.ready(),
plays: Plays.find({
userId: Meteor.userId()
}).fetch(),
players: Players.find()
};
})(TrainerDashboard);