render()

in static/src/javascripts/projects/common/modules/crosswords/anagram-helper/main.js [103:169]

• 64 lines of code
• 4 McCabe index (conditional complexity)

    render() {
        const closeIcon = {
            __html: closeCentralIcon,
        };
        const clue = getAnagramClueData(
            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
                value={this.state.clueInput}
                clue={clue}
                onChange={this.onClueInput.bind(this)}
                onEnter={this.shuffle.bind(this)}
            />
        ) : (
            <Ring letters={letters} />
        );

        return (
            <div
                className="crossword__anagram-helper-outer"
                data-link-name="Anagram Helper">
                <div className="crossword__anagram-helper-inner">{inner}</div>
                <button
                    className="button button--large button--tertiary crossword__anagram-helper-close"
                    onClick={this.props.close.bind(this.props.crossword)}
                    dangerouslySetInnerHTML={closeIcon}
                    data-link-name="Close"
                />
                <button
                    className={`button button--large ${
                        !this.state.clueInput ? 'button--tertiary' : ''
                    }`}
                    onClick={this.reset.bind(this)}
                    data-link-name="Start Again">
                    start again
                </button>
                <button
                    className={`button button--large ${
                        this.canShuffle() ? '' : 'button--tertiary'
                    }`}
                    onClick={this.shuffle.bind(this)}
                    data-link-name="Shuffle">
                    shuffle
                </button>
                <CluePreview
                    clue={clue}
                    entries={entries}
                    letters={letters}
                    hasShuffled={!this.state.showInput}
                />
            </div>
        );
    }