diff --git a/lib/Donors/DonorsContainer.js b/lib/Donors/DonorsContainer.js
index 615b3c3b..60add8db 100644
--- a/lib/Donors/DonorsContainer.js
+++ b/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}
/>
{
@@ -112,5 +102,5 @@ DonorsContainer.propTypes = {
DonorsContainer.defaultProps = {
showTriggerButton: true,
- visibleColumns: defaultVisibleColumns,
+ visibleColumns: defaultContainerVisibleColumns,
};
diff --git a/lib/Donors/DonorsList.js b/lib/Donors/DonorsList.js
index 75dcb284..1bee6eb1 100644
--- a/lib/Donors/DonorsList.js
+++ b/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}
/>
);
};
diff --git a/lib/Donors/DonorsListContainer.js b/lib/Donors/DonorsListContainer.js
new file mode 100644
index 00000000..c8d4b240
--- /dev/null
+++ b/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 ;
+ }
+
+ return (
+
+ );
+};
+
+DonorsListContainer.propTypes = {
+ donorOrganizationIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
diff --git a/lib/Donors/DonorsListContainer.test.js b/lib/Donors/DonorsListContainer.test.js
new file mode 100644
index 00000000..4339df50
--- /dev/null
+++ b/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 }) => (
+
+ {children}
+
+);
+
+const renderComponent = (props = {}) => (render(
+ ,
+ { 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();
+ });
+});
diff --git a/lib/Donors/constants.js b/lib/Donors/constants.js
index f145e44a..f0b0d217 100644
--- a/lib/Donors/constants.js
+++ b/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 = ;
diff --git a/lib/Donors/index.js b/lib/Donors/index.js
index bfdd00b0..f625423c 100644
--- a/lib/Donors/index.js
+++ b/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';
diff --git a/lib/Donors/utils.js b/lib/Donors/utils.js
index a31a8569..8381f8f2 100644
--- a/lib/Donors/utils.js
+++ b/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 => (