I'm currently working with a viewmodel that seems to be functioning correctly.
@connectTo<State>({
selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('games')),
target: 'games',
})
@connectTo<State>({
selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('myGames')),
target: 'myGames',
})
@autoinject()
@customElement('games')
export default class Games {
private static readonly ADD_TO_MYGAMES = 'addToMyGames';
@bindable() games: Game[] = [];
myGames: Game[] = [];
constructor(
private readonly store: Store<State>,
) {
store.registerAction(Games.ADD_TO_MYGAMES, myGamesState);
}
available(game: Game): boolean {
console.log("available", game);
return !!this.myGames.find((i) => _.isEqual(i, game));
}
addGame(game: Game) {
this.store.dispatch(Games.ADD_TO_MYGAMES, game);
}
}
const myGamesState = async (current: State, game: Game) => {
console.log(game);
return produce(current, state => {
state.domain.myGames.push(game);
});
}
The issue arises when a new game is added to `myGames` as the view fails to refresh the `available` status.
<template bindable="games">
<div class="columns">
<ul class="column">
<li repeat.for="game of games" class="level">
<button class="button level-item is-fullwidth ${available(game) ? 'is-success' : ''}" click.delegate="addGame(game)"
disabled.bind="available(game)">
${game.name}
</button>
</li>
</ul>
</div>
</template>
Any suggestions on how to resolve this problem?