useDict

useDict.ts

import { useCallback, useState } from "react"

const emptyDict = {}

export default function useDict<T>(
  initialItems: Record<string, T | undefined> = emptyDict,
) {
  const [items, setItems] = useState(initialItems)

  const add = useCallback(
    (key: string, item: T) => setItems((items) => ({ ...items, [key]: item })),
    [],
  )

  const remove = useCallback(
    (key: string) => setItems((items) => ({ ...items, [key]: undefined })),
    [],
  )

  const update = useCallback(
    (key: string, getNew: (current: T | undefined) => T) => {
      setItems((items) => ({
        ...items,
        [key]: getNew(items[key]),
      }))
    },
    [],
  )

  const updateExisting = useCallback(
    (key: string, getNew: (current: T) => T) => {
      setItems((items) => {
        const current = items[key]
        return { ...items, [key]: current && getNew(current) }
      })
    },
    [],
  )

  const updateOrCreate = useCallback(
    (
      key: string,
      getFromExisting: (current: T) => T,
      getNew: (key: string) => T,
    ) => {
      setItems((items) => {
        const current = items[key] ?? getNew(key)
        return { ...items, [key]: getFromExisting(current) }
      })
    },
    [],
  )

  return { items, add, remove, update, updateExisting, updateOrCreate }
}