/** * Computes the changes between two lists of items. * @param prev The previous list of items. * @param curr The current list of items. * @param isEqual The comparison function to use to determine if two items are deep equal. * @returns An object containing three properties: * - add: the items that were added to the current list. * - update: t…

getChangesOnList.ts

import isEqualFn from 'lodash/fp/isEqual';

type Item = { id: string | number };

/**
 * Computes the changes between two lists of items.
 * @param prev The previous list of items.
 * @param curr The current list of items.
 * @param isEqual The comparison function to use to determine if two items are deep equal.
 * @returns An object containing three properties:
 * - add: the items that were added to the current list.
 * - update: the items that were updated in the current list.
 * - remove: the items that were removed from the current list.
 */
export const getChangesOnList = <I extends Item>(
  prev: I[],
  curr: I[],
  isEqual = isEqualFn
) => {
  const prevMap = new Map(prev.map((item) => [item.id, item]));
  const currSet = new Set(curr.map((item) => item.id));

  const metrics: {
    add: I[];
    update: I[];
    remove: I[];
  } = {
    add: [],
    update: [],
    remove: prev.filter((item) => !currSet.has(item.id)),
  };

  return curr.reduce((acc, item) => {
    if (!prevMap.has(item.id)) {
      return {
        ...acc,
        add: [...acc.add, item],
      };
    }
    const prevItem = prevMap.get(item.id);
    if (isEqual(prevItem, item)) {
      return acc;
    }

    return {
      ...acc,
      update: [...acc.update, item],
    };
  }, metrics);
};