UISACQCOMP-166: add unassignDonor to default formatters (#728)

* updated default formatters

* style: align remove button on the right side

* style: format row using `acqRowFormatter`

* `DonorsListContainer` component to fetch data with `donorOrganizationIds`

* simplify the row formatter function

lib/Donors/DonorsContainer.js

@@ -5,13 +5,10 @@ import { useIntl } from 'react-intl';
 
 import { useStripes } from '@folio/stripes/core';
 
-import { defaultVisibleColumns } from './constants';
+import { defaultContainerVisibleColumns } from './constants';
 import { DonorsList } from './DonorsList';
 import { DonorsLookup } from './DonorsLookup';
-import {
-  getDonorsListFormatter,
-  getUnAssignDonorFormatter,
-} from './utils';
+import { getDonorsFormatter } from './utils';
 
 export function DonorsContainer({
   columnMapping,
@@ -24,6 +21,7 @@ export function DonorsContainer({
   searchLabel,
   showTriggerButton,
   visibleColumns,
+  ...rest
 }) {
   const stripes = useStripes();
   const intl = useIntl();
@@ -50,17 +48,8 @@ export function DonorsContainer({
   const contentData = useMemo(() => sortBy(listOfDonors, [({ lastName }) => lastName?.toLowerCase()]), [listOfDonors]);
 
   const resultsFormatter = useMemo(() => {
-    const defaultFormatter = formatter || getDonorsListFormatter({ intl, fields, canViewOrganizations });
-
-    if (visibleColumns.includes('unassignDonor')) {
-      return {
-        ...getUnAssignDonorFormatter({ intl, fields }),
-        ...defaultFormatter,
-      };
-    }
-
-    return defaultFormatter;
-  }, [canViewOrganizations, fields, formatter, intl, visibleColumns]);
+    return formatter || getDonorsFormatter({ intl, fields, canViewOrganizations });
+  }, [canViewOrganizations, fields, formatter, intl]);
 
   const onAddDonors = (values = []) => {
     const addedDonorIds = new Set(fields.value);
@@ -81,6 +70,7 @@ export function DonorsContainer({
         formatter={resultsFormatter}
         columnMapping={columnMapping}
         columnWidths={columnWidths}
+        {...rest}
       />
       <br />
       {
@@ -112,5 +102,5 @@ DonorsContainer.propTypes = {
 
 DonorsContainer.defaultProps = {
   showTriggerButton: true,
-  visibleColumns: defaultVisibleColumns,
+  visibleColumns: defaultContainerVisibleColumns,
 };

lib/Donors/DonorsList.js

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { MultiColumnList } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
 
+import { acqRowFormatter } from '../utils';
 import {
   alignRowProps,
   defaultColumnMapping,
@@ -18,6 +19,7 @@ export const DonorsList = ({
   formatter: formatterProp,
   id,
   visibleColumns,
+  ...rest
 }) => {
   const stripes = useStripes();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
@@ -31,9 +33,11 @@ export const DonorsList = ({
       columnMapping={columnMapping}
       contentData={contentData}
       formatter={formatter}
+      rowFormatter={acqRowFormatter}
       rowProps={alignRowProps}
       visibleColumns={visibleColumns}
       columnWidths={columnWidths}
+      {...rest}
     />
   );
 };

lib/Donors/DonorsListContainer.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+
+import { Loading } from '@folio/stripes/components';
+
+import { DonorsList } from './DonorsList';
+import { useFetchDonors } from './hooks';
+
+export const DonorsListContainer = ({ donorOrganizationIds, ...rest }) => {
+  const { donors, isLoading } = useFetchDonors(donorOrganizationIds);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <DonorsList
+      rowProps={{ alignLastColToEnd: false }}
+      contentData={donors}
+      {...rest}
+    />
+  );
+};
+
+DonorsListContainer.propTypes = {
+  donorOrganizationIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

lib/Donors/DonorsListContainer.test.js

@@ -0,0 +1,58 @@
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+
+import { DonorsListContainer } from './DonorsListContainer';
+import { useFetchDonors } from './hooks';
+
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
+  Loading: jest.fn(() => 'Loading'),
+}));
+
+jest.mock('./DonorsList', () => ({
+  DonorsList: jest.fn(() => 'DonorsList'),
+}));
+
+jest.mock('./hooks', () => ({
+  useFetchDonors: jest.fn().mockReturnValue({
+    donors: [],
+    isLoading: false,
+  }),
+}));
+
+const defaultProps = {
+  donorOrganizationIds: [],
+};
+
+const wrapper = ({ children }) => (
+  <MemoryRouter>
+    {children}
+  </MemoryRouter>
+);
+
+const renderComponent = (props = {}) => (render(
+  <DonorsListContainer
+    {...defaultProps}
+    {...props}
+  />,
+  { wrapper },
+));
+
+describe('DonorsListContainer', () => {
+  it('should render component', () => {
+    renderComponent();
+
+    expect(screen.getByText('DonorsList')).toBeDefined();
+  });
+
+  it('should render loading component', () => {
+    useFetchDonors.mockClear().mockReturnValue({
+      donors: [],
+      isLoading: true,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('Loading')).toBeDefined();
+  });
+});

lib/Donors/constants.js

@@ -11,6 +11,11 @@ export const defaultVisibleColumns = [
   'code',
 ];
 
+export const defaultContainerVisibleColumns = [
+  ...defaultVisibleColumns,
+  'unassignDonor',
+];
+
 export const alignRowProps = { alignLastColToEnd: true };
 
 export const modalLabel = <FormattedMessage id="stripes-acq-components.donors.modal.title" />;

lib/Donors/index.js

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

lib/Donors/utils.js

@@ -17,10 +17,10 @@ export const getDonorsListFormatter = ({ canViewOrganizations }) => ({
   code: donor => donor.code,
 });
 
-export const getUnAssignDonorFormatter = ({ fields, intl }) => ({
+export const getDonorsFormatter = ({ canViewOrganizations, fields, intl }) => ({
+  ...getDonorsListFormatter({ canViewOrganizations }),
   unassignDonor: donor => (
     <Button
-      align="end"
       aria-label={intl.formatMessage({ id: 'stripes-acq-components.donors.button.unassign' })}
       buttonStyle="fieldControl"
       type="button"

lib/Donors/utils.test.js

@@ -1,6 +1,6 @@
 import {
   getDonorsListFormatter,
-  getUnAssignDonorFormatter,
+  getDonorsFormatter,
 } from './utils';
 
 const defaultProps = {
@@ -24,9 +24,9 @@ describe('getDonorsListFormatter', () => {
   });
 });
 
-describe('getUnAssignDonorFormatter', () => {
+describe('getDonorsFormatter', () => {
   it('should return object with name, code and unassignDonor functions', () => {
-    const result = getUnAssignDonorFormatter(defaultProps);
+    const result = getDonorsFormatter(defaultProps);
 
     expect(result).toEqual(expect.objectContaining({
       unassignDonor: expect.any(Function),