@promoboxx/use-filter 2.0.0 → 2.0.1

package/src/lib/shallowEqual.test.ts

@@ -1,71 +0,0 @@
-import shallowEqual from './shallowEqual'
-
-describe('shallowEqual', () => {
-  it('should return true if arguments fields are equal', () => {
-    expect(
-      shallowEqual({ a: 1, b: 2, c: undefined }, { a: 1, b: 2, c: undefined }),
-    ).toBe(true)
-
-    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 })).toBe(true)
-
-    const o = {}
-    expect(shallowEqual({ a: 1, b: 2, c: o }, { a: 1, b: 2, c: o })).toBe(true)
-
-    const d = function () {
-      return 1
-    }
-    expect(shallowEqual({ a: 1, b: 2, c: o, d }, { a: 1, b: 2, c: o, d })).toBe(
-      true,
-    )
-  })
-
-  it('should return false if arguments fields are different function identities', () => {
-    expect(
-      shallowEqual(
-        {
-          a: 1,
-          b: 2,
-          d() {
-            return 1
-          },
-        },
-        {
-          a: 1,
-          b: 2,
-          d() {
-            return 1
-          },
-        },
-      ),
-    ).toBe(false)
-  })
-
-  it('should return false if first argument has too many keys', () => {
-    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2 })).toBe(false)
-  })
-
-  it('should return false if second argument has too many keys', () => {
-    expect(shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2, c: 3 })).toBe(false)
-  })
-
-  it('should return false if arguments have different keys', () => {
-    expect(
-      shallowEqual({ a: 1, b: 2, c: undefined }, { a: 1, bb: 2, c: undefined }),
-    ).toBe(false)
-  })
-
-  it('should compare two NaN values', () => {
-    expect(shallowEqual(NaN, NaN)).toBe(true)
-  })
-
-  it('should compare empty objects, with false', () => {
-    expect(shallowEqual({}, false)).toBe(false)
-    expect(shallowEqual(false, {})).toBe(false)
-    expect(shallowEqual([], false)).toBe(false)
-    expect(shallowEqual(false, [])).toBe(false)
-  })
-
-  it('should compare two zero values', () => {
-    expect(shallowEqual(0, 0)).toBe(true)
-  })
-})

package/src/lib/shallowEqual.ts

@@ -1,26 +0,0 @@
-const shallowEqual = (objA: any, objB: any) => {
-  if (Object.is(objA, objB)) {
-    return true
-  }
-
-  if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
-    return false
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  for (const key of keysA) {
-    if (!Object.is(objA[key], objB[key])) {
-      return false
-    }
-  }
-
-  return true
-}
-
-export default shallowEqual

package/src/store/index.ts

@@ -1,30 +0,0 @@
-import type { FilterInfo } from '../useFilter'
-
-export interface FilterStore {
-  getFilter<TFilter extends Record<string, unknown>>(
-    namespace: string,
-  ): FilterInfo<TFilter> | null | undefined
-  saveFilter<TFilter extends Record<string, unknown>>(
-    namespace: string,
-    filter: FilterInfo<TFilter>,
-  ): void
-  getData<TResult = any>(namespace: string): TResult | null | undefined
-  saveData<TResult = any>(namespace: string, data: TResult): void
-  clear(): void
-}
-
-let globalStore: FilterStore | undefined
-
-export function setFilterStore(newStore: FilterStore) {
-  globalStore = newStore
-}
-
-export function getFilterStore(optionalStore?: FilterStore) {
-  const resolvedStore = optionalStore || globalStore
-
-  if (!resolvedStore) {
-    throw new Error('A store must be set with setFilterStore')
-  }
-
-  return resolvedStore
-}

package/src/store/localStorageStore.ts

@@ -1,36 +0,0 @@
-import type { FilterStore } from '.'
-
-const prefix = 'useFilter'
-
-const localStorageStore: FilterStore = {
-  getFilter(namespace) {
-    const item = localStorage.getItem(`${prefix}/${namespace}/filter`)
-    if (item) {
-      return JSON.parse(item)
-    }
-  },
-  saveFilter(namespace, filter) {
-    localStorage.setItem(
-      `${prefix}/${namespace}/filter`,
-      JSON.stringify(filter),
-    )
-  },
-  getData(namespace) {
-    const item = localStorage.getItem(`${prefix}/${namespace}/data`)
-    if (item) {
-      return JSON.parse(item)
-    }
-  },
-  saveData(namespace, data) {
-    localStorage.setItem(`${prefix}/${namespace}/data`, JSON.stringify(data))
-  },
-  clear() {
-    for (const key in localStorage) {
-      if (key.startsWith(prefix)) {
-        localStorage.removeItem(key)
-      }
-    }
-  },
-}
-
-export default localStorageStore

package/src/store/memoryStore.ts

@@ -1,27 +0,0 @@
-import type { FilterInfo } from '../useFilter'
-
-import type { FilterStore } from '.'
-
-let cachedFilters: Record<string, FilterInfo<any>> = {}
-let cachedData: Record<string, any> = {}
-
-const memoryStore: FilterStore = {
-  getFilter(namespace) {
-    return cachedFilters[namespace]
-  },
-  saveFilter(namespace, filter) {
-    cachedFilters[namespace] = filter
-  },
-  getData(namespace) {
-    return cachedData[namespace]
-  },
-  saveData(namespace, data) {
-    cachedData[namespace] = data
-  },
-  clear() {
-    cachedFilters = {}
-    cachedData = {}
-  },
-}
-
-export default memoryStore

package/src/store/reduxHelpers/createActions.test.ts

@@ -1,32 +0,0 @@
-import createActions from './createActions'
-
-describe('createActions', () => {
-  it('creates actions using payload builders', () => {
-    const actions = createActions('test', {
-      action1: () => undefined,
-      action2: () => 'asdf',
-      action3: (arg1: number, arg2: string) => ({ arg1, arg2 }),
-    })
-
-    expect(actions.action1.actionType).toEqual('test/action1')
-    expect(actions.action1()).toEqual({
-      type: 'test/action1',
-      payload: undefined,
-    })
-
-    expect(actions.action2.actionType).toEqual('test/action2')
-    expect(actions.action2()).toEqual({
-      type: 'test/action2',
-      payload: 'asdf',
-    })
-
-    expect(actions.action3.actionType).toEqual('test/action3')
-    expect(actions.action3(42, 'foo')).toEqual({
-      type: 'test/action3',
-      payload: {
-        arg1: 42,
-        arg2: 'foo',
-      },
-    })
-  })
-})

package/src/store/reduxHelpers/createActions.ts

@@ -1,56 +0,0 @@
-interface CreateActions {
-  <Namespace extends string, PayloadCreatorMap extends ReduxPayloadCreatorMap>(
-    namespace: Namespace,
-    actions: PayloadCreatorMap,
-  ): ReduxActionCreatorMap<Namespace, PayloadCreatorMap>
-}
-
-type ReduxPayloadCreatorMap = Record<string, (...args: any[]) => any>
-
-export type ReduxActionCreatorMap<
-  Namespace extends string,
-  PayloadCreatorMap extends ReduxPayloadCreatorMap,
-> = {
-  [Type in keyof PayloadCreatorMap]: Type extends string
-    ? ReduxActionCreator<Namespace, Type, PayloadCreatorMap[Type]>
-    : undefined
-}
-
-// Provide defaults for types in here cause it's used a few places and subbing
-// in the defaults is long and repetitive.
-export interface ReduxActionCreator<
-  Namespace extends string = string,
-  Type extends string = string,
-  Fn extends (...args: any[]) => any = (...args: any[]) => any,
-> {
-  (...args: Parameters<Fn>): {
-    type: `${Namespace}/${Type}`
-    payload: ReturnType<Fn>
-  }
-  actionType: `${Namespace}/${Type}`
-}
-
-const createActions: CreateActions = (
-  namespace: string,
-  payloadCreatorMap: ReduxPayloadCreatorMap,
-) => {
-  const actionCreators: Record<string, ReduxActionCreator> = {}
-
-  for (const key in payloadCreatorMap) {
-    actionCreators[key] = ((...args: any[]) => ({
-      type: `${namespace}/${key}`,
-      payload: payloadCreatorMap[key](...args),
-
-      // Need to cast here because there's no way to assign a function + extra
-      // attributes in one go.
-    })) as any
-
-    actionCreators[key].actionType = `${namespace}/${key}`
-  }
-
-  // TODO There's probably a better type to use here, but it's not super
-  // important since `CreateActions` already specifies one.
-  return actionCreators as any
-}
-
-export default createActions

package/src/store/reduxHelpers/createReducer.test.ts

@@ -1,65 +0,0 @@
-import createActions from './createActions'
-import createReducer from './createReducer'
-
-const initialState = {
-  number: 0,
-  string: '',
-  foo: '',
-}
-
-describe('createReducer', () => {
-  it('uses a builder pattern', () => {
-    const actions = createActions('test', {
-      action1: () => undefined,
-      action2: () => 'asdf',
-      action3: (arg1: number, arg2: string) => ({ arg1, arg2 }),
-    })
-
-    const reducer = createReducer(initialState, (builder) => {
-      builder
-        .addHandler(actions.action2, (state, action) => ({
-          ...state,
-          string: action.payload,
-        }))
-        .addHandler(actions.action3, (state, action) => ({
-          ...state,
-          number: action.payload.arg1,
-          string: action.payload.arg2,
-        }))
-        .addCase('foo', (state, action: ReturnType<typeof actions.action1>) => {
-          return {
-            ...state,
-            foo: 'updated',
-          }
-        })
-    })
-
-    let state = reducer(undefined, { type: '' })
-    expect(state).toEqual({
-      number: 0,
-      string: '',
-      foo: '',
-    })
-
-    state = reducer(state, actions.action2())
-    expect(state).toEqual({
-      number: 0,
-      string: 'asdf',
-      foo: '',
-    })
-
-    state = reducer(state, actions.action3(42, 'foo'))
-    expect(state).toEqual({
-      number: 42,
-      string: 'foo',
-      foo: '',
-    })
-
-    state = reducer(state, { type: 'foo' })
-    expect(state).toEqual({
-      number: 42,
-      string: 'foo',
-      foo: 'updated',
-    })
-  })
-})

package/src/store/reduxHelpers/createReducer.ts

@@ -1,47 +0,0 @@
-import type { Action } from 'redux'
-
-import type { ReduxActionCreator } from './createActions'
-
-interface ReduxReducerBuilder<State> {
-  addHandler: <ActionCreator extends ReduxActionCreator>(
-    actionCreator: ActionCreator,
-    handler: (state: State, action: ReturnType<ActionCreator>) => State,
-  ) => ReduxReducerBuilder<State>
-
-  addCase: <HandlerAction extends Action>(
-    actionType: string,
-    handler: (state: State, action: HandlerAction) => State,
-  ) => ReduxReducerBuilder<State>
-}
-
-function createReducer<State>(
-  initialState: State,
-  builderFn: (builder: ReduxReducerBuilder<State>) => void,
-) {
-  const handlers: Record<string, (state: State, action: Action) => State> = {}
-
-  const builder: ReduxReducerBuilder<State> = {
-    addHandler: (actionCreator, handler) => {
-      // TODO There's probably a better type to use here.
-      handlers[actionCreator.actionType] = handler as any
-      return builder
-    },
-    addCase: (actionType, handler) => {
-      // TODO There's probably a better type to use here.
-      handlers[actionType] = handler as any
-      return builder
-    },
-  }
-
-  builderFn(builder)
-
-  return (state = initialState, action: Action) => {
-    if (handlers[action.type]) {
-      return handlers[action.type](state, action)
-    }
-
-    return state
-  }
-}
-
-export default createReducer

package/src/store/reduxStore.ts

@@ -1,78 +0,0 @@
-import type { Store } from 'redux'
-
-import type { FilterInfo } from '../useFilter'
-
-import type { FilterStore } from '.'
-import createActions from './reduxHelpers/createActions'
-import createReducer from './reduxHelpers/createReducer'
-
-interface CreateReduxStoreConfig {
-  store: Store<{ useFilter: UseFilterReduxState }>
-}
-
-export function createReduxStore(config: CreateReduxStoreConfig) {
-  const reduxStoreStore: FilterStore = {
-    getFilter: (namespace) => {
-      return config.store.getState().useFilter.filters[namespace]
-    },
-    saveFilter: (namespace, filter) => {
-      config.store.dispatch(actions.saveFilter(namespace, filter))
-    },
-    getData: (namespace) => {
-      return config.store.getState().useFilter.data[namespace]
-    },
-    saveData: (namespace, data) => {
-      config.store.dispatch(actions.saveData(namespace, data))
-    },
-    clear: () => {
-      config.store.dispatch(actions.clear())
-    },
-  }
-
-  return reduxStoreStore
-}
-
-const actions = createActions('useFilter', {
-  saveData: (namespace: string, data: any) => ({
-    namespace,
-    data,
-  }),
-  saveFilter: (namespace: string, filter: FilterInfo<any>) => ({
-    namespace,
-    filter,
-  }),
-  clear: () => undefined,
-})
-
-interface UseFilterReduxState {
-  data: Record<string, any>
-  filters: Record<string, FilterInfo<any>>
-}
-
-const initialState: UseFilterReduxState = {
-  data: {},
-  filters: {},
-}
-
-export const useFilterReduxReducer = createReducer(initialState, (builder) => {
-  builder
-    .addHandler(actions.saveFilter, (state, action) => ({
-      ...state,
-      filters: {
-        ...state.filters,
-        [action.payload.namespace]: action.payload.filter,
-      },
-    }))
-    .addHandler(actions.saveData, (state, action) => ({
-      ...state,
-      data: {
-        ...state.data,
-        [action.payload.namespace]: action.payload.data,
-      },
-    }))
-    .addHandler(actions.clear, (state) => ({
-      ...state,
-      filters: {},
-      data: {},
-    }))
-})

package/src/store/urlParamStore.test.ts

@@ -1,131 +0,0 @@
-import qs from 'qs'
-
-import buildDefaultFilterInfo from '../lib/buildDefaultFilterInfo'
-
-import { createUrlParamStore, replaceQueryParams } from './urlParamStore'
-
-const FILTER_NAME = 'test'
-
-describe('urlParamStore', () => {
-  it('reads params from the url', () => {
-    const urlParamStore = createUrlParamStore()
-    const originalFilterInfo = buildDefaultFilterInfo({
-      filter: {
-        foo: 'bar',
-        baz: 'qux',
-      },
-      page: 20,
-      pageSize: 5,
-    })
-
-    // Nothing has been saved, so `getFilter` should return nothing.
-    expect(urlParamStore.getFilter(FILTER_NAME)).toBeFalsy()
-
-    // We need some params to actually test, so calling `.saveFilter` sets this
-    // up for us.
-    urlParamStore.saveFilter(FILTER_NAME, originalFilterInfo)
-
-    // Now we can see what we get back.
-    const parsedFilterInfo = urlParamStore.getFilter(FILTER_NAME)
-
-    expect(parsedFilterInfo).not.toBeFalsy()
-
-    // We save a subset of the original filterInfo, so we just need to check
-    // that the original contains whatever we've parsed.
-    expect(originalFilterInfo).toMatchObject(parsedFilterInfo!)
-  })
-
-  it('updates url params on save', () => {
-    const urlParamStore = createUrlParamStore()
-    urlParamStore.saveFilter(
-      FILTER_NAME,
-      buildDefaultFilterInfo({ filter: { foo: 'bar' } }),
-    )
-
-    const newUrl = window.location.toString()
-    expect(newUrl).toContain(encodeURI(`filter.test[foo]=bar`))
-    expect(newUrl).toContain(encodeURI(`info.test[pageSize]=20`))
-    expect(newUrl).toContain(encodeURI(`info.test[offset]=0`))
-    expect(newUrl).toContain(encodeURI(`info.test[page]=1`))
-  })
-
-  it('supports .clear()', () => {
-    const urlParamStore = createUrlParamStore()
-    const originalFilterInfo = buildDefaultFilterInfo({
-      filter: {
-        foo: 'bar',
-        baz: 'qux',
-      },
-      page: 20,
-      pageSize: 5,
-    })
-
-    // We need some params to actually test, so calling `.saveFilter` sets this
-    // up for us.
-    urlParamStore.saveFilter(FILTER_NAME, originalFilterInfo)
-
-    // Since we've saved the filter, there should be query params.
-    expect(window.location.search).toBeTruthy()
-
-    // And when we clear it, it should be empty.
-    urlParamStore.clear()
-    expect(window.location.search).toBeFalsy()
-  })
-
-  it('reads a valid filter with incomplete filter info from url', () => {
-    const urlParamStore = createUrlParamStore()
-    const originalFilterInfo = {
-      filter: {
-        foo: 'bar',
-      },
-      info: undefined,
-    }
-    const { filter, ...info } = originalFilterInfo
-    replaceQueryParams(
-      qs.stringify({
-        [`filter.${FILTER_NAME}`]: filter,
-        [`info.${FILTER_NAME}`]: info,
-      }),
-    )
-
-    const parsedFilterInfo = urlParamStore.getFilter(FILTER_NAME)
-    expect(parsedFilterInfo).not.toBeFalsy()
-    expect(originalFilterInfo).toEqual(parsedFilterInfo!)
-  })
-  it('reads a valid filter info with incomplete filter from url', () => {
-    const urlParamStore = createUrlParamStore()
-    const originalFilterInfo = {
-      filter: undefined,
-      page: 2,
-    }
-    const { filter, ...info } = originalFilterInfo
-    replaceQueryParams(
-      qs.stringify({
-        [`filter.${FILTER_NAME}`]: filter,
-        [`info.${FILTER_NAME}`]: info,
-      }),
-    )
-
-    const parsedFilterInfo = urlParamStore.getFilter(FILTER_NAME)
-    expect(parsedFilterInfo).not.toBeFalsy()
-    expect(originalFilterInfo).toEqual(parsedFilterInfo!)
-  })
-  it('reads a unrelated filter props without breaking', () => {
-    const urlParamStore = createUrlParamStore()
-    const originalFilterInfo = {
-      filter: undefined,
-      info: undefined,
-    }
-    const { filter, ...info } = originalFilterInfo
-    replaceQueryParams(
-      qs.stringify({
-        [`filter.${FILTER_NAME}`]: filter,
-        [`info.${FILTER_NAME}`]: info,
-        someBogusProp: 'foo',
-      }),
-    )
-
-    const parsedFilterInfo = urlParamStore.getFilter(FILTER_NAME)
-    expect(parsedFilterInfo).toBeFalsy()
-  })
-})

package/src/store/urlParamStore.ts

@@ -1,85 +0,0 @@
-import qs from 'qs'
-
-import type { FilterStore } from './index'
-
-export const createUrlParamStore = () => {
-  const urlParamStore: FilterStore = {
-    getFilter(namespace) {
-      const parsed = naivelyParseExistingParams()
-
-      const parsedInfo = parsed[`info.${namespace}`]
-      const parsedFilter = parsed[`filter.${namespace}`]
-
-      // useFilter doesn't really support returning a partial FilterInfo, so both
-      // need to be present,
-      if (parsedInfo || parsedFilter) {
-        const { page, offset, pageSize, ...rest } = parsedInfo || {}
-
-        return {
-          ...{
-            // cast string to number or undefined
-            page: 1 / page ? +page : undefined,
-            pageSize: 1 / pageSize ? +pageSize : undefined,
-            offset: 1 / offset ? +offset : undefined,
-            ...rest,
-          },
-          filter: parsedFilter,
-        }
-      }
-    },
-
-    saveFilter(namespace, filterInfo) {
-      const parsed = naivelyParseExistingParams()
-
-      // Setting the params to the equivalent of { [namespace]: filterInfo }
-      // takes up more room. The idea is that this ...
-      //     'filter.filterName%5BfilterValueKey%5D=filterValueValue'
-      // ... is smaller than ...
-      //     filterName%5Bfilter%5D%5BfilterValueKey%5D=filterValueValue
-      // ... by 5 characters per value in a filter. So excuse us for a second ...
-      const clonedInfo: Partial<typeof filterInfo> = { ...filterInfo }
-      const clonedFilter = filterInfo.filter
-      delete clonedInfo.filter
-      delete clonedInfo.lastRefreshAt
-      delete clonedInfo.shouldRunImmediately
-      delete clonedInfo.totalResults
-      delete clonedInfo.totalPages
-      delete clonedInfo.nextCursor
-      parsed[`filter.${namespace}`] = clonedFilter
-      parsed[`info.${namespace}`] = clonedInfo
-
-      replaceQueryParams(qs.stringify(parsed))
-    },
-
-    clear() {
-      const parsed = naivelyParseExistingParams()
-
-      for (const key in parsed) {
-        if (key.startsWith('filter.') || key.startsWith('info.')) {
-          delete parsed[key]
-        }
-      }
-
-      replaceQueryParams(qs.stringify(parsed))
-    },
-
-    getData() {
-      return undefined
-    },
-    saveData() {},
-  }
-
-  return urlParamStore
-}
-
-export function replaceQueryParams(newParams: string) {
-  const nextUrl = new URL(window.location.toString())
-  nextUrl.search = newParams
-  window.history.replaceState(undefined, '', nextUrl.toString())
-}
-
-export function naivelyParseExistingParams() {
-  // Don't really want to do any casting, especially not to `any`, but the type
-  // of `qs.parse` is so wide we'd have to litter checks all over the place.
-  return qs.parse(window.location.search.substring(1)) as any
-}