rolandcoops

import React, { useCallback, useState } from 'react'

const Form = () => {
  const [profile, setProfile] = useState({
    firstName: 'John',
    lastName: 'Johnsonian',
    jobTitle: 'Jabberwocky',
  })
  
  console.log(profile)

rolandcoops

// Taken (with some minor changes) from:
// https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

import { useRef, useEffect, useCallback } from 'react'

const throwReferenceError = () => {
  throw new ReferenceError('Callback was called directly while rendering, pass it as a callback prop instead.')
}

/**

rolandcoops

const value = Symbol('value')

const retrieve = (node, path) => {
  for (let i = 0; i < path.length; i++) {
    const key = path[i]
    if (node.has(key)) {
      node = node.get(key)
    } else {
      const child = new Map()
      node.set(key, child)

rolandcoops

/**
 * Types & Interfaces
 */

type State = { [key: string]: any }

type Reducer = (currentState: State, action: Action) => State;

type Listener = (currentState?: State) => void;

rolandcoops

/**
 * convert a string to css hex values suitable for use in css “content” prop
 * @example
 * hexify('foo@bar') // '\0066\006f\006f\0040\0062\0061\0072'
 */
const hexify = (string) =>
  [...string]
    .map((c) => `\\${Number(c.charCodeAt()).toString(16).padStart(4, '0')}`)
    .join('')

rolandcoops

// Adapted from “Algorithms, Part I” course by “Princeton University” on coursera.org

const defaultCompare = (a, b) =>
  a < b ? -1 : 1

const merge = (arr, aux, compare, low, mid, high) => {
  // left and right half scan indices
  let l = low, r = mid + 1

  // copy into auxillary array  

rolandcoops

import React from 'react'
import { connect } from 'react-redux'

/**
 * Item Component
 */

const Item  = ({ item }) => (
  <li className="item">
    <div>

rolandcoops

class WeightedQuickUnionFind {
  constructor (ids) {
    this._map = new Map() // id-to-component map
    this._sizes = new Map() // subtree size map
    this.length = ids.length // component count

    ids.forEach((id) => {
      this._map.set(id, id)
      this._sizes.set(id, 1)
    })

rolandcoops

/**
 * Add an inset border (in a single direction) to an element
 * Examples:
 * @include inset-border(bottom)
 * @include inset-border(right, 3px, red)
 */
@mixin inset-border ($direction, $width: 1px, $color: black, $opacity: 0.05) {
  $y: if($direction == bottom, -$width, if($direction == top, $width, 0));
  $x: if($direction == right, -$width, if($direction == left, $width, 0));
  box-shadow: inset #{$x} #{$y} 0 0 rgba($color, $opacity);

rolandcoops

@mixin with-speech-arrow (
  $align: left,
  $size: 20px,
  $border-color: #eee
) {
  &:before,
  &:after {
    content: '';
    position: absolute;
    border-color: transparent;