From da8a1c2561f7b4df7759183f8068daf36f78e558 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 9 Nov 2023 14:36:20 +0500
Subject: [PATCH 1/5] updated default formatters

---
 lib/Donors/DonorsContainer.js | 18 +++---------------
 lib/Donors/utils.js           |  3 ++-
 lib/Donors/utils.test.js      |  6 +++---
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/lib/Donors/DonorsContainer.js b/lib/Donors/DonorsContainer.js
index 615b3c3b..90f156cf 100644
--- a/lib/Donors/DonorsContainer.js
+++ b/lib/Donors/DonorsContainer.js
@@ -8,10 +8,7 @@ import { useStripes } from '@folio/stripes/core';
 import { defaultVisibleColumns } from './constants';
 import { DonorsList } from './DonorsList';
 import { DonorsLookup } from './DonorsLookup';
-import {
-  getDonorsListFormatter,
-  getUnAssignDonorFormatter,
-} from './utils';
+import { getDonorsFormatter } from './utils';
 
 export function DonorsContainer({
   columnMapping,
@@ -50,17 +47,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);
diff --git a/lib/Donors/utils.js b/lib/Donors/utils.js
index a31a8569..b706eaab 100644
--- a/lib/Donors/utils.js
+++ b/lib/Donors/utils.js
@@ -17,7 +17,8 @@ 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"
diff --git a/lib/Donors/utils.test.js b/lib/Donors/utils.test.js
index 1388756a..0634d4c8 100644
--- a/lib/Donors/utils.test.js
+++ b/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),

From 632cc040f6fe583049f5c05c3dc3de7d1744723b Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 9 Nov 2023 15:07:30 +0500
Subject: [PATCH 2/5] style: align remove button on the right side

---
 lib/Donors/Donors.css | 3 +++
 lib/Donors/utils.js   | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 lib/Donors/Donors.css

diff --git a/lib/Donors/Donors.css b/lib/Donors/Donors.css
new file mode 100644
index 00000000..7fca66f3
--- /dev/null
+++ b/lib/Donors/Donors.css
@@ -0,0 +1,3 @@
+.donorUnassignButton {
+  margin-left: auto !important;
+}
diff --git a/lib/Donors/utils.js b/lib/Donors/utils.js
index b706eaab..552bdc6d 100644
--- a/lib/Donors/utils.js
+++ b/lib/Donors/utils.js
@@ -4,6 +4,8 @@ import {
   TextLink,
 } from '@folio/stripes/components';
 
+import css from './Donors.css';
+
 const getDonorUrl = (orgId) => {
   if (orgId) {
     return `/organizations/view/${orgId}`;
@@ -21,10 +23,10 @@ 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"
+      buttonClass={css.donorUnassignButton}
       onClick={(e) => {
         e.preventDefault();
         fields.remove(donor._index);

From 2ec2735c10ae4092d3f3fe663483ee16eccc0084 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 9 Nov 2023 15:48:59 +0500
Subject: [PATCH 3/5] style: format row using `acqRowFormatter`

---
 lib/Donors/Donors.css    | 3 ---
 lib/Donors/DonorsList.js | 8 +++++++-
 lib/Donors/utils.js      | 3 ---
 3 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 lib/Donors/Donors.css

diff --git a/lib/Donors/Donors.css b/lib/Donors/Donors.css
deleted file mode 100644
index 7fca66f3..00000000
--- a/lib/Donors/Donors.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.donorUnassignButton {
-  margin-left: auto !important;
-}
diff --git a/lib/Donors/DonorsList.js b/lib/Donors/DonorsList.js
index 75dcb284..1eed1df8 100644
--- a/lib/Donors/DonorsList.js
+++ b/lib/Donors/DonorsList.js
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { MultiColumnList } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
 
+import { acqRowFormatter } from '../utils';
 import {
   alignRowProps,
   defaultColumnMapping,
@@ -25,12 +26,17 @@ export const DonorsList = ({
     return formatterProp || getDonorsListFormatter({ canViewOrganizations });
   }, [canViewOrganizations, formatterProp]);
 
+  const anchoredRowFormatter = useCallback((rowProps) => {
+    return acqRowFormatter(rowProps);
+  }, []);
+
   return (
     <MultiColumnList
       id={id}
       columnMapping={columnMapping}
       contentData={contentData}
       formatter={formatter}
+      rowFormatter={anchoredRowFormatter}
       rowProps={alignRowProps}
       visibleColumns={visibleColumns}
       columnWidths={columnWidths}
diff --git a/lib/Donors/utils.js b/lib/Donors/utils.js
index 552bdc6d..8381f8f2 100644
--- a/lib/Donors/utils.js
+++ b/lib/Donors/utils.js
@@ -4,8 +4,6 @@ import {
   TextLink,
 } from '@folio/stripes/components';
 
-import css from './Donors.css';
-
 const getDonorUrl = (orgId) => {
   if (orgId) {
     return `/organizations/view/${orgId}`;
@@ -26,7 +24,6 @@ export const getDonorsFormatter = ({ canViewOrganizations, fields, intl }) => ({
       aria-label={intl.formatMessage({ id: 'stripes-acq-components.donors.button.unassign' })}
       buttonStyle="fieldControl"
       type="button"
-      buttonClass={css.donorUnassignButton}
       onClick={(e) => {
         e.preventDefault();
         fields.remove(donor._index);

From 1affaad529db9f63e1f64ac103a4527d2bcb3cdd Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 9 Nov 2023 16:55:17 +0500
Subject: [PATCH 4/5] `DonorsListContainer` component to fetch data with
 `donorOrganizationIds`

---
 lib/Donors/DonorsContainer.js          |  6 ++-
 lib/Donors/DonorsList.js               |  8 ++--
 lib/Donors/DonorsListContainer.js      | 26 ++++++++++++
 lib/Donors/DonorsListContainer.test.js | 58 ++++++++++++++++++++++++++
 lib/Donors/constants.js                |  5 +++
 lib/Donors/index.js                    |  1 +
 6 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 lib/Donors/DonorsListContainer.js
 create mode 100644 lib/Donors/DonorsListContainer.test.js

diff --git a/lib/Donors/DonorsContainer.js b/lib/Donors/DonorsContainer.js
index 90f156cf..60add8db 100644
--- a/lib/Donors/DonorsContainer.js
+++ b/lib/Donors/DonorsContainer.js
@@ -5,7 +5,7 @@ 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 { getDonorsFormatter } from './utils';
@@ -21,6 +21,7 @@ export function DonorsContainer({
   searchLabel,
   showTriggerButton,
   visibleColumns,
+  ...rest
 }) {
   const stripes = useStripes();
   const intl = useIntl();
@@ -69,6 +70,7 @@ export function DonorsContainer({
         formatter={resultsFormatter}
         columnMapping={columnMapping}
         columnWidths={columnWidths}
+        {...rest}
       />
       <br />
       {
@@ -100,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 1eed1df8..a2b8a90c 100644
--- a/lib/Donors/DonorsList.js
+++ b/lib/Donors/DonorsList.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { MultiColumnList } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
@@ -19,6 +19,7 @@ export const DonorsList = ({
   formatter: formatterProp,
   id,
   visibleColumns,
+  ...rest
 }) => {
   const stripes = useStripes();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
@@ -26,9 +27,7 @@ export const DonorsList = ({
     return formatterProp || getDonorsListFormatter({ canViewOrganizations });
   }, [canViewOrganizations, formatterProp]);
 
-  const anchoredRowFormatter = useCallback((rowProps) => {
-    return acqRowFormatter(rowProps);
-  }, []);
+  const anchoredRowFormatter = (rowProp) => acqRowFormatter(rowProp);
 
   return (
     <MultiColumnList
@@ -40,6 +39,7 @@ export const DonorsList = ({
       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 <Loading />;
+  }
+
+  return (
+    <DonorsList
+      rowProps={{ alignLastColToEnd: false }}
+      contentData={donors}
+      {...rest}
+    />
+  );
+};
+
+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 }) => (
+  <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();
+  });
+});
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 = <FormattedMessage id="stripes-acq-components.donors.modal.title" />;
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';

From 2f71a3ec0d7cd3db17e19f485f53c18e656c8278 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 9 Nov 2023 19:28:11 +0500
Subject: [PATCH 5/5] simplify the row formatter function

---
 lib/Donors/DonorsList.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/Donors/DonorsList.js b/lib/Donors/DonorsList.js
index a2b8a90c..1bee6eb1 100644
--- a/lib/Donors/DonorsList.js
+++ b/lib/Donors/DonorsList.js
@@ -27,15 +27,13 @@ export const DonorsList = ({
     return formatterProp || getDonorsListFormatter({ canViewOrganizations });
   }, [canViewOrganizations, formatterProp]);
 
-  const anchoredRowFormatter = (rowProp) => acqRowFormatter(rowProp);
-
   return (
     <MultiColumnList
       id={id}
       columnMapping={columnMapping}
       contentData={contentData}
       formatter={formatter}
-      rowFormatter={anchoredRowFormatter}
+      rowFormatter={acqRowFormatter}
       rowProps={alignRowProps}
       visibleColumns={visibleColumns}
       columnWidths={columnWidths}