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
  },

ryanflorence

import firebase from "./firebase";
import { createResource } from "./createResource";

const Doc = createResource(path =>
  firebase
    .firestore()
    .doc(path)
    .get()
    .then(unwrapDoc)
);

ryanflorence

import React from "react";
import { Link } from "react-router-dom";

export function createResource(getPromise) {
  let cache = {};
  let inflight = {};
  let errors = {};

  function load(key) {
    inflight[key] = getPromise(key)

ryanflorence

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

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

ryanflorence

const users = [];

// What is the button label?
// 1. button.props.children, can server render

// What is the option's value?
// 1. option.props.value, that's it, it's required, no fancy children stuff

// if we require controlled
// - they know the value all the time before we even show up

ryanflorence

ListBox

Listbox seems to have all of the constraints in one component. Making a decision here is likely to be easily expanded to the rest of the components. It has all the tricky parts we're dealing with right now:

• Index based focus management
• Children needing their index to render
• Parent/sibling component needing props from a sibling
• Case for SSR support