90 | Paris <span>🧀</span> 91 |

maxLength ? 'tooLong' : ''}`} 10 | > 11 |

12 | {defaults.map((b) => { 13 | return ( 14 | 22 | ) 23 | })} 24 |

25 |

{
29 |           setMessage(event.target.value)
30 |         }}
31 |       />
32 |       <div>
33 |         {message.length}/{maxLength}
34 |       </div>
35 |     </div>
36 |   )
37 | }
38 | 
39 | export default function MoodTracker() {
40 |   let defaultMoods = ['Great', 'Okay', 'Bad']
41 | 
42 |   return (
43 |     <section>
44 |       <h2>Mood Tracker</h2>
45 |       <CharacterLimitInput text={'How was your day?'} defaults={defaultMoods} />
46 |       <style jsx global>{`
47 |         section {
48 |           font-family: 'Helvetica', 'Arial', sans-serif;
49 |           line-height: 1.3;
50 |           text-align: center;
51 |         }
52 | 
53 |         input {
54 |           margin: 5px 0;
55 |           padding: 5px;
56 |           min-width: 250px;
57 |         }
58 | 
59 |         .counterInput button {
60 |           margin: 5px;
61 |           margin-left: 0;
62 |           background: #41a5e1;
63 |           border: none;
64 |           border-radius: 5px;
65 |           color: white;
66 |           font-size: 16px;
67 |           font-weight: bold;
68 |           cursor: pointer;
69 |         }
70 | 
71 |         .counterInput.tooLong {
72 |           color: red;
73 |         }
74 | 
75 |         .counterInput.tooLong textarea {
76 |           background: #eebbbb;
77 |         }
78 |       `}</style>
79 |     </section>
80 |   )
81 | }
82 |

--------------------------------------------------------------------------------
/components/CharacterLimit.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | // Change this file so that:
 4 | // 1) The textarea is a controlled component
 5 | // 2) The character counter at the bottom is functional
 6 | // 3) Clicking the buttons populates the textarea
 7 | 
 8 | // Note: Notice the CSS classes for if the input is too long!
 9 | 
10 | const CharacterLimitInput = ({ text, defaults }) => {
11 |   const maxLength = 140
12 | 
13 |   return (
14 |     <div className="counterInput">
15 |       <div>
16 |         {defaults.map((b) => {
17 |           return <button key={b}>{b}</button>
18 |         })}
19 |       </div>
20 |       <textarea placeholder={text} />
21 |       <div>0/{maxLength}</div>
22 |     </div>
23 |   )
24 | }
25 | 
26 | export default function MoodTracker() {
27 |   let defaultMoods = ['Great', 'Okay', 'Bad']
28 | 
29 |   return (
30 |     <section>
31 |       <h2>Mood Tracker</h2>
32 |       <CharacterLimitInput text={'How was your day?'} defaults={defaultMoods} />
33 |       <style jsx global>{`
34 |         section {
35 |           font-family: 'Helvetica', 'Arial', sans-serif;
36 |           line-height: 1.3;
37 |           text-align: center;
38 |         }
39 | 
40 |         input {
41 |           margin: 5px 0;
42 |           padding: 5px;
43 |           min-width: 250px;
44 |         }
45 | 
46 |         .counterInput button {
47 |           margin: 5px;
48 |           margin-left: 0;
49 |           background: #41a5e1;
50 |           border: none;
51 |           border-radius: 5px;
52 |           color: white;
53 |           font-size: 16px;
54 |           font-weight: bold;
55 |           cursor: pointer;
56 |         }
57 | 
58 |         .counterInput.tooLong {
59 |           color: red;
60 |         }
61 | 
62 |         .counterInput.tooLong textarea {
63 |           background: #eebbbb;
64 |         }
65 |       `}</style>
66 |     </section>
67 |   )
68 | }
69 |

--------------------------------------------------------------------------------
/components/CharacterSheet.final.js:
--------------------------------------------------------------------------------
  1 | import { useState, useReducer } from 'react'
  2 | import friendlyWords from 'friendly-words'
  3 | 
  4 | let backgrounds = [
  5 |   'Noble',
  6 |   'Urchin',
  7 |   'Folk Hero',
  8 |   'Acolyte',
  9 |   'Criminal',
 10 |   'Hermit',
 11 |   'Guild Artisan',
 12 |   'Sage',
 13 | ]
 14 | 
 15 | function randomBackground() {
 16 |   return backgrounds[Math.floor(Math.random() * backgrounds.length)]
 17 | }
 18 | 
 19 | function randomName() {
 20 |   let array = friendlyWords.predicates
 21 |   let string = array[Math.floor(Math.random() * array.length)]
 22 |   return string.charAt(0).toUpperCase() + string.slice(1)
 23 | }
 24 | 
 25 | function useMyReducer() {
 26 |   let [state, dispatch] = useReducer(
 27 |     (state, action) => {
 28 |       switch (action.type) {
 29 |         case 'TOGGLE_DARK_MODE': {
 30 |           return {
 31 |             ...state,
 32 |             darkMode: !state.darkMode,
 33 |           }
 34 |         }
 35 |         case 'BG_SELECT': {
 36 |           return {
 37 |             ...state,
 38 |             background: action.value,
 39 |             error: !backgrounds.includes(action.value)
 40 |               ? 'This background does NOT exist.'
 41 |               : null,
 42 |           }
 43 |         }
 44 |         case 'NAME_CHARACTER': {
 45 |           return {
 46 |             ...state,
 47 |             name: action.name,
 48 |             error:
 49 |               action.name.length > 15
 50 |                 ? 'That name is way too long, bucko'
 51 |                 : null,
 52 |           }
 53 |         }
 54 |         case 'RANDOM_VALUES': {
 55 |           return {
 56 |             ...state,
 57 |             name: randomName(),
 58 |             background: randomBackground(),
 59 |           }
 60 |         }
 61 |         case 'DISMISS_ERROR': {
 62 |           return { ...state, error: null }
 63 |         }
 64 |         default: {
 65 |           return state
 66 |         }
 67 |       }
 68 |     },
 69 |     {
 70 |       darkMode: false,
 71 |       name: '',
 72 |       background: '',
 73 |       error: null,
 74 |     }
 75 |   )
 76 |   return [state, dispatch]
 77 | }
 78 | 
 79 | export default function App() {
 80 |   let [{ darkMode, name, background, error }, dispatch] = useMyReducer()
 81 | 
 82 |   function handleBackgroundSelect(event) {
 83 |     dispatch({ type: 'BG_SELECT', value: event.target.value })
 84 |   }
 85 | 
 86 |   return (
 87 |     <>
 88 |       <div className={`App ${darkMode ? 'darkmode' : ''}`}>
 89 |         <button
 90 |           onClick={() => {
 91 |             dispatch({ type: 'TOGGLE_DARK_MODE' })
 92 |           }}
 93 |         >
 94 |           Dark Mode {darkMode ? 'ON' : 'OFF'}
 95 |         </button>{' '}
 96 |         <br />
 97 |         <input
 98 |           type="text"
 99 |           placeholder="Type your name"
100 |           value={name}
101 |           onChange={(event) => {
102 |             dispatch({
103 |               type: 'NAME_CHARACTER',
104 |               name: event.target.value,
105 |             })
106 |           }}
107 |         />
108 |         <select value={background} onChange={handleBackgroundSelect}>
109 |           {backgrounds.map((b) => {
110 |             return <option key={`bg-${b}`}>{b}</option>
111 |           })}
112 |         </select>
113 |         {error && (
114 |           <div className="error">
115 |             {error}
116 |             <button
117 |               onClick={() => {
118 |                 dispatch({ type: 'DISMISS_ERROR' })
119 |               }}
120 |             >
121 |               Dismiss
122 |             </button>
123 |           </div>
124 |         )}
125 |         <div className="sheet">
126 |           <h2>Name: {name}</h2>
127 |           <h2>Background: {background}</h2>
128 |         </div>
129 |         <button
130 |           onClick={() => {
131 |             dispatch({ type: 'RANDOM_VALUES' })
132 |           }}
133 |         >
134 |           Do it all for me instead
135 |         </button>
136 |       </div>
137 |       <style jsx>{`
138 |         .App {
139 |           width: 100vw;
140 |           height: 100vh;
141 |           font-family: sans-serif;
142 |           text-align: center;
143 |         }
144 | 
145 |         .App.darkmode {
146 |           background: black;
147 |           color: white;
148 |         }
149 | 
150 |         button,
151 |         input,
152 |         select {
153 |           margin: 10px;
154 |           padding: 5px;
155 |           background: white;
156 |           border: 3px solid black;
157 |           color: black;
158 |           font-size: 20px;
159 |         }
160 | 
161 |         input {
162 |           width: 250px;
163 |         }
164 | 
165 |         .darkmode button,
166 |         .darkmode input,
167 |         .darkmode select {
168 |           background: black;
169 |           border: 3px solid white;
170 |           color: white;
171 |         }
172 | 
173 |         .error {
174 |           color: red;
175 |         }
176 | 
177 |         .sheet {
178 |           margin: 5px auto;
179 |           max-width: 400px;
180 |           text-align: left;
181 |         }
182 | 
183 |         [data-reach-combobox-popover] {
184 |           font-family: sans-serif;
185 |         }
186 | 
187 |         .darkmode[data-reach-combobox-popover] {
188 |           background: black;
189 |           color: white;
190 |         }
191 | 
192 |         [data-reach-combobox-option]:hover {
193 |           background: red;
194 |         }
195 |       `}</style>
196 |     </>
197 |   )
198 | }
199 |

--------------------------------------------------------------------------------
/components/CharacterSheet.js:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import friendlyWords from 'friendly-words'
  3 | 
  4 | let backgrounds = [
  5 |   'Noble',
  6 |   'Urchin',
  7 |   'Folk Hero',
  8 |   'Acolyte',
  9 |   'Criminal',
 10 |   'Hermit',
 11 |   'Guild Artisan',
 12 |   'Sage',
 13 | ]
 14 | 
 15 | function randomBackground() {
 16 |   return backgrounds[Math.floor(Math.random() * backgrounds.length)]
 17 | }
 18 | 
 19 | function randomName() {
 20 |   let array = friendlyWords.predicates
 21 |   let string = array[Math.floor(Math.random() * array.length)]
 22 |   return string.charAt(0).toUpperCase() + string.slice(1)
 23 | }
 24 | 
 25 | export default function App() {
 26 |   let [darkMode, setDarkMode] = useState(false)
 27 |   let [name, setName] = useState('')
 28 |   let [background, setBackground] = useState('')
 29 |   let [error, setError] = useState(null)
 30 | 
 31 |   function handleBackgroundSelect(event) {
 32 |     let value = event.target.value
 33 |     setBackground(value)
 34 |     if (!backgrounds.includes(value)) {
 35 |       setError('This background does NOT exist.')
 36 |     } else {
 37 |       setError(null)
 38 |     }
 39 |   }
 40 | 
 41 |   return (
 42 |     <>
 43 |       <div className={`App ${darkMode ? 'darkmode' : ''}`}>
 44 |         <button
 45 |           onClick={() => {
 46 |             setDarkMode(!darkMode)
 47 |           }}
 48 |         >
 49 |           Dark Mode {darkMode ? 'ON' : 'OFF'}
 50 |         </button>{' '}
 51 |         <br />
 52 |         <input
 53 |           type="text"
 54 |           placeholder="Type your name"
 55 |           value={name}
 56 |           onChange={(event) => {
 57 |             setName(event.target.value)
 58 |             if (event.target.value.length > 15) {
 59 |               setError('Name is WAY too long, bucko.')
 60 |             }
 61 |           }}
 62 |         />
 63 |         <select value={background} onChange={handleBackgroundSelect}>
 64 |           {backgrounds.map((b) => {
 65 |             return <option key={`bg-${b}`}>{b}</option>
 66 |           })}
 67 |         </select>
 68 |         {error && (
 69 |           <div className="error">
 70 |             {error}
 71 |             <button
 72 |               onClick={() => {
 73 |                 setError(null)
 74 |               }}
 75 |             >
 76 |               Dismiss
 77 |             </button>
 78 |           </div>
 79 |         )}
 80 |         <div className="sheet">
 81 |           <h2>Name: {name}</h2>
 82 |           <h2>Background: {background}</h2>
 83 |         </div>
 84 |         <button
 85 |           onClick={() => {
 86 |             setName(randomName())
 87 |             setBackground(randomBackground())
 88 |           }}
 89 |         >
 90 |           Do it all for me instead
 91 |         </button>
 92 |       </div>
 93 |       <style jsx>{`
 94 |         .App {
 95 |           width: 100vw;
 96 |           height: 100vh;
 97 |           font-family: sans-serif;
 98 |           text-align: center;
 99 |         }
100 | 
101 |         .App.darkmode {
102 |           background: black;
103 |           color: white;
104 |         }
105 | 
106 |         button,
107 |         input,
108 |         select {
109 |           margin: 10px;
110 |           padding: 5px;
111 |           background: white;
112 |           border: 3px solid black;
113 |           color: black;
114 |           font-size: 20px;
115 |         }
116 | 
117 |         input {
118 |           width: 250px;
119 |         }
120 | 
121 |         .darkmode button,
122 |         .darkmode input,
123 |         .darkmode select {
124 |           background: black;
125 |           border: 3px solid white;
126 |           color: white;
127 |         }
128 | 
129 |         .error {
130 |           color: red;
131 |         }
132 | 
133 |         .sheet {
134 |           margin: 5px auto;
135 |           max-width: 400px;
136 |           text-align: left;
137 |         }
138 | 
139 |         [data-reach-combobox-popover] {
140 |           font-family: sans-serif;
141 |         }
142 | 
143 |         .darkmode[data-reach-combobox-popover] {
144 |           background: black;
145 |           color: white;
146 |         }
147 | 
148 |         [data-reach-combobox-option]:hover {
149 |           background: red;
150 |         }
151 |       `}</style>
152 |     </>
153 |   )
154 | }
155 |

--------------------------------------------------------------------------------
/components/Counter.final.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | export default function Counter() {
 4 |   const [count, setCount] = useState(1)
 5 | 
 6 |   const handleAdd = () => setCount(count + 1)
 7 |   const handleSubtract = () => setCount(count - 1)
 8 | 
 9 |   return (
10 |     <div className="counter">
11 |       <button onClick={handleAdd}>+</button>
12 |       <div>{count}</div>
13 |       <button onClick={handleSubtract}>-</button>
14 |     </div>
15 |   )
16 | }
17 |

--------------------------------------------------------------------------------
/components/Counter.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | const Button = ({ children, ...props }) => {
 4 |   return <button {...props}>{children}</button>
 5 | }
 6 | 
 7 | export default function Counter() {
 8 |   let count = 0
 9 | 
10 |   return <div>Let's count: {count} </div>
11 | }
12 |

--------------------------------------------------------------------------------
/components/CounterInput.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | export default function Counter() {
 4 |   const [count, setCount] = useState(1)
 5 | 
 6 |   const handleAdd = () => setCount(count + 1)
 7 |   const handleSubtract = () => setCount(count - 1)
 8 | 
 9 |   return (
10 |     <div className="counter">
11 |       <button onClick={handleSubtract}>-</button>
12 |       <input type="text" aria-label="count" defaultValue={count} />
13 |       <button onClick={handleAdd}>+</button>
14 |     </div>
15 |   )
16 | }
17 |

--------------------------------------------------------------------------------
/components/DatePicker.final.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, createContext } from 'react'
 2 | 
 3 | const DateFieldsContext = createContext()
 4 | 
 5 | export default function DateFields({ children, value, onChange }) {
 6 |   let date = value
 7 |   return (
 8 |     <div>
 9 |       <DateFieldsContext.Provider value={{ date, onChange }}>
10 |         {children}
11 |       </DateFieldsContext.Provider>
12 |       <style jsx>{`
13 |         div {
14 |           position: absolute;
15 |           top: 50%;
16 |           left: 50%;
17 |           transform: translate(-50%, -50%);
18 |           color: #646f74;
19 |         }
20 |       `}</style>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export function DayField(props) {
26 |   const { date, onChange } = useContext(DateFieldsContext)
27 |   const value = date.getDate()
28 |   const handleChange = (event) => {
29 |     const newDate = new Date(date.getTime())
30 |     newDate.setDate(parseInt(event.target.value))
31 |     onChange(newDate)
32 |   }
33 | 
34 |   return (
35 |     <select value={value} onChange={handleChange}>
36 |       {Array.from({ length: 31 }).map((_, index) => (
37 |         <option key={index} value={index + 1}>
38 |           {index + 1}
39 |         </option>
40 |       ))}
41 |     </select>
42 |   )
43 | }
44 | 
45 | export function MonthField(props) {
46 |   const { date, onChange } = useContext(DateFieldsContext)
47 |   const month = date.getMonth()
48 |   const handleChange = (event) => {
49 |     const newDate = new Date(date.getTime())
50 |     newDate.setMonth(parseInt(event.target.value))
51 |     onChange(newDate)
52 |   }
53 | 
54 |   return (
55 |     <select value={month} onChange={handleChange}>
56 |       {Array.from({ length: 12 }).map((_, index) => (
57 |         <option key={index} value={index + 1}>
58 |           {index + 1}
59 |         </option>
60 |       ))}
61 |     </select>
62 |   )
63 | }
64 | 
65 | export function YearField(props) {
66 |   const { date, onChange } = useContext(DateFieldsContext)
67 |   const { start, end } = props
68 |   const years = Array.from({
69 |     length: end - start + 1,
70 |   }).map((_, index) => index + start)
71 |   const handleChange = (event) => {
72 |     const newDate = new Date(date.getTime())
73 |     newDate.setYear(parseInt(event.target.value), 1)
74 |     onChange(newDate)
75 |   }
76 | 
77 |   return (
78 |     <select value={date.getFullYear()} onChange={handleChange}>
79 |       {years.map((year) => (
80 |         <option key={year}>{year}</option>
81 |       ))}
82 |     </select>
83 |   )
84 | }
85 |

--------------------------------------------------------------------------------
/components/DatePicker.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, createContext } from 'react'
  2 | 
  3 | // Right now in the file 4-date-picker.js, we call these components with:
  4 | // <DateFields
  5 | //   value={...}
  6 | //   start={...}
  7 | //   end={...}
  8 | //   onSelect={...}
  9 | // />
 10 | 
 11 | // We want to change it to:
 12 | // <DateFields value={startDate} onChange={setStartDate}>
 13 | //  <MonthField aria-label="Start Month" />
 14 | //  <DayField aria-label="Start Day" />
 15 | //  <YearField start={2018} end={2019} aria-label="Start year" />
 16 | // </DateFields>
 17 | 
 18 | // The tasks:
 19 | // 1) Edit 4-date-picker.js to stop rendering the individual components
 20 | // in DateFields and render children instead
 21 | // 2) Provide Context in DateFields
 22 | // 3) Use the Context in MonthField, DayField, and YearField.
 23 | 
 24 | export default function DateFields({ start, end, value, onChange }) {
 25 |   return (
 26 |     <div>
 27 |       <MonthField date={value} onChange={onChange} />/
 28 |       <DayField date={value} onChange={onChange} />/
 29 |       <YearField date={value} onChange={onChange} start={start} end={end} />
 30 |       <style jsx>{`
 31 |         div {
 32 |           position: absolute;
 33 |           top: 50%;
 34 |           left: 50%;
 35 |           transform: translate(-50%, -50%);
 36 |           color: #646f74;
 37 |         }
 38 |       `}</style>
 39 |     </div>
 40 |   )
 41 | }
 42 | 
 43 | export function DayField(props) {
 44 |   const { date, onChange } = props
 45 |   const value = date.getDate()
 46 |   const handleChange = (event) => {
 47 |     const newDate = new Date(date.getTime())
 48 |     newDate.setDate(parseInt(event.target.value))
 49 |     onChange(newDate)
 50 |   }
 51 | 
 52 |   return (
 53 |     <select value={value} onChange={handleChange}>
 54 |       {Array.from({ length: 31 }).map((_, index) => (
 55 |         <option key={index} value={index + 1}>
 56 |           {index + 1}
 57 |         </option>
 58 |       ))}
 59 |     </select>
 60 |   )
 61 | }
 62 | 
 63 | export function MonthField(props) {
 64 |   const { date, onChange } = props
 65 |   const month = date.getMonth()
 66 |   const handleChange = (event) => {
 67 |     const newDate = new Date(date.getTime())
 68 |     newDate.setMonth(parseInt(event.target.value))
 69 |     onChange(newDate)
 70 |   }
 71 | 
 72 |   return (
 73 |     <select value={month} onChange={handleChange}>
 74 |       {Array.from({ length: 12 }).map((_, index) => (
 75 |         <option key={index} value={index + 1}>
 76 |           {index + 1}
 77 |         </option>
 78 |       ))}
 79 |     </select>
 80 |   )
 81 | }
 82 | 
 83 | export function YearField(props) {
 84 |   const { date, onChange, start, end } = props
 85 |   const years = Array.from({ length: end - start + 1 }).map(
 86 |     (_, index) => index + start
 87 |   )
 88 |   const handleChange = (event) => {
 89 |     const newDate = new Date(date.getTime())
 90 |     newDate.setYear(parseInt(event.target.value), 1)
 91 |     onChange(newDate)
 92 |   }
 93 | 
 94 |   return (
 95 |     <select value={date.getFullYear()} onChange={handleChange}>
 96 |       {years.map((year) => (
 97 |         <option key={year}>{year}</option>
 98 |       ))}
 99 |     </select>
100 |   )
101 | }
102 |

--------------------------------------------------------------------------------
/components/Description.js:
--------------------------------------------------------------------------------
 1 | function Description({ city }) {
 2 |   const data = {
 3 |     paris:
 4 |       "Paris is the capital and most populous city of France, with a population of 2,148,271 residents. Since the 17th century, Paris has been one of Europe's major centres of finance, diplomacy, commerce, fashion, science and the arts.",
 5 |     lech:
 6 |       'Lech am Arlberg is a mountain village and an exclusive ski resort in the Bludenz district in the Austrian state of Vorarlberg on the banks of the river Lech.',
 7 |     madrid:
 8 |       'Madrid is the capital and most populous city of Spain. As the capital city of Spain, seat of government, and residence of the Spanish monarch, Madrid is also the political, economic and cultural centre of the country.',
 9 |   }
10 | 
11 |   return <div>{data[city]}</div>
12 | }
13 | 
14 | export default Description
15 |

--------------------------------------------------------------------------------
/components/EffectExample.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | // Good example API to practice with:
 4 | // https://api.github.com/users/username/repos
 5 | 
 6 | // Good non-API example hook:
 7 | function useMedia(query) {
 8 |   const [matches, setMatches] = useState(window.matchMedia(query).matches)
 9 | 
10 |   useEffect(() => {
11 |     const media = window.matchMedia(query)
12 |     if (media.matches !== matches) {
13 |       setMatches(media.matches)
14 |     }
15 |     const listener = () => {
16 |       setMatches(media.matches)
17 |     }
18 |     media.addListener(listener)
19 |     return () => media.removeListener(listener)
20 |   }, [matches, query])
21 | 
22 |   return matches
23 | }
24 | 
25 | export default function EffectExample() {
26 |   return (
27 |     <>
28 |       <div>Look at the code to look at the examples! EffectExample.js :)</div>
29 |     </>
30 |   )
31 | }
32 |

--------------------------------------------------------------------------------
/components/Pokemon.final.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | export default function Pokemon() {
 4 |   const [pokémon, setPokémon] = useState('pikachu')
 5 |   const [img, setImg] = useState(null)
 6 |   const [error, setError] = useState(null)
 7 | 
 8 |   useEffect(() => {
 9 |     let isCurrent = true
10 |     fetch(`https://pokeapi.co/api/v2/pokemon/${pokémon}/`)
11 |       .then((res) => res.json())
12 |       .then((res) => {
13 |         if (isCurrent) {
14 |           setImg(res.sprites.front_default)
15 |         }
16 |       })
17 |       .catch((error) => {
18 |         setError(error)
19 |       })
20 |     return () => {
21 |       isCurrent = false
22 |     }
23 |   }, [pokémon])
24 | 
25 |   return (
26 |     <>
27 |       <div className="pokemon">
28 |         <div>
29 |           <input onChange={(e) => setPokémon(e.target.value)} defaultValue={pokémon} type="text" />
30 |         </div>
31 |         <span>Hello, {pokémon}!</span>
32 |         {img !== null && <img src={img} />}
33 |       </div>
34 | 
35 |       <style jsx>
36 |         {`
37 |           span {
38 |             text-transform: capitalize;
39 |           }
40 | 
41 |           .pokemon {
42 |             font-family: 'Arial', sans-serif;
43 |             font-size: 20px;
44 |             position: relative;
45 |             margin: 20px auto;
46 |             width: 400px;
47 |             height: 400px;
48 |             border: 10px solid #282828;
49 |             border-radius: 50%;
50 |             overflow: hidden;
51 |             text-align: center;
52 |           }
53 | 
54 |           .pokemon div {
55 |             display: flex;
56 |             align-items: center;
57 |             margin-bottom: 40px;
58 |             background: #d5615e;
59 |             height: 50%;
60 |           }
61 |           .pokemon input {
62 |             margin: auto;
63 |             padding: 5px;
64 |             display: block;
65 |             border: 3px solid #282828;
66 |             border-radius: 10px;
67 |             font-size: 20px;
68 |           }
69 |           .pokemon input:focus {
70 |             outline: 3px dashed #282828;
71 |           }
72 | 
73 |           .pokemon span {
74 |             text-transform: capitalize;
75 |           }
76 | 
77 |           .pokemon img {
78 |             margin: auto;
79 |             display: block;
80 |           }
81 |         `}
82 |       </style>
83 |     </>
84 |   )
85 | }
86 |

--------------------------------------------------------------------------------
/components/Pokemon.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | export default function Pokemon() {
 4 |   const [pokémon, setPokémon] = useState('pikachu')
 5 | 
 6 |   return (
 7 |     <>
 8 |       <div>
 9 |         <div>
10 |           <input onChange={(e) => setPokémon(e.target.value)} defaultValue={pokémon} type="text" />
11 |         </div>
12 |         <span>Hello, {pokémon}!</span>
13 |       </div>
14 | 
15 |       <style jsx>
16 |         {`
17 |           body {
18 |             margin: 0;
19 |             font-family: 'Arial', sans-serif;
20 |             -webkit-font-smoothing: antialiased;
21 |             -moz-osx-font-smoothing: grayscale;
22 |             font-size: 20px;
23 |           }
24 | 
25 |           .pokemon {
26 |             position: relative;
27 |             margin: 20px auto;
28 |             width: 400px;
29 |             height: 400px;
30 |             border: 10px solid #282828;
31 |             border-radius: 50%;
32 |             overflow: hidden;
33 |             text-align: center;
34 |           }
35 | 
36 |           .pokemon div {
37 |             display: flex;
38 |             align-items: center;
39 |             margin-bottom: 40px;
40 |             background: #d5615e;
41 |             height: 50%;
42 |           }
43 |           .pokemon input {
44 |             margin: auto;
45 |             padding: 5px;
46 |             display: block;
47 |             border: 3px solid #282828;
48 |             border-radius: 10px;
49 |             font-size: 20px;
50 |           }
51 |           .pokemon input:focus {
52 |             outline: 3px dashed #282828;
53 |           }
54 | 
55 |           .pokemon span {
56 |             text-transform: capitalize;
57 |           }
58 | 
59 |           .pokemon img {
60 |             margin: auto;
61 |             display: block;
62 |           }
63 |         `}
64 |       </style>
65 |     </>
66 |   )
67 | }
68 |

--------------------------------------------------------------------------------
/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import { useState, useReducer } from 'react'
 2 | 
 3 | // Your task is to convert the useStates here into useReducer!
 4 | 
 5 | export default function Todo() {
 6 |   const [items, setItems] = useState([])
 7 |   const [newItem, setNewItem] = useState('')
 8 | 
 9 |   const addItem = (thingToAdd) => {
10 |     setItems(items.concat(thingToAdd))
11 |   }
12 | 
13 |   const removeItem = (thingToRemove) => {
14 |     setItems(
15 |       items.filter((item) => {
16 |         return item !== thingToRemove
17 |       })
18 |     )
19 |   }
20 | 
21 |   return (
22 |     <>
23 |       <div className="todo">
24 |         <h1>To Do List</h1>
25 |         <form
26 |           onSubmit={(event) => {
27 |             event.preventDefault()
28 |             addItem(newItem)
29 |             setNewItem('')
30 |           }}
31 |         >
32 |           <input
33 |             type="text"
34 |             value={newItem}
35 |             onChange={(event) => {
36 |               setNewItem(event.target.value)
37 |             }}
38 |           />
39 |         </form>
40 |         <ul>
41 |           {items.map((item) => {
42 |             return (
43 |               <li>
44 |                 {item}{' '}
45 |                 <button
46 |                   onClick={() => {
47 |                     removeItem(item)
48 |                   }}
49 |                 >
50 |                   x
51 |                 </button>
52 |               </li>
53 |             )
54 |           })}
55 |         </ul>
56 |       </div>
57 |       <style jsx>{`
58 |         .todo {
59 |           width: 100vw;
60 |           height: 100vh;
61 |           font-family: sans-serif;
62 |           text-align: center;
63 |         }
64 | 
65 |         .todo ul {
66 |           padding: 0;
67 |           list-style-type: none;
68 |         }
69 |       `}</style>
70 |     </>
71 |   )
72 | }
73 |

--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": "./",
4 |     "paths": {
5 |       "@components/*": ["components/*"]
6 |     }
7 |   }
8 | }
9 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hooks-workshop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "friendly-words": "^1.1.10",
12 |     "next": "9.4.2",
13 |     "react": "16.13.1",
14 |     "react-dom": "16.13.1"
15 |   },
16 |   "prettier": {
17 |     "printWidth": 80,
18 |     "semi": false,
19 |     "singleQuote": true,
20 |     "tabWidth": 2
21 |   }
22 | }
23 |

--------------------------------------------------------------------------------
/pages/exercises/1-badges.js:
--------------------------------------------------------------------------------
1 | import BadgeList from '@components/Badge'
2 | 
3 | export default function Badges() {
4 |   return <BadgeList />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/exercises/2-character-counter.js:
--------------------------------------------------------------------------------
1 | import CharacterLimit from '@components/CharacterLimit.js'
2 | 
3 | export default function Badges() {
4 |   return <CharacterLimit />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/exercises/3-effect-examples.js:
--------------------------------------------------------------------------------
1 | import EffectExample from '@components/EffectExample.js'
2 | 
3 | export default function Badges() {
4 |   return <EffectExample />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/exercises/4-date-picker.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import DateFields from '@components/DatePicker.js'
3 | 
4 | export default function Dates() {
5 |   const [startDate, setStartDate] = useState(new Date('May 28, 2020'))
6 |   return <DateFields value={startDate} onChange={setStartDate} start={2010} end={2020} />
7 | }
8 |

--------------------------------------------------------------------------------
/pages/exercises/5-todo.js:
--------------------------------------------------------------------------------
1 | import Todo from '@components/Todo.js'
2 | 
3 | export default function TodoApp() {
4 |   return <Todo />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div className="toc">
 6 |       <h1>Welcome to the workshop!</h1>
 7 |       <div>
 8 |         Lessons: <br />
 9 |         <ul>
10 |           <li>
11 |             <Link href="/lessons/1-props-and-state">
12 |               <a>1. Props and State</a>
13 |             </Link>
14 |           </li>
15 |           <li>
16 |             <Link href="/lessons/2-controlled-components">
17 |               <a>2. Controlled Components</a>
18 |             </Link>
19 |           </li>
20 |           <li>
21 |             <Link href="/lessons/3-effects">
22 |               <a>3. Effects</a>
23 |             </Link>
24 |           </li>
25 |           <li>
26 |             <Link href="/lessons/4-compound-components">
27 |               <a>4. Compound Components</a>
28 |             </Link>
29 |           </li>
30 |           <li>
31 |             <Link href="/lessons/5-reducers">
32 |               <a>5. Reducers</a>
33 |             </Link>
34 |           </li>
35 |         </ul>
36 |       </div>
37 |       <div>
38 |         Exercises:
39 |         <br />
40 |         <ul>
41 |           <li>
42 |             <Link href="/exercises/1-badges">
43 |               <a>1. Badge</a>
44 |             </Link>
45 |           </li>
46 |           <li>
47 |             <Link href="/exercises/2-character-counter">
48 |               <a>2. Character Counter Input</a>
49 |             </Link>
50 |           </li>
51 |           <li>
52 |             <Link href="/exercises/3-effect-examples">
53 |               <a>3. More Effect Examples (no exercise)</a>
54 |             </Link>
55 |           </li>
56 |           <li>
57 |             <Link href="/exercises/4-date-picker">
58 |               <a>4. Date Picker</a>
59 |             </Link>
60 |           </li>
61 |           <li>
62 |             <Link href="/exercises/5-todo">
63 |               <a>5. To Do</a>
64 |             </Link>
65 |           </li>
66 |         </ul>
67 |       </div>
68 |       <style jsx>{`
69 |         .toc {
70 |           font-family: 'Helvetica', 'Arial', sans-serif;
71 |         }
72 |       `}</style>
73 |     </div>
74 |   )
75 | }
76 |

--------------------------------------------------------------------------------
/pages/lessons/1-props-and-state.js:
--------------------------------------------------------------------------------
1 | // import Counter from '@components/Counter'
2 | 
3 | export default function PropsState() {
4 |   return null
5 | }
6 |

--------------------------------------------------------------------------------
/pages/lessons/2-controlled-components.js:
--------------------------------------------------------------------------------
1 | import CounterInput from '@components/CounterInput'
2 | 
3 | export default function Controlled() {
4 |   return <CounterInput />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/lessons/3-effects.js:
--------------------------------------------------------------------------------
1 | import Pokemon from '@components/Pokemon'
2 | 
3 | export default function Controlled() {
4 |   return <Pokemon />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/lessons/4-compound-components.js:
--------------------------------------------------------------------------------
1 | import Accordion from '@components/Accordion'
2 | 
3 | export default function Compound() {
4 |   return <Accordion />
5 | }
6 |

--------------------------------------------------------------------------------
/pages/lessons/5-reducers.js:
--------------------------------------------------------------------------------
1 | import CharacterSheet from '@components/CharacterSheet'
2 | 
3 | export default function Reducers() {
4 |   return <CharacterSheet />
5 | }
6 |

--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/react-hooks-workshop-2020/9002afd9d1c87f5ad0da9dcf87eaa91baab3879e/public/favicon.ico

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

Oh boy, statuses!

Oh boy, statuses!