useFilter.js

import { useCallback, useReducer, useRef } from 'react'
import isEqual from 'lodash.isequal'

function updateFilters(filters, { action, name, values }) {
  if (!name && action !== 'update') {
    // Enable, disable or reset all filters
    filters.forEach(filter => updateFilters({ action, name: filter.name }))
  }

  const targetFilter = filters.find(filter => filter.name === name)
  if (!targetFilter) {
    throw new Error(
      `No filter named "${name}", only "${filters
        .map(filter => filter.name)
        .join('", "')}"`
    )
  }

  switch (action) {
    case 'update':
      return updateValues(filters, targetFilter, values)
    case 'enable':
      return enableFilter(filters, targetFilter)
    case 'disable':
      return disableFilter(filters, targetFilter)
    case 'reset':
      return resetFilter(filters, targetFilter)
    default:
      throw new Error(`Unrecognised action "${action}" for updateFilters`)
  }
}

function updateValues(filters, targetFilter, values) {
  if (targetFilter.values === values) return filters
  const { initialValues } = targetFilter.getFilterDef()

  if (!targetFilter.enabled && !isEqual(values, initialValues)) {
    targetFilter.enabled = true
  }

  if (targetFilter.enabled && isEqual(values, initialValues)) {
    targetFilter.enabled = false
  }

  targetFilter.values = values
  return [...filters]
}

function enableFilter(filters, targetFilter) {
  if (targetFilter.enabled) return filters

  targetFilter.enabled = true
  return [...filters]
}

function disableFilter(filters, targetFilter) {
  if (!targetFilter.enabled) return filters

  targetFilter.enabled = false
  return [...filters]
}

function resetFilter(filters, targetFilter) {
  const { initialValues } = targetFilter.getFilterDef()

  if (!targetFilter.enabled && isEqual(targetFilter.values, initialValues))
    return filters

  targetFilter.values = initialValues
  targetFilter.enabled = false

  return [...filters]
}

function initializeFilters(filterDefsRef) {
  return filterDefsRef.current.map(({ initialValues, name, ...props }) => ({
    ...props,
    values: { ...initialValues },
    name,
    enabled: false,
    getFilterDef: () => filterDefsRef.current.find(def => def.name === name),
  }))
}

function useFilter(filterDefs) {
  const filterDefsRef = useRef()
  filterDefsRef.current = filterDefs

  const [filters, dispatchFilters] = useReducer(
    updateFilters,
    initializeFilters(filterDefsRef)
  )

  const applyFilters = useCallback(
    datum => {
      const activeFilters = filters.filter(filter => filter.enabled)
      if (!activeFilters.length) return true
      return activeFilters.every(({ name, values, getFilterDef }) => {
        const { doFilter, mapFilter } = getFilterDef()
        return !values || doFilter(mapFilter ? mapFilter(datum) : datum, values)
      })
    },
    [filters]
  )

  return { applyFilters, dispatchFilters, filters }
}

export default useFilter