implement event emmiter to use it for selected change handling

lib/FindLocation/FindLocation.js

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { ColumnManager } from '@folio/stripes/smart-components';
 
+import { EVENT_EMMITER_EVENTS } from '../constants';4
 import { FindRecords } from '../FindRecords';
+import { useEventEmitter } from '../hooks';
 import {
   COLUMN_MAPPING,
   COLUMN_NAMES,
@@ -25,8 +27,21 @@ export const FindLocation = (props) => {
     ...rest
   } = props;
 
+  const eventEmitter = useEventEmitter();
+
   const [selectedLocations, setSelectedLocations] = useState({});
 
+  useEffect(() => {
+    const eventType = EVENT_EMMITER_EVENTS.FIND_RECORDS_SELECTED_CHANGED;
+    const callback = ({ detail: assignment }) => setSelectedLocations(assignment);
+
+    eventEmitter.on(eventType, callback);
+
+    return () => {
+      eventEmitter.off(eventType, callback);
+    };
+  }, [eventEmitter]);
+
   const columnMapping = useMemo(() => ({
     ...COLUMN_MAPPING,
     ...(
@@ -83,7 +98,6 @@ export const FindLocation = (props) => {
           isMultiSelect={isMultiSelect}
           isLoading={isLoading}
           selectRecords={onRecordsSelect}
-          onSelectedChange={setSelectedLocations}
           stickyFirstColumn={isMultiSelect}
           renderActionMenu={() => renderColumnsMenu}
           renderFilters={renderFilters}

lib/FindRecords/FindRecordsModal.js

@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
+import { pickBy, noop } from 'lodash';
 import PropTypes from 'prop-types';
+import { useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { pickBy, noop } from 'lodash';
 
 import {
   Button,
+  Checkbox,
   Modal,
-  Paneset,
   MultiColumnList,
-  Checkbox,
+  Paneset,
 } from '@folio/stripes/components';
 
 import {
@@ -23,10 +23,7 @@ import {
   getFiltersCount,
   PrevNextPagination,
 } from '../AcqList';
-
-import {
-  useRecordsSelect,
-} from './hooks';
+import { useRecordsSelect } from './hooks';
 
 import css from './FindRecordsModal.css';
 
@@ -58,7 +55,6 @@ export const FindRecordsModal = ({
   isLoading,
   onNeedMoreData,
   onSaveMultiple,
-  onSelectedChange,
   onSelectRow,
   records,
   refreshRecords,
@@ -102,10 +98,6 @@ export const FindRecordsModal = ({
     });
   }, [refreshRecords, filters, sortingField, sortingDirection]);
 
-  useEffect(() => {
-    onSelectedChange?.(selectedRecordsMap);
-  }, [onSelectedChange, selectedRecordsMap]);
-
   const saveMultiple = () => {
     const selectedRecords = Object.values(pickBy(selectedRecordsMap));
 
@@ -328,7 +320,7 @@ FindRecordsModal.propTypes = {
   initialFilters: PropTypes.object,
   // records props
   isLoading: PropTypes.bool,
-  onNeedMoreData: PropTypes.func.isRequired,
+  onNeedMoreData: PropTypes.func,
   onSaveMultiple: PropTypes.func,
   onSelectRow: PropTypes.func,
   records: PropTypes.arrayOf(PropTypes.object).isRequired,

lib/FindRecords/hooks/useRecordsSelect/useRecordsSelect.js

@@ -1,6 +1,9 @@
 import { useState, useCallback, useEffect } from 'react';
 import { differenceBy, keyBy } from 'lodash';
 
+import { EVENT_EMMITER_EVENTS } from '../../../constants';
+import { useEventEmitter } from '../../../hooks';
+
 const reduceCheckedRecords = (records, isChecked = false) => {
   const recordsReducer = (accumulator, record) => {
     if (isChecked) {
@@ -22,6 +25,7 @@ const selectedFromOtherPages = (selectedRecordsMap, pageRecords) => {
 };
 
 export const useRecordsSelect = ({ records }) => {
+  const eventEmitter = useEventEmitter();
   const [allRecordsSelected, setAllRecordsSelected] = useState(false);
   const [selectedRecordsMap, setSelectedRecordsMap] = useState({});
   const selectedRecordsLength = Object.keys(selectedRecordsMap).length;
@@ -31,10 +35,19 @@ export const useRecordsSelect = ({ records }) => {
   }, [records, selectedRecordsMap]);
 
   const toggleSelectAll = useCallback(() => {
-    setSelectedRecordsMap(() => ({
-      ...selectedFromOtherPages(selectedRecordsMap, records),
-      ...reduceCheckedRecords(records, !allRecordsSelected),
-    }));
+    setSelectedRecordsMap(() => {
+      const newMap = {
+        ...selectedFromOtherPages(selectedRecordsMap, records),
+        ...reduceCheckedRecords(records, !allRecordsSelected),
+      }
+
+      eventEmitter.emit(
+        EVENT_EMMITER_EVENTS.FIND_RECORDS_SELECTED_CHANGED,
+        newMap,
+      );
+
+      return newMap;
+    });
   }, [allRecordsSelected, records, selectedRecordsMap]);
 
   const selectRecord = useCallback(record => {
@@ -50,6 +63,11 @@ export const useRecordsSelect = ({ records }) => {
         newMap[id] = record;
       }
 
+      eventEmitter.emit(
+        EVENT_EMMITER_EVENTS.FIND_RECORDS_SELECTED_CHANGED,
+        newMap,
+      );
+
       return newMap;
     });
   }, []);

lib/constants/events.js

@@ -0,0 +1,3 @@
+export const EVENT_EMMITER_EVENTS = {
+  FIND_RECORDS_SELECTED_CHANGED: 'FIND_RECORDS_SELECTED_CHANGED',
+};

lib/constants/index.js

@@ -2,6 +2,7 @@ export * from './acqCommands';
 export * from './api';
 export * from './constants';
 export * from './countries';
+export * from './events';
 export * from './invoice';
 export * from './item';
 export * from './languages';

lib/hooks/index.js

@@ -1,6 +1,7 @@
 export * from './useAccordionToggle';
 export * from './useAcqMethodsOptions';
 export * from './useAsyncDebounce';
+export * from './useEventEmitter';
 export * from './useFunds';
 export * from './useIntegrationConfigs';
 export * from './useLineHoldings';

lib/hooks/useEventEmitter/index.js

@@ -0,0 +1 @@
+export { useEventEmitter } from './useEventEmitter';

lib/hooks/useEventEmitter/useEventEmitter.js

@@ -0,0 +1,5 @@
+import { EventEmitter } from '../../utils';
+
+export const useEventEmitter = ({ singleton = true } = {}) => {
+  return new EventEmitter({ singleton });
+};

lib/hooks/useEventEmitter/useEventEmitter.test.js

@@ -0,0 +1,12 @@
+import { renderHook } from '@folio/jest-config-stripes/testing-library/react';
+
+import { EventEmitter } from '../../utils';
+import { useEventEmitter } from './useEventEmitter';
+
+describe('useEventEmitter', () => {
+  it('should return event emitter instance', async () => {
+    const { result } = renderHook(() => useEventEmitter());
+
+    expect(result.current).toBeInstanceOf(EventEmitter);
+  });
+});

lib/utils/EventEmitter/EventEmitter.js

@@ -0,0 +1,30 @@
+export class EventEmitter {
+  constructor(config = {}) {
+    if (config.singleton && EventEmitter.sharedEventTarget) {
+      // If `singleton` is set and `sharedEventTarget` already exists, use it for all instances
+      this.eventTarget = EventEmitter.sharedEventTarget;
+    } else {
+      // Otherwise, create a new `EventTarget`
+      this.eventTarget = new EventTarget();
+
+      // If `singleton` is set, save the created `EventTarget` in `sharedEventTarget`
+      if (config.singleton) {
+        EventEmitter.sharedEventTarget = this.eventTarget;
+      }
+    }
+  }
+
+  on(eventName, callback) {
+    this.eventTarget.addEventListener(eventName, callback);
+  }
+
+  off(eventName, callback) {
+    this.eventTarget.removeEventListener(eventName, callback);
+  }
+
+  emit(eventName, data) {
+    const event = new CustomEvent(eventName, { detail: data });
+
+    this.eventTarget.dispatchEvent(event);
+  }
+}

lib/utils/EventEmitter/EventEmitter.test.js

@@ -0,0 +1,52 @@
+import { EventEmitter } from './EventEmitter';
+
+const EVENT_TYPE = 'test-event-type';
+const callback = jest.fn();
+const payload = 'Test payload';
+
+describe('EventEmitter', () => {
+  let emitter;
+
+  beforeEach(() => {
+    emitter = new EventEmitter();
+    callback.mockClear();
+  });
+
+  it('should add and invoke event listeners', () => {
+    emitter.on(EVENT_TYPE, callback);
+    emitter.emit(EVENT_TYPE, payload);
+
+    expect(callback).toHaveBeenCalledWith(expect.objectContaining({ detail: payload }));
+  });
+
+  it('should remove event listeners', () => {
+    emitter.on(EVENT_TYPE, callback);
+    emitter.off(EVENT_TYPE, callback);
+    emitter.emit(EVENT_TYPE, payload);
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should emit events with the correct data', () => {
+    emitter.on(EVENT_TYPE, callback);
+    emitter.emit(EVENT_TYPE, payload);
+
+    expect(callback).toHaveBeenCalledWith(expect.objectContaining({ detail: payload }));
+  });
+
+  describe('with configuration', () => {
+    it('should create a shared EventTarget for instances with singleton set to true', () => {
+      const emitter1 = new EventEmitter({ singleton: true });
+      const emitter2 = new EventEmitter({ singleton: true });
+
+      expect(emitter1.eventTarget).toBe(emitter2.eventTarget);
+    });
+
+    it('should create separate EventTargets for instances with singleton set to false', () => {
+      const emitter3 = new EventEmitter();
+      const emitter4 = new EventEmitter();
+
+      expect(emitter3.eventTarget).not.toBe(emitter4.eventTarget);
+    });
+  });
+});

lib/utils/EventEmitter/index.js

@@ -0,0 +1 @@
+export { EventEmitter } from './EventEmitter';

lib/utils/index.js

@@ -3,6 +3,7 @@ export * from './batchFetch';
 export * from './calculateFundAmount';
 export * from './createClearFilterHandler';
 export * from './downloadBase64';
+export * from './EventEmitter';
 export * from './fetchAllRecords';
 export * from './fetchExportDataByIds';
 export * from './filterArrayValues';