@promoboxx/use-filter 1.11.1 → 2.0.0

package/src/store/reduxHelpers/createActions.ts

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,85 @@
+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
+}