React hooks

src/__tests__/05.js

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {render} from '@testing-library/react'
-import App from '../final/05'
-// import App from '../exercise/05'
+// import App from '../final/05'
+import App from '../exercise/05'
 
 test('calls VanillaTilt.init with the root node', async () => {
   const {container, unmount} = render(<App />)

src/exercise/04.js

@@ -2,46 +2,24 @@
 // http://localhost:3000/isolated/exercise/04.js
 
 // what is squares[1]
-//why does it not come up
+// explain the onClicks
 
 import * as React from 'react'
+import { useLocalStorageState } from '../utils'
 
-function Board() {
+function Board({onClick, squares}) {
   // const squares = Array(9).fill(null)
-  const [squares, setSquares] = React.useState(Array(9).fill(null))
-
-  const nextValue = calculateNextValue(squares)
-  const winner = calculateWinner(squares)
-  const status = calculateStatus(winner, squares, nextValue)
-
-  function selectSquare(square) {
-    if (winner || squares[square]) {
-      return
-    }
-    const squaresCopy = [...squares]
-    squaresCopy[square] = nextValue // setting the idex of the sqare to equal x or o
-    setSquares(squaresCopy)
-  }
-
-
-
-  function restart() {
-    setSquares(Array(9).fill(null))
-    console.log('restart')
-  }
 
   function renderSquare(i) {
     return (
-      <button className="square" onClick={() => selectSquare(i)}>
+      <button className="square" onClick={() => onClick(i)}>
         {squares[i]}
       </button>
     )
   }
 
   return (
     <div>
-      {/* 🐨 put the status in the div below */}
-      <div className="status">{status}</div>
       <div className="board-row">
         {renderSquare(0)}
         {renderSquare(1)}
@@ -57,18 +35,38 @@ function Board() {
         {renderSquare(7)}
         {renderSquare(8)}
       </div>
-      <button className="restart" onClick={restart}>
-        restart
-      </button>
+
     </div>
   )
 }
 
 function Game() {
+  const [squares, setSquares] = useLocalStorageState('squares', Array(9).fill(null))
+  const nextValue = calculateNextValue(squares)
+  const winner = calculateWinner(squares)
+  const status = calculateStatus(winner, squares, nextValue)
+  // onClick={currentSquares}
+
+  function selectSquare(square) {
+    if (winner || squares[square]) {
+      return
+    }
+    const squaresCopy = [...squares]
+    squaresCopy[square] = nextValue // setting the idex of the sqare to equal x or o
+    setSquares(squaresCopy)
+  }
+
+
   return (
     <div className="game">
       <div className="game-board">
-        <Board />
+        <Board squares={squares} onClick={selectSquare} />
+        <button className="restart" onClick={() => setSquares(Array(9).fill(null))}>
+        restart
+      </button>
+      <div className='status'>
+        <div className="status">{status}</div>
+      </div>
       </div>
     </div>
   )

src/exercise/05.js

@@ -2,22 +2,30 @@
 // http://localhost:3000/isolated/exercise/05.js
 
 import * as React from 'react'
-// eslint-disable-next-line no-unused-vars
 import VanillaTilt from 'vanilla-tilt'
 
 function Tilt({children}) {
   // 🐨 create a ref here with React.useRef()
+  const myRef = React.useRef()
+
+React.useEffect(() => {
+  const tiltNode = myRef.current
+
+  VanillaTilt.init(tiltNode, {
+    max: 25,
+    speed: 400,
+    glare: true,
+    'max-glare': 0.5,
+  })
+
+  return () => {
+    tiltNode.vanillaTilt.destroy()
+  }
+}, [])
 
   // 🐨 add a `React.useEffect` callback here and use VanillaTilt to make your
   // div look fancy.
   // 💰 like this:
-  // const tiltNode = tiltRef.current
-  // VanillaTilt.init(tiltNode, {
-  //   max: 25,
-  //   speed: 400,
-  //   glare: true,
-  //   'max-glare': 0.5,
-  // })
   //
   // 💰 Don't forget to return a cleanup function. VanillaTilt.init will add an
   // object to your DOM node to cleanup:
@@ -29,7 +37,7 @@ function Tilt({children}) {
 
   // 🐨 add the `ref` prop to the `tilt-root` div here:
   return (
-    <div className="tilt-root">
+    <div className="tilt-root" ref={myRef}>
       <div className="tilt-child">{children}</div>
     </div>
   )