Flexible Compound Components

📝 Your Notes

Exercise

// Flexible Compound Components
// http://localhost:3000/isolated/exercise/03.js

import * as React from 'react'
import {Switch} from '../switch'

// 🐨 create your ToggleContext context here
// 📜 https://reactjs.org/docs/context.html#reactcreatecontext
const ToggleContext = React.createContext()

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  return (
    <ToggleContext.Provider value={{on, toggle}}>
      {children}
    </ToggleContext.Provider>
  )
}

function useToggle() {
  return React.useContext(ToggleContext)
}

// 🐨 we'll still get the children from props (as it's passed to us by the
// developers using our component), but we'll get `on` implicitly from
// ToggleContext now
// 🦉 You can create a helper method to retrieve the context here. Thanks to that,
// your context won't be exposed to the user
// 💰 `const context = React.useContext(ToggleContext)`
// 📜 https://reactjs.org/docs/hooks-reference.html#usecontext
function ToggleOn({children}) {
  const {on} = useToggle()

  return on ? children : null
}

// 🐨 do the same thing to this that you did to the ToggleOn component
function ToggleOff({children}) {
  const {on} = useToggle()

  return on ? null : children
}

// 🐨 get `on` and `toggle` from the ToggleContext with `useContext`
function ToggleButton({...props}) {
  const {on, toggle} = useToggle()

  return <Switch on={on} onClick={toggle} {...props} />
}

function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <div>
          <ToggleButton />
        </div>
      </Toggle>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

• A common question that I get here is, should I use the children.map function ability, or should I use the context functionality? What I say is you can absolutely use the context version all the time, but using the children.map functionality might be useful if you only care about direct descendants.
• There are use cases where you just want to enforce the fact that it only makes sense to have this be a descendant of that. You don't like to share things through context because that relationship is an important part of the API. They're use cases for both of these methods.

1. 💯 custom hook validation

// Flexible Compound Components
// http://localhost:3000/isolated/exercise/03.js

import * as React from 'react'
import {Switch} from '../switch'

// 🐨 create your ToggleContext context here
// 📜 https://reactjs.org/docs/context.html#reactcreatecontext
const ToggleContext = React.createContext()
// Tip: clarify meaning of context provider
ToggleContext.displayName = 'ToggleContext'

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  return (
    <ToggleContext.Provider value={{on, toggle}}>
      {children}
    </ToggleContext.Provider>
  )
}

function useToggle() {
  const context = React.useContext(ToggleContext)

  if (!context) {
    throw new Error(`useToggle must be used within a <Toggle />`)
  }

  return React.useContext(ToggleContext)
}

function ToggleOn({children}) {
  const {on} = useToggle()

  return on ? children : null
}

function ToggleOff({children}) {
  const {on} = useToggle()

  return on ? null : children
}

function ToggleButton({...props}) {
  const {on, toggle} = useToggle()

  return <Switch on={on} onClick={toggle} {...props} />
}

function App() {
  return (
    // this occurs error
    // <ToggleButton />

    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <div>
          <ToggleButton />
        </div>
      </Toggle>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

• ToggleContext.displayName = 'ToggleContext'
  • 
  • 

Background

One liner: The Flexible Compound Components Pattern only differs from the
previous exercise in that it uses React context. You should use this version of
the pattern more often.

Right now our component can only clone and pass props to immediate children. So
we need some way for our compound components to implicitly accept the on state
and toggle method regardless of where they're rendered within the Toggle
component's "posterity" :)

The way we do this is through context. React.createContext is the API we want.

Real World Projects that use this pattern:

• @reach/accordion

Exercise

Production deploys:

• Exercise
• Final

The fundamental difference between this exercise and the last one is that now
we're going to allow people to render the compound components wherever they like
in the render tree. Searching through props.children for the components to
clone would be futile. So we'll use context instead.

Your job will be to make the ToggleContext which will be used to implicitly
share the state between these components, and then a custom hook to consume that
context for the compound components to do their job.

Extra Credit

1. 💯 custom hook validation

Production deploy

Change the App function to this:

const App = () => <ToggleButton />

Why doesn't that work? Can you figure out a way to give the developer a better
error message?

🦉 Feedback

Fill out
the feedback form.

Authentication

📝 Your Notes

Exercise

/** @jsx jsx */
import {jsx} from '@emotion/core'

import {useState} from 'react'
// 🐨 you're going to need this:
import * as auth from 'auth-provider'
import {AuthenticatedApp} from './authenticated-app'
import {UnauthenticatedApp} from './unauthenticated-app'

function App() {
  // 🐨 useState for the user
  const [user, setUser] = useState(null)

  // 🐨 create a login function that calls auth.login then sets the user
  // 💰 const login = form => auth.login(form).then(u => setUser(u))
  const login = form => auth.login(form).then(user => setUser(user))

  // 🐨 create a registration function that does the same as login except for register
  const register = form => auth.register(form).then(user => setUser(user))

  // 🐨 create a logout function that calls auth.logout() and sets the user to null
  const logout = () => {
    auth.logout()
    setUser(null)
  }

  // 🐨 if there's a user, then render the AuthenticatedApp with the user and logout
  // 🐨 if there's not a user, then render the UnauthenticatedApp with login and register
  return user ? (
    <AuthenticatedApp user={user} logout={logout} />
  ) : (
    <UnauthenticatedApp login={login} register={register} />
  )
}

export {App}

/*
eslint
  no-unused-vars: "off",
*/

• All that we did here in our app was we brought in both the authenticated side
  and the unauthenticated side of our application, and we determined which one
  of those to render based on whether we had a user in our React state.

• Then, we brought in our authProvider here to handle the login and registration
  and logout functionalities of our application that we had already built. When
  we log in, we call auth.login. When that promise resolves, then we send the
  user state to whatever we get back from that auth.login promise. Similar for
  register, and then our logout just calls auth.logout and sets our user to null
  so that we will render the unauthenticated portion of our app.

1. 💯 Load the user's data on page load

// * app.js
import {client} from 'utils/api-client.exercise'

async function getUser() {
  let user = null
  const token = await auth.getToken()

  if (token) {
    const data = await client('me', {token})
    user = data.user
  }

  return user
}

function App() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    getUser().then(user => setUser(user))
  }, [])


// * api-client.js
const apiURL = process.env.REACT_APP_API_URL

function client(
  endpoint,
  {token, headers: customHeaders, ...customConfig} = {},
) {
  const config = {
    method: 'GET',
    headers: {
      Authorization: token ? `Bearer ${token}` : undefined,
      ...customHeaders,
    },
    ...customConfig,
  }

  return window.fetch(`${apiURL}/${endpoint}`, config).then(async response => {
    const data = await response.json()
    if (response.ok) {
      return data
    } else {
      return Promise.reject(data)
    }
  })
}

export {client}

• In review, what we've done here is we created a function called getUser that
  will try to get the user's token. If they're currently logged in, then we'll
  get a token back.

• We can make a request to our backend to get the user's information like their
  username. Then, we assign that user property from the data we get back to the
  user and return that. Then as soon as our app is mounted, we make that
  request.

• When that resolves, then we'll assign our user state to the user that we get
  from that getUser function. That way, the user doesn't have to log in every
  time they reach our app. To make this getUser function work, we had to add
  the functionality for client requests to be authenticated, so we had to pass
  this token.

• To do that, we accepted that token destructured off of the custom config that
  they're providing. We attached an authorization header to our configuration.
  If the token exists, then we'll set it to bearer token.

• Otherwise, it's undefined. We also restructured the headers so that the
  developer can provide custom headers. We can merge all that together quite
  nicely before we pass it on to window.fetch.

2. 💯 Use useAsync

/** @jsx jsx */
import {jsx} from '@emotion/core'

import {useEffect} from 'react'
import * as auth from 'auth-provider'
import {FullPageSpinner} from 'components/lib'
import * as colors from 'styles/colors'
import {client} from 'utils/api-client.exercise'
import {useAsync} from 'utils/hooks'
import {AuthenticatedApp} from './authenticated-app'
import {UnauthenticatedApp} from './unauthenticated-app'

async function getUser() {
  let user = null
  const token = await auth.getToken()

  if (token) {
    const data = await client('me', {token})
    user = data.user
  }

  return user
}

function App() {
  const {
    data: user,
    error,
    isIdle,
    isLoading,
    isError,
    isSuccess,
    run,
    setData,
  } = useAsync()

  useEffect(() => {
    run(getUser())
  }, [run])

  const login = form => auth.login(form).then(user => setData(user))

  const register = form => auth.register(form).then(user => setData(user))

  const logout = () => {
    auth.logout()
    setData(null)
  }

  if (isIdle || isLoading) {
    return <FullPageSpinner />
  }

  if (isError) {
    return (
      <div
        css={{
          color: colors.danger,
          height: '100vh',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <p>Uh oh... There's a problem. Try refreshing the app.</p>
        <pre>{error.message}</pre>
      </div>
    )
  }

  if (isSuccess) {
    return user ? (
      <AuthenticatedApp user={user} logout={logout} />
    ) : (
      <UnauthenticatedApp login={login} register={register} />
    )
  }
}

export {App}

/*
eslint
  no-unused-vars: "off",
*/

3. 💯 automatically logout on 401

import * as auth from 'auth-provider'
const apiURL = process.env.REACT_APP_API_URL

function client(
  endpoint,
  {token, headers: customHeaders, ...customConfig} = {},
) {
  const config = {
    method: 'GET',
    headers: {
      Authorization: token ? `Bearer ${token}` : undefined,
      ...customHeaders,
    },
    ...customConfig,
  }

  return window.fetch(`${apiURL}/${endpoint}`, config).then(async response => {
    const data = await response.json()

    // 401 Unauthorized
    if (response.status === 401) {
      await auth.logout()
      window.location.assign(window.location)

      return Promise.reject({message: 'Please re-authenticate'})
    }

    if (response.ok) {
      return data
    } else {
      return Promise.reject(data)
    }
  })
}

export {client}

• In our response here, we can determine that status code with response.status.
  If that's 401, then we want to log them out. Once they're logged out, we also
  want to just clear the state of the application. We want to get the user out
  of here, and the easiest way for us to do that is to say
  window.location.assign('window.location'). That will trigger a full-page
  refresh. Any data that's in memory will just get wiped totally clean.

• Let's also reject this promise just for completeness, even though this is
  going to trigger a refresh anyway. We'll say promise.reject. We'll just give
  it a message of "Please reauthenticate." If we save that, then we are good to
  go.

Background

Authenticated HTTP requests

Applications without user authentication cannot reliably store and present data
tied to a specific user. And users expect the ability to save data, close the
app, and return to the app and interact with the same data they created. To do
this securely (in a way that doesn't allow anyone to access anyone else's data),
you need to support authentication. The most common approach to this is a
username/password pair.

However, the user doesn't want to submit their password every time they need to
make a request for data. They want to be able to log into the application and
then the application can continuously authenticate requests for them
automatically. That said, we don't want to store the user's password and send
that with every request. A common solution to this problem is to use a special
limited use "token" which represents the user's current session. That way the
token can be invalidated (in the case that it's lost or stolen) and the user
doesn't have to change their password. They simply re-authenticate and they can
get a fresh token.

So, every request the client makes must include this token to make authenticated
requests. This is one reason it's so nice to have a small wrapper around
window.fetch: so you can automatically include this token in every request
that's made. A common way to attach the token is to use a special request header
called "Authorization".

Here's an example of how to make an authenticated request:

window.fetch('http://example.com/pets', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
})

That token can really be anything that uniquely identifies the user, but a
common standard is to use a JSON Web Token (JWT). 📜 https://jwt.io

Authentication and user identity management is a difficult problem, so it's
recommended to use a service to handle this for you. Most services will give you
a mechanism for retrieving a token when the user opens your application and you
can use that token to make authenticated requests to your backend. Some services
you might consider investigating are Auth0,
Netlify Identity,
and Firebase Authentication.

Regardless of what service provider you use (or if you build your own), the
things you'll learn in this exercise are the same:

1. Call some API to retrieve a token
2. If there's a token, then send it along with the requests you make

const token = await authProvider.getToken()
const headers = {
  Authorization: token ? `Bearer ${token}` : undefined,
}
window.fetch('http://example.com/pets', {headers})

Auth in React

In a React application you manage user authenticated state the same way you
manage any state: useState + useEffect (for making the request). When the
user provides a username and password, you make a request and if the request is
successful, you can then use that token to make additional authenticated
requests. Often, in addition to the token, the server will also respond with the
user's information which you can store in state and use it to display the user's
data.

The easiest way to manage displaying the right content to the user based on
whether they've logged in, is to split your app into two parts: Authenticated,
and Unauthenticated. Then you choose which to render based on whether you have
the user's information.

And when the app loads in the first place, you'll call your auth provider's API
to retrieve a token if the user is already logged in. If they are, then you can
show a loading screen while you request the user's data before rendering
anything else. If they aren't, then you know you can render the login screen
right away.

📜 Learn more about this:
https://kentcdodds.com/blog/authentication-in-react-applications

Exercise

Production deploys:

• Exercise
• Final

👨‍💼 Our users are excited about the demo, but they really want to start making
their own reading lists out of those books. Our backend engineers have been
working around the clock to get this authentication stuff working for you.

We're using a service called "Auth Provider" (yes, a very clever name, it's a
made-up thing, but should give you a good idea of how to use any typical
authentication provider which is the point).

Here's what you need to know about "Auth Provider":

• You import it like this: import * as auth from 'auth-provider'
• Here are the exports you'll need (they're all async):
  • getToken() - resolves to the token if it exists
  • login({username, password}) - resolves to the user if successful
  • register({username, password}) - resolves to the user if successful
  • logout - logs the user out

To make an authenticated request, you'll need to get the token, and attach an
Authorization header to the request set to: Bearer {token}

As for the UI, when the user registers or logs in, they should be shown the
discover page. They should also have a button to logout which will clear the
user's token from the browser and render the home page again.

Files

• src/app.js

Extra Credit

1. 💯 Load the user's data on page load

Production deploy

👨‍💼 People are complaining that when they refresh the app shows them the login
screen again. Whoops! Looks like we'll need to check if there's a token in
localStorage and make a request to get the user's info if there is.

Luckily, the backend devs gave us an API we can use to get the user's
information by providing the token:

const token = await auth.getToken()
if (token) {
  // we're logged in! Let's go get the user's data:
  client('me', {token}).then(data => {
    console.log(data.user)
  })
} else {
  // we're not logged in. Show the login screen
}

Add this capability to src/app.js (in a React.useEffect()) so users don't
have to re-enter their username and password if the Auth Provider has the token
already.

You'll also need to add the ability to accept the token option in the client
and set that in the Authorization header (remember, it should be set to:
Bearer ${token})

Files:

• src/app.js
• src/utils/api-client.js

2. 💯 Use useAsync

Production deploy

Your co-worker came over 🧝‍♀️ because she noticed the app renders the login screen
for a bit while it's requesting the user's information. She then politely
reminded you that you could get loading state and everything for free by using
her useAsync hook. Doh! Let's update ./src/app.js to use useAsync and
solve this loading state issue.

She mentions you'll need to know that you can set the data directly:

const {data, error, isIdle, isLoading, isSuccess, isError, run, setData} =
  useAsync()

const doSomething = () => somethingAsync().then(data => setData(data))

You'll use this for the login and register.

When in isLoading or isIdle state, you can render the FullPageSpinner from
components/lib. If you end up in isError state then you can render this:

<div
  css={{
    color: colors.danger,
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }}
>
  <p>Uh oh... There's a problem. Try refreshing the app.</p>
  <pre>{error.message}</pre>
</div>

Files:

• src/app.js

3. 💯 automatically logout on 401

Production deploy

If the user's token expires or the user does something they're not supposed to,
the backend can send a 401 request. If that happens, then we'll want to log the
user out and refresh the page automatically so all data is removed from the
page.

Call auth.logout() to delete the user's token from the Auth Provider and call
window.location.assign(window.location) to reload the page for them.

Files:

• src/utils/api-client.js

4. 💯 Support posting data

Production deploy

It won't be long before we need to actually start sending data along with our
requests, so let's enhance the client to support that use case as well.

Here's how we should be able to use the client when this is all done:

client('http://example.com/pets', {
  token: 'THE_USER_TOKEN',
  data: {name: 'Fluffy', type: 'cat'},
})

// results in fetch getting called with:
// url: http://example.com/pets
// config:
//  - method: 'POST'
//  - body: '{"name": "Fluffy", "type": "cat"}'
//  - headers:
//    - 'Content-Type': 'application/json'
//    - Authorization: 'Bearer THE_USER_TOKEN'

Files:

• src/utils/api-client.js

🦉 Elaboration and Feedback

After the instruction, if you want to remember what you've just learned, then
fill out the elaboration and feedback form:

https://ws.kcd.im/?ws=Build%20React%20Apps&e=04%3A%20Authentication&em=

Render a React App

📝 Your Notes

Exercise

// 🐨 you'll need to import react and createRoot from react-dom up here
import React from 'react'
import {createRoot} from 'react-dom/client'

// 🐨 you'll also need to import the Logo component from './components/logo'
import {Logo} from 'components/logo'

// 🐨 create an App component here and render the logo, the title ("Bookshelf"), a login button, and a register button.
// 🐨 for fun, you can add event handlers for both buttons to alert that the button was clicked
const App = () => {
  const handleBtnClick = e => {
    const btnName = e.target.textContent
    alert(`${btnName} clicked!`)
  }

  return (
    <>
      <Logo width="80" height="80" />
      <h1>Bookshelf</h1>
      <div>
        <button onClick={handleBtnClick}>Login</button>
      </div>
      <div>
        <button onClick={handleBtnClick}>Register</button>
      </div>
    </>
  )
}

// 🐨 use createRoot to render the <App /> to the root element
// 💰 find the root element with: document.getElementById('root')
const root = createRoot(document.getElementById('root'))
root.render(<App />)
export {root}

1. 💯 Use @reach/dialog

import '@reach/dialog/styles.css'
import React, {useState} from 'react'
import {createRoot} from 'react-dom/client'
import Dialog from '@reach/dialog'
import {Logo} from 'components/logo'

const App = () => {
  const [openModal, setOpenModal] = useState('none')

  const handleModalClose = () => setOpenModal('none')

  return (
    <>
      <Logo width="80" height="80" />
      <h1>Bookshelf</h1>
      <div>
        <button onClick={() => setOpenModal('login')}>Login</button>
      </div>
      <div>
        <button onClick={() => setOpenModal('register')}>Register</button>
      </div>
      <Dialog
        aria-label="Login form"
        isOpen={openModal === 'login'}
        onDismiss={handleModalClose}
      >
        <button onClick={handleModalClose}>close</button>
        <h3>Login</h3>
      </Dialog>
      <Dialog
        aria-label="Registration form"
        isOpen={openModal === 'register'}
        onDismiss={handleModalClose}
      >
        <button onClick={handleModalClose}>close</button>
        <h3>Register</h3>
      </Dialog>
    </>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)
export {root}

2. 💯 Create a LoginForm component

import '@reach/dialog/styles.css'
import React, {useState} from 'react'
import {createRoot} from 'react-dom/client'
import Dialog from '@reach/dialog'
import {Logo} from 'components/logo'

const LoginForm = ({onSubmit, buttonText}) => {
  const handleSubmit = e => {
    e.preventDefault()
    // * Form event target elements shows all elements it has
    // * You can destructure those elements by their ID (<input id='something' />)
    const {username, password} = e.target.elements

    onSubmit({
      username: username.value,
      password: password.value,
    })
  }
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username</label>
        <input id="username" type="text" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" type="password" />
      </div>
      <div>
        <button type="submit">{buttonText}</button>
      </div>
    </form>
  )
}

const App = () => {
  const [openModal, setOpenModal] = useState('none')

  const handleModalClose = () => setOpenModal('none')

  // * FormData object: https://developer.mozilla.org/ko/docs/Web/API/FormData/FormData
  const login = formData => console.log('login', formData)
  const register = formData => console.log('register', formData)

  return (
    <>
      <Logo width="80" height="80" />
      <h1>Bookshelf</h1>
      <div>
        <button onClick={() => setOpenModal('login')}>Login</button>
      </div>
      <div>
        <button onClick={() => setOpenModal('register')}>Register</button>
      </div>
      <Dialog
        aria-label="Login form"
        isOpen={openModal === 'login'}
        onDismiss={handleModalClose}
      >
        <button onClick={handleModalClose}>close</button>
        <h3>Login</h3>
        <LoginForm onSubmit={login} buttonText="Login" />
      </Dialog>
      <Dialog
        aria-label="Registration form"
        isOpen={openModal === 'register'}
        onDismiss={handleModalClose}
      >
        <button onClick={handleModalClose}>close</button>
        <h3>Register</h3>
        <LoginForm onSubmit={register} buttonText="Register" />
      </Dialog>
    </>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)
export {root}

Background

The first step to any React app is to create a component and render it to the
page. In modern applications with modern tools, this means you'll import React
and ReactDOM and use them to create React elements, and render those to a div.

Exercise

Production deploys:

• Exercise
• Final

👨‍💼 I'm excited to get started with you! Let's start out by rendering our awesome
logo and the title of our app. We'll eventually want to allow people to login so
let's also render Login and Register buttons.

Files

• src/index.js

Extra Credit

1. 💯 Use @reach/dialog

Production deploy

👨‍💼 When the user clicks "Login" or "Register", we should open a modal with a
form for them to provide their username and password.

In this extra credit, get the Dialog component from @reach/dialog and make
it open when the user clicks the Login or Register button. It's a fantastic
component with a great API and fantastic accessibility characteristics.

📜 https://reacttraining.com/reach-ui/dialog

💰 as with everything, there are many ways to do this. For me, I actually render
two individual dialogs and toggle which is open based on a openModal state
which can be set to none, login, or register.

💰 Don't forget to include the styles: import '@reach/dialog/styles.css'

Files:

• src/index.js

2. 💯 Create a LoginForm component

Production deploy

👨‍💼 The user should be able to login or register by providing a username and
password.

For this one, create a LoginForm component which renders a form accepting a
username and password. When the user submits the form, it should call an
onSubmit prop with the username and password. Here's how it will be used:

function Example() {
  function handleSubmit(formData) {
    console.log('login', formData)
  }
  return <LoginForm onSubmit={handleSubmit} buttonText="Login" />
}

That should render a form where the submit button says "Login" and when the user
clicks it, you'll get a console.log with the form's data.

Files:

• src/index.js

🦉 Elaboration and Feedback

After the instruction, if you want to remember what you've just learned, then
fill out the elaboration and feedback form:

https://ws.kcd.im/?ws=Build%20React%20Apps&e=01%3A%20Render%20a%20React%20App&em=

Make HTTP Requests

📝 Your Notes

Exercise

/** @jsx jsx */
import {jsx} from '@emotion/core'

import './bootstrap'
import Tooltip from '@reach/tooltip'
import {FaSearch} from 'react-icons/fa'
import {Input, BookListUL, Spinner} from './components/lib'
import {BookRow} from './components/book-row'
import {useState, useEffect} from 'react'
import {client} from 'utils/api-client.exercise'

function DiscoverBooksScreen() {
  const [status, setStatus] = useState('idle')
  const [query, setQuery] = useState('')
  const [queried, setQueried] = useState(false)
  const [data, setData] = useState(null)

  const isLoading = status === 'loading'
  const isSuccess = status === 'success'

  useEffect(() => {
    if (!queried) {
      return
    }

    setStatus('loading')
    client(`books?query=${encodeURIComponent(query)}`).then(responseData => {
      setData(responseData)
      setStatus('success')
    })
  }, [queried, query])

  function handleSearchSubmit(event) {
    event.preventDefault()
    setQuery(event.target.elements.search.value)
    setQueried(true)
  }

  return (
    <div
      css={{maxWidth: 800, margin: 'auto', width: '90vw', padding: '40px 0'}}
    >
      <form onSubmit={handleSearchSubmit}>
        <Input
          placeholder="Search books..."
          id="search"
          css={{width: '100%'}}
        />
        <Tooltip label="Search Books">
          <label htmlFor="search">
            <button
              type="submit"
              css={{
                border: '0',
                position: 'relative',
                marginLeft: '-35px',
                background: 'transparent',
              }}
            >
              {isLoading ? <Spinner /> : <FaSearch aria-label="search" />}
            </button>
          </label>
        </Tooltip>
      </form>

      {isSuccess ? (
        data?.books?.length ? (
          <BookListUL css={{marginTop: 20}}>
            {data.books.map(book => (
              <li key={book.id} aria-label={book.title}>
                <BookRow key={book.id} book={book} />
              </li>
            ))}
          </BookListUL>
        ) : (
          <p>No books found. Try another search.</p>
        )
      ) : null}
    </div>
  )
}

export {DiscoverBooksScreen}

function client(endpoint, customConfig = {}) {
  // 🐨 create the config you'll pass to window.fetch
  //    make the method default to "GET"
  // 💰 if you're confused by this, that's fine. Scroll down to the bottom
  // and I've got some code there you can copy/paste.
  // 🐨 call window.fetch(fullURL, config) then handle the json response
  // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  // 💰 here's how to get the full URL: `${process.env.REACT_APP_API_URL}/${endpoint}`
  const config = {method: 'GET', ...customConfig}

  return window
    .fetch(`${process.env.REACT_APP_API_URL}/${endpoint}`, config)
    .then(response => response.json())
}

export {client}

1. 💯 handle failed requests

function client(endpoint, customConfig = {}) {
  const config = {method: 'GET', ...customConfig}

  return window
    .fetch(`${process.env.REACT_APP_API_URL}/${endpoint}`, config)
    .then(async response => {
      const data = await response.json()
      if (response.ok) {
        return data
      } else {
        return Promise.reject(data)
      }
    })
}

export {client}

// updated useEffect
useEffect(() => {
  if (!queried) {
    return
  }

  setStatus('loading')
  client(`books?query=${encodeURIComponent(query)}`).then(
    responseData => {
      setData(responseData)
      setStatus('success')
    },
    errorData => {
      setError(errorData)
      setStatus('error')
    },
  )
}, [queried, query])

• The interesting thing about window.fetch is that it won't reject your promise
  unless the network request itself failed. If talking to the server at all
  failed, then you'll get a rejection, but if that talking to the server was
  successful, then you don't get a rejection even if the request itself was a
  non-200 status code.

• We want our client to reject the promise if the response is not OK, and that's
  what we're going to handle in our API client. Now, remember, that
  response.json is an async call, so I'm going to turn this successHandler
  function into an async function. That way, I can await this response.json, and
  that will give me my data.

• Now, I'm going to get data, whether the request was successful or not, and I'm
  going to use that data for the Success response or for the rejected promise.

I'm going to determine whether it should resolve or reject based on response.OK.
If the response is OK, then we can simply return the data, and that leaves our
promise in a resolve state, but if the response was not OK, then we're going to
return a Promise.rejects version of the data. That means that our promise will
reject.

2. 💯 use the useAsync hook

const {data, error, run, isLoading, isSuccess, isError} = useAsync()
const [query, setQuery] = useState('')
const [queried, setQueried] = useState(false)

useEffect(() => {
  if (!queried) return

  run(client(`books?query=${encodeURIComponent(query)}`))
}, [queried, query, run])

• This run() function is what we call anytime we want to trigger a run of
  something asynchronous that will update our data and our error and our status
  values.

• Well, client(books?query=${encodeURIComponent(query)}) is this promise
  that we get back from clients, so we'll call run with that client promise.
  Then, we'll add a run to our dependencies here. We don't need to worry about
  it though, because run is memoized using useCallback, so that's never going to
  change on us.

• Anywhere in our application that needs some asynchronous handling can use this
  useAsync hook and not have to manage all of the status of that promise or the
  data, or error state that results from that promise, which really cleaned up
  our code right here.

Background

Our app wouldn't be very interesting without the ability to request data from a
backend for the user to view and interact with. The way to do this in the web is
using HTTP with the window.fetch API. Here's a quick simple example of that
API in action:

window
  .fetch('http://example.com/movies.json')
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data)
  })

All the HTTP methods are supported as well, for example, here's how you would
POST data:

window
  .fetch('http://example.com/movies', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // if auth is required. Each API may be different, but
      // the Authorization header with a token is common.
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(data), // body data type must match "content-type" header
  })
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data)
  })

If the request fails with an unsuccessful status code (>= 400), then the
response object's ok property will be false. It's common to reject the
promise in this case:

window.fetch(url).then(async response => {
  const data = await response.json()
  if (response.ok) {
    return data
  } else {
    return Promise.reject(data)
  }
})

It's good practice to wrap window.fetch in your own function so you can set
defaults (especially handy for authentication). Additionally, it's common to
have "clients" which build upon this wrapper for operations on different
resources.

Integrating this kind of thing with React involves utilizing React's useEffect
hook for making the request and useState for managing the status of the
request as well as the response data and error information.

You might consider making the network request in the event handler. In general I
recommend to do all your side effects inside the useEffect. This is because in
the event handler you don't have any possibility to prevent race conditions, or
to implement any cancellation mechanism.

📜 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Exercise

Production deploys:

• Exercise
• Final

👨‍💼 Our users are getting restless and want to start looking at some books, so
we're putting our login flow to the side for a moment so we can work on the book
search feature. The backend is ready to go for this and we've already set up an
environment variable which we can use in our code for the API url (you can see
that in .env and .env.development). The URL for the search API is:

const endpoint = `${process.env.REACT_APP_API_URL}/books?query=Voice%20of%20War`

Making a request to this endpoint will return this data:

{
  "books": [
    {
      "title": "Voice of War",
      "author": "Zack Argyle",
      "coverImageUrl": "https://images-na.ssl-images-amazon.com/images/I/41JodZ5Vl%2BL.jpg",
      "id": "B084F96GFZ",
      "pageCount": 372,
      "publisher": "Self Published",
      "synopsis": "..."
    }
  ]
}

We've also already designed the page. All that's left is to wire up our design
with the backend. But we've never made a request to the backend yet so you'll
need to create the API client function that we'll use for making all requests
to our API (like searching books). Once that's ready, you can use it in your
component.

Files

• src/discover.js
• src/utils/api-client.js

Extra Credit

1. 💯 handle failed requests

Production deploy

Our backend developers try really hard to give you the data you need, but
sometimes things just fail (💰 especially if you send the word "FAIL" as the
query... go ahead, try it).

Add support for showing the user helpful information in the event of a failure.
Our designer gave us this which you can use for the UI:

For the search icon:

// get FaTimes from react-icons
<FaTimes aria-label="error" css={{color: colors.danger}} />

// display this between the search input and the results
{
  isError ? (
    <div css={{color: colors.danger}}>
      <p>There was an error:</p>
      <pre>{error.message}</pre>
    </div>
  ) : null
}

💰 I wasn't joking. For some reason every time you send the backend the word
"FAIL" it results in a failure. Our backend devs are completely baffled, but it
sure makes it easier for you to test the error state out!

Files:

• src/utils/api-client.js
• src/discover.js

2. 💯 use the useAsync hook

Production deploy

After you finished with everything, one of the other UI devs 🧝‍♀️ was reviewing
your PR and asked why you didn't use the useAsync hook she wrote last week.
You respond by palming your face 🤦‍♂️ and go back to the drawing board.

useAsync is slightly different from what you've built. Here's an example:

import {useAsync} from 'utils/hooks'

const {data, error, run, isLoading, isError, isSuccess} = useAsync()

// in an event handler/effect/wherever
run(doSomethingThatReturnsAPromise())

This seems to handle your use case well, so let's swap your custom solution with
your co-worker's useAsync hook.

Files:

• src/discover.js

🦉 Elaboration and Feedback

After the instruction, if you want to remember what you've just learned, then
fill out the elaboration and feedback form:

https://ws.kcd.im/?ws=Build%20React%20Apps&e=03%3A%20Make%20HTTP%20Requests&em=

Creating custom components

📝 Your Notes

Kent

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function message({ children }) {
      return <div className="message">{children}</div>
    }

    const helloElement = message({ children: 'Hello World' })
    const goodbyeElement = message({ children: 'Goodbye World' })

    const element = (
      <div className="container">
        {helloElement}
        {goodbyeElement}
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

Mine

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    // 🐨 Make a function called `message` which returns the JSX we want to share
    const message = (props) => <div className="message">{props.children}</div>

    // 🐨 use that function in place of the divs below with:
    // 💰 {message({children: 'Hello World'})} {message({children: 'Goodbye World'})}
    const element = (
      <div className="container">
        {message({ children: 'Hello World' })}
        {message({ children: 'Goodbye World' })}
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

Extra 1

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function message({ children }) {
      return <div className="message">{children}</div>
    }

    const helloElement = React.createElement(message, { children: 'Hello World' })
    const goodbyeElement = React.createElement(message, { children: 'Goodbye World' })
    console.log({ helloElement })


    const element = (
      <div className="container">
        {helloElement}
        {goodbyeElement}
        {message({ children: 'it just shows a meaningless div' })}
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

• There is something different in the way that React manages these elements when we use the createElement API, versus simply calling the function and getting some React elements back.
• That has some pretty strong implications for our custom components.
• 

Extra 2

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function Message({ children }) {
      return <div className="message">{children}</div>
    }

    const element = (
      // <Message>Goodbye World</Message> === {React.createElement(Message, { children: 'Goodbye World' })}
      <div className="container">
        <Message>Hello World</Message>
        <Message>Goodbye World</Message>
        {React.createElement(Message, { children: 'Goodbye World' })}
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

• Basically, the JSX syntax specification says that if you start an angle bracket, and you provide a React element type or this element type as a capital letter, then that means it should be a reference to a variable that is in scope.

Extra 3

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function Message({ subject, greeting }) {
      return (
        <div className="message">
          {greeting}, {subject}
        </div>
      )
    }

    const PropTypes = {
      string(props, propName, componentName) {
        console.log({ props, propName, componentName })
        const type = typeof props[propName]
        if (type !== 'string') {
          return new Error(`Hey, the component ${componentName} needs to be prop ${propName} to be a type of "string" but was passed a ${type}.`)
        }
      }
    }

    Message.propTypes = {
      subject: PropTypes.string,
      greeting: PropTypes.string
    }

    const element = (
      <div className="container">
        <Message greeting="Hello" subject="World" />
        <Message greeting="Goodbye" subject="World" />
        <Message greeting={1} />
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

• In review, to use PropTypes, you have this component, and then you add a PropTypes property onto that component. That's an object where the properties of that object are the props that you want to validate for that component. The value is a function that acts as a validator, where it returns a new error if there's a problem with that particular prop by its prop name.

• One thing to keep in mind is this is not free. This can actually be problematic for performance. React actually does not do this in production mode. If I were to say production.min to get the minified production built version of React and ReactDOM, and we save this, we're going to get a refresh, and we're no longer going to see those errors. These are no longer running.

• There's actually in all modern tools that you're going to be using to build your React apps, there are Babel plugins that will just remove this from the code entirely, so you don't have to worry about prop types being included in production, and running and causing performance problems for your applications.

• That's something to keep in mind as well is that this is a development time-only feature. You will only see it in development, and it is quite awesome.

Extra 4

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
  <script type="text/babel">
    function Message({ subject, greeting }) {
      return (
        <div className="message">
          {greeting}, {subject}
        </div>
      )
    }

    Message.propTypes = {
      subject: PropTypes.string.isRequired,
      greeting: PropTypes.string.isRequired,
    }

    const element = (
      <div className="container">
        <Message greeting="Hello" subject="World" />
        <Message greeting="Goodbye" subject="World" />
        <Message subject="World" />
        <Message greeting="Goodbye" subject={5} />
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>

• PropTypes are nice because it's a runtime, but you should probably be OK just using TypeScript, the static-type definitions that you have there. If you're not using a static-type language like TypeScript, then I do recommend that you implement PropTypes on most of the components in your React application, because it will save your neck absolutely 100 percent. That's PropTypes.

Background

Just like in regular JavaScript, you often want to share code which you do using
functions. If you want to share JSX, you can do that as well. In React we call
these functions "components" and they have some special properties.

Components are basically functions which return something that is "renderable"
(more React elements, strings, null, numbers, etc.)

Exercise

Production deploys:

• Exercise
• Final

Let's say the DOM we want to generate is like this:

<div class="container">
  <div class="message">Hello World</div>
  <div class="message">Goodbye World</div>
</div>

In this case, it would be cool if we could reduce the duplication for creating
the React elements for this:

<div className="message">{children}</div>

So we need to make a function which accepts an object argument with a children
property and returns the React element. Then you can interpolate a call to that
function in your JSX.

<div>{message({children: 'Hello World'})}</div>

This is not how we write custom React components, but this is important for you
to understand them. We'll get to custom components in the extra credit.

📜 Read more

• https://reactjs.org/docs/jsx-in-depth.html
• https://kentcdodds.com/blog/what-is-jsx

Extra Credit

1. 💯 using a custom component with React.createElement

Production deploy

So far we've only used React.createElement(someString), but the first argument
to React.createElement can also be a function which returns something that's
renderable.

So instead of calling your message function, pass it as the first argument to
React.createElement and pass the {children: 'Hello World'} object as the
second argument.

2. 💯 using a custom component with JSX

Production deploy

We're so close! Just like using JSX for regular divs is nicer than using the
raw React.createElement API, using JSX for custom components is nicer too.
Remember that it's Babel that's responsible for taking our JSX and compiling it
to React.createElement calls so we just need a way to tell Babel how to
compile our JSX so it passes the function by its name rather than a string.

We do this by how the JSX appears. Here are a few examples of Babel output for
JSX:

ui = <Capitalized /> // React.createElement(Capitalized)
ui = <property.access /> // React.createElement(property.access)
ui = <Property.Access /> // React.createElement(Property.Access)
ui = <Property['Access'] /> // SyntaxError
ui = <lowercase /> // React.createElement('lowercase')
ui = <kebab-case /> // React.createElement('kebab-case')
ui = <Upper-Kebab-Case /> // React.createElement('Upper-Kebab-Case')
ui = <Upper_Snake_Case /> // React.createElement(Upper_Snake_Case)
ui = <lower_snake_case /> // React.createElement('lower_snake_case')

See if you can change your component function name so people can use it with JSX
more easily!

3. 💯 Runtime validation with PropTypes

Production deploy

Let's change the Message component a little bit. Make it look like this now:

function Message({subject, greeting}) {
  return (
    <div className="message">
      {greeting}, {subject}
    </div>
  )
}

So now we'll use it like this:

<Message greeting="Hello" subject="World" />
<Message greeting="Goodbye" subject="World" />

What happens if I forget to pass the greeting or subject props? It's not
going to render properly. We'll end up with a dangling comma somewhere. It would
be nice if we got some sort of indication that we passed the wrong value to the
component. This is what the propTypes feature is for. Here's an example of how
you use propTypes:

function FavoriteNumber({favoriteNumber}) {
  return <div>My favorite number is: {favoriteNumber}</div>
}

const PropTypes = {
  number(props, propName, componentName) {
    if (typeof props[propName] !== 'number') {
      return new Error('Some useful error message here')
    }
  },
}

FavoriteNumber.propTypes = {
  favoriteNumber: PropTypes.number,
}

With that, if I do this:

<FavoriteNumber favoriteNumber="not a number" />

I'll get an error in the console.

For this extra credit, add propTypes support to your updated component
(remember to update it to have the subject and greeting).

🦉 Note that prop types add some runtime overhead resulting in sub-optimal
performance, so they are not run in production.

📜 Read more about prop-types:

• https://reactjs.org/docs/typechecking-with-proptypes.html

4. 💯 Use the prop-types package

Production deploy

As it turns out, there are some pretty common things you'd want to validate, so
the React team maintains a package of these called
prop-types. Go ahead and get that added to the
page by adding a script tag for it:

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>

Then use that package instead of writing it yourself. Also, make use of the
isRequired feature!

5. 💯 using React Fragments

Production deploy

One feature of JSX that you'll find useful is called
"React Fragments". It's a special
kind of component from React which allows you to position two elements
side-by-side rather than just nested.

The component is available via <React.Fragment> (or a
short syntax that opens
with <> and closes with </>). Replace the <div className="container"> with
a fragment and inspect the DOM to notice that the elements are both rendered as
direct children of root.

🦉 Feedback

Fill out
the feedback form.

Prop Collections and Getters

📝 Your Notes

Exercise

// Prop Collections and Getters
// http://localhost:3000/isolated/exercise/04.js

import * as React from 'react'
import {Switch} from '../switch'

function useToggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  // 🐨 Add a property called `togglerProps`. It should be an object that has
  // `aria-pressed` and `onClick` properties.
  // 💰 {'aria-pressed': on, onClick: toggle}
  const togglerProps = {'aria-pressed': on, onClick: toggle}
  return {
    on,
    toggle,
    togglerProps,
  }
}

function App() {
  const {on, togglerProps} = useToggle()
  return (
    <div>
      <Switch on={on} {...togglerProps} />
      <hr />
      <button aria-label="custom-button" {...togglerProps}>
        {on ? 'on' : 'off'}
      </button>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

• The most common use case is the person who's using useToggle probably wants to wire up some switch or button to the state of our useToggle hook.
• We're going to return an object of toggler props. These toggler props are going to have all the props that we typically would apply to this kind of component.
• We're going to say aria-pressed for our accessibility friends, and onClick will be a toggle. When the user clicks on it, we'll set the on to the opposite of whatever it is currently. That is the whole exercise right there. It probably looks a little bit too simple, but the pattern that we're talking about here is very important.
• It is important that we continue to pass the onState and the toggle function here so that people who are building UIs that don't perfectly mesh up with the toggler props that we're providing can continue to build those UIs accessing that state and the mechanism for updating the state.
• For our case, we get the toggler props, we spread that across the position of the props of our switch, and we do the same for the props.

1. 💯 prop getters

// Prop Collections and Getters
// http://localhost:3000/isolated/exercise/04.js

import * as React from 'react'
import {Switch} from '../switch'

function callAll(...fns) {
  return (...args) => {
    fns.forEach(fn => {
      fn && fn(...args)
    })
  }
}

function useToggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  function getTogglerProps({onClick, ...props} = {}) {
    return {
      'aria-pressed': on,
      // onClick: () => {
      //   onClick && onClick()
      //   toggle()
      // },
      onClick: callAll(onClick, toggle),
      ...props,
    }
  }

  return {
    on,
    toggle,
    getTogglerProps,
  }
}

function App() {
  const {on, getTogglerProps} = useToggle()
  return (
    <div>
      <Switch {...getTogglerProps({on})} />
      <hr />
      <button
        {...getTogglerProps({
          'aria-label': 'custom-button',
          onClick: () => console.info('onButtonClick'),
          id: 'custom-button-id',
        })}
      >
        {on ? 'on' : 'off'}
      </button>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

• Then getTogglerProps can be responsible for accepting all the props that I want to pass, composing them together in a way that works, and then returning all of those props composed together so I can spread them across that button.
• First thing I'm going to do is I'm going to de-structure this so that I can grab the onClick if it's provided, and then we'll take the rest of the prompts. Let's do a default object here just in case they don't have any props that they care to apply. We can default that to an empty object, so they don't have to pass anything if they don't want to.
• We'll only call onClick if it's truthy. That works for both of our use cases. Now, we can click on this. It's working fine. We're getting our log. Down here, instead of togglerProps, we can call getTogglerProps.
• What I'm going to do is I'm going to make this fancy function called callAll(). This is going to take any number of functions, and then it's going to return a function that takes any number of arguments. I don't care what those arguments are. We'll take those functions. For each of those, we'll take that function.
• If that function exists, then we'll call that function with all the args. Basically, it's a function that I can call passing any number of functions that will return a function that calls all those functions. Definitely, you play around with this a little bit if it's a little confusing to you, but it's pretty fantastic.
• What it allows me to do here now is I can say, "Give me a function that will call all of the functions I pass you onClick and toggle." It'll call onClick, and then it'll call toggle. It'll only call onClick if that function actually exists.

Background

One liner: The Prop Collections and Getters Pattern allows your hook to
support common use cases for UI elements people build with your hook.

In typical UI components, you need to take accessibility into account. For a
button functioning as a toggle, it should have the aria-pressed attribute set
to true or false if it's toggled on or off. In addition to remembering that,
people need to remember to also add the onClick handler to call toggle.

Lots of the reusable/flexible components and hooks that we'll create have some
common use-cases and it'd be cool if we could make it easier to use our
components and hooks the right way without requiring people to wire things up
for common use cases.

Real World Projects that use this pattern:

• downshift (uses prop getters)
• react-table (uses prop
  getters)
• @reach/tooltip (uses prop
  collections)

Exercise

Production deploys:

• Exercise
• Final

In our simple example, this isn't too much for folks to remember, but in more
complex components, the list of props that need to be applied to elements can be
extensive, so it can be a good idea to take the common use cases for our hook
and/or components and make objects of props that people can simply spread across
the UI they render.

Extra Credit

1. 💯 prop getters

Production deploy

Uh oh! Someone wants to use our togglerProps object, but they need to apply
their own onClick handler! Try doing that by updating the App component to
this:

function App() {
  const {on, togglerProps} = useToggle()
  return (
    <div>
      <Switch on={on} {...togglerProps} />
      <hr />
      <button
        aria-label="custom-button"
        {...togglerProps}
        onClick={() => console.info('onButtonClick')}
      >
        {on ? 'on' : 'off'}
      </button>
    </div>
  )
}

Does that work? Why not? Can you change it to make it work?

What if we change the API slightly so that instead of having an object of props,
we call a function to get the props. Then we can pass that function the props we
want applied and that function will be responsible for composing the props
together.

Let's try that. Update the App component to this:

function App() {
  const {on, getTogglerProps} = useToggle()
  return (
    <div>
      <Switch {...getTogglerProps({on})} />
      <hr />
      <button
        {...getTogglerProps({
          'aria-label': 'custom-button',
          onClick: () => console.info('onButtonClick'),
          id: 'custom-button-id',
        })}
      >
        {on ? 'on' : 'off'}
      </button>
    </div>
  )
}

See if you can make that API work.

🦉 Feedback

Fill out
the feedback form.

Compound Components

📝 Your Notes

Exercise

// Compound Components
// http://localhost:3000/isolated/exercise/02.js

import * as React from 'react'
import {Switch} from '../switch'

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(on => !on)

  // 🐨 replace this with a call to React.Children.map and map each child in
  // props.children to a clone of that child with the props they need using
  // React.cloneElement.
  // 💰 React.Children.map(props.children, child => {/* return child clone here */})
  // 📜 https://reactjs.org/docs/react-api.html#reactchildren
  // 📜 https://reactjs.org/docs/react-api.html#cloneelement
  // return <Switch on={on} onClick={toggle} />

  return React.Children.map(children, child => {
    const newChild = React.cloneElement(child, {on, toggle})
    console.log({child, newChild})
    return newChild
  })
}

// 🐨 Flesh out each of these components

// Accepts `on` and `children` props and returns `children` if `on` is true
const ToggleOn = ({on, children}) => (on ? children : null)

// Accepts `on` and `children` props and returns `children` if `on` is false
const ToggleOff = ({on, children}) => (on ? null : children)

// Accepts `on` and `toggle` props and returns the <Switch /> with those props.
const ToggleButton = ({on, toggle}) => <Switch on={on} onClick={toggle} />

function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <ToggleButton />
      </Toggle>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

• What we want to do is we want to allow users to render something when the toggle button is on and to render something else when that toggle button is off. Then we can use that toggle button anywhere in this layout to position that wherever we want.
• How do we take the state values that the toggle is managing and share it implicitly to the toggle on, toggle off, and toggle button components? I say implicitly because, as the user of these compound components, I don't have any way to know whether the toggle is on or off.
• First, we'll go ahead and flesh these out a little bit, and then we can work on figuring out how to get the toggle to pass props to these things that they need. For our toggle on component, we're going to accept two props, on and children. If on is true, then we'll return the children. Otherwise, we return null.
• Our toggle off will be very similar. We'll have on and children. If on is true, then we'll return null. Otherwise, we'll return children. We got to spell it correctly. Otherwise, it doesn't work. For our toggle button, we're going to accept on as our state and toggle as the function that we used to change our state.
• I'm just going to grab this switch code right here and paste it right here. We're going to say, "On for that on to the onProp here." Toggle will be forwarded on to the onClick. Cool. Now, we have these components ready to go, but we don't have any way to pass the on or toggle props to these because we don't have access to those.
• Those are managed within the toggle component itself. That's where we get a little fancy with our toggle function. One of the props that our toggle function is receiving is children. We're going to take that children prop, and I'm going to use the React.Children.
• This has a map function on it, which I can pass children to. Then a function, which will get called with every child. That's going to return to me whatever I map these children to. I'm going to return that. You can think of React.Children.map as basically an array.map, except, it works especially for React.Children because the children prop can be a single element, or it can be an array of elements.
• We're going to make a brand new copy of this child element using React.cloneElement. We have one child that's at the original one that was created by the app component when they'd called into rendering the toggle. Now, we have a new child that we just cloned from that original child. We're going to return that new child. You'll notice that the new child has the props that we want. We go props.
• In review, what we did here was, we just trusted in faith that we would get the props that we needed for each one of these components. Some of those props are provided to us by the user of our component. Others of these props are provided implicitly. Thanks to the toggle component we're going to be rendered inside of.
• This toggle component hands those props to us by taking all of its children and mapping those to new children, which are cloned copies of that original child with these additional props passed implicitly. At least, it's implicit from the perspective of the users, and it's explicit from the perspective of this toggle component. That's how you share implicit state for compound components.

1. 💯 Support DOM component children

// Compound Components
// http://localhost:3000/isolated/exercise/02.js

import * as React from 'react'
import {Switch} from '../switch'

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(on => !on)

  return React.Children.map(children, child => {
    if (typeof child.type === 'string') {
      return child
    }

    const newChild = React.cloneElement(child, {on, toggle})
    console.log(newChild.type)
    return newChild
  })

  /* or do this
  return React.Children.map(children, child => {
    if (allowedTypes.includes(child.type)) {
      const newChild = React.cloneElement(child, {on, toggle})
      return newChild
    }
    return child
  })
   */
}

const ToggleOn = ({on, children}) => (on ? children : null)

const ToggleOff = ({on, children}) => (on ? null : children)

const ToggleButton = ({on, toggle}) => <Switch on={on} onClick={toggle} />

function MyToggleButton({on, toggle}) {
  return on ? 'the buton is on yo.' : 'the button is off sooo...'
}

const allowedTypes = [ToggleOn, ToggleOff, ToggleButton]

function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <span>Hello</span>
        <ToggleButton />
        <MyToggleButton />
      </Toggle>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/

Background

One liner: The Compound Components Pattern enables you to provide a set of
components that implicitly share state for a simple yet powerful declarative API
for reusable components.

Compound components are components that work together to form a complete UI. The
classic example of this is <select> and <option> in HTML:

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

The <select> is the element responsible for managing the state of the UI, and
the <option> elements are essentially more configuration for how the select
should operate (specifically, which options are available and their values).

Let's imagine that we were going to implement this native control manually. A
naive implementation would look something like this:

<CustomSelect
  options={[
    {value: '1', display: 'Option 1'},
    {value: '2', display: 'Option 2'},
  ]}
/>

This works fine, but it's less extensible/flexible than a compound components
API. For example. What if I want to supply additional attributes on the
<option> that's rendered, or I want the display to change based on whether
it's selected? We can easily add API surface area to support these use cases,
but that's just more for us to code and more for users to learn. That's where
compound components come in really handy!

Real World Projects that use this pattern:

• @reach/tabs
• Actually most of Reach UI implements
  this pattern

Exercise

Production deploys:

• Exercise
• Final

Every reusable component starts out as a simple implementation for a specific
use case. It's advisable to not overcomplicate your components and try to solve
every conceivable problem that you don't yet have (and likely will never have).
But as changes come (and they almost always do), then you'll want the
implementation of your component to be flexible and changeable. Learning how to
do that is the point of much of this workshop.

This is why we're starting with a super simple <Toggle /> component.

In this exercise we're going to make <Toggle /> the parent of a few compound
components:

• <ToggleOn /> renders children when the on state is true
• <ToggleOff /> renders children when the on state is false
• <ToggleButton /> renders the <Switch /> with the on prop set to the on
  state and the onClick prop set to toggle.

We have a Toggle component that manages the state, and we want to render
different parts of the UI however we want. We want control over the presentation
of the UI.

🦉 The fundamental challenge you face with an API like this is the state shared
between the components is implicit, meaning that the developer using your
component cannot actually see or interact with the state (on) or the
mechanisms for updating that state (toggle) that are being shared between the
components.

So in this exercise, we'll solve that problem by providing the compound
components with the props they need implicitly using React.cloneElement.

Here's a simple example of using React.Children.map and React.cloneElement:

function Foo({children}) {
  return React.Children.map(children, (child, index) => {
    return React.cloneElement(child, {
      id: `i-am-child-${index}`,
    })
  })
}

function Bar() {
  return (
    <Foo>
      <div>I will have id "i-am-child-0"</div>
      <div>I will have id "i-am-child-1"</div>
      <div>I will have id "i-am-child-2"</div>
    </Foo>
  )
}

Extra Credit

1. 💯 Support DOM component children

Production deploy

A DOM component is a built-in component like <div />, <span />, or
<blink />. A composite component is a custom component like <Toggle /> or
<App />.

Try updating the App to this:

function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <span>Hello</span>
        <ToggleButton />
      </Toggle>
    </div>
  )
}

Notice the error message in the console and try to fix it.

🦉 Feedback

Fill out
the feedback form.

useRef and useEffect: DOM interaction

📝 Your Notes

Exercise

import * as React from 'react'
// eslint-disable-next-line no-unused-vars
import VanillaTilt from 'vanilla-tilt'

function Tilt({children}) {
  // 🐨 create a ref here with React.useRef()
  const tiltRef = React.useRef()

  // 🐨 add a `React.useEffect` callback here and use VanillaTilt to make your
  // div look fancy.
  React.useEffect(() => {
    const tiltNode = tiltRef.current
    VanillaTilt.init(tiltNode, {
      max: 25,
      speed: 400,
      glare: true,
      'max-glare': 0.5,
    })

    return function cleanup() {
      tiltNode.vanillaTilt.destroy()
    }
  }, [])
  // 💰 like this:
  // const tiltNode = tiltRef.current
  // VanillaTilt.init(tiltNode, {
  //   max: 25,
  //   speed: 400,
  //   glare: true,
  //   'max-glare': 0.5,
  // })
  //
  // 💰 Don't forget to return a cleanup function. VanillaTilt.init will add an
  // object to your DOM node to cleanup:
  // `return () => tiltNode.vanillaTilt.destroy()`
  //
  // 💰 Don't forget to specify your effect's dependencies array! In our case
  // we know that the tilt node will never change, so make it `[]`. Ask me about
  // this for a more in depth explanation.

  // 🐨 add the `ref` prop to the `tilt-root` div here:
  return (
    <div className="tilt-root" ref={tiltRef}>
      <div className="tilt-child">{children}</div>
    </div>
  )
}

function App() {
  return (
    <Tilt>
      <div className="totally-centered">vanilla-tilt.js</div>
    </Tilt>
  )
}

export default App

• useRef.current?

  • What we need to do is we need to create a ref so that we can get a reference to this DOM node. I'm going to create my tiltRef with React.useRef. With that, now I can take that tiltRef. I'm going to come down here, and we'll add a ref to this div for the tiltRef. Awesome.
  • If we go ahead and console.log the tiltRef right here and pop open our DevTools, we've got an object and the current value is that div tilt-root. That's interesting. Let's go ahead and say, ".current," and we refresh. Now, we're getting undefined. What's going on here?
  • What's happening here is the DevTools are trying to be helpful in showing you the current properties of this ref. Right here, the current property is div.tilt-root.
  • What's going on is React goes ahead and calls this function, and our tiltRef gets initialized undefined, because we're not passing an initial value. We could pass a null here; we could pass five. It doesn't really matter. Our initial value here is undefined, so tiltRef.current at this point is going to be undefined.
  • Then we forward that on to this div. Remember, we're not creating DOM nodes here. We're just creating UI descriptor objects. These objects that React uses, these React elements. Then ultimately, those get rendered as DOM nodes to the page.
  • When React renders that DOM node to the page, then it's going to say, "You wanted a reference to this DOM node." I'm going to go ahead and set the current property on this object to that DOM node. Then by the time we expand this, that has already happened, which is why we're able to see what that current property is.
  • The cool thing is that React is able to do this in time for our side effects to run, which is what we care about. We don't really care about accessing the DOM node at this point. We care about accessing the DOM node inside of a side effect handler. React.useEffect. This is where we're going to interact with our DOM nodes.

• Clean up function for optimization

  • Let's assume for a moment that this tilt could get removed from the page for some reason. If that happens, then vanilla-tilt is still wired up to this tiltNode. That DOM node is going to hang out because it can't be garbage collected. Even though it's not on the page anymore, vanilla-tilt still has event handlers hanging out on it, it has references to that DOM node. What could happen there is we end up with a memory leak in the browser, where we render this and then it goes away from the page, and we render it again, it goes away from the page.
  • Eventually, we're going to have a bunch of DOM nodes just hanging out in memory, wasting our user's memory, resulting in sub-optimal performance. We're going to add this optimization where we return a function called cleanup. That doesn't accept any arguments.

• Adding empty array for dependency

  • On top of that, as this tiltNode gets rerendered, we're going to have a problem, because this useEffect is called on every single rerender. What that's going to do is it's going to destroy our vanilla-tilt, and then it will reinitialize it every single time this component rerenders. We don't want it to do that. We're going to add this other optimization to have an empty array list of dependencies.
  • We're basically saying, "Hey, I don't need to synchronize the state of the world with the state of the app, because the state of the world that I'm dealing with doesn't actually depend on the state of the app. It just needs to happen once when we're mounted, and then get cleaned up when were unmounted." We cover that with this useEffect.

Background

Often when working with React you'll need to integrate with UI libraries. Some
of these need to work directly with the DOM. Remember that when you do:
<div>hi</div> that's actually syntactic sugar for a React.createElement so
you don't actually have access to DOM nodes in your function component. In fact,
DOM nodes aren't created at all until the ReactDOM.render method is called.
Your function component is really just responsible for creating and returning
React Elements and has nothing to do with the DOM in particular.

So to get access to the DOM, you need to ask React to give you access to a
particular DOM node when it renders your component. The way this happens is
through a special prop called ref.

Here's a simple example of using the ref prop:

function MyDiv() {
  const myDivRef = React.useRef()
  React.useEffect(() => {
    const myDiv = myDivRef.current
    // myDiv is the div DOM node!
    console.log(myDiv)
  }, [])
  return <div ref={myDivRef}>hi</div>
}

After the component has been rendered, it's considered "mounted." That's when
the React.useEffect callback is called and so by that point, the ref should have
its current property set to the DOM node. So often you'll do direct DOM
interactions/manipulations in the useEffect callback.

Exercise

Production deploys:

• Exercise
• Final

In this exercise we're going to make a <Tilt /> component that renders a div
and uses the vanilla-tilt library to make it super fancy.

The thing is, vanilla-tilt works directly with DOM nodes to setup event
handlers and stuff, so we need access to the DOM node. But because we're not the
one calling document.createElement (React does) we need React to give it to
us.

So in this exercise we're going to use a ref so React can give us the DOM node
and then we can pass that on to vanilla-tilt.

Additionally, we'll need to clean up after ourselves if this component is
unmounted. Otherwise we'll have event handlers dangling around on DOM nodes that
are no longer in the document.

Alternate:

If you'd prefer to practice refactoring a class that does this to a hook, then
you can open src/exercise/05-classes.js and open that on
an isolated page to
practice that.

🦉 Feedback

Fill out
the feedback form.

useState: tic tac toe

📝 Your Notes

Exercise

import * as React from 'react'

function Board() {
  // 🐨 squares is the state for this component. Add useState for squares
  const [squares, setSquares] = React.useState(Array(9).fill(null))

  // 🐨 We'll need the following bits of derived state:
  // - nextValue ('X' or 'O')
  // - winner ('X', 'O', or null)
  // - status (`Winner: ${winner}`, `Scratch: Cat's game`, or `Next player: ${nextValue}`)
  const nextValue = calculateNextValue(squares)
  const winner = calculateWinner(squares)
  const status = calculateStatus(winner, squares, nextValue)
  // 💰 I've written the calculations for you! So you can use my utilities
  // below to create these variables

  // This is the function your square click handler will call. `square` should
  // be an index. So if they click the center square, this will be `4`.
  function selectSquare(square) {
    // 🐨 first, if there's already winner or there's already a value at the
    // given square index (like someone clicked a square that's already been
    // clicked), then return early so we don't make any state changes
    if (winner || squares[square]) return

    // 🦉 It's typically a bad idea to mutate or directly change state in React.
    // Doing so can lead to subtle bugs that can easily slip into production.
    //
    // 🐨 make a copy of the squares array
    // 💰 `[...squares]` will do it!)
    const squaresCopy = [...squares]

    // 🐨 set the value of the square that was selected
    // 💰 `squaresCopy[square] = nextValue`
    squaresCopy[square] = nextValue

    // 🐨 set the squares to your copy
    setSquares(squaresCopy)
  }

  function restart() {
    // 🐨 reset the squares
    // 💰 `Array(9).fill(null)` will do it!
    setSquares(Array(9).fill(null))
  }

  function renderSquare(i) {
    return (
      <button className="square" onClick={() => selectSquare(i)}>
        {squares[i]}
      </button>
    )
  }

  return (
    <div>
      {/* 🐨 put the status in the div below */}
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <button className="restart" onClick={restart}>
        restart
      </button>
    </div>
  )
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  )
}

// eslint-disable-next-line no-unused-vars
function calculateStatus(winner, squares, nextValue) {
  return winner
    ? `Winner: ${winner}`
    : squares.every(Boolean)
    ? `Scratch: Cat's game`
    : `Next player: ${nextValue}`
}

// eslint-disable-next-line no-unused-vars
function calculateNextValue(squares) {
  return squares.filter(Boolean).length % 2 === 0 ? 'X' : 'O'
}

// eslint-disable-next-line no-unused-vars
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a]
    }
  }
  return null
}

function App() {
  return <Game />
}

export default App

1. 💯 preserve state in localStorage

import * as React from 'react'

function Board() {
  const [squares, setSquares] = React.useState(
    () =>
      JSON.parse(window.localStorage.getItem('squares')) ?? Array(9).fill(null),
  )

  const nextValue = calculateNextValue(squares)
  const winner = calculateWinner(squares)
  const status = calculateStatus(winner, squares, nextValue)

  React.useEffect(() => {
    window.localStorage.setItem('squares', JSON.stringify(squares))
  }, [squares])

  function selectSquare(square) {
    if (winner || squares[square]) return

    const squaresCopy = [...squares]
    squaresCopy[square] = nextValue
    setSquares(squaresCopy)
  }

  function restart() {
    setSquares(Array(9).fill(null))
  }

  function renderSquare(i) {
    return (
      <button className="square" onClick={() => selectSquare(i)}>
        {squares[i]}
      </button>
    )
  }

  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <button className="restart" onClick={restart}>
        restart
      </button>
    </div>
  )
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  )
}

// eslint-disable-next-line no-unused-vars
function calculateStatus(winner, squares, nextValue) {
  return winner
    ? `Winner: ${winner}`
    : squares.every(Boolean)
    ? `Scratch: Cat's game`
    : `Next player: ${nextValue}`
}

// eslint-disable-next-line no-unused-vars
function calculateNextValue(squares) {
  return squares.filter(Boolean).length % 2 === 0 ? 'X' : 'O'
}

// eslint-disable-next-line no-unused-vars
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a]
    }
  }
  return null
}

function App() {
  return <Game />
}

export default App