kyleshevlin

// Let's learn higher order functions, currying, and partial application
// with a simple, yet useful example

// It's a nice UI touch is to dynamically change a word in a phrase from
// singular to plural based on the quantity of that item

// 4 cats
// 0 dogs
// 1 human
 

kyleshevlin

function useForceUpdate() {
  const [, setState] = React.useState(true)
  return () => setState(s => !s)
}

function Toggle() {
  const forceUpdate = useForceUpdate()
  const value = React.useRef(false)
  
  const handleClick = () => {

kyleshevlin

// Part of my Othello code, no idea if this is the _best_ way to solve this,
// but it's part of my solution

// `grid` is in the parent scope how I write/use this function
function findPiecesToChange(acc, x, y, run, rise) {
  const nextX = x + run
  const nextY = y + rise
  const cell = grid[nextY] && grid[nextY][nextX]

  if (!cell) {

kyleshevlin

// This component has the prop `children`
// In a universe of infinite possibilities,
// the only limit is that `children` is inside
// the `div`. There are no other limits.
function Wrap({ children }) {
  return <div>{children}</div>
}

const BOX_SIZES = {
  small: 100,

kyleshevlin

function Script() {
  return (
    <script
      dangerouslySetInnerHTML={{ __html: `(${setCSSVars.toString()})()` }}
    />
  )
}

function setCSSVars() {
  const theme = localStorage.getItem('kyleshevlin:theme') || 'light'

kyleshevlin

const NEXT_DOTS = {
  '': '.',
  '.': '. .',
  '. .': '. . .',
  '. . .': '',
}

function Dots() {
  const [dots, setDots] = React.useState('')

kyleshevlin

// One of my favorite things about using Emotion for CSS-in-JS is the
// ability to put nested CSS selectors write into my components.
// Ignoring my use of `bs()` from my ShevyJS library (it just mathematically
// calculates spacing based on my vertical rhythm config), this is such
// a simple way to tell this div to space these links out if they're both
// present. I love it.

function MyComponent() {
  return (
    // ... lots of other code

kyleshevlin

// This code solves a problem, but it doesn't tell me _what_ the problem is
// or _why_ I need to stop propagation. In the long run, someone
// will come across this code and have no idea why it's written this way

function handleItemSelection(event) {
  event.stopPropagation()
  selectItem(assetId)
}

// Here's my solution, one additional function, a small indirection that

kyleshevlin

// Naming things based on what they do means we don't have to change
// the name when we change the implementation details

function applyDiscountToItems(items) {
  return items.map(item => ({
    ...item,
    price: item.price * .75
  }))
}

kyleshevlin

const VIEWS = {
  FULL: 'FULL',
  SIDE: 'SIDE'
}

const itemMachine = Machine({
  id: 'item',
  context: {
    view: VIEWS.SIDE,
  },