C16 - Spruce - Vange Spracklin

[HouseOfVange]

completed wave 1!

[audreyandoy]

Great work Vange! You met all the learnings goals and passed the tests for this project.

I added ways to refactor and other approaches in your PR.

Keep up the great work!

Project Grade: 🟢

[audreyandoy]

Nice ternary!

[audreyandoy]

Because both conditionals have the same logic when evaluated to true, we can combine them into one using the || (or) operator:

Suggested change

	if (position.id != squareID){
	return position;
	}
	if (position.value !== ''){
	return position;
	}
	if (position.id != squareID || position.value !== '' ) {
	return position;
	}

[audreyandoy]

Great use of the spread operator to copy the key-value pairs and assign value to the current player!

[audreyandoy]

Nice helper function! Another approach to displaying winner text is by using a ternary operator:

Suggested change

	<h2> {showStatus()} </h2>
	<h2> { winner ? Winner is ${winner} : `Your turn ${currentPlayer}` } </h2>

[audreyandoy]

We could use object destructuring to reference props by their key name instead.

Suggested change

	const Square = (props) => {
	// For Wave 1 enable this
	// Component to alert a parent
	// component when it's clicked on.
	return <button
	className="square"
	>
	{props.value}
	</button>
	}
	const handleOnClickSquareButton = () => {
	// if (props.value){
	// console.log('you cant play that square!');
	// }else{
	props.onClickCallback(props.id);
	// }
	};
	return <button
	className='square'
	onClick={handleOnClickSquareButton}
	>
	{props.value}
	</button>;
	};
	const Square = ( {value, id, onClickCallback, key} ) => {
	const handleOnClickSquareButton = () => {
	onClickCallback(id);
	};
	return <button
	className='square'
	onClick={handleOnClickSquareButton}
	>
	{value}
	</button>;
	};

[audreyandoy]

I assume jest was removed from VS Code because it was running tests with every change right?

We actually turn off auto run by adding the key-value pair to our settings.json in VS Code:

"jest.autoRun": "off"