UISACQCOMP-168: extend <Donors /> component props

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Add `inputType` prop to `<SingleSearchForm>`. Refs UISACQCOMP-165.
 * View the list of donors. Refs UISACQCOMP-166.
 * Added `indexRef` and `inputRef` props to `<SingleSearchForm>`. Refs UISACQCOMP-167.
+* Extend Donors component functionality. Refs UISACQCOMP-168.
 
 ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0)

lib/Donors/Donors.js

@@ -1,6 +1,7 @@
+import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import { FieldArray } from 'react-final-form-arrays';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import {
   Col,
@@ -12,10 +13,19 @@ import { defaultColumnMapping } from './constants';
 import { DonorsContainer } from './DonorsContainer';
 import { useFetchDonors } from './hooks';
 
-export function Donors({ name, donorOrganizationIds, ...rest }) {
+export function Donors({ name, donorOrganizationIds, onChange, ...rest }) {
   const [donorIds, setDonorIds] = useState(donorOrganizationIds);
   const { donors, isLoading } = useFetchDonors(donorIds);
 
+  useEffect(() => {
+    setDonorIds(donorOrganizationIds);
+  }, [donorOrganizationIds]);
+
+  const onSetDonorIds = (values = []) => {
+    setDonorIds(values);
+    onChange(values);
+  };
+
   if (isLoading) {
     return <Loading />;
   }
@@ -27,8 +37,9 @@ export function Donors({ name, donorOrganizationIds, ...rest }) {
           name={name}
           id={name}
           component={DonorsContainer}
-          setDonorIds={setDonorIds}
+          setDonorIds={onSetDonorIds}
           donors={donors}
+          donorIds={donorIds}
           {...rest}
         />
       </Col>
@@ -41,13 +52,17 @@ Donors.propTypes = {
   columnWidths: PropTypes.object,
   donorOrganizationIds: PropTypes.arrayOf(PropTypes.string),
   name: PropTypes.string,
+  onChange: PropTypes.func,
+  onRemove: PropTypes.func,
   searchLabel: PropTypes.node,
   showTriggerButton: PropTypes.bool,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
 Donors.defaultProps = {
+  columnMapping: defaultColumnMapping,
   donorOrganizationIds: [],
   name: 'donorOrganizationIds',
-  columnMapping: defaultColumnMapping,
+  onChange: noop,
+  onRemove: noop,
 };

lib/Donors/Donors.test.js

@@ -21,6 +21,7 @@ jest.mock('./hooks', () => ({
 const defaultProps = {
   name: 'donors',
   donorOrganizationIds: [],
+  onChange: jest.fn(),
 };
 
 const renderForm = (props = {}) => (

lib/Donors/DonorsContainer.js

@@ -1,11 +1,14 @@
-import { map, sortBy } from 'lodash';
+import { map, noop, sortBy } from 'lodash';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { useStripes } from '@folio/stripes/core';
 
-import { defaultContainerVisibleColumns } from './constants';
+import {
+  defaultContainerVisibleColumns,
+  pluginVisibleColumns,
+} from './constants';
 import { DonorsList } from './DonorsList';
 import { DonorsLookup } from './DonorsLookup';
 import { getDonorsFormatter } from './utils';
@@ -14,9 +17,12 @@ export function DonorsContainer({
   columnMapping,
   columnWidths,
   donors,
+  donorIds,
   fields,
   formatter,
   id,
+  onRemove,
+  pluginVisibleColumns: pluginVisibleColumnsProp,
   setDonorIds,
   searchLabel,
   showTriggerButton,
@@ -35,21 +41,21 @@ export function DonorsContainer({
     }, {});
   }, [donors]);
 
-  const listOfDonors = useMemo(() => (fields.value || [])
+  const listOfDonors = useMemo(() => (donorIds || [])
     .map((contactId, _index) => {
       const contact = donorsMap?.[contactId];
 
       return {
         ...(contact || { isDeleted: true }),
         _index,
       };
-    }), [donorsMap, fields.value]);
+    }), [donorIds, donorsMap]);
 
   const contentData = useMemo(() => sortBy(listOfDonors, [({ lastName }) => lastName?.toLowerCase()]), [listOfDonors]);
 
   const resultsFormatter = useMemo(() => {
-    return formatter || getDonorsFormatter({ intl, fields, canViewOrganizations });
-  }, [canViewOrganizations, fields, formatter, intl]);
+    return formatter || getDonorsFormatter({ intl, fields, canViewOrganizations, onRemove });
+  }, [canViewOrganizations, fields, formatter, intl, onRemove]);
 
   const onAddDonors = (values = []) => {
     const addedDonorIds = new Set(fields.value);
@@ -79,7 +85,7 @@ export function DonorsContainer({
             onAddDonors={onAddDonors}
             name={id}
             searchLabel={searchLabel}
-            visibleColumns={visibleColumns}
+            visibleColumns={pluginVisibleColumnsProp}
           />
         )
       }
@@ -91,16 +97,21 @@ DonorsContainer.propTypes = {
   columnWidths: PropTypes.object,
   columnMapping: PropTypes.object,
   donors: PropTypes.arrayOf(PropTypes.object),
+  donorIds: PropTypes.arrayOf(PropTypes.string),
   fields: PropTypes.object,
   formatter: PropTypes.object,
   id: PropTypes.string,
+  onRemove: PropTypes.func,
   searchLabel: PropTypes.node,
   setDonorIds: PropTypes.func.isRequired,
   showTriggerButton: PropTypes.bool,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
+  pluginVisibleColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
 DonorsContainer.defaultProps = {
+  onRemove: noop,
   showTriggerButton: true,
   visibleColumns: defaultContainerVisibleColumns,
+  pluginVisibleColumns,
 };

lib/Donors/DonorsContainer.test.js

@@ -48,14 +48,12 @@ jest.mock('./hooks', () => ({
 const defaultProps = {
   columnMapping: {},
   columnWidths: {},
-  donors: [],
-  fields: {
-    value: [
-      '1',
-      '2',
-    ],
-  },
+  donorIds: [
+    '1',
+    '2',
+  ],
   formatter: {},
+  donors: [],
   id: 'donors',
   setDonorIds,
   searchLabel: 'Search',

lib/Donors/index.js

@@ -1,4 +1,5 @@
 export { Donors } from './Donors';
 export { DonorsList } from './DonorsList';
 export { DonorsListContainer } from './DonorsListContainer';
+export { DonorsLookup } from './DonorsLookup';
 export { useFetchDonors } from './hooks/useFetchDonors';

lib/Donors/utils.js

@@ -17,7 +17,12 @@ export const getDonorsListFormatter = ({ canViewOrganizations }) => ({
   code: donor => donor.code,
 });
 
-export const getDonorsFormatter = ({ canViewOrganizations, fields, intl }) => ({
+export const getDonorsFormatter = ({
+  canViewOrganizations,
+  fields,
+  intl,
+  onRemove,
+}) => ({
   ...getDonorsListFormatter({ canViewOrganizations }),
   unassignDonor: donor => (
     <Button
@@ -27,6 +32,7 @@ export const getDonorsFormatter = ({ canViewOrganizations, fields, intl }) => ({
       onClick={(e) => {
         e.preventDefault();
         fields.remove(donor._index);
+        onRemove(fields.value[donor._index]);
       }}
     >
       <Icon icon="times-circle" />

lib/Donors/utils.test.js

@@ -3,14 +3,17 @@ import {
   getDonorsFormatter,
 } from './utils';
 
+const mockOnRemove = jest.fn();
 const defaultProps = {
   canViewOrganizations: true,
   fields: {
     remove: jest.fn(),
+    value: ['1'],
   },
   intl: {
     formatMessage: jest.fn((id) => id),
   },
+  onRemove: mockOnRemove,
 };
 
 describe('getDonorsListFormatter', () => {
@@ -31,5 +34,10 @@ describe('getDonorsFormatter', () => {
     expect(result).toEqual(expect.objectContaining({
       unassignDonor: expect.any(Function),
     }));
+
+    result.unassignDonor({ _index: 0 }).props.onClick({ preventDefault: jest.fn() });
+
+    expect(defaultProps.fields.remove).toHaveBeenCalled();
+    expect(mockOnRemove).toHaveBeenCalled();
   });
 });