Create React App 入門 06: アプリケーションのロジックをコンテクストに切り出す

import { GameProvider } from './GameContext';
import Board from './Board';
import GameInfo from './GameInfo';
import './App.css';

function App() {
	return (
		<GameProvider>
			<div className="game">
				<Board />
				<GameInfo />
			</div>
		</GameProvider>
	);
}

export default App;

import { createContext, useState } from 'react';

const initialContext = {
	squares: Array(9).fill(null),
	xIsNext: true,
	winner: null,
};
export const GameContext = createContext(initialContext);
export const GameProvider = ({ children }) => {
	const [squares, setSquares] = useState(initialContext.squares);
	const [xIsNext, setXIsNext] = useState(initialContext.xIsNext);
	const [finished, setFinished] = useState(false);
	const [winner, setWinner] = useState(initialContext.winner);
	const handleClick = (i) => {
		const _squares = [...squares];
		if (_squares[i]) { return; }
		if (finished) { return; }
		_squares[i] = xIsNext ? 'X' : 'O';
		setSquares(_squares);
		setXIsNext(!xIsNext);
		const _winner = calculateWinner(_squares);
		setWinner(_winner);
		if (_winner) {
			setFinished(true);
		}
	};
	return (
		<GameContext.Provider value={{ onClick: handleClick, squares, winner, xIsNext }}>
			{children}
		</GameContext.Provider>
	);
};

function calculateWinner(squares) {
	const lines = [
		[0, 1, 2],
		[3, 4, 5],
		[6, 7, 8],
		[0, 3, 6],
		[1, 4, 7],
		[2, 5, 8],
		[0, 4, 8],
		[2, 4, 6],
	];
	const length = lines.length;
	for (let i = 0; i < length; i++) {
		const [a, b, c] = lines[i];
		const player = squares[a];
		if (player && player === squares[b] && player === squares[c]) {
			return player;
		}
	}
	return null;
}

import { useContext } from 'react';
import { GameContext } from './GameContext';

const Square = ({ id }) => {
	const { onClick, squares } = useContext(GameContext);
	return (
		<button
			type="button"
			className="square"
			onClick={() => onClick(id)}
		>
			{squares[id]}
		</button>
	);
};

export default Square;

import { useContext } from 'react';
import { GameContext } from './GameContext';

const GameInfo = () => {
	const { winner, xIsNext } = useContext(GameContext);
	const status = (winner) ?
		`Winner: ${winner}` :
		`Next player: ${xIsNext ? 'X' : 'O'}`;
	return (
		<div className="game-info">
			<div>{status}</div>
		</div>
	);
};

export default GameInfo;