ryanflorence

// Step 1 - update component code

// before
const Thing = props => {
  const { id } = props.match.params
  const { location, history } = props 
  return <div/>
}

ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

ryanflorence

function SomeComp() {
  // initialize some state
  const [tacos, setTacos] = useState(null)

  // use an effect to set up the subscription
  useEffect(() => {
    // make a query to the db
    return db
      .collection("tacos")
      .limit(20)

ryanflorence

function createAriaLink(element) {
  const href = element.getAttribute("data-aria-href")

  element.setAttribute("role", "link")
  element.setAttribute("tabindex", 0)
  element.addEventListener("click", triggerAction)
  element.addEventListener("keydown", keydownHandler)
  onRemove(element, destroy)

  function keydownHandler(event) {

ryanflorence

const callbacks = []
const deps = []
let callCount = 0

function useCallback(callback, deps) {
  // figure out which useCallback we're rendering
  // (each render starts at -1)
  const id = ++callCount

  // second render

ryanflorence

function handleKeyDown(event) {
  if (event.key === "Tab" && event.shiftKey) {
    if (shiftTabbedFromElementAfterTrigger(event)) {
      focusLastTabbableInPopover(event);
    } else if (shiftTabbedOutOfPopover(event)) {
      focusTriggerRef(event);
    } else if (shiftTabbedToBrowserChrome(event)) {
      disableTabbablesInPopover(event);
    }
  } else if (event.key === "Tab") {

ryanflorence

function ModalExampleFocusManagement({ label="Hamburger" }) {
  const [isOpen, setIsOpen] = useState(false)
  const triggerRef = useRef()
  const headingRef = useRef()
  const justOpenedRef = useRef(false)

  useEffect(() => {
    if (justOpenedRef.current) {
      justOpenedRef.current = false
      headingRef.current.focus()

ryanflorence

function RadioGroup({ onChange, name, children }) {
  const [state, inputProps] = useRadioGroup(name)
  return (
    <Context.Provider value={inputProps}>
      {children}
    </Context.Provider>
  )
}

function RadioInput(props) {

ryanflorence

import "app/index.css"
import "app/App.css"
import "./styles.css"
import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"

function App() {
  const [appTime] = useState(Date.now())

  return (

ryanflorence

import React, { useState, useEffect } from "react"
import FeedPost from "app/FeedPost"
import {
  loadFeedPosts,
  subscribeToNewFeedPosts
} from "app/utils"
// import FeedFinal from './Feed.final'
// export default FeedFinal
export default Feed