Permalink
Browse files

Don't reset anagram when component re-renders

I thought I had fixed this issue in [1] but it was still a problem. It 
looks like it is happening because when moves are received it causes the 
anagram helper to re-render, and the shuffle method is called within the 
render.

Instead store the shuffled letters as state so they don't change when 
the component is re-rendered.

[1] 57f5bd3
  • Loading branch information...
zetter committed Dec 2, 2018
1 parent 1acb381 commit 1a5f2542f1d77bd5b67f1ffa821000913e7accd6
Showing with 15 additions and 12 deletions.
  1. +15 −12 src/javascripts/crosswords/anagram-helper/main.js
@@ -10,6 +10,7 @@ class AnagramHelper extends Component {
constructor() {
super();
this.state = {
letters: [],
clueInput: '',
showInput: true,
};
@@ -69,6 +70,7 @@ class AnagramHelper extends Component {
shuffle() {
if (this.canShuffle()) {
this.setState({
letters: this.shuffleWord(this.state.clueInput, this.entries()),
showInput: false,
});
}
@@ -87,6 +89,16 @@ class AnagramHelper extends Component {
return !!this.state.clueInput && this.state.clueInput.length > 0;
}

entries() {
const cells = cellsForClue(
this.props.entries,
this.props.focussedEntry,
);
return cells.map(coords => Object.assign({}, this.props.grid[coords.x][coords.y], {
key: `${coords.x},${coords.y}`,
}));
}

render() {
const closeIcon = {
__html: closeCentralIcon,
@@ -95,15 +107,6 @@ class AnagramHelper extends Component {
this.props.entries,
this.props.focussedEntry,
);
const cells = cellsForClue(
this.props.entries,
this.props.focussedEntry,
);
const entries = cells.map(coords => Object.assign({}, this.props.grid[coords.x][coords.y], {
key: `${coords.x},${coords.y}`,
}));

const letters = this.shuffleWord(this.state.clueInput, entries);

const inner = this.state.showInput ? (
<ClueInput
@@ -113,7 +116,7 @@ class AnagramHelper extends Component {
onEnter={this.shuffle.bind(this)}
/>
) : (
<Ring letters={letters} />
<Ring letters={this.state.letters} />
);

return (
@@ -148,8 +151,8 @@ class AnagramHelper extends Component {
</button>
<CluePreview
clue={clue}
entries={entries}
letters={letters}
entries={this.entries()}
letters={this.state.letters}
hasShuffled={!this.state.showInput}
/>
</div>

0 comments on commit 1a5f254

Please sign in to comment.