ryanflorence

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'home',
    states: {
      home: {
        on: {
          LOGIN: {
            target: 'dashboard',
            actions: 'recordLoginTime'
          },

ryanflorence

// Focus Management
//
// Cases:
//
// 1. Navigate to sibling:
// [a] => [b*] : focus b
// [a, x, y] => [b*] : focus b
//
// 2. Navigate to child
// [a] => [a, b*] : focus b

ryanflorence

function Expletives({ children }) {
  let [, forceUpdate] = useState();
  let mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;

    // don't want to cause any seizures.
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      return;

ryanflorence

import React from "react"
import { Link, useRoutes, Outlet } from "react-router-dom"

function App() {
  const el = useRoutes([
    { path: "/", element: <div>index</div> },
    {
      path: ":courseId",
      element: (
        <div>

ryanflorence

function PokemonInput({ defaultValue, onChange }) {
  const [pokémon, setPokémon] = useState("pikachu")
  const [img, setImg] = useState()
  const [error, setError] = useState(null)

  useEffect(() => {
    let isCurrent = true
    fetch(`https://pokeapi.co/api/v2/pokemon/${pokémon}/`)
      .then(res => res.json())
      .then(res => {

ryanflorence

let game = Machine({
  id: 'game',
  initial: 'idle',
  context: {
    addends: [],
    completions: [],
    selections: []
  },
  states: {
    idle: {

ryanflorence

/*
Gatsby doesn't need reach or react router

it needs `useLocation`

- It doesn't use the route matching algorithm
- It doesn't use nesting (it's just one bit splat route)
- It doesn't even use Link
- All it's really using is the location to know about changes

ryanflorence

Electives

---

This group is great for people building shared component libraries:

Compound Components

The foundation of all reusable components in React. Once you understand this concept, your components will be able to work in UIs you aren't even thinking about yet.

ryanflorence

export function useBodyFocusOnNav() {
  const { location } = useLocation();
  // TODO: figure out why only "root links" seem to reset the tab order. Right
  // now, in the demo app, the global links are blurred on navigation, but the
  // nested links are not (?) The focus does move to the body when I "watch
  // expression" in the dev tools, but the tabbing doesn't seem to be affected.
  // maybe could try to find data-reach-skip-nav and focus that if it's there?
  useEffect(() => {
    document.activeElement.blur();
    document.body.focus();

ryanflorence

import { Machine, assign } from "xstate";
import firebase from "./firebase";

const chart = {
  id: "auth",
  context: {
    auth: null,
    error: null,
    loggedoutTime: null
  },