mjackson

function useControl(defaultValue, value, onChange) {
  let [localValue, setLocalValue] = useState(defaultValue)
  let isControlled = value != null // the key

  let activeIndex = isControlled ? value : localValue
  let setActiveIndex = nextIndex => {
    if (isControlled) {
      if (onChange) {
        onChange(nextIndex)
      } else {

mjackson

expect.extend({
  toContainElement(instance, targetElement) {
    let matchingElements = instance.findAllByProps(targetElement.props);

    if (matchingElements.length === 0) {
      return {
        message() {
          let props = JSON.stringify(targetElement.props);
          return `expected to find element with props ${props}`;
        },

mjackson

import React from 'react';
import { lazy } from 'react-suspense-resource';

let Courses = lazy(() => import('./Courses.js'));
let CoursesIndex = lazy(() => import('./CoursesIndex.js'));

let routes = [
  {
    path: "courses",
    element: <Courses />,

mjackson

let routes = (
  <RankedSwitch>
    {/*
    <RankedSwitch> picks the best child <Route> that matches
    the path. Like <Switch>, it does not match deeply, so you
    need to use /* on the path if you want to do that. Like
    @reach/router's <Router>, it ranks the paths so you don't
    have to think about ordering.

    Con: You have to use /* to do deep matching

mjackson

#!/bin/bash

# To install: just copy this script to your machine and name it whatever you want.
# Let's say you named it toggle-desktop-icons.sh, then all you need to do is make
# the script executable, like this:
#
# chmod +x toggle-desktop-icons.sh
#
# Now you can execute the script directly in the terminal any time you want to
# show/hide the desktop icons, like this:

mjackson

import { useEffect, useState } from 'react';

export default function useMediaQuery(query, defaultValue) {
  const [matches, setMatches] = useState(defaultValue);

  useEffect(() => {
    const mql = window.matchMedia(query);

    setMatches(mql.matches);

mjackson

import { useRef, useState } from 'react'

function useUndo([state, setState]) {
  const history = useRef([state])
  const [index, setIndex] = useState(0)

  function undo() {
    setIndex(Math.max(index - 1, 0))
  }
  function redo() {

mjackson

function useStateWithHistory(defaultValue) {
  const history = useRef([defaultValue])
  const [index, setIndex] = useState(0)

  function undo() {
    setIndex(index > 0 ? index - 1 : index)
  }
  function redo() {
    setIndex(index < history.current.length - 1 ? index + 1 : index)
  }

mjackson

// We want to subscribe to some data. Here are 2 ways to do the SAME thing.

// 1. setup some state
// 2. subscribing to a uid, set posts when they come in
// 3. unsubscribing when the component unmounts
// 4. when the uid changes:
//   - unsubscribing from prev uid
//   - re-subscribing to the new uid

// Here's a render prop:

mjackson

import { useEffect, useRef } from 'react';

function getItem(storage, key) {
  const value = storage.getItem(key);

  if (!value) return null;

  try {
    return JSON.parse(value);
  } catch (error) {