` to connect inputs:
75 |
76 | ```js
77 | const App = () => {
78 | return (
79 |
80 | Giphy Search!
81 |
82 | This is a paragraph of text written in React
83 |
84 |
85 | Input label
86 |
88 |
89 | )
90 | }
91 | ```
92 |
93 | There is a slightly different syntax to pass variables to props:
94 |
95 | ```js
96 | const App = () => {
97 | const contents = 'This is a paragraph of text written in React'
98 | const inputId = 'input'
99 | const numItems = 3
100 |
101 | return (
102 |
103 | Giphy Search!
104 | {contents}
105 |
106 | Input label
107 |
113 |
114 | )
115 | }
116 | ```
117 |
118 | Lastly, add inline styles to some elements by passing an object to the `style` prop:
119 |
120 | ```js
121 | const App = () => {
122 | return (
123 |
124 | Giphy Search!
125 |
126 | This is a paragraph of text written in React
127 |
128 |
129 | Input label
130 |
137 |
138 | )
139 | }
140 | ```
141 |
142 | ## 💡 Exercises
143 |
144 | - Create two `const` variables, `GIPHY_SRC` ([this url](https://media.giphy.com/media/l41lXGxBwXYFcJoJ2/giphy.gif)) and `GIPHY_LINK` ([this url](https://gph.is/1IOrWO2))
145 | - Render an image with its `src` as `GIPHY_SRC`
146 | - Link the image to its page using `GIPHY_LINK` and open a new window
147 | - 🤓 **BONUS:** Render a ``
148 | - Create
149 | ```js
150 | const attrs = {
151 | id: 'main-text',
152 | className: 'text-center',
153 | style: { color: 'blue' },
154 | children: 'Hello',
155 | }
156 | ```
157 | - Add everything in `attrs` to the `
` **without** adding them individually
158 | - Remove all the practice JSX, leaving the skeleton of our Giphy search app:
159 | ```js
160 | const App = () => {
161 | return (
162 |
163 | Giphy Search!
164 |
165 | )
166 | }
167 | ```
168 |
169 | ## 🧠 Elaboration & Feedback
170 |
171 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+1+-+JSX). It will help seal in what you've learned.
172 |
173 | ## 👉🏾 Next Step
174 |
175 | Go to [Step 2 - Query Field](../02-query-field/).
176 |
177 | ## 📕 Resources
178 |
179 | - [Rendering Elements](https://reactjs.org/docs/rendering-elements.html)
180 | - [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
181 | - [JSX in Depth](https://reactjs.org/docs/jsx-in-depth.html)
182 | - [React without JSX](https://reactjs.org/docs/react-without-jsx.html)
183 | - [Babel REPL](http://babeljs.io/repl/)
184 | - [Inline Styles](https://reactjs.org/docs/dom-elements.html#style)
185 |
186 | ## ❓ Questions
187 |
188 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
189 |
--------------------------------------------------------------------------------
/src/01-jsx/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/02-query-field/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | const App = () => {
4 | const [inputValue, setInputValue] = useState('')
5 |
6 | return (
7 |
8 | Giphy Search!
9 |
10 |
20 |
21 | )
22 | }
23 |
24 | export default App
25 |
--------------------------------------------------------------------------------
/src/02-query-field/README.md:
--------------------------------------------------------------------------------
1 | # Step 2 - Query Field
2 |
3 | The goal of this step is learning how to deal with forms. HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. Regular HTML forms _do_ work in React, but in most cases, it's convenient to have React keep track of the input that the user has entered into a form. The standard way to achieve this is with a technique called ["controlled components"](https://reactjs.org/docs/forms.html#controlled-components).
4 |
5 | [Handling events](https://reactjs.org/docs/handling-events.html) within React elements is very similar to handling events on DOM elements. Event handlers will be passed instances of [`SyntheticEvent`](https://reactjs.org/docs/events.html), a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event (including`stopPropagation()` and `preventDefault()`), except the events work identically across all browsers!
6 |
7 | 🏅 Ultimately, the goal of this step is to keep the current value of the search query field in UI state.
8 |
9 | If you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
10 |
11 |
12 | Help! I didn't finish the previous step! 🚨
35 |
36 | ## 🐇 Jump Around
37 |
38 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
39 |
40 | ## ⭐ Concepts
41 |
42 | - Maintaining UI state with the `useState` hook
43 | - Handling user interaction
44 | - Handling HTML form elements
45 |
46 | ## 📝 Tasks
47 |
48 | Add a search form with a query field:
49 |
50 | ```js
51 | const App = () => {
52 | return (
53 |
54 | Giphy Search!
55 |
56 |
59 |
60 | )
61 | }
62 | ```
63 |
64 | As of now, the DOM is maintaining the state of the input fields; React has no idea what the values of the fields are. They are currently ["uncontrolled components"](https://reactjs.org/docs/uncontrolled-components.html). We want to make them "controlled components" so we can keep track of their state within the app.
65 |
66 | Using the [`useState` hook](https://reactjs.org/docs/hooks-state.html), add a new state variable for the query field and pass it as the `value` of the `
77 | Giphy Search!
78 |
79 |
90 |
91 | )
92 | }
93 | ```
94 |
95 | > NOTE: Be sure to import `useState` from the `react` package at the top.
96 |
97 | ## 💡 Exercises
98 |
99 | - Use the React Developer Tools to watch the `state` of `App` update as you type into the fields
100 | - Add a `
` below that will display "You are typing **[inputValue]** in the field." (with the displayed value in **bold**)
101 | - 🤓 **BONUS:** Add a button that when clicked will toggle the text in the `
` between being upper-cased and not
102 | - 🔑 _HINT:_ You will need to add a second `useState`
103 |
104 | ## 🧠 Elaboration & Feedback
105 |
106 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+2+-+Query+Field). It will help seal in what you've learned.
107 |
108 | ## 👉🏾 Next Step
109 |
110 | Go to [Step 3 - API](../03-api/).
111 |
112 | ## 📕 Resources
113 |
114 | - [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
115 | - [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
116 | - [Why React hooks?](https://tylermcginnis.com/why-react-hooks/)
117 | - [Handling Events](https://reactjs.org/docs/handling-events.html)
118 | - [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)
119 | - [`SyntheticEvent`](https://reactjs.org/docs/events.html)
120 | - [Forms](https://reactjs.org/docs/forms.html)
121 | - [DOM Elements](https://reactjs.org/docs/dom-elements.html)
122 |
123 | ## ❓ Questions
124 |
125 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
126 |
--------------------------------------------------------------------------------
/src/02-query-field/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/03-api/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 |
4 | const App = () => {
5 | const [inputValue, setInputValue] = useState('')
6 | const [results, setResults] = useState([])
7 |
8 | useEffect(() => {
9 | const fetchResults = async () => {
10 | try {
11 | const apiResponse = await getResults({ searchQuery: inputValue })
12 |
13 | setResults(apiResponse.results)
14 | } catch (err) {
15 | console.error(err)
16 | }
17 | }
18 |
19 | fetchResults()
20 | }, [inputValue])
21 |
22 | console.log({ inputValue, results })
23 |
24 | return (
25 |
26 | Giphy Search!
27 |
28 |
38 |
39 | )
40 | }
41 |
42 | export default App
43 |
--------------------------------------------------------------------------------
/src/03-api/README.md:
--------------------------------------------------------------------------------
1 | # Step 3 - API
2 |
3 | 🏅 The goal of this step is to retrieve a list of giphy images based on the query typed in the query input field from [Step 2](../02-query-field). We'll do this by using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [ES6 Promises](http://www.benmvp.com/learning-es6-promises/) to retrieve the data from the [Giphy API](https://developers.giphy.com/docs/api/endpoint/), and then store the data in app state.
4 |
5 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
6 |
7 |
8 | Help! I didn't finish the previous step! 🚨
31 |
32 | ## 🐇 Jump Around
33 |
34 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
35 |
36 | ## ⭐ Concepts
37 |
38 | - Making API calls with the `useEffect` hook
39 | - Using Promises & `async`/`await`
40 | - Maintaining app state with the `useState` hook
41 |
42 | ## 📝 Tasks
43 |
44 | Import the `getResults` API helper along with `useEffect` from React. Then call `getResults()` within `useEffect()`, passing in the value of the input field:
45 |
46 | ```js
47 | import React, { useState, useEffect } from 'react'
48 | import { getResults } from './api'
49 | // 👆🏾 new imports
50 |
51 | const App = () => {
52 | const [inputValue, setInputValue] = useState('')
53 |
54 | // 👇🏾 call API w/ useEffect
55 | useEffect(() => {
56 | getResults({ searchQuery: inputValue })
57 | }, [inputValue])
58 |
59 | return (
60 |
61 | Giphy Search!
62 |
63 |
73 |
74 | )
75 | }
76 |
77 | export default App
78 | ```
79 |
80 | > NOTE: Be sure to import `useEffect` from the `react` package.
81 |
82 | Check the Network panel of your Developer Tools to see that it is making an API call for every character typed within the query input field. The path to interactivity has begun.
83 |
84 | In order to render the giphy images we need to store the results in state, once again leveraging `useState`:
85 |
86 | ```js
87 | const [inputValue, setInputValue] = useState('')
88 | const [results, setResults] = useState([])
89 | // 👆🏾 new state variable to contain the search results
90 |
91 | useEffect(() => {
92 | // resolve the promise to get the results 👇🏾
93 | getResults({ searchQuery: inputValue }).then((apiResponse) =>
94 | setResults(apiResponse.results),
95 | )
96 | }, [inputValue])
97 |
98 | // 👇🏾 logging the results for now
99 | console.log({ inputValue, results })
100 | ```
101 |
102 | If you prefer to use [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) over Promises, you can do that too:
103 |
104 | ```js
105 | useEffect(() => {
106 | const fetchResults = async () => {
107 | // add async 👆🏾
108 | try {
109 | // 👆🏾 try above, 👇🏾 await below
110 | const apiResponse = await getResults({ searchQuery: inputValue })
111 |
112 | setResults(apiResponse.results)
113 | } catch (err) {
114 | console.error(err)
115 | }
116 | }
117 |
118 | fetchResults()
119 | }, [inputValue])
120 |
121 | console.log({ inputValue, results })
122 | ```
123 |
124 | ## 💡 Exercises
125 |
126 | - Type in different search queries and verify the results by digging into the log and navigating to URLs
127 | - Take a look at [`api.js`](./api.js) and see what the API helper does, particularly the other search filters it supports
128 | - Pass in hard-coded values for the other search filters to `getResults()` and see how the logged data changes
129 |
130 | ## 🧠 Elaboration & Feedback
131 |
132 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+3+-+API). It will help seal in what you've learned.
133 |
134 | ## 👉🏾 Next Step
135 |
136 | Go to [Step 4 - Lists](../04-lists/).
137 |
138 | ## 📕 Resources
139 |
140 | - [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
141 | - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) & Github's [`fetch` polyfill](https://github.com/github/fetch)
142 | - [Learning ES6: Promises](http://www.benmvp.com/learning-es6-promises/)
143 | - [Async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
144 | - [HTTP Methods](http://restfulapi.net/http-methods/)
145 | - [Postman](https://www.getpostman.com/)
146 |
147 | ## ❓ Questions
148 |
149 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
150 |
--------------------------------------------------------------------------------
/src/03-api/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/04-lists/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 |
4 | const LIMITS = [6, 12, 18, 24, 30]
5 |
6 | const App = () => {
7 | const [inputValue, setInputValue] = useState('')
8 | const [searchLimit, setSearchLimit] = useState(12)
9 | const [results, setResults] = useState([])
10 |
11 | useEffect(() => {
12 | const fetchResults = async () => {
13 | try {
14 | const apiResponse = await getResults({
15 | searchQuery: inputValue,
16 | limit: searchLimit,
17 | })
18 |
19 | setResults(apiResponse.results)
20 | } catch (err) {
21 | console.error(err)
22 | }
23 | }
24 |
25 | fetchResults()
26 | }, [inputValue, searchLimit])
27 |
28 | return (
29 |
30 | Giphy Search!
31 |
32 |
55 |
56 | {results.length > 0 && (
57 |
58 | {results.map((item) => (
59 |
78 | ))}
79 |
80 | )}
81 |
82 | )
83 | }
84 |
85 | export default App
86 |
--------------------------------------------------------------------------------
/src/04-lists/README.md:
--------------------------------------------------------------------------------
1 | # Step 4 - Lists
2 |
3 | 🏅 The goal of this step is to practice transforming lists of data into lists of components which can be included in JSX. We'll take the `results` data we have in state in convert it to visible UI!
4 |
5 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
6 |
7 |
8 | Help! I didn't finish the previous step! 🚨
31 |
32 | ## 🐇 Jump Around
33 |
34 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
35 |
36 | ## ⭐ Concepts
37 |
38 | - Rendering dynamic lists of data
39 | - Handling special `key` prop
40 | - Conditionally rendering components
41 |
42 | ## 📝 Tasks
43 |
44 | We need to convert the array of results into an array of components so that we can render the giphy images. There are several ways, but the most common approach is to use [`Array.prototype.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map):
45 |
46 | ```js
47 | return (
48 |
49 | Giphy Search!
50 |
51 |
61 |
62 |
63 | {results.map((item) => (
64 |
73 |
74 | )
75 | ```
76 |
77 | > NOTE: Be sure to include the [`key` prop](https://reactjs.org/docs/lists-and-keys.html) on the `
` elements.
78 |
79 | We need to only render the `` when there are results. There are a number of different ways to [conditionally render JSX](https://reactjs.org/docs/conditional-rendering.html). The most common approach is:
80 |
81 | ```js
82 | return (
83 |
84 | Giphy Search!
85 |
86 |
96 |
97 | {results.length > 0 && ( // 👈🏾 inline if with &&
98 |
99 | {results.map((item) => (
100 |
109 | )}
110 |
111 | )
112 | ```
113 |
114 | Let's add some additional markup and classes around the `
120 | {results.map((item) => (
121 |
135 | ))}
136 |
137 | )
138 | }
139 | ```
140 |
141 | > NOTE: Be sure to move the `key` prop to the containing `` within the `.map()`.
142 |
143 | ## 💡 Exercises
144 |
145 | - Make the displayed title (`item.title`) link to the Giphy URL (`item.url`)
146 | - Display the Giphy Rating (`item.rating`)
147 | - Add a `` to the search form to change the number of Giphy images displayed (the `limit` search param)
148 | - Map over a `const LIMITS = [6, 12, 18, 24, 30]` constant to generate the `` tags within the ``
149 | - The props should be ` { ... }}>`
150 | - The default should remain `12`
151 | - Open the Developer Tools, on the Elements tab, and monitor how the markup changes when changing limits
152 |
153 | ## 🧠 Elaboration & Feedback
154 |
155 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+4+-+Lists). It will help seal in what you've learned.
156 |
157 | ## 👉🏾 Next Step
158 |
159 | Go to [Step 5 - Form Submit](../05-form-submit/).
160 |
161 | ## 📕 Resources
162 |
163 | - [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)
164 | - [Conditional Rendering](https://reactjs.org/docs/conditional-rendering.html)
165 | - [`Array.prototype.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
166 |
167 | ## ❓ Questions
168 |
169 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
170 |
--------------------------------------------------------------------------------
/src/04-lists/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/05-form-submit/App.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const App = () => {
14 | const [inputValue, setInputValue] = useState('')
15 | const [searchQuery, setSearchQuery] = useState('')
16 | const [showInstant, setShowInstant] = useState(false)
17 | const [searchRating, setSearchRating] = useState('')
18 | const [searchLimit, setSearchLimit] = useState(12)
19 | const realSearchQuery = showInstant ? inputValue : searchQuery
20 | const [results, setResults] = useState([])
21 |
22 | useEffect(() => {
23 | const fetchResults = async () => {
24 | try {
25 | const apiResponse = await getResults({
26 | searchQuery: realSearchQuery,
27 | limit: searchLimit,
28 | rating: searchRating,
29 | })
30 |
31 | setResults(apiResponse.results)
32 | } catch (err) {
33 | console.error(err)
34 | }
35 | }
36 |
37 | fetchResults()
38 | }, [realSearchQuery, searchRating, searchLimit])
39 |
40 | const handleSubmit = (e) => {
41 | e.preventDefault()
42 | setSearchQuery(inputValue)
43 | }
44 |
45 | return (
46 |
47 | Giphy Search!
48 |
49 |
112 |
113 | {results.length > 0 && (
114 |
115 | {results.map((item) => (
116 |
135 | ))}
136 |
137 | )}
138 |
139 | )
140 | }
141 |
142 | export default App
143 |
--------------------------------------------------------------------------------
/src/05-form-submit/README.md:
--------------------------------------------------------------------------------
1 | # Step 5 - Form Submit
2 |
3 | You will notice that so far we've been getting "instant" results when typing in the search query field. This means that while we're typing a search query, we're getting intermediate results for word partials. In the real word, this could hammer an API unnecessarily. In addition, by the time we get the results, we've already typed the next character so the UI feels a bit jumpy.
4 |
5 | 🏅 So the goal of this step is to require submitting the search query field in order to trigger retrieval of new results.
6 |
7 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
8 |
9 |
10 | Help! I didn't finish the previous step! 🚨
33 |
34 | ## 🐇 Jump Around
35 |
36 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
37 |
38 | ## ⭐ Concepts
39 |
40 | - Handling client-side form submission
41 | - Maintaining UI state
42 | - Applying component styling with CSS classes
43 |
44 | ## 📝 Tasks
45 |
46 | Add a new state variable to maintain the submitted search query (calling it `searchQuery`):
47 |
48 | ```js
49 | const [inputValue, setInputValue] = useState('')
50 | const [searchQuery, setSearchQuery] = useState('') // 👈🏾 NEW!
51 | const [searchLimit, setSearchLimit] = useState(12)
52 | const [results, setResults] = useState([])
53 | ```
54 |
55 | Add an `onSubmit` handler to the `
203 | )
204 | }
205 | ```
206 |
207 | Back in `App.js`, we'll import the `SearchForm` component at the top of the file:
208 |
209 | ```js
210 | import React, { useState, useEffect } from 'react'
211 | import { getResults } from './api'
212 | import Results from './Results'
213 | import SearchForm from './SearchForm' // 👈🏾 new import
214 | ```
215 |
216 | And in place of the `
290 | }
291 | ```
292 |
293 | > NOTE: `SearchForm` has an `` for the number of results switcher. Normally you would use a component library like [Material-UI](https://material-ui.com/) that would have those reusable components for you.
294 |
295 | ## 💡 Exercises
296 |
297 | - From `Results`, pull out a `ResultsItem` component into `src/workshop/ResultsItem.js` with 5 props: `id`, `title`, `url`, `rating` & `previewUrl`.
298 | - Use the React Developer Tools to inspect the component hierarchy, including the props being passed to the `
8 | {items.map((item) => (
9 |
19 | )
20 | )
21 | }
22 |
23 | export default Results
24 |
--------------------------------------------------------------------------------
/src/06-components/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
4 | return (
5 |
24 | )
25 | }
26 |
27 | export default ResultsItem
28 |
--------------------------------------------------------------------------------
/src/06-components/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect } from 'react'
2 |
3 | const RATINGS = [
4 | { value: '', label: 'All' },
5 | { value: 'g', label: 'G' },
6 | { value: 'pg', label: 'PG' },
7 | { value: 'pg-13', label: 'PG-13' },
8 | { value: 'r', label: 'R' },
9 | ]
10 | const LIMITS = [6, 12, 18, 24, 30]
11 |
12 | const SearchForm = ({ onChange }) => {
13 | const [inputValue, setInputValue] = useState('')
14 | const [searchQuery, setSearchQuery] = useState('')
15 | const [showInstant, setShowInstant] = useState(false)
16 | const [searchRating, setSearchRating] = useState('')
17 | const [searchLimit, setSearchLimit] = useState(12)
18 | const realSearchQuery = showInstant ? inputValue : searchQuery
19 |
20 | useEffect(() => {
21 | onChange({
22 | searchQuery: realSearchQuery,
23 | rating: searchRating,
24 | limit: searchLimit,
25 | })
26 | }, [onChange, realSearchQuery, searchRating, searchLimit])
27 |
28 | const handleSubmit = (e) => {
29 | e.preventDefault()
30 | setSearchQuery(inputValue)
31 | }
32 |
33 | return (
34 |
97 | )
98 | }
99 |
100 | export default SearchForm
101 |
--------------------------------------------------------------------------------
/src/06-components/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/07-prop-types/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 | import Results from './Results'
4 | import SearchForm from './SearchForm'
5 |
6 | const App = () => {
7 | const [formValues, setFormValues] = useState({})
8 | const [results, setResults] = useState([])
9 |
10 | useEffect(() => {
11 | const fetchResults = async () => {
12 | try {
13 | const apiResponse = await getResults(formValues)
14 |
15 | setResults(apiResponse.results)
16 | } catch (err) {
17 | console.error(err)
18 | }
19 | }
20 |
21 | fetchResults()
22 | }, [formValues])
23 |
24 | return (
25 |
26 | Giphy Search!
27 |
28 |
35 | )
36 | }
37 |
38 | export default App
39 |
--------------------------------------------------------------------------------
/src/07-prop-types/README.md:
--------------------------------------------------------------------------------
1 | # Step 7 - Prop Types
2 |
3 | Components that accept props will define the types of props they accept. This serves two purposes:
4 |
5 | 1. Declare the public API of the component
6 | 2. Validate the props being passed in by the parent
7 |
8 | 🏅 The goal of this step is to learn how to define prop types for a component.
9 |
10 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
11 |
12 |
13 | Help! I didn't finish the previous step! 🚨
36 |
37 | ## 🐇 Jump Around
38 |
39 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
40 |
41 | ## ⭐ Concepts
42 |
43 | - Type-checking props
44 |
45 | ## 📝 Tasks
46 |
47 | Using the [`prop-types`](https://reactjs.org/docs/typechecking-with-proptypes.html) package, add a prop type in `SearchForm` for the `onChange` callback prop:
48 |
49 | ```js
50 | import React, { Fragment, useState, useEffect } from 'react'
51 | import PropTypes from 'prop-types' // 👈🏾 new import
52 |
53 | ...
54 |
55 | const SearchForm = (props) => {
56 | const { onChange } = props
57 |
58 | ...
59 | }
60 |
61 | // define types of props 👇🏾
62 | SearchForm.propTypes = {
63 | onChange: PropTypes.func.isRequired,
64 | }
65 |
66 | export default SearchForm
67 | ```
68 |
69 | Now add a prop type in `Results` for the `items` prop:
70 |
71 | ```js
72 | import React from 'react'
73 | import PropTypes from 'prop-types' // 👈🏾 new import
74 |
75 | const Results = (props) => {
76 | const { items } = props
77 |
78 | ...
79 |
80 | }
81 |
82 | // define types of props 👇🏾
83 | Results.propTypes = {
84 | items: PropTypes.arrayOf(
85 | PropTypes.shape({
86 | id: PropTypes.string.isRequired,
87 | title: PropTypes.string.isRequired,
88 | url: PropTypes.string.isRequired,
89 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
90 | previewUrl: PropTypes.string.isRequired,
91 | }),
92 | ).isRequired,
93 | }
94 |
95 | export default Results
96 | ```
97 |
98 | ## 💡 Exercises
99 |
100 | - Add make all of the props for `ResultsItem` required
101 | - Add 4 additional _optional_ props to `SearchForm`: `initialSearchQuery`, `initialShowInstant`, `initialRating` & `initialLimit`
102 | - These will set the initial values of the corresponding state variables (`useState(XXX)`)
103 | - 🔑 _HINT:_ Use [`defaultProps`](https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values) to set the default values when the props are not specified
104 | - Add some of the `initial*` props to `
9 | {items.map((item) => (
10 |
20 | )
21 | )
22 | }
23 |
24 | Results.propTypes = {
25 | items: PropTypes.arrayOf(
26 | PropTypes.shape({
27 | id: PropTypes.string.isRequired,
28 | title: PropTypes.string.isRequired,
29 | url: PropTypes.string.isRequired,
30 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
31 | previewUrl: PropTypes.string.isRequired,
32 | }),
33 | ).isRequired,
34 | }
35 |
36 | export default Results
37 |
--------------------------------------------------------------------------------
/src/07-prop-types/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
5 | return (
6 |
25 | )
26 | }
27 |
28 | ResultsItem.propTypes = {
29 | id: PropTypes.string.isRequired,
30 | title: PropTypes.string.isRequired,
31 | url: PropTypes.string.isRequired,
32 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
33 | previewUrl: PropTypes.string.isRequired,
34 | }
35 |
36 | export default ResultsItem
37 |
--------------------------------------------------------------------------------
/src/07-prop-types/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const SearchForm = ({
14 | initialLimit,
15 | initialRating,
16 | initialSearchQuery,
17 | initialShowInstant,
18 | onChange,
19 | }) => {
20 | const [inputValue, setInputValue] = useState(initialSearchQuery)
21 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
22 | const [showInstant, setShowInstant] = useState(initialShowInstant)
23 | const [searchRating, setSearchRating] = useState(initialRating)
24 | const [searchLimit, setSearchLimit] = useState(initialLimit)
25 | const realSearchQuery = showInstant ? inputValue : searchQuery
26 |
27 | useEffect(() => {
28 | onChange({
29 | searchQuery: realSearchQuery,
30 | rating: searchRating,
31 | limit: searchLimit,
32 | })
33 | }, [onChange, realSearchQuery, searchRating, searchLimit])
34 |
35 | const handleSubmit = (e) => {
36 | e.preventDefault()
37 | setSearchQuery(inputValue)
38 | }
39 |
40 | return (
41 |
104 | )
105 | }
106 |
107 | SearchForm.propTypes = {
108 | initialLimit: PropTypes.number,
109 | initialRating: PropTypes.string,
110 | initialSearchQuery: PropTypes.string,
111 | initialShowInstant: PropTypes.bool,
112 | onChange: PropTypes.func.isRequired,
113 | }
114 | SearchForm.defaultProps = {
115 | initialLimit: 12,
116 | initialRating: '',
117 | initialSearchQuery: '',
118 | initialShowInstant: false,
119 | }
120 |
121 | export default SearchForm
122 |
--------------------------------------------------------------------------------
/src/07-prop-types/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/08-search-focus/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 | import Results from './Results'
4 | import SearchForm from './SearchForm'
5 |
6 | const App = () => {
7 | const [formValues, setFormValues] = useState({})
8 | const [results, setResults] = useState([])
9 |
10 | useEffect(() => {
11 | const fetchResults = async () => {
12 | try {
13 | const apiResponse = await getResults(formValues)
14 |
15 | setResults(apiResponse.results)
16 | } catch (err) {
17 | console.error(err)
18 | }
19 | }
20 |
21 | fetchResults()
22 | }, [formValues])
23 |
24 | return (
25 |
26 | Giphy Search!
27 |
28 |
35 | )
36 | }
37 |
38 | export default App
39 |
--------------------------------------------------------------------------------
/src/08-search-focus/README.md:
--------------------------------------------------------------------------------
1 | # Step 8 - Search Focus
2 |
3 | When we submit the search form by clicking the "Search" button, the search button now becomes the focused element. But we want the focus to go back to the query field so that we can easily type a new search.
4 |
5 | By default, when we develop in React, we're never touching any actual DOM. Instead we're rendering UI that React efficiently applies to the DOM. But there are rare times where we'll need to interact with the DOM directly in order to mutate it in ways that React doesn't support.
6 |
7 | 🏅 So the goal of this step is to use this "escape hatch" in order to focus the search query imperatively.
8 |
9 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
10 |
11 |
12 | Help! I didn't finish the previous step! 🚨
35 |
36 | ## 🐇 Jump Around
37 |
38 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
39 |
40 | ## ⭐ Concepts
41 |
42 | - Interacting with the DOM directly with `useRef` hook
43 |
44 | ## 📝 Tasks
45 |
46 | In [`SearchForm.js`](./SearchForm.js), Import the `useRef` hook from `react`:
47 |
48 | ```js
49 | import React, { Fragment, useState, useEffect, useRef } from 'react' // 👈🏾 new import
50 | ```
51 |
52 | Create a ref within `SearchForm` after all of the state variables:
53 |
54 | ```js
55 | const [inputValue, setInputValue] = useState(initialSearchQuery)
56 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
57 | const [showInstant, setShowInstant] = useState(initialShowInstant)
58 | const [searchRating, setSearchRating] = useState(initialRating)
59 | const [searchLimit, setSearchLimit] = useState(initialLimit)
60 | const realSearchQuery = showInstant ? inputValue : searchQuery
61 |
62 | // new ref 👇🏾
63 | const queryFieldEl = useRef(null)
64 | ```
65 |
66 | Add the ref as the `ref` prop to the query field:
67 |
68 | ```js
69 |
12 | {items.map((item) => (
13 |
23 |
24 | {
28 | containerEl.current.scrollIntoView(true)
29 | }}
30 | >
31 | To top
32 |
33 |
34 |
35 | )
36 | )
37 | }
38 |
39 | Results.propTypes = {
40 | items: PropTypes.arrayOf(
41 | PropTypes.shape({
42 | id: PropTypes.string.isRequired,
43 | title: PropTypes.string.isRequired,
44 | url: PropTypes.string.isRequired,
45 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
46 | previewUrl: PropTypes.string.isRequired,
47 | }),
48 | ).isRequired,
49 | }
50 |
51 | export default Results
52 |
--------------------------------------------------------------------------------
/src/08-search-focus/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
5 | return (
6 |
25 | )
26 | }
27 |
28 | ResultsItem.propTypes = {
29 | id: PropTypes.string.isRequired,
30 | title: PropTypes.string.isRequired,
31 | url: PropTypes.string.isRequired,
32 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
33 | previewUrl: PropTypes.string.isRequired,
34 | }
35 |
36 | export default ResultsItem
37 |
--------------------------------------------------------------------------------
/src/08-search-focus/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const SearchForm = ({
14 | initialLimit,
15 | initialRating,
16 | initialSearchQuery,
17 | initialShowInstant,
18 | onChange,
19 | }) => {
20 | const [inputValue, setInputValue] = useState(initialSearchQuery)
21 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
22 | const [showInstant, setShowInstant] = useState(initialShowInstant)
23 | const [searchRating, setSearchRating] = useState(initialRating)
24 | const [searchLimit, setSearchLimit] = useState(initialLimit)
25 | const realSearchQuery = showInstant ? inputValue : searchQuery
26 | const queryFieldEl = useRef(null)
27 |
28 | useEffect(() => {
29 | onChange({
30 | searchQuery: realSearchQuery,
31 | rating: searchRating,
32 | limit: searchLimit,
33 | })
34 | }, [onChange, realSearchQuery, searchRating, searchLimit])
35 |
36 | const handleSubmit = (e) => {
37 | e.preventDefault()
38 | setSearchQuery(inputValue)
39 |
40 | // focus the query field after submitting
41 | // to make easier to quickly search again
42 | queryFieldEl.current.focus()
43 | }
44 |
45 | return (
46 |
110 | )
111 | }
112 |
113 | SearchForm.propTypes = {
114 | initialLimit: PropTypes.number,
115 | initialRating: PropTypes.string,
116 | initialSearchQuery: PropTypes.string,
117 | initialShowInstant: PropTypes.bool,
118 | onChange: PropTypes.func.isRequired,
119 | }
120 | SearchForm.defaultProps = {
121 | initialLimit: 12,
122 | initialRating: '',
123 | initialSearchQuery: '',
124 | initialShowInstant: false,
125 | }
126 |
127 | export default SearchForm
128 |
--------------------------------------------------------------------------------
/src/08-search-focus/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/09-custom-hook/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useGiphy from './useGiphy'
3 | import Results from './Results'
4 | import SearchForm from './SearchForm'
5 |
6 | const App = () => {
7 | const [results, setSearchParams] = useGiphy()
8 |
9 | return (
10 |
11 | Giphy Search!
12 |
13 |
20 | )
21 | }
22 |
23 | export default App
24 |
--------------------------------------------------------------------------------
/src/09-custom-hook/README.md:
--------------------------------------------------------------------------------
1 | # Step 8 - Custom Hook
2 |
3 | We've been able to greatly reduce the scope of the top-level `App` by breaking it down into several components. However, it still directly makes the API call in order to maintain the app-level state. `App` is just an orchestrator, it shouldn't really **do** any work.
4 |
5 | 🏅 The goal of this step is to learn how to create our own custom hooks composed of the base hooks like `useState` & `useEffect`. This allows us to extract component logic into reusable (and testable) functions.
6 |
7 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
8 |
9 |
10 | Help! I didn't finish the previous step! 🚨
33 |
34 | ## 🐇 Jump Around
35 |
36 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
37 |
38 | ## ⭐ Concepts
39 |
40 | - Creating (async) custom hooks
41 |
42 | ## 📝 Tasks
43 |
44 | Create a new file called `src/workshop/useGiphy.js` which will contain our custom hook that will take in search parameters, make an API call and return results:
45 |
46 | ```js
47 | import { useState, useEffect } from 'react'
48 | import { getResults } from './api' // 👈🏾 bring over API import
49 |
50 | const useGiphy = () => {
51 | return null
52 | }
53 |
54 | export default useGiphy
55 | ```
56 |
57 | A custom hook is a normal JavaScript function whose name **must start** with `use*` and may call other hooks, like `useState` & `useEffect`.
58 |
59 | Copy over all the hooks-related code from `App.js` into `useGiphy.js`:
60 |
61 | ```js
62 | const useGiphy = () => {
63 | const [searchParams, setSearchParams] = useState({})
64 | const [results, setResults] = useState([])
65 |
66 | useEffect(() => {
67 | const fetchResults = async () => {
68 | try {
69 | const apiResponse = await getResults(searchParams)
70 |
71 | setResults(apiResponse.results)
72 | } catch (err) {
73 | console.error(err)
74 | }
75 | }
76 |
77 | fetchResults()
78 | }, [searchParams])
79 |
80 | return [results, setSearchParams]
81 | }
82 | ```
83 |
84 | Now `useGiphy()` can easily be used w/in other components because all of the state management and side-effect API logic have been abstracted away.
85 |
86 | ## 💡 Exercises
87 |
88 | - Finish the feature by calling `useGiphy()` back in `App`
89 | - Compare the current version of [`App.js`](./App.js) with the [Step 5 `App.js`](../05-form-submit/App.js)
90 |
91 | ## 🧠 Elaboration & Feedback
92 |
93 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+9+-+Custom+Hook). It will help seal in what you've learned.
94 |
95 | ## 👉🏾 Next Step
96 |
97 | Go to [Step 10 - Loading States](../10-loading-states/).
98 |
99 | ## 📕 Resources
100 |
101 | - [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html)
102 | - [How to test custom React hooks](https://kentcdodds.com/blog/how-to-test-custom-react-hooks)
103 | - [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
104 |
105 | ## ❓ Questions
106 |
107 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
108 |
--------------------------------------------------------------------------------
/src/09-custom-hook/Results.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 | import ResultsItem from './ResultsItem'
4 |
5 | const Results = ({ items }) => {
6 | const containerEl = useRef(null)
7 |
8 | return (
9 | items.length > 0 && (
10 | <>
11 |
12 | {items.map((item) => (
13 |
23 |
24 | {
28 | containerEl.current.scrollIntoView(true)
29 | }}
30 | >
31 | To top
32 |
33 |
34 |
35 | )
36 | )
37 | }
38 |
39 | Results.propTypes = {
40 | items: PropTypes.arrayOf(
41 | PropTypes.shape({
42 | id: PropTypes.string.isRequired,
43 | title: PropTypes.string.isRequired,
44 | url: PropTypes.string.isRequired,
45 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
46 | previewUrl: PropTypes.string.isRequired,
47 | }),
48 | ).isRequired,
49 | }
50 |
51 | export default Results
52 |
--------------------------------------------------------------------------------
/src/09-custom-hook/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
5 | return (
6 |
25 | )
26 | }
27 |
28 | ResultsItem.propTypes = {
29 | id: PropTypes.string.isRequired,
30 | title: PropTypes.string.isRequired,
31 | url: PropTypes.string.isRequired,
32 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
33 | previewUrl: PropTypes.string.isRequired,
34 | }
35 |
36 | export default ResultsItem
37 |
--------------------------------------------------------------------------------
/src/09-custom-hook/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const SearchForm = ({
14 | initialLimit,
15 | initialRating,
16 | initialSearchQuery,
17 | initialShowInstant,
18 | onChange,
19 | }) => {
20 | const [inputValue, setInputValue] = useState(initialSearchQuery)
21 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
22 | const [showInstant, setShowInstant] = useState(initialShowInstant)
23 | const [searchRating, setSearchRating] = useState(initialRating)
24 | const [searchLimit, setSearchLimit] = useState(initialLimit)
25 | const realSearchQuery = showInstant ? inputValue : searchQuery
26 | const queryFieldEl = useRef(null)
27 |
28 | useEffect(() => {
29 | onChange({
30 | searchQuery: realSearchQuery,
31 | rating: searchRating,
32 | limit: searchLimit,
33 | })
34 | }, [onChange, realSearchQuery, searchRating, searchLimit])
35 |
36 | const handleSubmit = (e) => {
37 | e.preventDefault()
38 | setSearchQuery(inputValue)
39 |
40 | // focus the query field after submitting
41 | // to make easier to quickly search again
42 | queryFieldEl.current.focus()
43 | }
44 |
45 | return (
46 |
110 | )
111 | }
112 |
113 | SearchForm.propTypes = {
114 | initialLimit: PropTypes.number,
115 | initialRating: PropTypes.string,
116 | initialSearchQuery: PropTypes.string,
117 | initialShowInstant: PropTypes.bool,
118 | onChange: PropTypes.func.isRequired,
119 | }
120 | SearchForm.defaultProps = {
121 | initialLimit: 12,
122 | initialRating: '',
123 | initialSearchQuery: '',
124 | initialShowInstant: false,
125 | }
126 |
127 | export default SearchForm
128 |
--------------------------------------------------------------------------------
/src/09-custom-hook/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | const resp = await fetch(
47 | formatUrl(
48 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
49 | {
50 | q: searchQuery,
51 | rating,
52 | limit,
53 | offset,
54 | lang: 'en',
55 | },
56 | ),
57 | )
58 | const data = await resp.json()
59 | const results = data.data.map(({ id, title, url, images, rating }) => ({
60 | id,
61 | title,
62 | url,
63 | rating: rating.toUpperCase(),
64 | previewUrl: images.preview.mp4,
65 | }))
66 |
67 | return { results, total: data.pagination['total_count'] }
68 | }
69 |
--------------------------------------------------------------------------------
/src/09-custom-hook/useGiphy.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { getResults } from './api'
3 |
4 | /**
5 | * @typedef {import('./api').SearchParams} SearchParams
6 | * @typedef {import('./api').GiphyResult} GiphyResult
7 | *
8 | * @callback SetSearchParams
9 | * @param {SearchParams} searchParams Search parameters
10 | */
11 |
12 | /**
13 | * A custom hook that returns giphy results and a function to search for updated results
14 | * @returns {[GiphyResult[], SetSearchParams]}
15 | */
16 | const useGiphy = () => {
17 | const [searchParams, setSearchParams] = useState({})
18 | const [results, setResults] = useState([])
19 |
20 | useEffect(() => {
21 | const fetchResults = async () => {
22 | try {
23 | const apiResponse = await getResults(searchParams)
24 |
25 | setResults(apiResponse.results)
26 | } catch (err) {
27 | console.error(err)
28 | }
29 | }
30 |
31 | fetchResults()
32 | }, [searchParams])
33 |
34 | return [results, setSearchParams]
35 | }
36 |
37 | export default useGiphy
38 |
--------------------------------------------------------------------------------
/src/10-loading-states/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useGiphy from './useGiphy'
3 | import Results from './Results'
4 | import SearchForm from './SearchForm'
5 |
6 | const App = () => {
7 | const [{ status, results, error }, setSearchParams] = useGiphy()
8 |
9 | return (
10 |
11 | Giphy Search!
12 |
13 |
20 | )
21 | }
22 |
23 | export default App
24 |
--------------------------------------------------------------------------------
/src/10-loading-states/README.md:
--------------------------------------------------------------------------------
1 | # Step 10 - Loading States
2 |
3 | Up to this point, we've assumed that the Giphy API will quickly respond and never fail. But no matter how great the uptime of an API is, the user's internet connection can determine how long it takes to get a response and if the request fails or not.
4 |
5 | 🏅 The goal of this exercise is to add loading and error states to our app.
6 |
7 | As always, if you run into trouble with the [tasks](#tasks) or [exercises](#exercises), you can take a peek at the final [source code](./).
8 |
9 |
10 | Help! I didn't finish the previous step! 🚨
33 |
34 | ## 🐇 Jump Around
35 |
36 | [Concepts](#-concepts) | [Tasks](#-tasks) | [Exercises](#-exercises) | [Elaboration & Feedback](#-elaboration--feedback) | [Resources](#-resources)
37 |
38 | ## ⭐ Concepts
39 |
40 | - Managing loading & error states
41 | - Using `useReducer`
42 | - Leveraging ES6+ to maintain application state
43 |
44 | ## 📝 Tasks
45 |
46 | ### With `useState()`
47 |
48 | Update `useGiphy` to keep track of the `status` of the API response and return it along with `results` & `setSearchParams`:
49 |
50 | ```js
51 | const useGiphy = () => {
52 | const [searchParams, setSearchParams] = useState({})
53 | const [results, setResults] = useState([])
54 | const [status, setStatus] = useState('idle') // 👈🏾 NEW
55 |
56 | useEffect(() => {
57 | const fetchResults = async () => {
58 | try {
59 | // 👇🏾 before API request
60 | setStatus('pending')
61 |
62 | const apiResponse = await getResults(searchParams)
63 |
64 | setResults(apiResponse.results)
65 |
66 | // 👇🏾 after successful API request
67 | setStatus('resolved')
68 | } catch (err) {
69 | console.error(err)
70 | }
71 | }
72 |
73 | fetchResults()
74 | }, [searchParams])
75 |
76 | // 👇🏾 returning `status` & `results` together as an object
77 | return [{ status, results }, setSearchParams]
78 | }
79 | ```
80 |
81 | Update `App` with the new return value from `useGiphy()` and pass `status` to `
91 | Giphy Search!
92 |
93 |
101 | )
102 | }
103 | ```
104 |
105 | Now display the loading indicator in `Results`:
106 |
107 | ```js
108 | // new `status` prop added 👇🏾
109 | const Results = ({ items, status }) => {
110 | const containerEl = useRef(null)
111 | const isLoading = status === 'idle' || status === 'pending'
112 |
113 | // 👇🏾 new loading indicator
114 | if (isLoading) {
115 | return (
116 |
117 | Loading new results...
118 |
119 | )
120 | }
121 |
122 | return (
123 | items.length > 0 && (
124 | ...
125 | )
126 | )
127 | }
128 |
129 | Results.propTypes = {
130 | items: ...,
131 | // new prop type for `status` 👇🏾
132 | status: PropTypes.oneOf(['idle', 'pending', 'resolved']).isRequired,
133 | }
134 | ```
135 |
136 | > NOTE: You can change the value to `wait()` in [`api.js`](./api.js) to be higher to simulate a slow API response.
137 |
138 | Display the loading indicator as well as the previous results using a Fragment:
139 |
140 | ```js
141 | const Results = ({ items, status }) => {
142 | const isLoading = status === 'idle' || status === 'pending'
143 |
144 | return (
145 | <>
146 | {isLoading && (
147 |
148 | Loading new results...
149 |
150 | )}
151 | {items.length > 0 && (
152 | ...
153 | )}
154 |
155 | )
156 | }
157 | ```
158 |
159 | ---
160 |
161 | ### With `useReducer()`
162 |
163 | In [`useGiphy.js`](./useGiphy.js), refactor the two `useState()` calls for `status` & `results` to a single call to `useReducer()`:
164 |
165 | ```js
166 | const INITIAL_STATE = {
167 | status: 'idle',
168 | results: [],
169 | }
170 |
171 | // 👇🏾 brand new reducer
172 | const reducer = (state, action) => {
173 | switch (action.type) {
174 | case 'started': {
175 | return {
176 | ...state,
177 | status: 'pending',
178 | }
179 | }
180 | case 'success': {
181 | return {
182 | ...state,
183 | status: 'resolved',
184 | results: action.results,
185 | }
186 | }
187 | default: {
188 | // In case we mis-type an action!
189 | throw new Error(`Unhandled action type: ${action.type}`)
190 | }
191 | }
192 | }
193 |
194 | const useGiphy = () => {
195 | const [searchParams, setSearchParams] = useState({})
196 | // 👇🏾 new reducer state
197 | const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
198 |
199 | useEffect(() => {
200 | const fetchResults = async () => {
201 | try {
202 | // 👇🏾 dispatch action instead of directly setting state
203 | dispatch({ type: 'started' })
204 |
205 | const apiResponse = await getResults(searchParams)
206 |
207 | // 👇🏾 dispatched action will set two state properties
208 | dispatch({ type: 'success', results: apiResults })
209 | } catch (err) {
210 | console.error(err)
211 | }
212 | }
213 |
214 | fetchResults()
215 | }, [searchParams])
216 |
217 | return [state, setSearchParams]
218 | }
219 | ```
220 |
221 | ## 💡 Exercises
222 |
223 | - Display an error state if the API fails to successfully return
224 | - Can display with the previous results, but should hide when new results are requested
225 | - Use the `'rejected'` status
226 | - 🔑 _HINT:_ `throw new Error('Fake error!')` in [`api.js`](./api.js) to easily simulate this case
227 |
228 | ## 🧠 Elaboration & Feedback
229 |
230 | After you're done with the exercise and before jumping to the next step, please fill out the [elaboration & feedback form](https://docs.google.com/forms/d/e/1FAIpQLScRocWvtbrl4XmT5_NRiE8bSK3CMZil-ZQByBAt8lpsurcRmw/viewform?usp=pp_url&entry.1671251225=React+FUNdamentals+Workshop&entry.1984987236=Step+10+-+Loading+States). It will help seal in what you've learned.
231 |
232 | ## 👉🏾 Next Step
233 |
234 | Go to [Final Quiz!](../quiz/).
235 |
236 | ## 📕 Resources
237 |
238 | - [`useReducer` API reference](https://reactjs.org/docs/hooks-reference.html#usereducer)
239 | - [Fragments](https://reactjs.org/docs/fragments.html)
240 | - [Stop using isLoading booleans](https://kentcdodds.com/blog/stop-using-isloading-booleans)
241 | - [Don't Sync State. Derive It](https://kentcdodds.com/blog/dont-sync-state-derive-it)
242 | - [Should I useState or useReducer](https://kentcdodds.com/blog/should-i-usestate-or-usereducer)
243 |
244 | ## ❓ Questions
245 |
246 | Got questions? Need further clarification? Feel free to post a question in [Ben Ilegbodu's AMA](http://www.benmvp.com/ama/)!
247 |
--------------------------------------------------------------------------------
/src/10-loading-states/Results.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 | import ResultsItem from './ResultsItem'
4 |
5 | const Results = ({ items, status }) => {
6 | const containerEl = useRef(null)
7 | const isLoading = status === 'idle' || status === 'pending'
8 | const isRejected = status === 'rejected'
9 | let message
10 |
11 | if (isLoading) {
12 | message = (
13 |
14 | Loading new results...
15 |
16 | )
17 | } else if (isRejected) {
18 | message = (
19 |
20 |
21 | There was an error retrieving results. Please try again.
22 |
23 |
24 | )
25 | }
26 |
27 | return (
28 | <>
29 | {message}
30 | {items.length > 0 && (
31 | <>
32 |
33 | {items.map((item) => (
34 |
44 |
45 | {
49 | containerEl.current.scrollIntoView(true)
50 | }}
51 | >
52 | To top
53 |
54 |
55 |
56 | )}
57 |
58 | )
59 | }
60 |
61 | Results.propTypes = {
62 | error: PropTypes.instanceOf(Error),
63 | items: PropTypes.arrayOf(
64 | PropTypes.shape({
65 | id: PropTypes.string.isRequired,
66 | title: PropTypes.string.isRequired,
67 | url: PropTypes.string.isRequired,
68 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
69 | previewUrl: PropTypes.string.isRequired,
70 | }),
71 | ).isRequired,
72 | status: PropTypes.oneOf(['idle', 'pending', 'resolved', 'rejected'])
73 | .isRequired,
74 | }
75 |
76 | export default Results
77 |
--------------------------------------------------------------------------------
/src/10-loading-states/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
5 | return (
6 |
25 | )
26 | }
27 |
28 | ResultsItem.propTypes = {
29 | id: PropTypes.string.isRequired,
30 | title: PropTypes.string.isRequired,
31 | url: PropTypes.string.isRequired,
32 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
33 | previewUrl: PropTypes.string.isRequired,
34 | }
35 |
36 | export default ResultsItem
37 |
--------------------------------------------------------------------------------
/src/10-loading-states/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const SearchForm = ({
14 | initialLimit,
15 | initialRating,
16 | initialSearchQuery,
17 | initialShowInstant,
18 | onChange,
19 | }) => {
20 | const [inputValue, setInputValue] = useState(initialSearchQuery)
21 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
22 | const [showInstant, setShowInstant] = useState(initialShowInstant)
23 | const [searchRating, setSearchRating] = useState(initialRating)
24 | const [searchLimit, setSearchLimit] = useState(initialLimit)
25 | const realSearchQuery = showInstant ? inputValue : searchQuery
26 | const queryFieldEl = useRef(null)
27 |
28 | useEffect(() => {
29 | onChange({
30 | searchQuery: realSearchQuery,
31 | rating: searchRating,
32 | limit: searchLimit,
33 | })
34 | }, [onChange, realSearchQuery, searchRating, searchLimit])
35 |
36 | const handleSubmit = (e) => {
37 | e.preventDefault()
38 | setSearchQuery(inputValue)
39 |
40 | // focus the query field after submitting
41 | // to make easier to quickly search again
42 | queryFieldEl.current.focus()
43 | }
44 |
45 | return (
46 |
110 | )
111 | }
112 |
113 | SearchForm.propTypes = {
114 | initialLimit: PropTypes.number,
115 | initialRating: PropTypes.string,
116 | initialSearchQuery: PropTypes.string,
117 | initialShowInstant: PropTypes.bool,
118 | onChange: PropTypes.func.isRequired,
119 | }
120 | SearchForm.defaultProps = {
121 | initialLimit: 12,
122 | initialRating: '',
123 | initialSearchQuery: '',
124 | initialShowInstant: false,
125 | }
126 |
127 | export default SearchForm
128 |
--------------------------------------------------------------------------------
/src/10-loading-states/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | // Fail 1 of 10 times
47 | if (Math.random() * 10 < 1) {
48 | throw new Error('Fake Error!')
49 | }
50 |
51 | const resp = await fetch(
52 | formatUrl(
53 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
54 | {
55 | q: searchQuery,
56 | rating,
57 | limit,
58 | offset,
59 | lang: 'en',
60 | },
61 | ),
62 | )
63 | const data = await resp.json()
64 | const results = data.data.map(({ id, title, url, images, rating }) => ({
65 | id,
66 | title,
67 | url,
68 | rating: rating.toUpperCase(),
69 | previewUrl: images.preview.mp4,
70 | }))
71 |
72 | return { results, total: data.pagination['total_count'] }
73 | }
74 |
--------------------------------------------------------------------------------
/src/10-loading-states/useGiphy.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useReducer } from 'react'
2 | import { getResults } from './api'
3 |
4 | /**
5 | * @typedef {import('./api').SearchParams} SearchParams
6 | * @typedef {import('./api').GiphyResult} GiphyResult
7 | * @typedef {'idle' | 'pending' | 'resolved' | 'rejected'} Status The status of the data
8 | *
9 | * @typedef State
10 | * @property {Status} status
11 | * @property {GiphyResult[]} results
12 | * @property {Error} error
13 | *
14 | * @typedef Action
15 | * @property {'started' | 'success' | 'error'} type
16 | * @property {GiphyResult[]} [results]
17 | * @property {Error} [error]
18 | */
19 |
20 | /**
21 | * @type {State}
22 | */
23 | const INITIAL_STATE = {
24 | status: 'idle',
25 | results: [],
26 | error: null,
27 | }
28 |
29 | /**
30 | * Returns an updated version of `state` based on the `action`
31 | * @param {State} state Current state
32 | * @param {Action} action Action to update state
33 | * @returns {State} Updated state
34 | */
35 | const reducer = (state, action) => {
36 | switch (action.type) {
37 | case 'started': {
38 | return {
39 | ...state,
40 | status: 'pending',
41 | }
42 | }
43 | case 'success': {
44 | return {
45 | ...state,
46 | status: 'resolved',
47 | results: action.results,
48 | }
49 | }
50 | case 'error': {
51 | return {
52 | ...state,
53 | status: 'rejected',
54 | error: action.error,
55 | }
56 | }
57 | default: {
58 | // In case we mis-type an action!
59 | throw new Error(`Unhandled action type: ${action.type}`)
60 | }
61 | }
62 | }
63 |
64 | /**
65 | * @callback SetSearchParams
66 | * @param {SearchParams} searchParams Search parameters
67 | */
68 |
69 | /**
70 | * A custom hook that returns giphy results and a function to search for updated results
71 | * @returns {[State, SetSearchParams]}
72 | */
73 | const useGiphy = () => {
74 | const [searchParams, setSearchParams] = useState({})
75 | const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
76 |
77 | useEffect(() => {
78 | const fetchResults = async () => {
79 | try {
80 | dispatch({ type: 'started' })
81 |
82 | const apiResponse = await getResults(searchParams)
83 |
84 | dispatch({ type: 'success', results: apiResponse.results })
85 | } catch (err) {
86 | dispatch({ type: 'error', error: err })
87 | }
88 | }
89 |
90 | fetchResults()
91 | }, [searchParams])
92 |
93 | return [state, setSearchParams]
94 | }
95 |
96 | export default useGiphy
97 |
--------------------------------------------------------------------------------
/src/end/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useGiphy from './useGiphy'
3 | import Results from './Results'
4 | import SearchForm from './SearchForm'
5 |
6 | const App = () => {
7 | const [{ status, results, error }, setSearchParams] = useGiphy()
8 |
9 | return (
10 |
11 | Giphy Search!
12 |
13 |
23 | This is the app for the{' '}
24 |
29 | React FUNdamentals Workshop with Ben Ilegbodu
30 |
31 | .
32 |
33 |
34 | )
35 | }
36 |
37 | export default App
38 |
--------------------------------------------------------------------------------
/src/end/README.md:
--------------------------------------------------------------------------------
1 | # The End
2 |
3 | Congratulations! 🏆
4 |
5 | You've reached the end of the React FUNdamentals workshop, learning JSX, `useState`, `useEffect`, custom hooks, and so much more!
6 |
7 | Hopefully, you'll get to apply this learning right away at your job or in a side project. But if not, I suggest you **come back to this workshop in a week or two** and review the content. Your brain likes to garbage collect unused knowledge and we want this to stick around! The content is all open-source.
8 |
9 | ## ❤️ Workshop Feedback
10 |
11 | Feedback is a gift. 🎁 Now that you're done with the workshop, I would greatly appreciate your overall feedback on the workshop to help make it even better for the next learners. **[Share your workshop feedback](https://bit.ly/react-fun-ws-feedback)**.
12 |
--------------------------------------------------------------------------------
/src/end/Results.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 | import ResultsItem from './ResultsItem'
4 |
5 | const Results = ({ items, status }) => {
6 | const containerEl = useRef(null)
7 | const isLoading = status === 'idle' || status === 'pending'
8 | const isRejected = status === 'rejected'
9 | let message
10 |
11 | if (isLoading) {
12 | message = (
13 |
14 | Loading new results...
15 |
16 | )
17 | } else if (isRejected) {
18 | message = (
19 |
20 |
21 | There was an error retrieving results. Please try again.
22 |
23 |
24 | )
25 | }
26 |
27 | return (
28 | <>
29 | {message}
30 | {items.length > 0 && (
31 | <>
32 |
33 | {items.map((item) => (
34 |
44 |
45 | {
49 | containerEl.current.scrollIntoView(true)
50 | }}
51 | >
52 | To top
53 |
54 |
55 |
56 | )}
57 |
58 | )
59 | }
60 |
61 | Results.propTypes = {
62 | error: PropTypes.instanceOf(Error),
63 | items: PropTypes.arrayOf(
64 | PropTypes.shape({
65 | id: PropTypes.string.isRequired,
66 | title: PropTypes.string.isRequired,
67 | url: PropTypes.string.isRequired,
68 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
69 | previewUrl: PropTypes.string.isRequired,
70 | }),
71 | ).isRequired,
72 | status: PropTypes.oneOf(['idle', 'pending', 'resolved', 'rejected'])
73 | .isRequired,
74 | }
75 |
76 | export default Results
77 |
--------------------------------------------------------------------------------
/src/end/ResultsItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const ResultsItem = ({ id, title, url, rating, previewUrl }) => {
5 | return (
6 |
25 | )
26 | }
27 |
28 | ResultsItem.propTypes = {
29 | id: PropTypes.string.isRequired,
30 | title: PropTypes.string.isRequired,
31 | url: PropTypes.string.isRequired,
32 | rating: PropTypes.oneOf(['G', 'PG', 'PG-13', 'R']).isRequired,
33 | previewUrl: PropTypes.string.isRequired,
34 | }
35 |
36 | export default ResultsItem
37 |
--------------------------------------------------------------------------------
/src/end/SearchForm.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useEffect, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const RATINGS = [
5 | { value: '', label: 'All' },
6 | { value: 'g', label: 'G' },
7 | { value: 'pg', label: 'PG' },
8 | { value: 'pg-13', label: 'PG-13' },
9 | { value: 'r', label: 'R' },
10 | ]
11 | const LIMITS = [6, 12, 18, 24, 30]
12 |
13 | const SearchForm = ({
14 | initialLimit,
15 | initialRating,
16 | initialSearchQuery,
17 | initialShowInstant,
18 | onChange,
19 | }) => {
20 | const [inputValue, setInputValue] = useState(initialSearchQuery)
21 | const [searchQuery, setSearchQuery] = useState(initialSearchQuery)
22 | const [showInstant, setShowInstant] = useState(initialShowInstant)
23 | const [searchRating, setSearchRating] = useState(initialRating)
24 | const [searchLimit, setSearchLimit] = useState(initialLimit)
25 | const realSearchQuery = showInstant ? inputValue : searchQuery
26 | const queryFieldEl = useRef(null)
27 |
28 | useEffect(() => {
29 | onChange({
30 | searchQuery: realSearchQuery,
31 | rating: searchRating,
32 | limit: searchLimit,
33 | })
34 | }, [onChange, realSearchQuery, searchRating, searchLimit])
35 |
36 | const handleSubmit = (e) => {
37 | e.preventDefault()
38 | setSearchQuery(inputValue)
39 |
40 | // focus the query field after submitting
41 | // to make easier to quickly search again
42 | queryFieldEl.current.focus()
43 | }
44 |
45 | return (
46 |
110 | )
111 | }
112 |
113 | SearchForm.propTypes = {
114 | initialLimit: PropTypes.number,
115 | initialRating: PropTypes.string,
116 | initialSearchQuery: PropTypes.string,
117 | initialShowInstant: PropTypes.bool,
118 | onChange: PropTypes.func.isRequired,
119 | }
120 | SearchForm.defaultProps = {
121 | initialLimit: 12,
122 | initialRating: '',
123 | initialSearchQuery: '',
124 | initialShowInstant: false,
125 | }
126 |
127 | export default SearchForm
128 |
--------------------------------------------------------------------------------
/src/end/api.js:
--------------------------------------------------------------------------------
1 | import { formatUrl } from 'url-lib'
2 |
3 | /**
4 | * Waits the specified amount of time and returns a resolved Promise when done
5 | * @param {number} waitTimeMs The amount of time to wait in milliseconds
6 | * @returns {Promise} Signal that waiting is done
7 | */
8 | const wait = (waitTimeMs = 0) => {
9 | return new Promise((resolve) => {
10 | setTimeout(resolve, waitTimeMs)
11 | })
12 | }
13 |
14 | /**
15 | * @typedef {'' | 'g' | 'pg' | 'pg-13' | 'r'} RatingFiler The MPAA-style rating for a GIF
16 | * @typedef {'G' | 'PG' | 'PG-13' | 'R'} Rating The MPAA-style rating for a GIF
17 | *
18 | * @typedef GiphyResult
19 | * @type {object}
20 | * @property {string} id The GIF's unique ID
21 | * @property {string} title The title that appears on giphy.com for this GIF
22 | * @property {string} url The unique URL for the GIF
23 | * @property {Rating} rating The MPAA-style rating for the GIF
24 | * @property {string} previewUrl The URL for the GIF in .MP4 format
25 | *
26 | * @typedef SearchParams
27 | * @type {object}
28 | * @property {string} [params.searchQuery=''] Search query term or phrase
29 | * @property {RatingFilter} [params.rating=''] Filters results by specified rating. Not specifying a rating, returns all possible ratings
30 | * @property {number} [params.limit=12] The maximum number of images to return
31 | * @property {number} [params.offset=0] Specifies the starting position of the results.
32 | *
33 | * Retrieves a list of giphy image info matching the specified search parameters
34 | * @param {SearchParams} [params] Search parameters
35 | * @returns {{results: GiphyResult[], total: number}}
36 | */
37 | export const getResults = async ({
38 | searchQuery = '',
39 | rating = '',
40 | limit = 12,
41 | offset = 0,
42 | } = {}) => {
43 | // Increase the number below to give the appearance of a slow API response
44 | await wait(500)
45 |
46 | // Fail 1 of 10 times
47 | if (Math.random() * 10 < 1) {
48 | throw new Error('Fake Error!')
49 | }
50 |
51 | const resp = await fetch(
52 | formatUrl(
53 | 'https://api.giphy.com/v1/gifs/search?api_key=7B4oce3a0BmGU5YC22uOFOVg7JJtWcpH',
54 | {
55 | q: searchQuery,
56 | rating,
57 | limit,
58 | offset,
59 | lang: 'en',
60 | },
61 | ),
62 | )
63 | const data = await resp.json()
64 | const results = data.data.map(({ id, title, url, images, rating }) => ({
65 | id,
66 | title,
67 | url,
68 | rating: rating.toUpperCase(),
69 | previewUrl: images.preview.mp4,
70 | }))
71 |
72 | return { results, total: data.pagination['total_count'] }
73 | }
74 |
--------------------------------------------------------------------------------
/src/end/useGiphy.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useReducer } from 'react'
2 | import { getResults } from './api'
3 |
4 | /**
5 | * @typedef {import('./api').SearchParams} SearchParams
6 | * @typedef {import('./api').GiphyResult} GiphyResult
7 | * @typedef {'idle' | 'pending' | 'resolved' | 'rejected'} Status The status of the data
8 | *
9 | * @typedef State
10 | * @property {Status} status
11 | * @property {GiphyResult[]} results
12 | * @property {Error} error
13 | *
14 | * @typedef Action
15 | * @property {'started' | 'success' | 'error'} type
16 | * @property {GiphyResult[]} [results]
17 | * @property {Error} [error]
18 | */
19 |
20 | /**
21 | * @type {State}
22 | */
23 | const INITIAL_STATE = {
24 | status: 'idle',
25 | results: [],
26 | error: null,
27 | }
28 |
29 | /**
30 | * Returns an updated version of `state` based on the `action`
31 | * @param {State} state Current state
32 | * @param {Action} action Action to update state
33 | * @returns {State} Updated state
34 | */
35 | const reducer = (state, action) => {
36 | switch (action.type) {
37 | case 'started': {
38 | return {
39 | ...state,
40 | status: 'pending',
41 | }
42 | }
43 | case 'success': {
44 | return {
45 | ...state,
46 | status: 'resolved',
47 | results: action.results,
48 | }
49 | }
50 | case 'error': {
51 | return {
52 | ...state,
53 | status: 'rejected',
54 | error: action.error,
55 | }
56 | }
57 | default: {
58 | // In case we mis-type an action!
59 | throw new Error(`Unhandled action type: ${action.type}`)
60 | }
61 | }
62 | }
63 |
64 | /**
65 | * @callback SetSearchParams
66 | * @param {SearchParams} searchParams Search parameters
67 | */
68 |
69 | /**
70 | * A custom hook that returns giphy results and a function to search for updated results
71 | * @returns {[State, SetSearchParams]}
72 | */
73 | const useGiphy = () => {
74 | const [searchParams, setSearchParams] = useState({})
75 | const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
76 |
77 | useEffect(() => {
78 | const fetchResults = async () => {
79 | try {
80 | dispatch({ type: 'started' })
81 |
82 | const apiResponse = await getResults(searchParams)
83 |
84 | dispatch({ type: 'success', results: apiResponse.results })
85 | } catch (err) {
86 | dispatch({ type: 'error', error: err })
87 | }
88 | }
89 |
90 | fetchResults()
91 | }, [searchParams])
92 |
93 | return [state, setSearchParams]
94 | }
95 |
96 | export default useGiphy
97 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 1rem;
4 | }
5 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import App from './end/App'
4 |
5 | import './index.css'
6 |
7 | render(
8 | Help! I didn't finish the previous step! 🚨
31 |
32 | ## Exercise
33 |
34 | - Build a `Pagination` component that will allow you to paginate through the giphy results
35 | - `Pagination` has "Previous" & "Next" links/buttons
36 | - Display the `