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/DonorsContainer.js

@@ -1,4 +1,4 @@
-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';
@@ -14,9 +14,11 @@ export function DonorsContainer({
   columnMapping,
   columnWidths,
   donors,
+  donorIds,
   fields,
   formatter,
   id,
+  onRemove,
   setDonorIds,
   searchLabel,
   showTriggerButton,
@@ -35,21 +37,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);
@@ -91,16 +93,19 @@ 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),
 };
 
 DonorsContainer.defaultProps = {
+  onRemove: noop,
   showTriggerButton: true,
   visibleColumns: defaultContainerVisibleColumns,
 };

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

@@ -11,6 +11,7 @@ const defaultProps = {
   intl: {
     formatMessage: jest.fn((id) => id),
   },
+  onRemove: jest.fn(),
 };
 
 describe('getDonorsListFormatter', () => {