├── .npmrc
├── .gitignore
├── .DS_Store
├── .prettierignore
├── public
    ├── antic-slab.woff2
    └── index.html
├── src
    ├── setupTests.js
    ├── index.js
    ├── exercises
    │   ├── 13.js
    │   ├── 11.js
    │   ├── 14.js
    │   ├── 01.js
    │   ├── 02.js
    │   ├── 03.js
    │   ├── 10.js
    │   ├── 12.js
    │   ├── 04.js
    │   ├── 05.js
    │   ├── 06.js
    │   ├── 09.js
    │   ├── 07.js
    │   └── 08.js
    ├── exercises-final
    │   ├── 01.js
    │   ├── 03.js
    │   ├── 02.js
    │   ├── 04.js
    │   ├── 12.js
    │   ├── 05.js
    │   ├── 10.js
    │   ├── 14.js
    │   ├── 13.js
    │   ├── 06.js
    │   ├── 08.js
    │   ├── 11.js
    │   ├── 07.js
    │   └── 09.js
    ├── pokemon-info.js
    ├── tilt.js
    ├── fetch-pokemon.js
    ├── tilt.css
    ├── __tests__
    │   ├── 10.js
    │   ├── 01.js
    │   ├── 05.js
    │   ├── 12.js
    │   ├── 04.js
    │   ├── 03.js
    │   ├── 02.js
    │   ├── 13.js
    │   ├── 14.js
    │   ├── 09.js
    │   ├── 06.js
    │   ├── 07.js
    │   └── 08.js
    └── app.js
├── sandbox.config.json
├── .prettierrc
├── .travis.yml
├── appveyor.yml
├── scripts
    ├── install.js
    ├── make-appveyor-work.js
    ├── verify.js
    └── autofill-feedback-email.js
├── .all-contributorsrc
├── package.json
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | build
4 | .idea/
5 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/modern-react/HEAD/.DS_Store


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | build
4 | .idea/
5 | scripts/workshop-setup.js
6 | 


--------------------------------------------------------------------------------
/public/antic-slab.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/modern-react/HEAD/public/antic-slab.woff2


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import 'jest-dom/extend-expect'
2 | import 'react-testing-library/cleanup-after-each'
3 | 


--------------------------------------------------------------------------------
/sandbox.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "infiniteLoopProtection": true,
3 |   "hardReloadOnChange": false,
4 |   "template": "node"
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './tilt.css'
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import {App} from './app'
5 | 
6 | const root = ReactDOM.createRoot(document.getElementById('⚛️'))
7 | root.render(<App />)
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "avoid",
 3 |   "bracketSpacing": false,
 4 |   "jsxBracketSameLine": false,
 5 |   "printWidth": 80,
 6 |   "proseWrap": "always",
 7 |   "semi": false,
 8 |   "singleQuote": true,
 9 |   "tabWidth": 2,
10 |   "trailingComma": "all",
11 |   "useTabs": false
12 | }
13 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js: 8
 4 | install: echo "Installation happens in the setup script"
 5 | cache:
 6 |   directories:
 7 |   - node_modules
 8 | notifications:
 9 |   email: false
10 | branches:
11 |   only:
12 |   - master
13 | script:
14 |   - npm run setup
15 | after_success:
16 | - npx codecov
17 | 


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | environment:
 2 |   matrix:
 3 |     - node_version: "8"
 4 | 
 5 | branches:
 6 |   only:
 7 |     - master
 8 | 
 9 | install:
10 |   - ps: Install-Product node $env:node_version
11 | 
12 | test_script:
13 |   - node ./scripts/make-appveyor-work.js
14 |   - npm run setup
15 | 
16 | cache:
17 |   - ./node_modules -> package.json
18 | 
19 | build: off
20 | 


--------------------------------------------------------------------------------
/scripts/install.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | const path = require('path')
 3 | const installDeps = require('./workshop-setup').installDeps
 4 | 
 5 | installDeps([path.resolve(__dirname, '..')]).then(
 6 |   () => {
 7 |     console.log('👍  all dependencies installed')
 8 |   },
 9 |   () => {
10 |     // ignore, workshop-setup will log for us...
11 |   },
12 | )
13 | 


--------------------------------------------------------------------------------
/src/exercises/13.js:
--------------------------------------------------------------------------------
 1 | // Fundamental Suspense
 2 | import React from 'react'
 3 | 
 4 | // Don't make changes to the Usage component. It's here to show you how your
 5 | // component is intended to be used and is used in the tests.
 6 | 
 7 | function Usage() {
 8 |   return <div>No exercise for this one...</div>
 9 | }
10 | Usage.title = 'Fundamental Suspense'
11 | 
12 | export default Usage
13 | 


--------------------------------------------------------------------------------
/src/exercises/11.js:
--------------------------------------------------------------------------------
 1 | // Where to NOT use hooks
 2 | import React from 'react'
 3 | 
 4 | // Don't make changes to the Usage component. It's here to show you how your
 5 | // component is intended to be used and is used in the tests.
 6 | 
 7 | function Usage() {
 8 |   return <div>When NOT to use hooks (see the final example code)</div>
 9 | }
10 | Usage.title = 'Where to NOT use hooks'
11 | 
12 | export default Usage
13 | 


--------------------------------------------------------------------------------
/src/exercises/14.js:
--------------------------------------------------------------------------------
 1 | // Suspense with react-cache (VERY ALPHA)
 2 | import React from 'react'
 3 | 
 4 | // Don't make changes to the Usage component. It's here to show you how your
 5 | // component is intended to be used and is used in the tests.
 6 | 
 7 | function Usage() {
 8 |   return <div>No exercise for this one...</div>
 9 | }
10 | Usage.title = 'Suspense with react-cache (VERY ALPHA)'
11 | 
12 | export default Usage
13 | 


--------------------------------------------------------------------------------
/scripts/make-appveyor-work.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const pkg = require('../package.json')
 3 | 
 4 | // See this for details: https://github.com/aredridel/node-bin-gen/issues/45
 5 | delete pkg.devDependencies.node
 6 | 
 7 | // no idea what's going on here...
 8 | pkg.scripts.lint = 'echo "disabled for appveyor"'
 9 | 
10 | fs.writeFileSync(
11 |   require.resolve('../package.json'),
12 |   JSON.stringify(pkg, null, 2),
13 | )
14 | 


--------------------------------------------------------------------------------
/src/exercises-final/01.js:
--------------------------------------------------------------------------------
 1 | // Counter: useState
 2 | import React, {useState} from 'react'
 3 | 
 4 | function Counter() {
 5 |   const [count, setCount] = useState(0)
 6 |   const incrementCount = () => setCount(count + 1)
 7 |   return <button onClick={incrementCount}>{count}</button>
 8 | }
 9 | 
10 | // Don't make changes to the Usage component. It's here to show you how your
11 | // component is intended to be used and is used in the tests.
12 | 
13 | function Usage() {
14 |   return <Counter />
15 | }
16 | Usage.title = 'Counter: useState'
17 | 
18 | export default Usage
19 | 


--------------------------------------------------------------------------------
/src/pokemon-info.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {unstable_createResource as createResource} from 'react-cache'
 3 | import fetchPokemon from './fetch-pokemon'
 4 | 
 5 | const myPokemon = createResource(fetchPokemon)
 6 | 
 7 | function FetchPokemon({pokemonName}) {
 8 |   const pokemon = myPokemon.read(pokemonName)
 9 |   return <pre>{JSON.stringify(pokemon || 'Unknown', null, 2)}</pre>
10 | }
11 | 
12 | function PokemonInfo({pokemonName}) {
13 |   return (
14 |     <React.Suspense fallback="loading...">
15 |       <FetchPokemon pokemonName={pokemonName} />
16 |     </React.Suspense>
17 |   )
18 | }
19 | 
20 | export default PokemonInfo
21 | 


--------------------------------------------------------------------------------
/src/tilt.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef, useLayoutEffect} from 'react'
 2 | import VanillaTilt from 'vanilla-tilt'
 3 | 
 4 | function Tilt(props) {
 5 |   const tiltNode = useRef()
 6 |   useLayoutEffect(() => {
 7 |     const vanillaTiltOptions = {
 8 |       max: 25,
 9 |       speed: 400,
10 |       glare: true,
11 |       'max-glare': 0.5,
12 |     }
13 |     VanillaTilt.init(tiltNode.current, vanillaTiltOptions)
14 |     return () => tiltNode.current.vanillaTilt.destroy()
15 |   }, [])
16 |   return (
17 |     <div ref={tiltNode} className="tilt-root">
18 |       <div className="tilt-child">{props.children}</div>
19 |     </div>
20 |   )
21 | }
22 | 
23 | export default Tilt
24 | 


--------------------------------------------------------------------------------
/src/exercises-final/03.js:
--------------------------------------------------------------------------------
 1 | // Counter: useEffect
 2 | import React, {useState, useEffect} from 'react'
 3 | 
 4 | function Counter() {
 5 |   const [count, setCount] = useState(
 6 |     Number(window.localStorage.getItem('count') || 0),
 7 |   )
 8 |   const incrementCount = () => setCount(count + 1)
 9 |   useEffect(() => {
10 |     window.localStorage.setItem('count', count)
11 |   })
12 |   return <button onClick={incrementCount}>{count}</button>
13 | }
14 | 
15 | // Don't make changes to the Usage component. It's here to show you how your
16 | // component is intended to be used and is used in the tests.
17 | 
18 | function Usage() {
19 |   return <Counter />
20 | }
21 | Usage.title = 'Counter: useEffect'
22 | 
23 | export default Usage
24 | 


--------------------------------------------------------------------------------
/src/exercises-final/02.js:
--------------------------------------------------------------------------------
 1 | // Counter: custom hooks
 2 | import React, {useState} from 'react'
 3 | 
 4 | function useCounter(initialCount) {
 5 |   const [count, setCount] = useState(initialCount)
 6 |   const incrementCount = () => setCount(count + 1)
 7 |   return {count, incrementCount}
 8 | }
 9 | 
10 | function Counter() {
11 |   const {count, incrementCount} = useCounter(0)
12 |   return <button onClick={incrementCount}>{count}</button>
13 | }
14 | 
15 | // Don't make changes to the Usage component. It's here to show you how your
16 | // component is intended to be used and is used in the tests.
17 | 
18 | function Usage() {
19 |   return <Counter />
20 | }
21 | Usage.title = 'Counter: custom hooks'
22 | 
23 | export {useCounter}
24 | export default Usage
25 | 


--------------------------------------------------------------------------------
/src/exercises-final/04.js:
--------------------------------------------------------------------------------
 1 | // Counter: optimizations
 2 | import React, {useState, useEffect} from 'react'
 3 | 
 4 | function Counter() {
 5 |   const [count, setCount] = useState(() =>
 6 |     Number(window.localStorage.getItem('count') || 0),
 7 |   )
 8 |   const incrementCount = () => setCount(count + 1)
 9 |   useEffect(
10 |     () => {
11 |       window.localStorage.setItem('count', count)
12 |     },
13 |     [count],
14 |   )
15 |   return <button onClick={incrementCount}>{count}</button>
16 | }
17 | 
18 | // Don't make changes to the Usage component. It's here to show you how your
19 | // component is intended to be used and is used in the tests.
20 | 
21 | function Usage() {
22 |   return <Counter />
23 | }
24 | Usage.title = 'Counter: optimizations'
25 | 
26 | export default Usage
27 | 


--------------------------------------------------------------------------------
/scripts/verify.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | var verifySystem = require('./workshop-setup').verifySystem
 4 | 
 5 | var verifyPromise = verifySystem([
 6 |   verifySystem.validators.node('>=8.9.4'),
 7 |   verifySystem.validators.npm('>=5.6.0'),
 8 | ])
 9 | 
10 | verifyPromise.then(
11 |   function() {
12 |     // resolves if there are no errors
13 |     console.log('🎉  Congrats! Your system is setup properly')
14 |     console.log('You should be good to install and run things.')
15 |   },
16 |   function(error) {
17 |     // rejects if there are errors
18 |     console.error(error)
19 |     console.info(
20 |       "\nIf you don't care about these warnings, go " +
21 |         'ahead and install dependencies with `node ./scripts/install`',
22 |     )
23 |     process.exitCode = 1
24 |   },
25 | )
26 | 


--------------------------------------------------------------------------------
/src/exercises/01.js:
--------------------------------------------------------------------------------
 1 | // Counter: useState
 2 | // 🐨 you'll need to add {useState} to this import statement
 3 | import React from 'react'
 4 | 
 5 | // 💰 the `useState` hook allows you to use state
 6 | // from within function components in react:
 7 | // const [name, setName] = useState('Angela')
 8 | 
 9 | function Counter() {
10 |   // 🐨 you'll call useState here to get count and setCount
11 |   // 🐨 render the count here and add an onClick handler that increments the count
12 |   return <button>TODO</button>
13 | }
14 | 
15 | // Don't make changes to the Usage component. It's here to show you how your
16 | // component is intended to be used and is used in the tests.
17 | 
18 | function Usage() {
19 |   return <Counter />
20 | }
21 | Usage.title = 'Counter: useState'
22 | 
23 | export default Usage
24 | 


--------------------------------------------------------------------------------
/src/exercises/02.js:
--------------------------------------------------------------------------------
 1 | // Counter: custom hooks
 2 | import React, {useState} from 'react'
 3 | 
 4 | // 🐨 create a function here called useCounter
 5 | // the "use" prefix is a convention, and not required.
 6 | // don't overthink this. It's JavaScript :)
 7 | // 💰 make sure to export it for the tests.
 8 | 
 9 | function Counter() {
10 |   // 🐨 move these two lines to your function and return what you need
11 |   const [count, setCount] = useState(0)
12 |   const incrementCount = () => setCount(count + 1)
13 |   return <button onClick={incrementCount}>{count}</button>
14 | }
15 | 
16 | // Don't make changes to the Usage component. It's here to show you how your
17 | // component is intended to be used and is used in the tests.
18 | 
19 | function Usage() {
20 |   return <Counter />
21 | }
22 | Usage.title = 'Counter: custom hooks'
23 | 
24 | export default Usage
25 | 


--------------------------------------------------------------------------------
/src/fetch-pokemon.js:
--------------------------------------------------------------------------------
 1 | function fetchPokemon(name) {
 2 |   const pokemonQuery = `
 3 |       query ($name: String) {
 4 |         pokemon(name: $name) {
 5 |           id
 6 |           number
 7 |           name
 8 |           attacks {
 9 |             special {
10 |               name
11 |               type
12 |               damage
13 |             }
14 |           }
15 |         }
16 |       }
17 |     `
18 |   return window
19 |     .fetch('https://graphql-pokemon.now.sh', {
20 |       // learn more about this API here: https://graphql-pokemon.now.sh/
21 |       method: 'POST',
22 |       headers: {
23 |         'content-type': 'application/json;charset=UTF-8',
24 |       },
25 |       body: JSON.stringify({
26 |         query: pokemonQuery,
27 |         variables: {name},
28 |       }),
29 |     })
30 |     .then(r => r.json())
31 |     .then(response => response.data.pokemon)
32 | }
33 | 
34 | export default fetchPokemon
35 | 


--------------------------------------------------------------------------------
/src/exercises/03.js:
--------------------------------------------------------------------------------
 1 | // Counter: useEffect
 2 | // 🐨 2. you'll also want useEffect here!
 3 | import React, {useState} from 'react'
 4 | 
 5 | // We moved things back to within the Counter component for the exercise.
 6 | 
 7 | function Counter() {
 8 |   // 🐨 1. initialize the state to the value from localStorage
 9 |   // 💰 Number(window.localStorage.getItem('count') || 0)
10 |   const [count, setCount] = useState(0)
11 |   const incrementCount = () => setCount(count + 1)
12 |   // 3. 🐨 Here's where you'll use `useEffect`.
13 |   // The callback should set the `count` in localStorage.
14 |   return <button onClick={incrementCount}>{count}</button>
15 | }
16 | 
17 | // Don't make changes to the Usage component. It's here to show you how your
18 | // component is intended to be used and is used in the tests.
19 | 
20 | function Usage() {
21 |   return <Counter />
22 | }
23 | Usage.title = 'Counter: useEffect'
24 | 
25 | export default Usage
26 | 


--------------------------------------------------------------------------------
/src/tilt.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Taken from the vanilla-tilt.js demo site:
 3 | https://micku7zu.github.io/vanilla-tilt.js/index.html
 4 | */
 5 | .tilt-root {
 6 |   height: 150px;
 7 |   background-color: red;
 8 |   width: 200px;
 9 |   background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
10 |   background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
11 |   transform-style: preserve-3d;
12 |   will-change: transform;
13 |   transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
14 | }
15 | .tilt-child {
16 |   position: absolute;
17 |   width: 50%;
18 |   height: 50%;
19 |   top: 50%;
20 |   left: 50%;
21 |   transform: translateZ(30px) translateX(-50%) translateY(-50%);
22 |   box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
23 |   background-color: white;
24 | }
25 | .totally-centered {
26 |   width: 100%;
27 |   height: 100%;
28 |   display: flex;
29 |   justify-content: center;
30 |   align-items: center;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/__tests__/10.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent} from 'react-testing-library'
 3 | import Usage from '../exercises-final/10'
 4 | // import Usage from '../exercises/10'
 5 | 
 6 | test('renders upper case first and last name', async () => {
 7 |   const {getByLabelText, getByText} = render(<Usage />)
 8 |   fireEvent.change(getByLabelText(/first/i), {target: {value: 'first'}})
 9 |   getByText(/FIRST/)
10 |   fireEvent.change(getByLabelText(/last/i), {target: {value: 'last'}})
11 |   getByText(/LAST/)
12 | })
13 | 
14 | //////// Elaboration & Feedback /////////
15 | // When you've finished with the exercises:
16 | // 1. Copy the URL below into your browser and fill out the form
17 | // 2. remove the `.skip` from the test below
18 | // 3. Change submitted from `false` to `true`
19 | // 4. And you're all done!
20 | /*
21 | http://ws.kcd.im/?ws=modern%20react&e=10&em=
22 | */
23 | test.skip('I submitted my elaboration and feedback', () => {
24 |   const submitted = false // change this when you've submitted!
25 |   expect(submitted).toBe(true)
26 | })
27 | ////////////////////////////////
28 | 


--------------------------------------------------------------------------------
/src/exercises-final/12.js:
--------------------------------------------------------------------------------
 1 | // VanillaTilt: React.lazy
 2 | import React, {Suspense, useState} from 'react'
 3 | 
 4 | const Tilt = React.lazy(() => import('../tilt'))
 5 | 
 6 | // Don't make changes to the Usage component. It's here to show you how your
 7 | // component is intended to be used and is used in the tests.
 8 | 
 9 | function Usage() {
10 |   const [showTilt, setShowTilt] = useState()
11 |   return (
12 |     <div>
13 |       <label>
14 |         <input
15 |           type="checkbox"
16 |           value={showTilt}
17 |           onChange={e => setShowTilt(e.target.checked)}
18 |         />
19 |         {' show tilt'}
20 |       </label>
21 |       <div>
22 |         <Suspense fallback="loading...">
23 |           {showTilt ? (
24 |             <div className="totally-centered">
25 |               <Tilt>
26 |                 <div className="totally-centered">vanilla-tilt.js</div>
27 |               </Tilt>
28 |             </div>
29 |           ) : null}
30 |         </Suspense>
31 |       </div>
32 |     </div>
33 |   )
34 | }
35 | Usage.title = 'VanillaTilt: React.lazy'
36 | 
37 | export default Usage
38 | 


--------------------------------------------------------------------------------
/src/__tests__/01.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent} from 'react-testing-library'
 3 | // import Usage from '../exercises-final/01'
 4 | import Usage from '../exercises/01'
 5 | 
 6 | test('Usage works', () => {
 7 |   const {container} = render(<Usage />)
 8 |   const button = container.getElementsByTagName('button')[0]
 9 |   expect(button).toHaveTextContent(/0/)
10 |   fireEvent.click(button)
11 |   expect(button).toHaveTextContent(/1/)
12 |   fireEvent.click(button)
13 |   expect(button).toHaveTextContent(/2/)
14 | })
15 | 
16 | //////// Elaboration & Feedback /////////
17 | // When you've finished with the exercises:
18 | // 1. Copy the URL below into your browser and fill out the form
19 | // 2. remove the `.skip` from the test below
20 | // 3. Change submitted from `false` to `true`
21 | // 4. And you're all done!
22 | /*
23 | http://ws.kcd.im/?ws=modern%20react&e=01&em=
24 | */
25 | test.skip('I submitted my elaboration and feedback', () => {
26 |   const submitted = false // change this when you've submitted!
27 |   expect(submitted).toBe(true)
28 | })
29 | ////////////////////////////////
30 | 


--------------------------------------------------------------------------------
/src/exercises-final/05.js:
--------------------------------------------------------------------------------
 1 | // VanillaTilt: useRef
 2 | import React, {useRef, useLayoutEffect} from 'react'
 3 | import VanillaTilt from 'vanilla-tilt'
 4 | 
 5 | function Tilt(props) {
 6 |   const tiltNode = useRef()
 7 |   useLayoutEffect(() => {
 8 |     const vanillaTiltOptions = {
 9 |       max: 25,
10 |       speed: 400,
11 |       glare: true,
12 |       'max-glare': 0.5,
13 |     }
14 |     VanillaTilt.init(tiltNode.current, vanillaTiltOptions)
15 |     return () => tiltNode.current.vanillaTilt.destroy()
16 |   }, [])
17 |   return (
18 |     <div ref={tiltNode} className="tilt-root">
19 |       <div className="tilt-child">{props.children}</div>
20 |     </div>
21 |   )
22 | }
23 | 
24 | // Don't make changes to the Usage component. It's here to show you how your
25 | // component is intended to be used and is used in the tests.
26 | 
27 | function Usage() {
28 |   return (
29 |     <div className="totally-centered">
30 |       <Tilt>
31 |         <div className="totally-centered">vanilla-tilt.js</div>
32 |       </Tilt>
33 |     </div>
34 |   )
35 | }
36 | Usage.title = 'VanillaTilt: useRef'
37 | 
38 | export default Usage
39 | 


--------------------------------------------------------------------------------
/src/__tests__/05.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import VanillaTilt from 'vanilla-tilt'
 3 | import {render} from 'react-testing-library'
 4 | import Usage from '../exercises-final/05'
 5 | // import Usage from '../exercises/05'
 6 | 
 7 | beforeEach(() => {
 8 |   jest.spyOn(VanillaTilt, 'init')
 9 | })
10 | 
11 | afterEach(() => {
12 |   VanillaTilt.init.mockRestore()
13 | })
14 | 
15 | test('calls VanillaTilt.init with the root node', () => {
16 |   const {container} = render(<Usage />)
17 |   expect(container.querySelector('.tilt-root')).toHaveProperty('vanillaTilt')
18 |   expect(VanillaTilt.init).toHaveBeenCalledTimes(1)
19 | })
20 | 
21 | //////// Elaboration & Feedback /////////
22 | // When you've finished with the exercises:
23 | // 1. Copy the URL below into your browser and fill out the form
24 | // 2. remove the `.skip` from the test below
25 | // 3. Change submitted from `false` to `true`
26 | // 4. And you're all done!
27 | /*
28 | http://ws.kcd.im/?ws=learn%20react&e=05&em=
29 | */
30 | test.skip('I submitted my elaboration and feedback', () => {
31 |   const submitted = false // change this when you've submitted!
32 |   expect(submitted).toBe(true)
33 | })
34 | ////////////////////////////////
35 | 


--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "projectName": "modern-react",
 3 |   "projectOwner": "kentcdodds",
 4 |   "repoType": "github",
 5 |   "files": [
 6 |     "README.md"
 7 |   ],
 8 |   "imageSize": 100,
 9 |   "commit": false,
10 |   "contributors": [
11 |     {
12 |       "login": "kentcdodds",
13 |       "name": "Kent C. Dodds",
14 |       "avatar_url": "https://avatars.githubusercontent.com/u/1500684?v=3",
15 |       "profile": "https://kentcdodds.com",
16 |       "contributions": [
17 |         "code",
18 |         "doc",
19 |         "infra",
20 |         "test"
21 |       ]
22 |     },
23 |     {
24 |       "login": "acdlite",
25 |       "name": "Andrew Clark",
26 |       "avatar_url": "https://avatars0.githubusercontent.com/u/3624098?v=4",
27 |       "profile": "https://github.com/acdlite",
28 |       "contributions": [
29 |         "question",
30 |         "ideas",
31 |         "review"
32 |       ]
33 |     },
34 |     {
35 |       "login": "sophiebits",
36 |       "name": "Sophie Alpert",
37 |       "avatar_url": "https://avatars2.githubusercontent.com/u/6820?v=4",
38 |       "profile": "https://sophiebits.com/",
39 |       "contributions": [
40 |         "question",
41 |         "ideas",
42 |         "review"
43 |       ]
44 |     }
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/exercises-final/10.js:
--------------------------------------------------------------------------------
 1 | // React.memo
 2 | import React, {useState} from 'react'
 3 | 
 4 | const Upper = React.memo(function Upper({children}) {
 5 |   const [count, setCount] = useState(0)
 6 |   return (
 7 |     <div>
 8 |       Uppercase version: {children.toUpperCase()}{' '}
 9 |       <button onClick={() => setCount(count + 1)}>{count}</button>
10 |     </div>
11 |   )
12 | })
13 | 
14 | function App() {
15 |   const [first, setFirstName] = useState('')
16 |   const [last, setLastName] = useState('')
17 |   return (
18 |     <div>
19 |       <label htmlFor="first-name-input">First Name</label>
20 |       <input
21 |         id="first-name-input"
22 |         onChange={e => setFirstName(e.target.value)}
23 |       />
24 |       <Upper>{first}</Upper>
25 |       <hr />
26 |       <label htmlFor="last-name-input">Last Name</label>
27 |       <input id="last-name-input" onChange={e => setLastName(e.target.value)} />
28 |       <Upper>{last}</Upper>
29 |     </div>
30 |   )
31 | }
32 | 
33 | // Don't make changes to the Usage component. It's here to show you how your
34 | // component is intended to be used and is used in the tests.
35 | 
36 | function Usage() {
37 |   return <App />
38 | }
39 | Usage.title = 'React.memo'
40 | 
41 | export default Usage
42 | 


--------------------------------------------------------------------------------
/src/__tests__/12.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import VanillaTilt from 'vanilla-tilt'
 3 | import {render, wait, fireEvent} from 'react-testing-library'
 4 | import Usage from '../exercises-final/12'
 5 | // import Usage from '../exercises/12'
 6 | 
 7 | beforeEach(() => {
 8 |   jest.spyOn(VanillaTilt, 'init')
 9 | })
10 | 
11 | afterEach(() => {
12 |   VanillaTilt.init.mockRestore()
13 | })
14 | 
15 | test('calls VanillaTilt.init with the root node', async () => {
16 |   const {container, getByText} = render(<Usage />)
17 |   fireEvent.click(getByText(/show/i))
18 |   await wait(() => expect(VanillaTilt.init).toHaveBeenCalledTimes(1))
19 |   expect(container.querySelector('.tilt-root')).toHaveProperty('vanillaTilt')
20 | })
21 | 
22 | //////// Elaboration & Feedback /////////
23 | // When you've finished with the exercises:
24 | // 1. Copy the URL below into your browser and fill out the form
25 | // 2. remove the `.skip` from the test below
26 | // 3. Change submitted from `false` to `true`
27 | // 4. And you're all done!
28 | /*
29 | http://ws.kcd.im/?ws=learn%20react&e=12&em=
30 | */
31 | test.skip('I submitted my elaboration and feedback', () => {
32 |   const submitted = false // change this when you've submitted!
33 |   expect(submitted).toBe(true)
34 | })
35 | ////////////////////////////////
36 | 


--------------------------------------------------------------------------------
/src/exercises/10.js:
--------------------------------------------------------------------------------
 1 | // React.memo
 2 | import React, {useState} from 'react'
 3 | 
 4 | // 🐨 1. wrap this in a call to React.memo
 5 | // 💰 const MyComponent = React.memo(function MyComponent() {})
 6 | function Upper({children}) {
 7 |   const [count, setCount] = useState(0)
 8 |   return (
 9 |     <div>
10 |       Uppercase version: {children.toUpperCase()}{' '}
11 |       <button onClick={() => setCount(count + 1)}>{count}</button>
12 |     </div>
13 |   )
14 | }
15 | 
16 | function App() {
17 |   const [first, setFirstName] = useState('')
18 |   const [last, setLastName] = useState('')
19 |   return (
20 |     <div>
21 |       <label htmlFor="first-name-input">First Name</label>
22 |       <input
23 |         id="first-name-input"
24 |         onChange={e => setFirstName(e.target.value)}
25 |       />
26 |       <Upper>{first}</Upper>
27 |       <hr />
28 |       <label htmlFor="last-name-input">Last Name</label>
29 |       <input id="last-name-input" onChange={e => setLastName(e.target.value)} />
30 |       <Upper>{last}</Upper>
31 |     </div>
32 |   )
33 | }
34 | 
35 | // Don't make changes to the Usage component. It's here to show you how your
36 | // component is intended to be used and is used in the tests.
37 | 
38 | function Usage() {
39 |   return <App />
40 | }
41 | Usage.title = 'React.memo'
42 | 
43 | export default Usage
44 | 


--------------------------------------------------------------------------------
/src/__tests__/04.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent, flushEffects} from 'react-testing-library'
 3 | import Usage from '../exercises-final/04'
 4 | // import Usage from '../exercises/04'
 5 | 
 6 | afterEach(() => {
 7 |   window.localStorage.removeItem('count')
 8 | })
 9 | 
10 | test('Usage works', () => {
11 |   window.localStorage.setItem('count', 3)
12 |   const {container} = render(<Usage />)
13 |   const button = container.getElementsByTagName('button')[0]
14 |   expect(button).toHaveTextContent(/3/)
15 |   fireEvent.click(button)
16 |   expect(button).toHaveTextContent(/4/)
17 |   fireEvent.click(button)
18 |   expect(button).toHaveTextContent(/5/)
19 |   flushEffects()
20 |   expect(window.localStorage.getItem('count')).toBe('5')
21 | })
22 | 
23 | //////// Elaboration & Feedback /////////
24 | // When you've finished with the exercises:
25 | // 1. Copy the URL below into your browser and fill out the form
26 | // 2. remove the `.skip` from the test below
27 | // 3. Change submitted from `false` to `true`
28 | // 4. And you're all done!
29 | /*
30 | http://ws.kcd.im/?ws=modern%20react&e=04&em=
31 | */
32 | test.skip('I submitted my elaboration and feedback', () => {
33 |   const submitted = false // change this when you've submitted!
34 |   expect(submitted).toBe(true)
35 | })
36 | ////////////////////////////////
37 | 


--------------------------------------------------------------------------------
/src/__tests__/03.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent, flushEffects} from 'react-testing-library'
 3 | import Usage from '../exercises-final/03'
 4 | // import Usage from '../exercises/03'
 5 | 
 6 | afterEach(() => {
 7 |   window.localStorage.removeItem('count')
 8 | })
 9 | 
10 | test('Usage works', async () => {
11 |   window.localStorage.setItem('count', 3)
12 |   const {container} = render(<Usage />)
13 |   const button = container.getElementsByTagName('button')[0]
14 |   expect(button).toHaveTextContent(/3/)
15 |   fireEvent.click(button)
16 |   expect(button).toHaveTextContent(/4/)
17 |   fireEvent.click(button)
18 |   expect(button).toHaveTextContent(/5/)
19 |   flushEffects()
20 |   expect(window.localStorage.getItem('count')).toBe('5')
21 | })
22 | 
23 | //////// Elaboration & Feedback /////////
24 | // When you've finished with the exercises:
25 | // 1. Copy the URL below into your browser and fill out the form
26 | // 2. remove the `.skip` from the test below
27 | // 3. Change submitted from `false` to `true`
28 | // 4. And you're all done!
29 | /*
30 | http://ws.kcd.im/?ws=modern%20react&e=03&em=
31 | */
32 | test.skip('I submitted my elaboration and feedback', () => {
33 |   const submitted = false // change this when you've submitted!
34 |   expect(submitted).toBe(true)
35 | })
36 | ////////////////////////////////
37 | 


--------------------------------------------------------------------------------
/src/exercises/12.js:
--------------------------------------------------------------------------------
 1 | // VanillaTilt: React.lazy
 2 | // 🐨 3. add "Suspense" as an import from react here
 3 | import React, {useState} from 'react'
 4 | // 🐨 1. remove this import
 5 | import Tilt from '../tilt'
 6 | 
 7 | // 🐨 2. Use React.lazy with a dynamic import of ../tilt and assign that
 8 | // to a variable called Tilt
 9 | 
10 | function App() {
11 |   const [showTilt, setShowTilt] = useState()
12 |   return (
13 |     <div>
14 |       <label>
15 |         <input
16 |           type="checkbox"
17 |           value={showTilt}
18 |           onChange={e => setShowTilt(e.target.checked)}
19 |         />
20 |         {' show tilt'}
21 |       </label>
22 |       <div>
23 |         {/* 🐨 4. Add a Suspense element here with a fallback="loading..." prop */}
24 |         {showTilt ? (
25 |           <div className="totally-centered">
26 |             <Tilt>
27 |               <div className="totally-centered">vanilla-tilt.js</div>
28 |             </Tilt>
29 |           </div>
30 |         ) : null}
31 |         {/* close Suspense... then checkout the network tab when you check the box! */}
32 |       </div>
33 |     </div>
34 |   )
35 | }
36 | 
37 | // Don't make changes to the Usage component. It's here to show you how your
38 | // component is intended to be used and is used in the tests.
39 | 
40 | function Usage() {
41 |   return <App />
42 | }
43 | Usage.title = 'VanillaTilt: React.lazy'
44 | 
45 | export default Usage
46 | 


--------------------------------------------------------------------------------
/src/exercises-final/14.js:
--------------------------------------------------------------------------------
 1 | // Suspense with react-cache (VERY ALPHA)
 2 | import React, {Suspense, useState} from 'react'
 3 | import {unstable_createResource as createResource} from 'react-cache'
 4 | import fetchPokemon from '../fetch-pokemon'
 5 | 
 6 | const myPokemon = createResource(fetchPokemon)
 7 | 
 8 | function FetchPokemon({pokemonName}) {
 9 |   const pokemon = myPokemon.read(pokemonName)
10 |   return <pre>{JSON.stringify(pokemon || 'Unknown', null, 2)}</pre>
11 | }
12 | 
13 | function PokemonInfo({pokemonName}) {
14 |   return (
15 |     <Suspense fallback="loading...">
16 |       <FetchPokemon pokemonName={pokemonName} />
17 |     </Suspense>
18 |   )
19 | }
20 | 
21 | // Don't make changes to the Usage component. It's here to show you how your
22 | // component is intended to be used and is used in the tests.
23 | function Usage() {
24 |   const [pokemonName, setPokemonName] = useState(null)
25 |   function handleSubmit(e) {
26 |     e.preventDefault()
27 |     setPokemonName(e.target.elements.pokemonName.value)
28 |   }
29 |   return (
30 |     <div>
31 |       <form onSubmit={handleSubmit}>
32 |         <label htmlFor="pokemonName-input">Pokemon Name (ie Pikachu)</label>
33 |         <input id="pokemonName-input" name="pokemonName" />
34 |         <button type="submit">Submit</button>
35 |       </form>
36 |       <div>
37 |         {pokemonName ? <PokemonInfo pokemonName={pokemonName} /> : null}
38 |       </div>
39 |     </div>
40 |   )
41 | }
42 | Usage.title = 'Suspense with react-cache (VERY ALPHA)'
43 | 
44 | export default Usage
45 | 


--------------------------------------------------------------------------------
/src/exercises/04.js:
--------------------------------------------------------------------------------
 1 | // Counter: optimizations
 2 | import React, {useState, useEffect} from 'react'
 3 | 
 4 | function Counter() {
 5 |   // Right now, we're reading localStorage on every render
 6 |   // But we only really need to read that value for the first render
 7 |   // 🐨 1. instead of passing the value to useState as we are now,
 8 |   // pass a function which returns the value.
 9 |   const [count, setCount] = useState(
10 |     Number(window.localStorage.getItem('count') || 0),
11 |   )
12 |   const incrementCount = () => setCount(count + 1)
13 |   useEffect(
14 |     () => {
15 |       window.localStorage.setItem('count', count)
16 |     },
17 |     // 🐨 2. pass a second argument to useEffect right here
18 |     // it should be an array of the callback's "dependencies"
19 |     // Said differently: "What variables does the useEffect callback use?"
20 |     // pass those variables as a second argument as an array.
21 |     // React _only_ calls the effect callback:
22 |     // 1. After the first render
23 |     // 2. After a render during which any element in the dependencies array changes.
24 |     //    (If there is no array provided, then it is called after every render.)
25 |   )
26 |   return <button onClick={incrementCount}>{count}</button>
27 | }
28 | 
29 | // Don't make changes to the Usage component. It's here to show you how your
30 | // component is intended to be used and is used in the tests.
31 | 
32 | function Usage() {
33 |   return <Counter />
34 | }
35 | Usage.title = 'Counter: optimizations'
36 | 
37 | export default Usage
38 | 


--------------------------------------------------------------------------------
/src/__tests__/02.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent} from 'react-testing-library'
 3 | import Usage, {useCounter} from '../exercises-final/02'
 4 | // import Usage, {useCounter} from '../exercises/02'
 5 | 
 6 | test('Usage works', () => {
 7 |   const {container} = render(<Usage />)
 8 |   const button = container.getElementsByTagName('button')[0]
 9 |   expect(button).toHaveTextContent(/0/)
10 |   fireEvent.click(button)
11 |   expect(button).toHaveTextContent(/1/)
12 |   fireEvent.click(button)
13 |   expect(button).toHaveTextContent(/2/)
14 | })
15 | 
16 | test('useCounter works', () => {
17 |   function Test() {
18 |     const {count, incrementCount} = useCounter(2)
19 |     return <button onClick={incrementCount}>{count}</button>
20 |   }
21 |   const {container} = render(<Test />)
22 |   const button = container.getElementsByTagName('button')[0]
23 |   expect(button).toHaveTextContent(/2/)
24 |   fireEvent.click(button)
25 |   expect(button).toHaveTextContent(/3/)
26 |   fireEvent.click(button)
27 |   expect(button).toHaveTextContent(/4/)
28 | })
29 | 
30 | //////// Elaboration & Feedback /////////
31 | // When you've finished with the exercises:
32 | // 1. Copy the URL below into your browser and fill out the form
33 | // 2. remove the `.skip` from the test below
34 | // 3. Change submitted from `false` to `true`
35 | // 4. And you're all done!
36 | /*
37 | http://ws.kcd.im/?ws=modern%20react&e=02&em=
38 | */
39 | test.skip('I submitted my elaboration and feedback', () => {
40 |   const submitted = false // change this when you've submitted!
41 |   expect(submitted).toBe(true)
42 | })
43 | ////////////////////////////////
44 | 


--------------------------------------------------------------------------------
/src/exercises-final/13.js:
--------------------------------------------------------------------------------
 1 | // Fundamental Suspense
 2 | import React, {Suspense, useState} from 'react'
 3 | import ErrorBoundary from 'react-error-boundary'
 4 | import fetchPokemon from '../fetch-pokemon'
 5 | 
 6 | const cache = {}
 7 | 
 8 | function FetchPokemon({pokemonName}) {
 9 |   const pokemon = cache[pokemonName]
10 |   if (!pokemon) {
11 |     const promise = fetchPokemon(pokemonName).then(
12 |       pokemon => (cache[pokemonName] = pokemon),
13 |     )
14 |     throw promise
15 |   }
16 |   return <pre>{JSON.stringify(pokemon || 'Unknown', null, 2)}</pre>
17 | }
18 | 
19 | function PokemonInfo({pokemonName}) {
20 |   return (
21 |     <ErrorBoundary FallbackComponent={() => 'There was an error...'}>
22 |       <Suspense fallback="loading...">
23 |         <FetchPokemon pokemonName={pokemonName} />
24 |       </Suspense>
25 |     </ErrorBoundary>
26 |   )
27 | }
28 | 
29 | // Don't make changes to the Usage component. It's here to show you how your
30 | // component is intended to be used and is used in the tests.
31 | function Usage() {
32 |   const [pokemonName, setPokemonName] = useState(null)
33 |   function handleSubmit(e) {
34 |     e.preventDefault()
35 |     setPokemonName(e.target.elements.pokemonName.value)
36 |   }
37 |   return (
38 |     <div>
39 |       <form onSubmit={handleSubmit}>
40 |         <label htmlFor="pokemonName-input">Pokemon Name (ie Pikachu)</label>
41 |         <input id="pokemonName-input" name="pokemonName" />
42 |         <button type="submit">Submit</button>
43 |       </form>
44 |       <div>
45 |         {pokemonName ? <PokemonInfo pokemonName={pokemonName} /> : null}
46 |       </div>
47 |     </div>
48 |   )
49 | }
50 | Usage.title = 'Fundamental Suspense'
51 | 
52 | export default Usage
53 | 


--------------------------------------------------------------------------------
/src/exercises-final/06.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: useEffect cleanup
 2 | import React, {useState, useEffect, useRef} from 'react'
 3 | 
 4 | const buttonStyles = {
 5 |   border: '1px solid #ccc',
 6 |   background: '#fff',
 7 |   fontSize: '2em',
 8 |   padding: 15,
 9 |   margin: 5,
10 |   width: 200,
11 | }
12 | 
13 | function Stopwatch() {
14 |   const [lapse, setLapse] = useState(0)
15 |   const [running, setRunning] = useState(false)
16 |   const timerRef = useRef(null)
17 | 
18 |   useEffect(() => () => clearInterval(timerRef.current), [])
19 | 
20 |   function handleRunClick() {
21 |     if (running) {
22 |       clearInterval(timerRef.current)
23 |     } else {
24 |       const startTime = Date.now() - lapse
25 |       timerRef.current = setInterval(() => {
26 |         setLapse(Date.now() - startTime)
27 |       }, 0)
28 |     }
29 |     setRunning(!running)
30 |   }
31 | 
32 |   function handleClearClick() {
33 |     clearInterval(timerRef.current)
34 |     setLapse(0)
35 |     setRunning(false)
36 |   }
37 | 
38 |   return (
39 |     <div style={{textAlign: 'center'}}>
40 |       <label
41 |         style={{
42 |           fontSize: '5em',
43 |           display: 'block',
44 |         }}
45 |       >
46 |         {lapse}
47 |         ms
48 |       </label>
49 |       <button onClick={handleRunClick} style={buttonStyles}>
50 |         {running ? 'Stop' : 'Start'}
51 |       </button>
52 |       <button onClick={handleClearClick} style={buttonStyles}>
53 |         Clear
54 |       </button>
55 |     </div>
56 |   )
57 | }
58 | 
59 | // Don't make changes to the Usage component. It's here to show you how your
60 | // component is intended to be used and is used in the tests.
61 | 
62 | function Usage() {
63 |   return <Stopwatch />
64 | }
65 | Usage.title = 'Stopwatch: useEffect cleanup'
66 | 
67 | export default Usage
68 | 


--------------------------------------------------------------------------------
/src/__tests__/13.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent, wait} from 'react-testing-library'
 3 | import mockFetchPokemon from '../fetch-pokemon'
 4 | import Usage from '../exercises-final/13'
 5 | // import Usage from '../exercises/13'
 6 | 
 7 | jest.mock('../fetch-pokemon', () =>
 8 |   jest.fn(name => Promise.resolve({mokePokemon: true, name})),
 9 | )
10 | 
11 | test('fetches pokemon data when form is submitted', async () => {
12 |   const {getByLabelText, getByText} = render(<Usage />)
13 |   const name = getByLabelText(/name/i)
14 |   name.value = 'Charzard'
15 |   fireEvent.click(getByText(/submit/i))
16 |   expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
17 | 
18 |   mockFetchPokemon.mockClear()
19 | 
20 |   await wait(() => getByText(/Charzard/))
21 |   name.value = 'Pikachu'
22 |   fireEvent.click(getByText(/submit/i))
23 |   expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
24 |   await wait(() => getByText(/Pikachu/))
25 | 
26 |   mockFetchPokemon.mockClear()
27 | 
28 |   // TODO: the error case leads to an infinite loop in react
29 |   // mockFetchPokemon.mockRejectedValue({error: 'fake failure'})
30 |   // name.value = 'fail'
31 |   // fireEvent.click(getByText(/submit/i))
32 |   // expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
33 |   // await wait(() => getByText(/error/i))
34 | })
35 | 
36 | //////// Elaboration & Feedback /////////
37 | // When you've finished with the exercises:
38 | // 1. Copy the URL below into your browser and fill out the form
39 | // 2. remove the `.skip` from the test below
40 | // 3. Change submitted from `false` to `true`
41 | // 4. And you're all done!
42 | /*
43 | http://ws.kcd.im/?ws=modern%20react&e=13&em=
44 | */
45 | test.skip('I submitted my elaboration and feedback', () => {
46 |   const submitted = false // change this when you've submitted!
47 |   expect(submitted).toBe(true)
48 | })
49 | ////////////////////////////////
50 | 


--------------------------------------------------------------------------------
/src/__tests__/14.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render, fireEvent, wait} from 'react-testing-library'
 3 | import mockFetchPokemon from '../fetch-pokemon'
 4 | import Usage from '../exercises-final/14'
 5 | // import Usage from '../exercises/14'
 6 | 
 7 | jest.mock('../fetch-pokemon', () =>
 8 |   jest.fn(name => Promise.resolve({mokePokemon: true, name})),
 9 | )
10 | 
11 | test('fetches pokemon data when form is submitted', async () => {
12 |   const {getByLabelText, getByText} = render(<Usage />)
13 |   const name = getByLabelText(/name/i)
14 |   name.value = 'Charzard'
15 |   fireEvent.click(getByText(/submit/i))
16 |   expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
17 | 
18 |   mockFetchPokemon.mockClear()
19 | 
20 |   await wait(() => getByText(/Charzard/))
21 |   name.value = 'Pikachu'
22 |   fireEvent.click(getByText(/submit/i))
23 |   expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
24 |   await wait(() => getByText(/Pikachu/))
25 | 
26 |   mockFetchPokemon.mockClear()
27 | 
28 |   // TODO: the error case leads to an infinite loop in react
29 |   // mockFetchPokemon.mockRejectedValue({error: 'fake failure'})
30 |   // name.value = 'fail'
31 |   // fireEvent.click(getByText(/submit/i))
32 |   // expect(mockFetchPokemon).toHaveBeenCalledTimes(1)
33 |   // await wait(() => getByText(/error/i))
34 | })
35 | 
36 | //////// Elaboration & Feedback /////////
37 | // When you've finished with the exercises:
38 | // 1. Copy the URL below into your browser and fill out the form
39 | // 2. remove the `.skip` from the test below
40 | // 3. Change submitted from `false` to `true`
41 | // 4. And you're all done!
42 | /*
43 | http://ws.kcd.im/?ws=modern%20react&e=14&em=
44 | */
45 | test.skip('I submitted my elaboration and feedback', () => {
46 |   const submitted = false // change this when you've submitted!
47 |   expect(submitted).toBe(true)
48 | })
49 | ////////////////////////////////
50 | 


--------------------------------------------------------------------------------
/src/exercises-final/08.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: useReducer (a la setState)
 2 | import React, {useReducer, useEffect, useRef} from 'react'
 3 | 
 4 | const buttonStyles = {
 5 |   border: '1px solid #ccc',
 6 |   background: '#fff',
 7 |   fontSize: '2em',
 8 |   padding: 15,
 9 |   margin: 5,
10 |   width: 200,
11 | }
12 | 
13 | function reducer(currentState, newState) {
14 |   return {...currentState, ...newState}
15 | }
16 | 
17 | function Stopwatch() {
18 |   const [{running, lapse}, setState] = useReducer(reducer, {
19 |     running: false,
20 |     lapse: 0,
21 |   })
22 |   const timerRef = useRef(null)
23 | 
24 |   useEffect(() => () => clearInterval(timerRef.current), [])
25 | 
26 |   function handleRunClick() {
27 |     if (running) {
28 |       clearInterval(timerRef.current)
29 |     } else {
30 |       const startTime = Date.now() - lapse
31 |       timerRef.current = setInterval(() => {
32 |         setState({lapse: Date.now() - startTime})
33 |       }, 0)
34 |     }
35 |     setState({running: !running})
36 |   }
37 | 
38 |   function handleClearClick() {
39 |     clearInterval(timerRef.current)
40 |     setState({running: false, lapse: 0})
41 |   }
42 | 
43 |   return (
44 |     <div style={{textAlign: 'center'}}>
45 |       <label
46 |         style={{
47 |           fontSize: '5em',
48 |           display: 'block',
49 |         }}
50 |       >
51 |         {lapse}
52 |         ms
53 |       </label>
54 |       <button onClick={handleRunClick} style={buttonStyles}>
55 |         {running ? 'Stop' : 'Start'}
56 |       </button>
57 |       <button onClick={handleClearClick} style={buttonStyles}>
58 |         Clear
59 |       </button>
60 |     </div>
61 |   )
62 | }
63 | 
64 | // Don't make changes to the Usage component. It's here to show you how your
65 | // component is intended to be used and is used in the tests.
66 | 
67 | function Usage() {
68 |   return <Stopwatch />
69 | }
70 | Usage.title = 'Stopwatch: useReducer (a la setState)'
71 | 
72 | export default Usage
73 | 


--------------------------------------------------------------------------------
/scripts/autofill-feedback-email.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-console:0 */
 2 | const path = require('path')
 3 | const inquirer = require('inquirer')
 4 | const replace = require('replace-in-file')
 5 | const isCI = require('is-ci')
 6 | const spawn = require('cross-spawn')
 7 | const {EOL} = require('os')
 8 | 
 9 | if (isCI) {
10 |   console.log(`Not running autofill feedback as we're on CI`)
11 | } else {
12 |   const prompt = inquirer.prompt([
13 |     {
14 |       name: 'email',
15 |       message: `what's your email address?`,
16 |       validate(val) {
17 |         if (!val) {
18 |           // they don't want to do this...
19 |           return true
20 |         } else if (!val.includes('@')) {
21 |           return 'email requires an @ sign...'
22 |         }
23 |         return true
24 |       },
25 |     },
26 |   ])
27 |   const timeoutId = setTimeout(() => {
28 |     console.log(
29 |       `\n\nprompt timed out. No worries. Run \`node ./scripts/autofill-feedback-email.js\` if you'd like to try again`,
30 |     )
31 |     prompt.ui.close()
32 |   }, 15000)
33 | 
34 |   prompt.then(({email} = {}) => {
35 |     clearTimeout(timeoutId)
36 |     if (!email) {
37 |       console.log(`Not autofilling email because none was provided`)
38 |       return
39 |     }
40 |     const options = {
41 |       files: [path.join(__dirname, '..', 'src/**/*.js')],
42 |       from: `&em=${EOL}`,
43 |       to: `&em=${email}${EOL}`,
44 |     }
45 | 
46 |     replace(options).then(
47 |       changedFiles => {
48 |         console.log(`Updated ${changedFiles.length} with the email ${email}`)
49 |         console.log(
50 |           'committing changes for you so your jest watch mode works nicely',
51 |         )
52 |         spawn.sync('git', ['commit', '-am', 'email autofill', '--no-verify'], {
53 |           stdio: 'inherit',
54 |         })
55 |       },
56 |       error => {
57 |         console.error('Failed to update files')
58 |         console.error(error.stack)
59 |       },
60 |     )
61 |   })
62 | }
63 | 


--------------------------------------------------------------------------------
/src/exercises/05.js:
--------------------------------------------------------------------------------
 1 | // VanillaTilt: useRef
 2 | // 🐨 1. you'll want useRef, and useLayoutEffect
 3 | // you can use `useLayoutEffect` the same way you use `useEffect`.
 4 | // Make sure to ask me what the difference is!
 5 | // https://reactjs.org/docs/hooks-reference.html#useref
 6 | // https://reactjs.org/docs/hooks-reference.html#uselayouteffect
 7 | import React from 'react'
 8 | // 🐨 2. you'll need this:
 9 | // import VanillaTilt from 'vanilla-tilt'
10 | 
11 | function Tilt(props) {
12 |   // 🐨 3. create a `tiltNode` variable here with `useRef()`
13 |   // 🐨 5. create a `useLayoutEffect` callback here which
14 |   //    uses the `VanillaTilt.init` with `tiltNode.current`
15 |   // 🐨 6: you'll need this in your callback:
16 |   // const vanillaTiltOptions = {
17 |   //   max: 25,
18 |   //   speed: 400,
19 |   //   glare: true,
20 |   //   'max-glare': 0.5,
21 |   // }
22 |   // 🐨 7. return a cleanup function which will call
23 |   //   `tiltNode.current.vanillaTilt.destroy()`
24 | 
25 |   // By default, effects run after every render. This is normally what
26 |   // you want, but if you want you can optimize things by ensuring they
27 |   // are only called when you specifically want to.
28 |   // 💯 add a second argument to your `useLayoutEffect` which lists an empty
29 |   // array. We can do this because we only want it to run on initial render
30 |   // and we know that the `tiltRef.current` will never change.
31 | 
32 |   // 🐨 4. pass the `tiltNode` variable to this `div` as the `ref` prop:
33 |   return (
34 |     <div className="tilt-root">
35 |       <div className="tilt-child">{props.children}</div>
36 |     </div>
37 |   )
38 | }
39 | 
40 | // Don't make changes to the Usage component. It's here to show you how your
41 | // component is intended to be used and is used in the tests.
42 | 
43 | function Usage() {
44 |   return (
45 |     <div className="totally-centered">
46 |       <Tilt>
47 |         <div className="totally-centered">vanilla-tilt.js</div>
48 |       </Tilt>
49 |     </div>
50 |   )
51 | }
52 | Usage.title = 'VanillaTilt: useRef'
53 | 
54 | export default Usage
55 | 


--------------------------------------------------------------------------------
/src/__tests__/09.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import chalk from 'chalk'
 3 | import {render, fireEvent} from 'react-testing-library'
 4 | import Usage from '../exercises-final/09'
 5 | // import Usage from '../exercises/09'
 6 | 
 7 | const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 8 | 
 9 | test('renders', async () => {
10 |   jest.spyOn(console, 'error')
11 |   const {container, getAllByText, getByTestId} = render(<Usage />)
12 |   const diff = getByTestId('diff')
13 |   const timer1 = {
14 |     startStop: getAllByText('Start')[0],
15 |     clear: getAllByText('Clear')[0],
16 |     label: container.querySelectorAll('label')[0],
17 |   }
18 |   const timer2 = {
19 |     startStop: getAllByText('Start')[1],
20 |     clear: getAllByText('Clear')[1],
21 |     label: container.querySelectorAll('label')[1],
22 |   }
23 | 
24 |   fireEvent.click(timer1.startStop)
25 | 
26 |   await sleep(200)
27 | 
28 |   expect(parseInt(diff.textContent, 10)).toBeGreaterThan(150)
29 | 
30 |   fireEvent.click(timer2.startStop)
31 | 
32 |   await sleep(200)
33 |   try {
34 |     expect(parseInt(timer2.label.textContent, 10)).toBeGreaterThan(150)
35 |     expect(parseInt(diff.textContent, 10)).toBeLessThan(300)
36 |   } catch (error) {
37 |     error.message = [
38 |       chalk.red(
39 |         `🚨  The stopwatch time is not being incremented or we can't find it. Make sure the time lapsed is in a <label> and ensure that state is set properly. 🚨`,
40 |       ),
41 |       error.message,
42 |     ].join('\n')
43 |     throw error
44 |   }
45 | })
46 | 
47 | //////// Elaboration & Feedback /////////
48 | // When you've finished with the exercises:
49 | // 1. Copy the URL below into your browser and fill out the form
50 | // 2. remove the `.skip` from the test below
51 | // 3. Change submitted from `false` to `true`
52 | // 4. And you're all done!
53 | /*
54 | http://ws.kcd.im/?ws=modern%20react&e=09&em=
55 | */
56 | test.skip('I submitted my elaboration and feedback', () => {
57 |   const submitted = false // change this when you've submitted!
58 |   expect(submitted).toBe(true)
59 | })
60 | ////////////////////////////////
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "modern-react",
 3 |   "version": "1.0.0",
 4 |   "description": "This is a workshop repo to teach you about using all the goodies we got from React 16.7.0!",
 5 |   "keywords": [],
 6 |   "homepage": "http://modern-react.netlify.com/",
 7 |   "main": "src/index.js",
 8 |   "dependencies": {
 9 |     "@reach/router": "^1.2.1",
10 |     "jest-dom": "^2.1.1",
11 |     "react": "16.7.0-alpha.2",
12 |     "react-cache": "2.0.0-alpha.1",
13 |     "react-dom": "16.7.0-alpha.2",
14 |     "react-error-boundary": "^1.2.3",
15 |     "react-testing-library": "^5.3.0",
16 |     "vanilla-tilt": "^1.5.0"
17 |   },
18 |   "devDependencies": {
19 |     "all-contributors-cli": "^5.4.1",
20 |     "cross-spawn": "^6.0.5",
21 |     "husky": "^1.2.0",
22 |     "inquirer": "^6.2.0",
23 |     "is-ci": "^1.2.1",
24 |     "node": "^8.11.1",
25 |     "npm-run-all": "^4.1.5",
26 |     "prettier": "^1.15.2",
27 |     "react-scripts": "^2.1.1",
28 |     "replace-in-file": "^3.4.2"
29 |   },
30 |   "scripts": {
31 |     "start": "react-scripts start",
32 |     "build": "react-scripts build",
33 |     "test": "react-scripts test --env=jsdom",
34 |     "test:coverage": "npm run test -- --coverage",
35 |     "contributors:add": "all-contributors add",
36 |     "contributors:generate": "all-contributors generate",
37 |     "format": "prettier --write \"**/*.+(js|json)\"",
38 |     "setup": "node ./scripts/verify && node ./scripts/install && npm run validate && node ./scripts/autofill-feedback-email.js",
39 |     "validate": "npm-run-all --parallel build test:coverage"
40 |   },
41 |   "husky": {
42 |     "hooks": {
43 |       "pre-commit": "npm run validate"
44 |     }
45 |   },
46 |   "jest": {
47 |     "collectCoverageFrom": [
48 |       "src/exercises-final/**/*.js"
49 |     ]
50 |   },
51 |   "eslintConfig": {
52 |     "extends": "react-app"
53 |   },
54 |   "browserslist": {
55 |     "development": [
56 |       "last 2 chrome versions",
57 |       "last 2 firefox versions",
58 |       "last 2 edge versions"
59 |     ],
60 |     "production": [
61 |       ">1%",
62 |       "last 4 versions",
63 |       "Firefox ESR",
64 |       "not ie < 11"
65 |     ]
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/exercises-final/11.js:
--------------------------------------------------------------------------------
 1 | // Where to NOT use hooks
 2 | import React from 'react'
 3 | // import {useState} from 'react'
 4 | 
 5 | // function NoHooksInCallbacks() {
 6 | //   let count = 0
 7 | //   return (
 8 | //     <button
 9 | //       onClick={() => {
10 | //         // Wrong: don't use hooks in a callback
11 | //         ;[count] = useState(count + 1)
12 | //       }}
13 | //     >
14 | //       {count}
15 | //     </button>
16 | //   )
17 | // }
18 | 
19 | // function NoConditionalHooks(props) {
20 | //   let count = props.count
21 | //   let setCount = props.setCount
22 | //   if (typeof count === undefined && typeof setCount === undefined) {
23 | //     // Wrong: Don't call hooks conditionally
24 | //     ;[count, setCount] = useState(0)
25 | //   }
26 | //   return (
27 | //     <button onClick={() => setCount(count + 1)}>
28 | //       {count}
29 | //     </button>
30 | //   )
31 | // }
32 | 
33 | // function NoHooksInLoops(props) {
34 | //   const items = []
35 | //   for (let i = 0; i < props.items.length; i++) {
36 | //     // Wrong: Don't call hooks inside loops
37 | //     const [count, setCount] = useState(i)
38 | //     items.push(
39 | //       <button
40 | //         key={props[items][i].id}
41 | //         onClick={() => setCount(count + 1)}
42 | //       >
43 | //         {count}
44 | //       </button>,
45 | //     )
46 | //   }
47 | //   return items
48 | // }
49 | 
50 | // // Wrong: Don't call hooks outside a component's render phase
51 | // const [count, setCount] = useState(0)
52 | // function NoExternalHooks(params) {
53 | //   return (
54 | //     <button onClick={() => setCount(count + 1)}>
55 | //       {count}
56 | //     </button>
57 | //   )
58 | // }
59 | 
60 | // class NoClassHooks extends React.Component {
61 | //   render() {
62 | //     // Wrong: Don't call hooks inside class components
63 | //     const [count, setCount] = useState(0)
64 | //     return (
65 | //       <button onClick={() => setCount(count + 1)}>
66 | //         {count}
67 | //       </button>
68 | //     )
69 | //   }
70 | // }
71 | 
72 | // Don't make changes to the Usage component. It's here to show you how your
73 | // component is intended to be used and is used in the tests.
74 | 
75 | function Usage() {
76 |   return <div>When NOT to use hooks (see the code)</div>
77 | }
78 | Usage.title = 'Where to NOT use hooks'
79 | 
80 | export default Usage
81 | 


--------------------------------------------------------------------------------
/src/exercises-final/07.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: useReducer (a la redux)
 2 | import React, {useReducer, useEffect, useRef} from 'react'
 3 | 
 4 | const buttonStyles = {
 5 |   border: '1px solid #ccc',
 6 |   background: '#fff',
 7 |   fontSize: '2em',
 8 |   padding: 15,
 9 |   margin: 5,
10 |   width: 200,
11 | }
12 | 
13 | function reducer(state, action) {
14 |   switch (action.type) {
15 |     case 'LAPSE':
16 |       return {
17 |         ...state,
18 |         lapse: action.now - action.startTime,
19 |       }
20 |     case 'TOGGLE_RUNNING':
21 |       return {
22 |         ...state,
23 |         running: !state.running,
24 |       }
25 |     case 'CLEAR':
26 |       return {
27 |         ...state,
28 |         running: false,
29 |         lapse: 0,
30 |       }
31 |     default:
32 |       break
33 |   }
34 | }
35 | 
36 | function Stopwatch() {
37 |   const [{running, lapse}, dispatch] = useReducer(reducer, {
38 |     running: false,
39 |     lapse: 0,
40 |   })
41 |   const timerRef = useRef(null)
42 | 
43 |   useEffect(() => () => clearInterval(timerRef.current), [])
44 | 
45 |   function handleRunClick() {
46 |     if (running) {
47 |       clearInterval(timerRef.current)
48 |     } else {
49 |       const startTime = Date.now() - lapse
50 |       timerRef.current = setInterval(() => {
51 |         dispatch({type: 'LAPSE', now: Date.now(), startTime})
52 |       }, 0)
53 |     }
54 |     dispatch({type: 'TOGGLE_RUNNING'})
55 |   }
56 | 
57 |   function handleClearClick() {
58 |     clearInterval(timerRef.current)
59 |     dispatch({type: 'CLEAR'})
60 |   }
61 | 
62 |   return (
63 |     <div style={{textAlign: 'center'}}>
64 |       <label
65 |         style={{
66 |           fontSize: '5em',
67 |           display: 'block',
68 |         }}
69 |       >
70 |         {lapse}
71 |         ms
72 |       </label>
73 |       <button onClick={handleRunClick} style={buttonStyles}>
74 |         {running ? 'Stop' : 'Start'}
75 |       </button>
76 |       <button onClick={handleClearClick} style={buttonStyles}>
77 |         Clear
78 |       </button>
79 |     </div>
80 |   )
81 | }
82 | 
83 | // Don't make changes to the Usage component. It's here to show you how your
84 | // component is intended to be used and is used in the tests.
85 | 
86 | function Usage() {
87 |   return <Stopwatch />
88 | }
89 | Usage.title = 'Stopwatch: useReducer (a la redux)'
90 | 
91 | export default Usage
92 | 


--------------------------------------------------------------------------------
/src/exercises/06.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: useEffect cleanup
 2 | import React from 'react'
 3 | 
 4 | const buttonStyles = {
 5 |   border: '1px solid #ccc',
 6 |   background: '#fff',
 7 |   fontSize: '2em',
 8 |   padding: 15,
 9 |   margin: 5,
10 |   width: 200,
11 | }
12 | 
13 | function Stopwatch() {
14 |   // 🐨 1. make lapse and running come from a call to `useState`
15 |   const lapse = 0
16 |   const running = false
17 |   // 🐨 2. create a timerRef to keep track of the intervalId you get back from setInterval
18 | 
19 |   // If the stopwatch is unmounted when the interval is running
20 |   // then we could have a memory leak problem. Let's clean that up.
21 |   // 🐨 7. add a `useEffect` here which does nothing, but returns a cleanup
22 |   // function which will run on unmount. It should call `clearInterval`
23 |   // with the timerRef.current (the intervalId you get back from setInterval).
24 | 
25 |   function handleRunClick() {
26 |     if (running) {
27 |       // 🐨 8. call clearInterval with the intervalId you get back from setInterval
28 |     } else {
29 |       // 🐨 3. create a startTime variable that should be Date.now() - lapse
30 |       // 🐨 4. call setInterval (this will return an intervalId which you should
31 |       // assign to timerRef.current).
32 |       // 🐨 5. In your interval callback, update the
33 |       // lapse state to Date.now() - startTime
34 |     }
35 |     // 🐨 6. toggle the running state
36 |     // 💰 setRunning(!running)
37 |   }
38 | 
39 |   function handleClearClick() {
40 |     // 🐨 9. clear the interval with the intervalId you get back from setInterval
41 |     // 🐨 10. set lapse to 0
42 |     // 🐨 11. set running to false
43 |   }
44 | 
45 |   return (
46 |     <div style={{textAlign: 'center'}}>
47 |       <label
48 |         style={{
49 |           fontSize: '5em',
50 |           display: 'block',
51 |         }}
52 |       >
53 |         {lapse}
54 |         ms
55 |       </label>
56 |       <button onClick={handleRunClick} style={buttonStyles}>
57 |         {running ? 'Stop' : 'Start'}
58 |       </button>
59 |       <button onClick={handleClearClick} style={buttonStyles}>
60 |         Clear
61 |       </button>
62 |     </div>
63 |   )
64 | }
65 | 
66 | // Don't make changes to the Usage component. It's here to show you how your
67 | // component is intended to be used and is used in the tests.
68 | 
69 | function Usage() {
70 |   return <Stopwatch />
71 | }
72 | Usage.title = 'Stopwatch: useEffect cleanup'
73 | 
74 | export default Usage
75 | 


--------------------------------------------------------------------------------
/src/__tests__/06.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import chalk from 'chalk'
 3 | import {render, fireEvent} from 'react-testing-library'
 4 | import Usage from '../exercises-final/06'
 5 | // import Usage from '../exercises/06'
 6 | 
 7 | const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 8 | 
 9 | test('renders', async () => {
10 |   jest.spyOn(console, 'error')
11 |   const {container, unmount, getByText} = render(<Usage />)
12 |   fireEvent.click(getByText('Start'))
13 |   const label = container.querySelector('label')
14 |   await sleep(20)
15 |   fireEvent.click(getByText('Stop'))
16 |   try {
17 |     expect(parseInt(label.textContent, 10)).toBeGreaterThan(10)
18 |   } catch (error) {
19 |     error.message = [
20 |       chalk.red(
21 |         `🚨  The stopwatch time is not being incremented or we can't find it. Make sure the time lapsed is in a <label> and ensure that state is set properly. 🚨`,
22 |       ),
23 |       error.message,
24 |     ].join('\n')
25 |     throw error
26 |   }
27 |   fireEvent.click(getByText('Clear'))
28 |   expect(parseInt(label.textContent, 10)).toBe(0)
29 | 
30 |   fireEvent.click(getByText('Start'))
31 |   await sleep(20)
32 |   fireEvent.click(getByText('Clear'))
33 |   expect(parseInt(label.textContent, 10)).toBe(0)
34 | 
35 |   fireEvent.click(getByText('Start'))
36 |   unmount()
37 |   await sleep(20)
38 |   try {
39 |     expect(console.error).toHaveBeenCalledTimes(0)
40 |   } catch (error) {
41 |     if (console.error.mock.calls[0][0].includes('unmounted component')) {
42 |       error.message = [
43 |         chalk.red(
44 |           `🚨  It appears that when the component is mounted it doesn't clear the interval, so it keeps trying to call setState on an unmounted component. This could lead to a memory leak. Make sure to use componentWillUnmount to clear the interval 🚨`,
45 |         ),
46 |         error.message,
47 |       ].join('\n')
48 |     }
49 |     throw error
50 |   }
51 | })
52 | 
53 | //////// Elaboration & Feedback /////////
54 | // When you've finished with the exercises:
55 | // 1. Copy the URL below into your browser and fill out the form
56 | // 2. remove the `.skip` from the test below
57 | // 3. Change submitted from `false` to `true`
58 | // 4. And you're all done!
59 | /*
60 | http://ws.kcd.im/?ws=modern%20react&e=06&em=
61 | */
62 | test.skip('I submitted my elaboration and feedback', () => {
63 |   const submitted = false // change this when you've submitted!
64 |   expect(submitted).toBe(true)
65 | })
66 | ////////////////////////////////
67 | 


--------------------------------------------------------------------------------
/src/__tests__/07.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import chalk from 'chalk'
 3 | import {render, fireEvent} from 'react-testing-library'
 4 | import Usage from '../exercises-final/07'
 5 | // import Usage from '../exercises/07'
 6 | 
 7 | const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 8 | 
 9 | test('renders', async () => {
10 |   jest.spyOn(console, 'error')
11 |   const {container, unmount, getByText} = render(<Usage />)
12 |   fireEvent.click(getByText('Start'))
13 |   const label = container.querySelector('label')
14 |   await sleep(20)
15 |   fireEvent.click(getByText('Stop'))
16 |   try {
17 |     expect(parseInt(label.textContent, 10)).toBeGreaterThan(10)
18 |   } catch (error) {
19 |     error.message = [
20 |       chalk.red(
21 |         `🚨  The stopwatch time is not being incremented or we can't find it. Make sure the time lapsed is in a <label> and ensure that state is set properly. 🚨`,
22 |       ),
23 |       error.message,
24 |     ].join('\n')
25 |     throw error
26 |   }
27 |   fireEvent.click(getByText('Clear'))
28 |   expect(parseInt(label.textContent, 10)).toBe(0)
29 | 
30 |   fireEvent.click(getByText('Start'))
31 |   await sleep(20)
32 |   fireEvent.click(getByText('Clear'))
33 |   expect(parseInt(label.textContent, 10)).toBe(0)
34 | 
35 |   fireEvent.click(getByText('Start'))
36 |   unmount()
37 |   await sleep(20)
38 |   try {
39 |     expect(console.error).toHaveBeenCalledTimes(0)
40 |   } catch (error) {
41 |     if (console.error.mock.calls[0][0].includes('unmounted component')) {
42 |       error.message = [
43 |         chalk.red(
44 |           `🚨  It appears that when the component is mounted it doesn't clear the interval, so it keeps trying to call setState on an unmounted component. This could lead to a memory leak. Make sure to use componentWillUnmount to clear the interval 🚨`,
45 |         ),
46 |         error.message,
47 |       ].join('\n')
48 |     }
49 |     throw error
50 |   }
51 | })
52 | 
53 | //////// Elaboration & Feedback /////////
54 | // When you've finished with the exercises:
55 | // 1. Copy the URL below into your browser and fill out the form
56 | // 2. remove the `.skip` from the test below
57 | // 3. Change submitted from `false` to `true`
58 | // 4. And you're all done!
59 | /*
60 | http://ws.kcd.im/?ws=modern%20react&e=07&em=
61 | */
62 | test.skip('I submitted my elaboration and feedback', () => {
63 |   const submitted = false // change this when you've submitted!
64 |   expect(submitted).toBe(true)
65 | })
66 | ////////////////////////////////
67 | 


--------------------------------------------------------------------------------
/src/__tests__/08.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import chalk from 'chalk'
 3 | import {render, fireEvent} from 'react-testing-library'
 4 | import Usage from '../exercises-final/08'
 5 | // import Usage from '../exercises/08'
 6 | 
 7 | const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 8 | 
 9 | test('renders', async () => {
10 |   jest.spyOn(console, 'error')
11 |   const {container, unmount, getByText} = render(<Usage />)
12 |   fireEvent.click(getByText('Start'))
13 |   const label = container.querySelector('label')
14 |   await sleep(20)
15 |   fireEvent.click(getByText('Stop'))
16 |   try {
17 |     expect(parseInt(label.textContent, 10)).toBeGreaterThan(10)
18 |   } catch (error) {
19 |     error.message = [
20 |       chalk.red(
21 |         `🚨  The stopwatch time is not being incremented or we can't find it. Make sure the time lapsed is in a <label> and ensure that state is set properly. 🚨`,
22 |       ),
23 |       error.message,
24 |     ].join('\n')
25 |     throw error
26 |   }
27 |   fireEvent.click(getByText('Clear'))
28 |   expect(parseInt(label.textContent, 10)).toBe(0)
29 | 
30 |   fireEvent.click(getByText('Start'))
31 |   await sleep(20)
32 |   fireEvent.click(getByText('Clear'))
33 |   expect(parseInt(label.textContent, 10)).toBe(0)
34 | 
35 |   fireEvent.click(getByText('Start'))
36 |   unmount()
37 |   await sleep(20)
38 |   try {
39 |     expect(console.error).toHaveBeenCalledTimes(0)
40 |   } catch (error) {
41 |     if (console.error.mock.calls[0][0].includes('unmounted component')) {
42 |       error.message = [
43 |         chalk.red(
44 |           `🚨  It appears that when the component is mounted it doesn't clear the interval, so it keeps trying to call setState on an unmounted component. This could lead to a memory leak. Make sure to use componentWillUnmount to clear the interval 🚨`,
45 |         ),
46 |         error.message,
47 |       ].join('\n')
48 |     }
49 |     throw error
50 |   }
51 | })
52 | 
53 | //////// Elaboration & Feedback /////////
54 | // When you've finished with the exercises:
55 | // 1. Copy the URL below into your browser and fill out the form
56 | // 2. remove the `.skip` from the test below
57 | // 3. Change submitted from `false` to `true`
58 | // 4. And you're all done!
59 | /*
60 | http://ws.kcd.im/?ws=modern%20react&e=08&em=
61 | */
62 | test.skip('I submitted my elaboration and feedback', () => {
63 |   const submitted = false // change this when you've submitted!
64 |   expect(submitted).toBe(true)
65 | })
66 | ////////////////////////////////
67 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Thanks for being willing to contribute!
 4 | 
 5 | **Working on your first Pull Request?** You can learn how from this _free_ series
 6 | [How to Contribute to an Open Source Project on GitHub][egghead]
 7 | 
 8 | ## Project setup
 9 | 
10 | 1.  Fork and clone the repo
11 | 2.  Run `npm run setup -s` to install dependencies and run validation
12 | 3.  Create a branch for your PR with `git checkout -b pr/your-branch-name`
13 | 
14 | > Tip: Keep your `master` branch pointing at the original repository and make
15 | > pull requests from branches on your fork. To do this, run:
16 | >
17 | > ```
18 | > git remote add upstream https://github.com/kentcdodds/modern-react.git
19 | > git fetch upstream
20 | > git branch --set-upstream-to=upstream/master master
21 | > ```
22 | >
23 | > This will add the original repository as a "remote" called "upstream,"
24 | > Then fetch the git information from that remote, then set your local `master`
25 | > branch to use the upstream master branch whenever you run `git pull`.
26 | > Then you can make all of your pull request branches based on this `master`
27 | > branch. Whenever you want to update your version of `master`, do a regular
28 | > `git pull`.
29 | 
30 | ## Add yourself as a contributor
31 | 
32 | This project follows the [all contributors][all-contributors] specification.
33 | To add yourself to the table of contributors on the `README.md`, please use the
34 | automated script as part of your PR:
35 | 
36 | ```console
37 | npm run contributors:add
38 | ```
39 | 
40 | Follow the prompt and commit `.all-contributorsrc` and `README.md` in the PR.
41 | If you've already added yourself to the list and are making
42 | a new type of contribution, you can run it again and select the added
43 | contribution type.
44 | 
45 | Next you'll need to regenerate the table:
46 | 
47 | ```console
48 | npm run contributors:generate
49 | ```
50 | 
51 | ## Committing and Pushing changes
52 | 
53 | Please make sure to run the tests before you commit your changes. You can run
54 | `npm run test` and press `u` which will update any snapshots that need updating.
55 | Make sure to include those changes (if they exist) in your commit.
56 | 
57 | ## Help needed
58 | 
59 | Please checkout the [the open issues][issues]
60 | 
61 | Also, please watch the repo and respond to questions/bug reports/feature
62 | requests! Thanks!
63 | 
64 | [egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
65 | [all-contributors]: https://github.com/kentcdodds/all-contributors
66 | [issues]: https://github.com/kentcdodds/modern-react/issues
67 | 


--------------------------------------------------------------------------------
/src/exercises/09.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: Custom hook
 2 | import React, {useReducer, useEffect, useRef} from 'react'
 3 | 
 4 | const buttonStyles = {
 5 |   border: '1px solid #ccc',
 6 |   background: '#fff',
 7 |   fontSize: '2em',
 8 |   padding: 15,
 9 |   margin: 5,
10 |   width: 200,
11 | }
12 | 
13 | function reducer(currentState, newState) {
14 |   return {...currentState, ...newState}
15 | }
16 | 
17 | function Stopwatch() {
18 |   // 🐨 1. put all the logic for the stopwatch (including event handlers)
19 |   // in a custom hook called useStopwatch
20 |   // return the state, and event handlers in an object
21 |   const [{running, lapse}, setState] = useReducer(reducer, {
22 |     running: false,
23 |     lapse: 0,
24 |   })
25 |   const timerRef = useRef(null)
26 | 
27 |   useEffect(() => () => clearInterval(timerRef.current), [])
28 | 
29 |   function handleRunClick() {
30 |     if (running) {
31 |       clearInterval(timerRef.current)
32 |     } else {
33 |       const startTime = Date.now() - lapse
34 |       timerRef.current = setInterval(() => {
35 |         setState({lapse: Date.now() - startTime})
36 |       }, 0)
37 |     }
38 |     setState({running: !running})
39 |   }
40 | 
41 |   function handleClearClick() {
42 |     clearInterval(timerRef.current)
43 |     setState({running: false, lapse: 0})
44 |   }
45 | 
46 |   // 🐨 2. call your useStopwatch custom hook and get the state and event handlers
47 |   // for two individual stopwatches.
48 | 
49 |   // 🐨 3. update the returned JSX to render two stopwatches and the diff between them
50 |   // 💰 if you want the tests to pass, make sure to pass a `data-testid="diff"` prop
51 |   // to the span where you render the difference.
52 | 
53 |   return (
54 |     <div style={{textAlign: 'center'}}>
55 |       <StopwatchView
56 |         lapse={lapse}
57 |         running={running}
58 |         onRunClick={handleRunClick}
59 |         onClearClick={handleClearClick}
60 |       />
61 |     </div>
62 |   )
63 | }
64 | 
65 | function StopwatchView({lapse, running, onRunClick, onClearClick}) {
66 |   return (
67 |     <>
68 |       <label
69 |         style={{
70 |           fontSize: '5em',
71 |           display: 'block',
72 |         }}
73 |       >
74 |         {lapse}
75 |         ms
76 |       </label>
77 |       <button onClick={onRunClick} style={buttonStyles}>
78 |         {running ? 'Stop' : 'Start'}
79 |       </button>
80 |       <button onClick={onClearClick} style={buttonStyles}>
81 |         Clear
82 |       </button>
83 |     </>
84 |   )
85 | }
86 | 
87 | // Don't make changes to the Usage component. It's here to show you how your
88 | // component is intended to be used and is used in the tests.
89 | 
90 | function Usage() {
91 |   return <Stopwatch />
92 | }
93 | Usage.title = 'Stopwatch: Custom hook'
94 | 
95 | export default Usage
96 | 


--------------------------------------------------------------------------------
/src/exercises/07.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch: useReducer (a la redux)
 2 | // 🐨 1. swap useState with useReducer
 3 | import React, {useState, useEffect, useRef} from 'react'
 4 | 
 5 | const buttonStyles = {
 6 |   border: '1px solid #ccc',
 7 |   background: '#fff',
 8 |   fontSize: '2em',
 9 |   padding: 15,
10 |   margin: 5,
11 |   width: 200,
12 | }
13 | 
14 | // 🐨 2. create a function called reducer
15 | // 💰 function reducer(state, action) {}
16 | // The contents of this function can be whatever you would like.
17 | // but here's an example of one of the state transitions that would work well:
18 | // function reducer(state, action) {
19 | //   switch (action.type) {
20 | //     // handle more cases here...
21 | //     case 'CLEAR':
22 | //       return {
23 | //         ...state,
24 | //         running: false,
25 | //         lapse: 0,
26 | //       }
27 | //     default:
28 | //       break;
29 | //   }
30 | // }
31 | 
32 | function Stopwatch() {
33 |   // 🐨 3. swap these `useState` calls with a single `useReducer` call
34 |   // 💰 `const [state, dispatch] = useReducer(reducer, initialStateObject)
35 |   // https://reactjs.org/docs/hooks-reference.html#usereducer
36 |   const [lapse, setLapse] = useState(0)
37 |   const [running, setRunning] = useState(false)
38 |   const timerRef = useRef(null)
39 | 
40 |   useEffect(() => () => clearInterval(timerRef.current), [])
41 | 
42 |   function handleRunClick() {
43 |     if (running) {
44 |       clearInterval(timerRef.current)
45 |     } else {
46 |       const startTime = Date.now() - lapse
47 |       timerRef.current = setInterval(() => {
48 |         // 🐨 4. swap this with a call to dispatch
49 |         setLapse(Date.now() - startTime)
50 |       }, 0)
51 |     }
52 |     // 🐨 5. swap this with a call to dispatch
53 |     setRunning(!running)
54 |   }
55 | 
56 |   function handleClearClick() {
57 |     clearInterval(timerRef.current)
58 |     // 🐨 6. swap this with a call to dispatch
59 |     setLapse(0)
60 |     setRunning(false)
61 |   }
62 | 
63 |   return (
64 |     <div style={{textAlign: 'center'}}>
65 |       <label
66 |         style={{
67 |           fontSize: '5em',
68 |           display: 'block',
69 |         }}
70 |       >
71 |         {lapse}
72 |         ms
73 |       </label>
74 |       <button onClick={handleRunClick} style={buttonStyles}>
75 |         {running ? 'Stop' : 'Start'}
76 |       </button>
77 |       <button onClick={handleClearClick} style={buttonStyles}>
78 |         Clear
79 |       </button>
80 |     </div>
81 |   )
82 | }
83 | 
84 | // Don't make changes to the Usage component. It's here to show you how your
85 | // component is intended to be used and is used in the tests.
86 | 
87 | function Usage() {
88 |   return <Stopwatch />
89 | }
90 | Usage.title = 'Stopwatch: useReducer (a la redux)'
91 | 
92 | export default Usage
93 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="theme-color" content="#000000">
 8 |   <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 |   <!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 |   <title>React App</title>
24 |   <style>
25 |     @font-face {
26 |       font-family: 'Antic Slab';
27 |       font-style: normal;
28 |       font-weight: 400;
29 |       src: local('Antic Slab Regular'), local('AnticSlab-Regular'), url(/antic-slab.woff2) format('woff2');
30 |       unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
31 |     }
32 |     *, *:before, *:after { box-sizing: border-box; }
33 |     html, body { height: 100vh; }
34 |     body { font-family: 'Antic Slab', serif; margin: 0 }
35 |     hr { width: 100%; }
36 | 
37 |     .friends .header {
38 |       display: flex;
39 |       justify-content: space-around;
40 |       align-items: center;
41 |     }
42 | 
43 |     .friends .header > div {
44 |       display: flex;
45 |       flex-direction: column;
46 |       justify-content: center;
47 |       text-align: center;
48 |     }
49 | 
50 | 
51 |     .friends .header > nav {
52 |       flex: 1;
53 |     }
54 | 
55 |     .friends .header > nav ul {
56 |       display: flex;
57 |       justify-content: space-around;
58 |       list-style: none;
59 |       padding-left: 0;
60 |     }
61 |   </style>
62 | </head>
63 | 
64 | <body>
65 |   <noscript>
66 |     You need to enable JavaScript to run this app.
67 |   </noscript>
68 |   <div id="⚛️" style="height: 100%"></div>
69 |   <!--
70 |       This HTML file is a template.
71 |       If you open it directly in the browser, you will see an empty page.
72 | 
73 |       You can add webfonts, meta tags, or analytics to this file.
74 |       The build step will place the bundled scripts into the <body> tag.
75 | 
76 |       To begin the development, run `npm start` or `yarn start`.
77 |       To create a production bundle, use `npm run build` or `yarn build`.
78 |     -->
79 | </body>
80 | 
81 | </html>
82 | 


--------------------------------------------------------------------------------
/src/exercises-final/09.js:
--------------------------------------------------------------------------------
  1 | // Stopwatch: Custom hook
  2 | import React, {useReducer, useEffect, useRef} from 'react'
  3 | 
  4 | const buttonStyles = {
  5 |   border: '1px solid #ccc',
  6 |   background: '#fff',
  7 |   fontSize: '2em',
  8 |   padding: 15,
  9 |   margin: 5,
 10 |   width: 200,
 11 | }
 12 | 
 13 | function reducer(currentState, newState) {
 14 |   return {...currentState, ...newState}
 15 | }
 16 | 
 17 | function useStopwatch() {
 18 |   const [{running, lapse}, setState] = useReducer(reducer, {
 19 |     running: false,
 20 |     lapse: 0,
 21 |   })
 22 |   const timerRef = useRef({timer: null})
 23 | 
 24 |   useEffect(() => () => clearInterval(timerRef.current), [])
 25 | 
 26 |   function handleRunClick() {
 27 |     if (running) {
 28 |       clearInterval(timerRef.current)
 29 |     } else {
 30 |       const startTime = Date.now() - lapse
 31 |       timerRef.current = setInterval(() => {
 32 |         setState({lapse: Date.now() - startTime})
 33 |       }, 0)
 34 |     }
 35 |     setState({running: !running})
 36 |   }
 37 | 
 38 |   function handleClearClick() {
 39 |     clearInterval(timerRef.current)
 40 |     setState({running: false, lapse: 0})
 41 |   }
 42 |   return {handleRunClick, handleClearClick, lapse, running}
 43 | }
 44 | 
 45 | function Stopwatch() {
 46 |   const stopwatchOne = useStopwatch()
 47 |   const stopwatchTwo = useStopwatch()
 48 | 
 49 |   return (
 50 |     <div style={{textAlign: 'center'}}>
 51 |       <StopwatchView
 52 |         lapse={stopwatchOne.lapse}
 53 |         running={stopwatchOne.running}
 54 |         onRunClick={stopwatchOne.handleRunClick}
 55 |         onClearClick={stopwatchOne.handleClearClick}
 56 |       />
 57 |       <hr />
 58 |       <strong>Lapse Difference:</strong>
 59 |       <span data-testid="diff">
 60 |         {stopwatchOne.lapse - stopwatchTwo.lapse}
 61 |         ms
 62 |       </span>
 63 |       <hr />
 64 |       <StopwatchView
 65 |         lapse={stopwatchTwo.lapse}
 66 |         running={stopwatchTwo.running}
 67 |         onRunClick={stopwatchTwo.handleRunClick}
 68 |         onClearClick={stopwatchTwo.handleClearClick}
 69 |       />
 70 |     </div>
 71 |   )
 72 | }
 73 | 
 74 | function StopwatchView({lapse, running, onRunClick, onClearClick}) {
 75 |   return (
 76 |     <>
 77 |       <label
 78 |         style={{
 79 |           fontSize: '5em',
 80 |           display: 'block',
 81 |         }}
 82 |       >
 83 |         {lapse}
 84 |         ms
 85 |       </label>
 86 |       <button onClick={onRunClick} style={buttonStyles}>
 87 |         {running ? 'Stop' : 'Start'}
 88 |       </button>
 89 |       <button onClick={onClearClick} style={buttonStyles}>
 90 |         Clear
 91 |       </button>
 92 |     </>
 93 |   )
 94 | }
 95 | 
 96 | // Don't make changes to the Usage component. It's here to show you how your
 97 | // component is intended to be used and is used in the tests.
 98 | 
 99 | function Usage() {
100 |   return <Stopwatch />
101 | }
102 | Usage.title = 'Stopwatch: Custom hook'
103 | 
104 | export default Usage
105 | 


--------------------------------------------------------------------------------
/src/exercises/08.js:
--------------------------------------------------------------------------------
  1 | // Stopwatch: useReducer (a la setState)
  2 | import React, {useReducer, useEffect, useRef} from 'react'
  3 | 
  4 | const buttonStyles = {
  5 |   border: '1px solid #ccc',
  6 |   background: '#fff',
  7 |   fontSize: '2em',
  8 |   padding: 15,
  9 |   margin: 5,
 10 |   width: 200,
 11 | }
 12 | 
 13 | // 🐨 simplify this reducer to accept two state objects
 14 | // and return a new one that performs a shallow merge.
 15 | // 💰 here's how to perform a shallow merge:
 16 | // const obj1 = {a: 'b', c: 'd'}
 17 | // const obj2 = {c: 'e', f: 'g'}
 18 | // console.log({...obj1, ...obj2}) // {a: 'b', c: 'e', f: 'g'}
 19 | // 💰 when done correctly, this function should be no longer than 3 lines.
 20 | // and could be done in one line if you make it an arrow function.
 21 | function reducer(state, action) {
 22 |   switch (action.type) {
 23 |     case 'LAPSE':
 24 |       return {
 25 |         ...state,
 26 |         lapse: action.now - action.startTime,
 27 |       }
 28 |     case 'TOGGLE_RUNNING':
 29 |       return {
 30 |         ...state,
 31 |         running: !state.running,
 32 |       }
 33 |     case 'CLEAR':
 34 |       return {
 35 |         ...state,
 36 |         running: false,
 37 |         lapse: 0,
 38 |       }
 39 |     default:
 40 |       break
 41 |   }
 42 | }
 43 | 
 44 | function Stopwatch() {
 45 |   // 🐨 2. rename `dispatch` to `setState`
 46 |   const [{running, lapse}, dispatch] = useReducer(reducer, {
 47 |     running: false,
 48 |     lapse: 0,
 49 |   })
 50 |   const timerRef = useRef(null)
 51 | 
 52 |   useEffect(() => () => clearInterval(timerRef.current), [])
 53 | 
 54 |   function handleRunClick() {
 55 |     if (running) {
 56 |       clearInterval(timerRef.current)
 57 |     } else {
 58 |       const startTime = Date.now() - lapse
 59 |       timerRef.current = setInterval(() => {
 60 |         // 🐨 3. call `setState` instead
 61 |         dispatch({type: 'LAPSE', now: Date.now(), startTime})
 62 |       }, 0)
 63 |     }
 64 |     // 🐨 4. call `setState` instead
 65 |     dispatch({type: 'TOGGLE_RUNNING'})
 66 |   }
 67 | 
 68 |   function handleClearClick() {
 69 |     clearInterval(timerRef.current)
 70 |     // 🐨 5. call `setState` instead
 71 |     dispatch({type: 'CLEAR'})
 72 |   }
 73 | 
 74 |   return (
 75 |     <div style={{textAlign: 'center'}}>
 76 |       <label
 77 |         style={{
 78 |           fontSize: '5em',
 79 |           display: 'block',
 80 |         }}
 81 |       >
 82 |         {lapse}
 83 |         ms
 84 |       </label>
 85 |       <button onClick={handleRunClick} style={buttonStyles}>
 86 |         {running ? 'Stop' : 'Start'}
 87 |       </button>
 88 |       <button onClick={handleClearClick} style={buttonStyles}>
 89 |         Clear
 90 |       </button>
 91 |     </div>
 92 |   )
 93 | }
 94 | 
 95 | // Don't make changes to the Usage component. It's here to show you how your
 96 | // component is intended to be used and is used in the tests.
 97 | 
 98 | function Usage() {
 99 |   return <Stopwatch />
100 | }
101 | Usage.title = 'Stopwatch: useReducer (a la setState)'
102 | 
103 | export default Usage
104 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, gender identity and expression, level of experience,
 9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |   advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |   address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |   professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at kent@doddsfamily.us. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at [http://contributor-covenant.org/version/1/4][version]
72 | 
73 | [homepage]: http://contributor-covenant.org
74 | [version]: http://contributor-covenant.org/version/1/4/
75 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Router, Link} from '@reach/router'
  3 | 
  4 | const files = [
  5 |   '01',
  6 |   '02',
  7 |   '03',
  8 |   '04',
  9 |   '05',
 10 |   '06',
 11 |   '07',
 12 |   '08',
 13 |   '09',
 14 |   '10',
 15 |   '11',
 16 |   '12',
 17 |   '13',
 18 |   '14',
 19 | ]
 20 | 
 21 | const pages = files.reduce((p, filename, index, fullArray) => {
 22 |   const final = require(`./exercises-final/${filename}`)
 23 |   Object.assign(final, {
 24 |     previous: fullArray[index - 1],
 25 |     next: fullArray[index + 1],
 26 |     isolatedPath: `/isolated/exercises-final/${filename}`,
 27 |   })
 28 |   const exercise = require(`./exercises/${filename}`)
 29 |   Object.assign(exercise, {
 30 |     previous: fullArray[index - 1],
 31 |     next: fullArray[index + 1],
 32 |     isolatedPath: `/isolated/exercises/${filename}`,
 33 |   })
 34 |   p[filename] = {
 35 |     exercise,
 36 |     final,
 37 |     title: final.default.title,
 38 |   }
 39 |   return p
 40 | }, {})
 41 | 
 42 | const filesAndTitles = files.map(filename => ({
 43 |   title: pages[filename].title,
 44 |   filename,
 45 | }))
 46 | 
 47 | class ErrorCatcher extends React.Component {
 48 |   static getDerivedStateFromProps() {
 49 |     // if the props change then let's try rendering again...
 50 |     return {error: null}
 51 |   }
 52 |   state = {error: null}
 53 |   componentDidCatch(error, info) {
 54 |     console.log(error, info)
 55 |     this.setState({error})
 56 |   }
 57 |   render() {
 58 |     const {error} = this.state
 59 |     const {children, ...props} = this.props
 60 |     return (
 61 |       <div {...props}>
 62 |         {error ? 'There was an error. Edit the code and try again.' : children}
 63 |       </div>
 64 |     )
 65 |   }
 66 | }
 67 | 
 68 | function ComponentContainer({label, ...props}) {
 69 |   return (
 70 |     <div style={{display: 'flex', flexDirection: 'column'}}>
 71 |       <h2 style={{textAlign: 'center'}}>{label}</h2>
 72 |       <div
 73 |         style={{
 74 |           flex: 1,
 75 |           padding: 20,
 76 |           border: '1px solid',
 77 |           display: 'grid',
 78 |           alignItems: 'center',
 79 |           justifyContent: 'center',
 80 |         }}
 81 |       >
 82 |         <ErrorCatcher {...props} />
 83 |       </div>
 84 |     </div>
 85 |   )
 86 | }
 87 | 
 88 | function ExerciseContainer({exerciseId}) {
 89 |   const {
 90 |     exercise: {default: Exercise},
 91 |     final: {default: Final},
 92 |   } = pages[exerciseId]
 93 |   return (
 94 |     <div
 95 |       style={{
 96 |         padding: 20,
 97 |         height: '100%',
 98 |         display: 'grid',
 99 |         gridGap: '20px',
100 |         gridTemplateColumns: '1fr 1fr',
101 |         gridTemplateRows: '30px 1fr 30px',
102 |       }}
103 |     >
104 |       <h1 style={{gridColumn: 'span 2', textAlign: 'center'}}>{Final.title}</h1>
105 |       <ComponentContainer
106 |         label={<Link to={`/${exerciseId}/exercise`}>Exercise</Link>}
107 |       >
108 |         <Exercise />
109 |       </ComponentContainer>
110 |       <ComponentContainer
111 |         label={<Link to={`/${exerciseId}/final`}>Final Version</Link>}
112 |       >
113 |         <Final />
114 |       </ComponentContainer>
115 |       <NavigationFooter exerciseId={exerciseId} type="page" />
116 |     </div>
117 |   )
118 | }
119 | 
120 | function NavigationFooter({exerciseId, type}) {
121 |   const current = pages[exerciseId]
122 |   let suffix = ''
123 |   let Usage = current.final
124 |   if (type === 'exercise') {
125 |     suffix = '/exercise'
126 |     Usage = current.exercise
127 |   } else if (type === 'final') {
128 |     suffix = '/final'
129 |   }
130 |   return (
131 |     <div
132 |       style={{
133 |         display: 'flex',
134 |         justifyContent: 'space-between',
135 |         gridColumn: 'span 2',
136 |       }}
137 |     >
138 |       <div style={{flex: 1}}>
139 |         {Usage.previous ? (
140 |           <Link to={`/${Usage.previous}${suffix}`}>
141 |             {pages[Usage.previous].title}{' '}
142 |             <span role="img" aria-label="previous">
143 |               👈
144 |             </span>
145 |           </Link>
146 |         ) : null}
147 |       </div>
148 |       <div style={{flex: 1, textAlign: 'center'}}>
149 |         <Link to="/">Home</Link>
150 |       </div>
151 |       <div style={{flex: 1, textAlign: 'right'}}>
152 |         {Usage.next ? (
153 |           <Link to={`/${Usage.next}${suffix}`}>
154 |             <span role="img" aria-label="next">
155 |               👉
156 |             </span>{' '}
157 |             {pages[Usage.next].title}
158 |           </Link>
159 |         ) : null}
160 |       </div>
161 |     </div>
162 |   )
163 | }
164 | 
165 | function FullPage({type, exerciseId}) {
166 |   const page = pages[exerciseId]
167 |   const {default: Usage, isolatedPath} = pages[exerciseId][type]
168 |   return (
169 |     <div>
170 |       <div
171 |         style={{
172 |           marginLeft: 10,
173 |           marginRight: 10,
174 |           marginTop: 10,
175 |           display: 'flex',
176 |           justifyContent: 'space-between',
177 |         }}
178 |       >
179 |         <Link to={`/${exerciseId}`}>
180 |           <span role="img" aria-label="back">
181 |             👈
182 |           </span>
183 |           Exercise Page
184 |         </Link>
185 |         <Link to={isolatedPath}>isolated</Link>
186 |       </div>
187 |       <div style={{textAlign: 'center'}}>
188 |         <h1>{page.title}</h1>
189 |       </div>
190 |       <div
191 |         style={{
192 |           flex: 1,
193 |           padding: 20,
194 |           margin: 20,
195 |           border: '1px solid',
196 |           display: 'grid',
197 |           alignItems: 'center',
198 |           justifyContent: 'center',
199 |         }}
200 |       >
201 |         <ErrorCatcher>
202 |           <Usage />
203 |         </ErrorCatcher>
204 |       </div>
205 |       <NavigationFooter exerciseId={exerciseId} type={type} />
206 |     </div>
207 |   )
208 | }
209 | 
210 | function Isolated({exerciseId, type}) {
211 |   const Comp = pages[exerciseId][type].default
212 |   return (
213 |     <div
214 |       style={{
215 |         padding: 30,
216 |         height: '100vh',
217 |         display: 'grid',
218 |         alignItems: 'center',
219 |         justifyContent: 'center',
220 |       }}
221 |     >
222 |       <div>
223 |         <Comp />
224 |       </div>
225 |     </div>
226 |   )
227 | }
228 | 
229 | function Home() {
230 |   return (
231 |     <div>
232 |       <h1 style={{textAlign: 'center'}}>Modern React: Hooks and Suspense</h1>
233 |       <div>
234 |         {filesAndTitles.map(({title, filename}) => {
235 |           return (
236 |             <div key={filename} style={{margin: 10}}>
237 |               {filename}
238 |               {'. '}
239 |               <Link to={`/${filename}`}>{title}</Link>{' '}
240 |               <small>
241 |                 <Link to={`/${filename}/exercise`}>(exercise)</Link>{' '}
242 |                 <Link to={`/${filename}/final`}>(final)</Link>
243 |               </small>
244 |             </div>
245 |           )
246 |         })}
247 |       </div>
248 |     </div>
249 |   )
250 | }
251 | 
252 | function App() {
253 |   return (
254 |     <React.Suspense>
255 |       <Router>
256 |         <Home path="/" />
257 |         <ExerciseContainer path="/:exerciseId" />
258 |         <FullPage path="/:exerciseId/exercise" type="exercise" />
259 |         <FullPage path="/:exerciseId/final" type="final" />
260 |         <Isolated path="/isolated/exercises/:exerciseId" type="exercise" />
261 |         <Isolated path="/isolated/exercises-final/:exerciseId" type="final" />
262 |         <NoMatch default />
263 |       </Router>
264 |     </React.Suspense>
265 |   )
266 | }
267 | 
268 | function NoMatch() {
269 |   return (
270 |     <div
271 |       style={{
272 |         height: '100%',
273 |         display: 'grid',
274 |         alignItems: 'center',
275 |         justifyContent: 'center',
276 |       }}
277 |     >
278 |       <div>
279 |         Sorry... nothing here. To open one of the exercises, go to{' '}
280 |         <code>{`/exerciseId`}</code>, for example:{' '}
281 |         <Link to="/01">
282 |           <code>{`/01`}</code>
283 |         </Link>
284 |       </div>
285 |     </div>
286 |   )
287 | }
288 | 
289 | export {App}
290 | 
291 | /* eslint
292 | "no-unused-vars": [
293 |   "warn",
294 |   {
295 |     "argsIgnorePattern": "^_.+|^ignore.+",
296 |     "varsIgnorePattern": "^_.+|^ignore.+",
297 |     "args": "after-used"
298 |   }
299 | ]
300 |  */
301 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # DEPRECATED
  2 | 
  3 | Instead of this repo, you want:
  4 | 
  5 | <div>
  6 |   <h1 align="center"><a href="https://epicreact.dev">🚀 EpicReact.Dev</a></h1>
  7 |   <strong>
  8 |     Confidently Ship Well-Architected Production Ready React Apps Like a Pro
  9 |   </strong>
 10 |   <a href="https://epicreact.dev">
 11 |     <img
 12 |       alt="Learn React from Start to Finish"
 13 |       src="https://kentcdodds.com/images/epicreact-promo/er-1.gif"
 14 |     />
 15 |   </a>
 16 | </div>
 17 | 
 18 | <hr />
 19 | 
 20 | Seriously, get [EpicReact.Dev](https://epicreact.dev) instead. It's better.
 21 | 
 22 | You can find all the [EpicReact.Dev](https://epicreact.dev) material on GitHub:
 23 | [https://github.com/topics/epicreact-dev](https://github.com/topics/epicreact-dev)
 24 | 
 25 | Original README content:
 26 | 
 27 | # Modern React
 28 | 
 29 | 👋 hi there! My name is [Kent C. Dodds](https://kentcdodds.com)! This is a
 30 | workshop repo to teach you about using all the goodies we got from React 16.7.0!
 31 | 
 32 | [![chat-badge][chat-badge]][chat]
 33 | [![Build Status][build-badge]][build]
 34 | [![AppVeyor Build Status][win-build-badge]][win-build]
 35 | [![Code Coverage][coverage-badge]][coverage]
 36 | [![MIT License][license-badge]][license]
 37 | [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)
 38 | 
 39 | [![PRs Welcome][prs-badge]][prs]
 40 | [![Code of Conduct][coc-badge]][coc]
 41 | [![Watch on GitHub][github-watch-badge]][github-watch]
 42 | [![Star on GitHub][github-star-badge]][github-star]
 43 | [![Tweet][twitter-badge]][twitter]
 44 | 
 45 | ## System Requirements
 46 | 
 47 | * [git][git] v2.14.1 or greater
 48 | * [NodeJS][node] v8.9.4 or greater
 49 | * [npm][npm] v5.6.0 or greater
 50 | 
 51 | All of these must be available in your `PATH`. To verify things are set up
 52 | properly, you can run this:
 53 | 
 54 | ```
 55 | git --version
 56 | node --version
 57 | npm --version
 58 | ```
 59 | 
 60 | If you have trouble with any of these, learn more about the PATH environment
 61 | variable and how to fix it here for [windows][win-path] or
 62 | [mac/linux][mac-path].
 63 | 
 64 | ## Setup
 65 | 
 66 | You may be able to work through the entire workshop in the browser. Go to
 67 | [this codesandbox](https://codesandbox.io/s/github/kentcdodds/modern-react)
 68 | and you should be good to go.
 69 | 
 70 | If you'd rather be able to work through the workshop on your own computer, then
 71 | follow the following instructions.
 72 | 
 73 | After you've made sure to have the correct things (and versions) installed, you
 74 | should be able to just run a few commands to get set up:
 75 | 
 76 | ```
 77 | git clone https://github.com/kentcdodds/modern-react.git
 78 | cd modern-react
 79 | npm run setup --silent
 80 | ```
 81 | 
 82 | This may take a few minutes. **It will ask you for your email.** This is
 83 | optional and just automatically adds your email to the links in the project to
 84 | make filling out some forms easier If you get any errors, please read through
 85 | them and see if you can find out what the problem is. You may also want to look
 86 | at [Troubleshooting](#troubleshooting). If you can't work it out on your own
 87 | then please [file an issue][issue] and provide _all_ the output from the
 88 | commands you ran (even if it's a lot).
 89 | 
 90 | ## Running the app
 91 | 
 92 | To get the app up and running (and really see if it worked), run:
 93 | 
 94 | ```shell
 95 | npm start
 96 | ```
 97 | 
 98 | This should start up your browser. If you're familiar, this is a standard
 99 | [react-scripts](https://github.com/facebook/create-react-app) application.
100 | 
101 | You can also open
102 | [the deployment of the app on Netlify](https://modern-react.netlify.com/).
103 | 
104 | ## Running the tests
105 | 
106 | ```shell
107 | npm test
108 | ```
109 | 
110 | This will start [Jest](http://facebook.github.io/jest) in watch mode. Read the
111 | output and play around with it.
112 | 
113 | **Your goal will be to go into each test, swap the final version for the
114 | exercise version in the import, and make the tests pass**
115 | 
116 | ## Helpful Emoji 🐨 💰 💯
117 | 
118 | Each exercise has comments in it to help you get through the exercise.
119 | **Kody the Koala Bear** and **Marty the Money Bag** are here to help you.
120 | **Kody** 🐨 will tell you when there's something specific you should do, and
121 | **Marty** 💰 will give you specific tips along the way. Should you finish
122 | early, **Hannah the Hundred Points Symbol** 💯 will give you some additional
123 | challenges that you can try!
124 | 
125 | ## Troubleshooting
126 | 
127 | <details>
128 | 
129 | <summary>"npm run setup" command not working</summary>
130 | 
131 | Here's what the setup script does. If it fails, try doing each of these things
132 | individually yourself:
133 | 
134 | ```
135 | # verify your environment will work with the project
136 | node ./scripts/verify
137 | 
138 | # install dependencies
139 | npm install
140 | 
141 | # verify the project is ready to run
142 | npm run build
143 | npm run test:coverage
144 | ```
145 | 
146 | If any of those scripts fail, please try to work out what went wrong by the
147 | error message you get. If you still can't work it out, feel free to
148 | [open an issue][issue] with _all_ the output from that script. I will try to
149 | help if I can.
150 | 
151 | </details>
152 | 
153 | ## Contributors
154 | 
155 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
156 | 
157 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
158 | <!-- prettier-ignore -->
159 | | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/modern-react/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/modern-react/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/modern-react/commits?author=kentcdodds "Tests") | [<img src="https://avatars0.githubusercontent.com/u/3624098?v=4" width="100px;"/><br /><sub><b>Andrew Clark</b></sub>](https://github.com/acdlite)<br />[💬](#question-acdlite "Answering Questions") [🤔](#ideas-acdlite "Ideas, Planning, & Feedback") [👀](#review-acdlite "Reviewed Pull Requests") | [<img src="https://avatars2.githubusercontent.com/u/6820?v=4" width="100px;"/><br /><sub><b>Sophie Alpert</b></sub>](https://sophiebits.com/)<br />[💬](#question-sophiebits "Answering Questions") [🤔](#ideas-sophiebits "Ideas, Planning, & Feedback") [👀](#review-sophiebits "Reviewed Pull Requests") |
160 | | :---: | :---: | :---: |
161 | <!-- ALL-CONTRIBUTORS-LIST:END -->
162 | 
163 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
164 | 
165 | ## License
166 | 
167 | This material is available for private, non-commercial use under the
168 | [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you
169 | would like to use this material to conduct your own workshop, please contact me
170 | at kent@doddsfamily.us
171 | 
172 | [npm]: https://www.npmjs.com/
173 | [node]: https://nodejs.org
174 | [git]: https://git-scm.com/
175 | [chat]: https://gitter.im/kentcdodds/modern-react
176 | [chat-badge]: https://img.shields.io/gitter/room/kentcdodds/modern-react.js.svg?style=flat-square&logo=gitter-white
177 | [build-badge]: https://img.shields.io/travis/kentcdodds/modern-react.svg?style=flat-square&logo=travis
178 | [build]: https://travis-ci.org/kentcdodds/modern-react
179 | [license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
180 | [license]: https://github.com/kentcdodds/modern-react/blob/master/README.md#license
181 | [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
182 | [prs]: http://makeapullrequest.com
183 | [donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
184 | [donate]: http://kcd.im/donate
185 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
186 | [coc]: https://github.com/kentcdodds/modern-react/blob/master/CODE_OF_CONDUCT.md
187 | [github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/modern-react.svg?style=social
188 | [github-watch]: https://github.com/kentcdodds/modern-react/watchers
189 | [github-star-badge]: https://img.shields.io/github/stars/kentcdodds/modern-react.svg?style=social
190 | [github-star]: https://github.com/kentcdodds/modern-react/stargazers
191 | [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20modern-react%20by%20@kentcdodds%20https://github.com/kentcdodds/modern-react%20%F0%9F%91%8D
192 | [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/modern-react.svg?style=social
193 | [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
194 | [all-contributors]: https://github.com/kentcdodds/all-contributors
195 | [win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
196 | [mac-path]: http://stackoverflow.com/a/24322978/971592
197 | [issue]: https://github.com/kentcdodds/modern-react/issues/new
198 | [win-build-badge]: https://img.shields.io/appveyor/ci/kentcdodds/modern-react.svg?style=flat-square&logo=appveyor
199 | [win-build]: https://ci.appveyor.com/project/kentcdodds/modern-react
200 | [coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/modern-react.svg?style=flat-square
201 | [coverage]: https://codecov.io/github/kentcdodds/modern-react
202 | [watchman]: https://facebook.github.io/watchman/docs/install.html
203 | 


--------------------------------------------------------------------------------