@hello-pangea/dnd/src/debug/middleware/action-timing-average.ts

Beautiful and accessible drag and drop for lists with React

/* eslint-disable no-console */
import type { Action } from '../../state/store-types';

interface Bucket {
  [key: string]: number[];
}

const average = (values: number[]): number => {
  const sum: number = values.reduce(
    (previous: number, current: number) => previous + current,
    0,
  );
  return sum / values.length;
};

export default (groupSize: number) => {
  console.log('Starting average action timer middleware');
  console.log(`Will take an average every ${groupSize} actions`);
  const bucket: Bucket = {};

  return () =>
    (next: (a: Action) => unknown) =>
    (action: Action): any => {
      const start: number = performance.now();

      const result: unknown = next(action);

      const end: number = performance.now();

      const duration: number = end - start;

      if (!bucket[action.type]) {
        bucket[action.type] = [duration];
        return result;
      }

      bucket[action.type].push(duration);

      if (bucket[action.type].length < groupSize) {
        return result;
      }

      console.warn(
        `Average time for ${action.type}`,
        average(bucket[action.type]),
      );

      // reset
      bucket[action.type] = [];

      return result;
    };
};