Capture Fixture Data

captureFixtureData.ts

import { useCallback } from 'react';
import { isEqual } from 'lodash';

interface UseCaptureFixtureDataConfig {
  localStorageKey: string;
  equalityCheck?: typeof isEqual;
}

const cache = new Map<string, unknown[]>();

/**
 This hook is a pretty painless way to capture some data that you might want to use for test fixtures, or some
 other purpose. To use it, drop it in a component/other hook like this:
 
  const captureResult = useCaptureFixtureData({
    localStorageKey: `useOmniEvents-fixtures-${ticketId}`,
  });

 Then, call `captureResult` with whatever you want to capture. The hook will try to dedupe responses so you're
 left with unique entries, and write it to localStorage. From there you can copy the value out into a file or
 wherever you need it.
 */

export const useCaptureFixtureData = (
  config: UseCaptureFixtureDataConfig
): ((result: unknown) => void) => {
  const equalityCheck = config.equalityCheck || isEqual;
  const captureResult = useCallback(
    (result: unknown) => {
      const existing = cache.get(config.localStorageKey) || [];
      const resultExists = existing.reduce((prev, prevResult) => {
        if (prev) {
          return true;
        }

        return equalityCheck(prevResult, result);
      }, false);

      if (resultExists) {
        return;
      }

      const newResult = [...existing, result];
      cache.set(config.localStorageKey, newResult);
      window.localStorage.setItem(config.localStorageKey, JSON.stringify(newResult));
    },
    [config, equalityCheck]
  );

  return captureResult;
};