From 44033b8cc20f4af12086efae7ec7f0f28f08d3f6 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Tue, 31 Oct 2023 13:46:22 +0500
Subject: [PATCH 01/16] UISACQCOMP-166: view list of donors

---
 lib/DonorsList/DonorsContainer.js             |  65 +++++++
 lib/DonorsList/DonorsList.js                  | 165 ++++++++++++++++++
 lib/DonorsList/hooks/index.js                 |   1 +
 lib/DonorsList/hooks/useFetchDonors/index.js  |   1 +
 .../hooks/useFetchDonors/useFetchDonors.js    |  36 ++++
 lib/DonorsList/index.js                       |   1 +
 lib/index.js                                  |   1 +
 translations/stripes-acq-components/en.json   |   5 +-
 8 files changed, 274 insertions(+), 1 deletion(-)
 create mode 100644 lib/DonorsList/DonorsContainer.js
 create mode 100644 lib/DonorsList/DonorsList.js
 create mode 100644 lib/DonorsList/hooks/index.js
 create mode 100644 lib/DonorsList/hooks/useFetchDonors/index.js
 create mode 100644 lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
 create mode 100644 lib/DonorsList/index.js

diff --git a/lib/DonorsList/DonorsContainer.js b/lib/DonorsList/DonorsContainer.js
new file mode 100644
index 00000000..37765fe4
--- /dev/null
+++ b/lib/DonorsList/DonorsContainer.js
@@ -0,0 +1,65 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FieldArray } from 'react-final-form-arrays';
+
+import {
+  Col,
+  Loading,
+  Row,
+} from '@folio/stripes/components';
+
+import DonorsList from './DonorsList';
+import { useFetchDonors } from './hooks';
+
+function DonorsContainer({ name, donorOrganizationIds }) {
+  const [donors, setDonors] = useState([]);
+  const { fetchDonorsMutation, isLoading } = useFetchDonors();
+
+  const handleFetchDonors = useCallback(ids => {
+    fetchDonorsMutation({ donorOrganizationIds: ids })
+      .then((data) => {
+        setDonors(data);
+      });
+  }, [fetchDonorsMutation]);
+
+  useEffect(() => {
+    if (donorOrganizationIds.length) {
+      handleFetchDonors(donorOrganizationIds);
+    }
+  }, [donorOrganizationIds, handleFetchDonors]);
+
+  const donorsMap = donors.reduce((acc, contact) => {
+    acc[contact.id] = contact;
+
+    return acc;
+  }, {});
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Row>
+      <Col xs={12}>
+        <FieldArray
+          name={name}
+          id={name}
+          component={DonorsList}
+          fetchDonors={handleFetchDonors}
+          donorsMap={donorsMap}
+        />
+      </Col>
+    </Row>
+  );
+}
+
+DonorsContainer.propTypes = {
+  name: PropTypes.string.isRequired,
+  donorOrganizationIds: PropTypes.arrayOf(PropTypes.string),
+};
+
+DonorsContainer.defaultProps = {
+  donorOrganizationIds: [],
+};
+
+export default DonorsContainer;
diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
new file mode 100644
index 00000000..a9855ada
--- /dev/null
+++ b/lib/DonorsList/DonorsList.js
@@ -0,0 +1,165 @@
+import React, { useMemo } from 'react';
+import {
+  map,
+  sortBy,
+} from 'lodash';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import {
+  Button,
+  Icon,
+  MultiColumnList,
+} from '@folio/stripes/components';
+import {
+  Pluggable,
+  useStripes,
+} from '@folio/stripes/core';
+
+import { acqRowFormatter } from '../utils';
+
+const columnMapping = {
+  name: <FormattedMessage id="stripes-acq-components.donors.column.name" />,
+  code: <FormattedMessage id="stripes-acq-components.donors.column.code" />,
+  unassignDonor: null,
+};
+
+const visibleColumns = [
+  'name',
+  'code',
+  'unassignDonor',
+];
+
+const getResultsFormatter = ({
+  intl,
+  fields,
+}) => ({
+  name: donor => donor.name,
+  code: donor => donor.code,
+  unassignDonor: (donor) => (
+    <Button
+      align="end"
+      aria-label={intl.formatMessage({ id: 'stripes-acq-components.donors.button.unassign' })}
+      buttonStyle="fieldControl"
+      data-test-unassign-donor
+      type="button"
+      onClick={(e) => {
+        e.preventDefault();
+        fields.remove(donor._index);
+      }}
+    >
+      <Icon icon="times-circle" />
+    </Button>
+  ),
+});
+
+const getDonorUrl = (orgId) => {
+  if (orgId) {
+    return `/organizations/view/${orgId}`;
+  }
+
+  return undefined;
+};
+
+const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
+  const addDonors = (contacts = []) => {
+    const addedContactIds = new Set(fields.value);
+    const newContactsIds = map(contacts.filter(({ id }) => !addedContactIds.has(id)), 'id');
+
+    if (newContactsIds.length) {
+      fetchDonors([...addedContactIds, ...newContactsIds]);
+      newContactsIds.forEach(contactId => fields.push(contactId));
+    }
+  };
+
+  return (
+    <Pluggable
+      id={`${name}-plugin`}
+      aria-haspopup="true"
+      type="find-organization"
+      dataKey="organization"
+      searchLabel={<FormattedMessage id="stripes-acq-components.donors.button.addDonor" />}
+      searchButtonStyle="default"
+      disableRecordCreation
+      stripes={stripes}
+      selectVendor={addDonors}
+      isDonorsEnabled
+    >
+      <span data-test-add-donor>
+        <FormattedMessage id="stripes-acq-components.donors.noFindDonorPlugin" />
+      </span>
+    </Pluggable>
+  );
+};
+
+AddDonorButton.propTypes = {
+  fetchDonors: PropTypes.func.isRequired,
+  fields: PropTypes.object,
+  stripes: PropTypes.object,
+  name: PropTypes.string.isRequired,
+};
+
+const alignRowProps = { alignLastColToEnd: true };
+
+const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+  const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
+  const donors = (fields.value || [])
+    .map((contactId, _index) => {
+      const contact = donorsMap?.[contactId];
+
+      return {
+        ...(contact || { isDeleted: true }),
+        _index,
+      };
+    });
+  const contentData = sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]);
+
+  const anchoredRowFormatter = ({ rowProps, ...rest }) => {
+    return acqRowFormatter({
+      ...rest,
+      rowProps: {
+        ...rowProps,
+        to: getDonorUrl(canViewOrganizations && rest.rowData.id),
+      },
+    });
+  };
+
+  const resultsFormatter = useMemo(() => {
+    return getResultsFormatter({ intl, fields });
+  }, [fields, intl]);
+
+  return (
+    <>
+      <MultiColumnList
+        id={id}
+        columnMapping={columnMapping}
+        contentData={contentData}
+        formatter={resultsFormatter}
+        rowFormatter={anchoredRowFormatter}
+        rowProps={alignRowProps}
+        visibleColumns={visibleColumns}
+      />
+      <br />
+      <AddDonorButton
+        fetchDonors={fetchDonors}
+        fields={fields}
+        stripes={stripes}
+        name={id}
+      />
+    </>
+  );
+};
+
+DonorsList.propTypes = {
+  fetchDonors: PropTypes.func.isRequired,
+  fields: PropTypes.object,
+  donorsMap: PropTypes.object,
+  id: PropTypes.string.isRequired,
+};
+
+export default DonorsList;
diff --git a/lib/DonorsList/hooks/index.js b/lib/DonorsList/hooks/index.js
new file mode 100644
index 00000000..eed71fe5
--- /dev/null
+++ b/lib/DonorsList/hooks/index.js
@@ -0,0 +1 @@
+export { useFetchDonors } from './useFetchDonors';
diff --git a/lib/DonorsList/hooks/useFetchDonors/index.js b/lib/DonorsList/hooks/useFetchDonors/index.js
new file mode 100644
index 00000000..eed71fe5
--- /dev/null
+++ b/lib/DonorsList/hooks/useFetchDonors/index.js
@@ -0,0 +1 @@
+export { useFetchDonors } from './useFetchDonors';
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
new file mode 100644
index 00000000..ee08a023
--- /dev/null
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
@@ -0,0 +1,36 @@
+import { useMutation } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { VENDORS_API } from '../../../constants';
+import { batchRequest } from '../../../utils';
+
+const buildQueryByIds = (itemsChunk) => {
+  const query = itemsChunk
+    .map(chunkId => `id==${chunkId}`)
+    .join(' or ');
+
+  return query || '';
+};
+
+export const useFetchDonors = () => {
+  const ky = useOkapiKy();
+
+  const { isLoading, mutateAsync } = useMutation(
+    ({ donorOrganizationIds }) => {
+      return batchRequest(
+        ({ params: searchParams }) => ky
+          .get(VENDORS_API, { searchParams })
+          .json()
+          .then(({ organizations }) => organizations),
+        donorOrganizationIds,
+        buildQueryByIds,
+      );
+    },
+  );
+
+  return ({
+    fetchDonorsMutation: mutateAsync,
+    isLoading,
+  });
+};
diff --git a/lib/DonorsList/index.js b/lib/DonorsList/index.js
new file mode 100644
index 00000000..66ae435f
--- /dev/null
+++ b/lib/DonorsList/index.js
@@ -0,0 +1 @@
+export { default as DonorsList } from './DonorsContainer';
diff --git a/lib/index.js b/lib/index.js
index ea8509f8..7c0140a3 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -16,6 +16,7 @@ export * from './Currency';
 export * from './CurrencyExchangeRateFields';
 export * from './CurrencySymbol';
 export * from './DeleteHoldingsModal';
+export * from './DonorsList';
 export * from './DragDropMCL';
 export * from './DynamicSelection';
 export * from './DynamicSelectionFilter';
diff --git a/translations/stripes-acq-components/en.json b/translations/stripes-acq-components/en.json
index 5b2d35a1..6d8cf536 100644
--- a/translations/stripes-acq-components/en.json
+++ b/translations/stripes-acq-components/en.json
@@ -187,5 +187,8 @@
   "acquisition_method.other": "Other",
   "acquisition_method.purchase": "Purchase",
   "acquisition_method.purchaseAtVendorSystem": "Purchase at vendor system",
-  "acquisition_method.technical": "Technical"
+  "acquisition_method.technical": "Technical",
+  "donors.button.addDonor": "Add donor",
+  "donors.column.code": "Code",
+  "donors.column.name": "Name"
 }

From cb5be471ccd3440d780ce4714ec1279162db94f8 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Tue, 31 Oct 2023 18:46:50 +0500
Subject: [PATCH 02/16] tests: add test coverages

---
 lib/DonorsList/DonorsContainer.test.js | 93 ++++++++++++++++++++++++++
 lib/DonorsList/DonorsList.test.js      | 53 +++++++++++++++
 2 files changed, 146 insertions(+)
 create mode 100644 lib/DonorsList/DonorsContainer.test.js
 create mode 100644 lib/DonorsList/DonorsList.test.js

diff --git a/lib/DonorsList/DonorsContainer.test.js b/lib/DonorsList/DonorsContainer.test.js
new file mode 100644
index 00000000..9ada4541
--- /dev/null
+++ b/lib/DonorsList/DonorsContainer.test.js
@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import stripesFinalForm from '@folio/stripes/final-form';
+
+import DonorsContainer from './DonorsContainer';
+import { useFetchDonors } from './hooks';
+
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
+  Loading: jest.fn(() => 'Loading'),
+}));
+
+jest.mock('./DonorsList', () => jest.fn(({ donorsMap }) => {
+  if (!Object.values(donorsMap).length) {
+    return 'stripes-components.tableEmpty';
+  }
+
+  return Object.values(donorsMap).map(donor => <div>{donor.name}</div>);
+}));
+
+jest.mock('./hooks', () => ({
+  useFetchDonors: jest.fn().mockReturnValue({
+    fetchDonorsMutation: jest.fn(),
+    isLoading: false,
+  }),
+}));
+
+const defaultProps = {
+  name: 'donors',
+  donorOrganizationIds: [],
+};
+
+const renderForm = (props = {}) => (
+  <form>
+    <DonorsContainer
+      {...defaultProps}
+      {...props}
+    />
+    <button type="submit">Submit</button>
+  </form>
+);
+
+const FormCmpt = stripesFinalForm({})(renderForm);
+
+const renderComponent = (props = {}) => (render(
+  <MemoryRouter>
+    <FormCmpt onSubmit={() => { }} {...props} />
+  </MemoryRouter>,
+));
+
+describe('DonorsContainer', () => {
+  beforeEach(() => {
+    useFetchDonors.mockClear().mockReturnValue({
+      fetchDonorsMutation: jest.fn(),
+      isLoading: false,
+    });
+  });
+
+  it('should render component', () => {
+    renderComponent();
+
+    expect(screen.getByText('stripes-components.tableEmpty')).toBeDefined();
+  });
+
+  it('should render Loading component', () => {
+    useFetchDonors.mockClear().mockReturnValue({
+      fetchDonorsMutation: jest.fn(),
+      isLoading: true,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('Loading')).toBeDefined();
+  });
+
+  it('should call `fetchDonorsMutation` with `donorOrganizationIds`', () => {
+    const mockData = [{ name: 'Amazon', code: 'AMAZ', id: '1' }];
+    const fetchDonorsMutationMock = jest.fn().mockReturnValue({
+      then: (cb) => cb(mockData),
+    });
+
+    useFetchDonors.mockClear().mockReturnValue({
+      fetchDonorsMutation: fetchDonorsMutationMock,
+      isLoading: false,
+    });
+
+    renderComponent({ donorOrganizationIds: ['1'] });
+
+    expect(fetchDonorsMutationMock).toHaveBeenCalled();
+    expect(screen.getByText(mockData[0].name)).toBeDefined();
+  });
+});
diff --git a/lib/DonorsList/DonorsList.test.js b/lib/DonorsList/DonorsList.test.js
new file mode 100644
index 00000000..9a2d28d8
--- /dev/null
+++ b/lib/DonorsList/DonorsList.test.js
@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import DonorsList from './DonorsList';
+
+const mockFetchDonors = jest.fn();
+
+const defaultProps = {
+  fetchDonors: mockFetchDonors,
+  fields: {},
+  donorsMap: {},
+  id: 'donors',
+};
+
+const wrapper = ({ children }) => (
+  <MemoryRouter>
+    {children}
+  </MemoryRouter>
+);
+
+const renderComponent = (props = {}) => (render(
+  <DonorsList
+    {...defaultProps}
+    {...props}
+  />,
+  { wrapper },
+));
+
+describe('DonorsList', () => {
+  it('should render component', () => {
+    renderComponent();
+
+    expect(screen.getByText('stripes-components.tableEmpty')).toBeDefined();
+  });
+
+  it('should render the list of donor organizations', () => {
+    renderComponent({
+      fields: {
+        value: [
+          '1',
+          '2',
+        ],
+      },
+      donorsMap: {
+        1: { id: '1', name: 'Amazon' },
+        2: { id: '2', name: 'Google' },
+      },
+    });
+
+    expect(screen.getByText('Amazon')).toBeDefined();
+    expect(screen.getByText('Google')).toBeDefined();
+  });
+});

From 407e3a1842698474f532f77c62f9121acef3084d Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Tue, 31 Oct 2023 20:07:25 +0500
Subject: [PATCH 03/16] tests: add test coverage and Changelog.md

---
 CHANGELOG.md                                  |  1 +
 .../useFetchDonors/useFetchDonors.test.js     | 49 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2e1c706..abaf8ee1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Sort the list of countries based on the current locale. Refs UISACQCOMP-164.
 * Add `inputType` prop to `<SingleSearchForm>`. Refs UISACQCOMP-165.
+* View the list of donors. Refs UISACQCOMP-166.
 
 ## [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)
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
new file mode 100644
index 00000000..c3494842
--- /dev/null
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
@@ -0,0 +1,49 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { useFetchDonors } from './useFetchDonors';
+
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  useOkapiKy: jest.fn(),
+}));
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const org = { id: 'orgId', name: 'VENDOR' };
+
+const getMock = jest.fn().mockReturnValue({
+  json: () => Promise.resolve(({ organizations: [org], totalRecords: 1 })),
+});
+
+describe('useDonors', () => {
+  beforeEach(() => {
+    getMock.mockClear();
+
+    useOkapiKy
+      .mockClear()
+      .mockReturnValue({
+        get: getMock,
+      });
+  });
+
+  it('should make a get a request with default search params', async () => {
+    const { result, waitFor } = renderHook(() => useFetchDonors(), { wrapper });
+
+    await result.current.fetchDonorsMutation({ donorOrganizationIds: ['orgId'] });
+    await waitFor(() => !result.current.isLoading);
+
+    expect(getMock).toHaveBeenCalledWith(
+      'organizations/organizations',
+      { 'searchParams': { 'limit': 1000, 'query': 'id==orgId' } },
+    );
+  });
+});

From 9afb1339717eaec186fcdaba03e02f39668b747b Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Tue, 31 Oct 2023 23:09:22 +0500
Subject: [PATCH 04/16] refactor: change the order of import files

---
 lib/DonorsList/DonorsContainer.test.js                     | 4 ++--
 lib/DonorsList/DonorsList.test.js                          | 2 +-
 lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js | 5 ++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/DonorsList/DonorsContainer.test.js b/lib/DonorsList/DonorsContainer.test.js
index 9ada4541..9832c0a9 100644
--- a/lib/DonorsList/DonorsContainer.test.js
+++ b/lib/DonorsList/DonorsContainer.test.js
@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
 
 import stripesFinalForm from '@folio/stripes/final-form';
 
@@ -16,7 +16,7 @@ jest.mock('./DonorsList', () => jest.fn(({ donorsMap }) => {
     return 'stripes-components.tableEmpty';
   }
 
-  return Object.values(donorsMap).map(donor => <div>{donor.name}</div>);
+  return Object.values(donorsMap).map(({ name }) => <div key={name}>{name}</div>);
 }));
 
 jest.mock('./hooks', () => ({
diff --git a/lib/DonorsList/DonorsList.test.js b/lib/DonorsList/DonorsList.test.js
index 9a2d28d8..c64b15ba 100644
--- a/lib/DonorsList/DonorsList.test.js
+++ b/lib/DonorsList/DonorsList.test.js
@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
 
 import DonorsList from './DonorsList';
 
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
index c3494842..7eef974f 100644
--- a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
@@ -1,5 +1,8 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
 import { renderHook } from '@testing-library/react-hooks';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { useOkapiKy } from '@folio/stripes/core';
 

From acb730f9b0eef8c432dfc6f05b991d2187085710 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Wed, 1 Nov 2023 18:13:13 +0500
Subject: [PATCH 05/16] add column width for better table view

---
 lib/DonorsList/DonorsList.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index a9855ada..2b005753 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -103,7 +103,11 @@ AddDonorButton.propTypes = {
 };
 
 const alignRowProps = { alignLastColToEnd: true };
-
+const columnWidths = {
+  name: '45%',
+  code: '45%',
+  unassignDonor: '10%',
+};
 const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();
@@ -143,6 +147,7 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
         rowFormatter={anchoredRowFormatter}
         rowProps={alignRowProps}
         visibleColumns={visibleColumns}
+        columnWidths={columnWidths}
       />
       <br />
       <AddDonorButton

From 5474b1a992c069afe6167180ab9bbbb7e694638b Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 2 Nov 2023 09:44:32 +0500
Subject: [PATCH 06/16] refactor: add config properties for plugin to implement
 donors

---
 lib/DonorsList/AddDonorButton.js            | 60 +++++++++++++++++
 lib/DonorsList/DonorsList.js                | 73 ++-------------------
 lib/DonorsList/constants.js                 | 60 +++++++++++++++++
 translations/stripes-acq-components/en.json |  5 +-
 4 files changed, 129 insertions(+), 69 deletions(-)
 create mode 100644 lib/DonorsList/AddDonorButton.js
 create mode 100644 lib/DonorsList/constants.js

diff --git a/lib/DonorsList/AddDonorButton.js b/lib/DonorsList/AddDonorButton.js
new file mode 100644
index 00000000..1a1a8493
--- /dev/null
+++ b/lib/DonorsList/AddDonorButton.js
@@ -0,0 +1,60 @@
+import { map } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { Pluggable } from '@folio/stripes/core';
+
+import {
+  initialFilters,
+  modalLabel,
+  pluginVisibleColumns,
+  resultsPaneTitle,
+  searchableIndexes,
+  visibleFilters,
+} from './constants';
+
+const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
+  const addDonors = (donors = []) => {
+    const addedDonorIds = new Set(fields.value);
+    const newDonorsIds = map(donors.filter(({ id }) => !addedDonorIds.has(id)), 'id');
+
+    if (newDonorsIds.length) {
+      fetchDonors([...addedDonorIds, ...newDonorsIds]);
+      newDonorsIds.forEach(contactId => fields.push(contactId));
+    }
+  };
+
+  return (
+    <Pluggable
+      id={`${name}-plugin`}
+      aria-haspopup="true"
+      type="find-organization"
+      dataKey="organization"
+      searchLabel={<FormattedMessage id="stripes-acq-components.donors.button.addDonor" />}
+      searchButtonStyle="default"
+      disableRecordCreation
+      stripes={stripes}
+      selectVendor={addDonors}
+      modalLabel={modalLabel}
+      resultsPaneTitle={resultsPaneTitle}
+      visibleColumns={pluginVisibleColumns}
+      initialFilters={initialFilters}
+      searchableIndexes={searchableIndexes}
+      visibleFilters={visibleFilters}
+      isMultiSelect
+    >
+      <span data-test-add-donor>
+        <FormattedMessage id="stripes-acq-components.donors.noFindOrganizationPlugin" />
+      </span>
+    </Pluggable>
+  );
+};
+
+AddDonorButton.propTypes = {
+  fetchDonors: PropTypes.func.isRequired,
+  fields: PropTypes.object,
+  stripes: PropTypes.object,
+  name: PropTypes.string.isRequired,
+};
+
+export default AddDonorButton;
diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index 2b005753..18008cd0 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -1,37 +1,18 @@
 import React, { useMemo } from 'react';
-import {
-  map,
-  sortBy,
-} from 'lodash';
+import { sortBy } from 'lodash';
 import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  useIntl,
-} from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import {
   Button,
   Icon,
   MultiColumnList,
 } from '@folio/stripes/components';
-import {
-  Pluggable,
-  useStripes,
-} from '@folio/stripes/core';
+import { useStripes } from '@folio/stripes/core';
 
 import { acqRowFormatter } from '../utils';
-
-const columnMapping = {
-  name: <FormattedMessage id="stripes-acq-components.donors.column.name" />,
-  code: <FormattedMessage id="stripes-acq-components.donors.column.code" />,
-  unassignDonor: null,
-};
-
-const visibleColumns = [
-  'name',
-  'code',
-  'unassignDonor',
-];
+import AddDonorButton from './AddDonorButton';
+import { alignRowProps, columnMapping, columnWidths, visibleColumns } from './constants';
 
 const getResultsFormatter = ({
   intl,
@@ -64,50 +45,6 @@ const getDonorUrl = (orgId) => {
   return undefined;
 };
 
-const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
-  const addDonors = (contacts = []) => {
-    const addedContactIds = new Set(fields.value);
-    const newContactsIds = map(contacts.filter(({ id }) => !addedContactIds.has(id)), 'id');
-
-    if (newContactsIds.length) {
-      fetchDonors([...addedContactIds, ...newContactsIds]);
-      newContactsIds.forEach(contactId => fields.push(contactId));
-    }
-  };
-
-  return (
-    <Pluggable
-      id={`${name}-plugin`}
-      aria-haspopup="true"
-      type="find-organization"
-      dataKey="organization"
-      searchLabel={<FormattedMessage id="stripes-acq-components.donors.button.addDonor" />}
-      searchButtonStyle="default"
-      disableRecordCreation
-      stripes={stripes}
-      selectVendor={addDonors}
-      isDonorsEnabled
-    >
-      <span data-test-add-donor>
-        <FormattedMessage id="stripes-acq-components.donors.noFindDonorPlugin" />
-      </span>
-    </Pluggable>
-  );
-};
-
-AddDonorButton.propTypes = {
-  fetchDonors: PropTypes.func.isRequired,
-  fields: PropTypes.object,
-  stripes: PropTypes.object,
-  name: PropTypes.string.isRequired,
-};
-
-const alignRowProps = { alignLastColToEnd: true };
-const columnWidths = {
-  name: '45%',
-  code: '45%',
-  unassignDonor: '10%',
-};
 const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();
diff --git a/lib/DonorsList/constants.js b/lib/DonorsList/constants.js
new file mode 100644
index 00000000..83dc99ea
--- /dev/null
+++ b/lib/DonorsList/constants.js
@@ -0,0 +1,60 @@
+import { FormattedMessage } from 'react-intl';
+
+export const columnMapping = {
+  name: <FormattedMessage id="stripes-acq-components.donors.column.name" />,
+  code: <FormattedMessage id="stripes-acq-components.donors.column.code" />,
+  unassignDonor: null,
+};
+
+export const visibleColumns = [
+  'name',
+  'code',
+  'unassignDonor',
+];
+
+export const alignRowProps = { alignLastColToEnd: true };
+
+export const columnWidths = {
+  name: '45%',
+  code: '45%',
+  unassignDonor: '10%',
+};
+
+export const modalLabel = <FormattedMessage id="stripes-acq-components.donors.modal.title" />;
+export const resultsPaneTitle = <FormattedMessage id="stripes-acq-components.donors.modal.resultsTitle" />;
+
+export const pluginVisibleColumns = ['name', 'code'];
+
+export const DONORS_SORT_MAP = {
+  name: 'name',
+  code: 'code',
+};
+
+const ORGANIZATION_STATUS = {
+  active: 'Active',
+  inactive: 'Inactive',
+  pending: 'Pending',
+};
+
+const FILTERS = {
+  IS_VENDOR: 'isVendor',
+  STATUS: 'status',
+  TAGS: 'tags',
+  TYPES: 'organizationTypes',
+};
+
+export const visibleFilters = [
+  FILTERS.IS_VENDOR,
+  FILTERS.TAGS,
+  FILTERS.TYPES,
+];
+
+export const initialFilters = {
+  [FILTERS.IS_DONOR]: ['true'],
+  [FILTERS.STATUS]: [ORGANIZATION_STATUS.active],
+};
+
+export const searchableIndexes = pluginVisibleColumns.map(column => ({
+  labelId: `ui-organizations.search.${column}`,
+  value: column,
+}));
diff --git a/translations/stripes-acq-components/en.json b/translations/stripes-acq-components/en.json
index 6d8cf536..cb8b9d23 100644
--- a/translations/stripes-acq-components/en.json
+++ b/translations/stripes-acq-components/en.json
@@ -190,5 +190,8 @@
   "acquisition_method.technical": "Technical",
   "donors.button.addDonor": "Add donor",
   "donors.column.code": "Code",
-  "donors.column.name": "Name"
+  "donors.column.name": "Name",
+  "donors.modal.title": "Add donors",
+  "donors.modal.resultsTitle": "Donors",
+  "donors.noFindOrganizationPlugin": "no find-organization plugin"
 }

From f12b1bcdcc3238d89f75f18c7de7628200251a14 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 2 Nov 2023 15:29:54 +0500
Subject: [PATCH 07/16] fix: add missing IS_DONOR filter prop

---
 lib/DonorsList/constants.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/DonorsList/constants.js b/lib/DonorsList/constants.js
index 83dc99ea..2fb6138c 100644
--- a/lib/DonorsList/constants.js
+++ b/lib/DonorsList/constants.js
@@ -38,6 +38,7 @@ const ORGANIZATION_STATUS = {
 
 const FILTERS = {
   IS_VENDOR: 'isVendor',
+  IS_DONOR: 'isDonor',
   STATUS: 'status',
   TAGS: 'tags',
   TYPES: 'organizationTypes',

From e54369b45bc571cb5dd24b789388e46b0adda502 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 2 Nov 2023 18:38:56 +0500
Subject: [PATCH 08/16] improve code quality regarding to the comments

---
 lib/DonorsList/DonorsList.js | 48 ++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index 18008cd0..78427b10 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -7,25 +7,38 @@ import {
   Button,
   Icon,
   MultiColumnList,
+  TextLink,
 } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
 
-import { acqRowFormatter } from '../utils';
 import AddDonorButton from './AddDonorButton';
-import { alignRowProps, columnMapping, columnWidths, visibleColumns } from './constants';
+import {
+  alignRowProps,
+  columnMapping,
+  columnWidths,
+  visibleColumns,
+} from './constants';
+
+const getDonorUrl = (orgId) => {
+  if (orgId) {
+    return `/organizations/view/${orgId}`;
+  }
+
+  return undefined;
+};
 
 const getResultsFormatter = ({
-  intl,
+  canViewOrganizations,
   fields,
+  intl,
 }) => ({
-  name: donor => donor.name,
+  name: donor => <TextLink to={getDonorUrl(canViewOrganizations && donor.id)}>{donor.name}</TextLink>,
   code: donor => donor.code,
-  unassignDonor: (donor) => (
+  unassignDonor: donor => (
     <Button
       align="end"
       aria-label={intl.formatMessage({ id: 'stripes-acq-components.donors.button.unassign' })}
       buttonStyle="fieldControl"
-      data-test-unassign-donor
       type="button"
       onClick={(e) => {
         e.preventDefault();
@@ -37,14 +50,6 @@ const getResultsFormatter = ({
   ),
 });
 
-const getDonorUrl = (orgId) => {
-  if (orgId) {
-    return `/organizations/view/${orgId}`;
-  }
-
-  return undefined;
-};
-
 const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();
@@ -60,19 +65,9 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
     });
   const contentData = sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]);
 
-  const anchoredRowFormatter = ({ rowProps, ...rest }) => {
-    return acqRowFormatter({
-      ...rest,
-      rowProps: {
-        ...rowProps,
-        to: getDonorUrl(canViewOrganizations && rest.rowData.id),
-      },
-    });
-  };
-
   const resultsFormatter = useMemo(() => {
-    return getResultsFormatter({ intl, fields });
-  }, [fields, intl]);
+    return getResultsFormatter({ intl, fields, canViewOrganizations });
+  }, [canViewOrganizations, fields, intl]);
 
   return (
     <>
@@ -81,7 +76,6 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
         columnMapping={columnMapping}
         contentData={contentData}
         formatter={resultsFormatter}
-        rowFormatter={anchoredRowFormatter}
         rowProps={alignRowProps}
         visibleColumns={visibleColumns}
         columnWidths={columnWidths}

From a4b13ff68d342431dc1293598eae89a4b9bda3b4 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Thu, 2 Nov 2023 19:24:02 +0500
Subject: [PATCH 09/16] refactor: upgrade mutation to query for better caching

---
 lib/DonorsList/DonorsContainer.js             | 11 ++++-------
 .../hooks/useFetchDonors/useFetchDonors.js    | 19 +++++++++++++------
 .../useFetchDonors/useFetchDonors.test.js     | 12 ++++++++++--
 translations/stripes-acq-components/en.json   |  3 ++-
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/lib/DonorsList/DonorsContainer.js b/lib/DonorsList/DonorsContainer.js
index 37765fe4..a6fc259a 100644
--- a/lib/DonorsList/DonorsContainer.js
+++ b/lib/DonorsList/DonorsContainer.js
@@ -12,15 +12,12 @@ import DonorsList from './DonorsList';
 import { useFetchDonors } from './hooks';
 
 function DonorsContainer({ name, donorOrganizationIds }) {
-  const [donors, setDonors] = useState([]);
-  const { fetchDonorsMutation, isLoading } = useFetchDonors();
+  const [donorIds, setDonorIds] = useState(() => donorOrganizationIds);
+  const { donors, isLoading } = useFetchDonors(donorIds);
 
   const handleFetchDonors = useCallback(ids => {
-    fetchDonorsMutation({ donorOrganizationIds: ids })
-      .then((data) => {
-        setDonors(data);
-      });
-  }, [fetchDonorsMutation]);
+    setDonorIds(ids);
+  }, []);
 
   useEffect(() => {
     if (donorOrganizationIds.length) {
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
index ee08a023..905da805 100644
--- a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
@@ -1,6 +1,9 @@
-import { useMutation } from 'react-query';
+import { useQuery } from 'react-query';
 
-import { useOkapiKy } from '@folio/stripes/core';
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
 
 import { VENDORS_API } from '../../../constants';
 import { batchRequest } from '../../../utils';
@@ -13,11 +16,13 @@ const buildQueryByIds = (itemsChunk) => {
   return query || '';
 };
 
-export const useFetchDonors = () => {
+export const useFetchDonors = (donorOrganizationIds = []) => {
   const ky = useOkapiKy();
+  const namespace = useNamespace({ key: 'fetch-donors-list' });
 
-  const { isLoading, mutateAsync } = useMutation(
-    ({ donorOrganizationIds }) => {
+  const { isLoading, data, refetch } = useQuery(
+    [namespace, donorOrganizationIds],
+    () => {
       return batchRequest(
         ({ params: searchParams }) => ky
           .get(VENDORS_API, { searchParams })
@@ -27,10 +32,12 @@ export const useFetchDonors = () => {
         buildQueryByIds,
       );
     },
+    { enabled: Boolean(donorOrganizationIds.length) },
   );
 
   return ({
-    fetchDonorsMutation: mutateAsync,
+    donors: data || [],
     isLoading,
+    refetch,
   });
 };
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
index 7eef974f..29481fb3 100644
--- a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.test.js
@@ -11,6 +11,7 @@ import { useFetchDonors } from './useFetchDonors';
 jest.mock('@folio/stripes/core', () => ({
   ...jest.requireActual('@folio/stripes/core'),
   useOkapiKy: jest.fn(),
+  useNamespace: jest.fn(() => ['NameSpace']),
 }));
 
 const queryClient = new QueryClient();
@@ -41,12 +42,19 @@ describe('useDonors', () => {
   it('should make a get a request with default search params', async () => {
     const { result, waitFor } = renderHook(() => useFetchDonors(), { wrapper });
 
-    await result.current.fetchDonorsMutation({ donorOrganizationIds: ['orgId'] });
+    await waitFor(() => !result.current.isLoading);
+
+    expect(getMock).not.toHaveBeenCalled();
+  });
+
+  it('should make a get a request with default search params', async () => {
+    const { result, waitFor } = renderHook(() => useFetchDonors([org.id]), { wrapper });
+
     await waitFor(() => !result.current.isLoading);
 
     expect(getMock).toHaveBeenCalledWith(
       'organizations/organizations',
-      { 'searchParams': { 'limit': 1000, 'query': 'id==orgId' } },
+      { 'searchParams': { 'limit': 1000, 'query': `id==${org.id}` } },
     );
   });
 });
diff --git a/translations/stripes-acq-components/en.json b/translations/stripes-acq-components/en.json
index cb8b9d23..a49024e5 100644
--- a/translations/stripes-acq-components/en.json
+++ b/translations/stripes-acq-components/en.json
@@ -193,5 +193,6 @@
   "donors.column.name": "Name",
   "donors.modal.title": "Add donors",
   "donors.modal.resultsTitle": "Donors",
-  "donors.noFindOrganizationPlugin": "no find-organization plugin"
+  "donors.noFindOrganizationPlugin": "no find-organization plugin",
+  "donors.button.unassign": "Unassign"
 }

From b946cca15f04440d2c37e52d31965f82da79abba Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 00:12:43 +0500
Subject: [PATCH 10/16] fix: failing tests

---
 lib/DonorsList/DonorsContainer.js                  |  8 +-------
 lib/DonorsList/DonorsContainer.test.js             | 14 +++++---------
 lib/DonorsList/DonorsList.js                       |  2 +-
 lib/DonorsList/hooks/useFetchDonors/constants.js   |  1 +
 .../hooks/useFetchDonors/useFetchDonors.js         |  8 ++++----
 5 files changed, 12 insertions(+), 21 deletions(-)
 create mode 100644 lib/DonorsList/hooks/useFetchDonors/constants.js

diff --git a/lib/DonorsList/DonorsContainer.js b/lib/DonorsList/DonorsContainer.js
index a6fc259a..bf0b719f 100644
--- a/lib/DonorsList/DonorsContainer.js
+++ b/lib/DonorsList/DonorsContainer.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -19,12 +19,6 @@ function DonorsContainer({ name, donorOrganizationIds }) {
     setDonorIds(ids);
   }, []);
 
-  useEffect(() => {
-    if (donorOrganizationIds.length) {
-      handleFetchDonors(donorOrganizationIds);
-    }
-  }, [donorOrganizationIds, handleFetchDonors]);
-
   const donorsMap = donors.reduce((acc, contact) => {
     acc[contact.id] = contact;
 
diff --git a/lib/DonorsList/DonorsContainer.test.js b/lib/DonorsList/DonorsContainer.test.js
index 9832c0a9..e1433fad 100644
--- a/lib/DonorsList/DonorsContainer.test.js
+++ b/lib/DonorsList/DonorsContainer.test.js
@@ -21,7 +21,7 @@ jest.mock('./DonorsList', () => jest.fn(({ donorsMap }) => {
 
 jest.mock('./hooks', () => ({
   useFetchDonors: jest.fn().mockReturnValue({
-    fetchDonorsMutation: jest.fn(),
+    donors: [],
     isLoading: false,
   }),
 }));
@@ -52,7 +52,7 @@ const renderComponent = (props = {}) => (render(
 describe('DonorsContainer', () => {
   beforeEach(() => {
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: jest.fn(),
+      donors: [],
       isLoading: false,
     });
   });
@@ -65,7 +65,7 @@ describe('DonorsContainer', () => {
 
   it('should render Loading component', () => {
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: jest.fn(),
+      donors: [],
       isLoading: true,
     });
 
@@ -74,20 +74,16 @@ describe('DonorsContainer', () => {
     expect(screen.getByText('Loading')).toBeDefined();
   });
 
-  it('should call `fetchDonorsMutation` with `donorOrganizationIds`', () => {
+  it('should call `useFetchDonors` with `donorOrganizationIds`', () => {
     const mockData = [{ name: 'Amazon', code: 'AMAZ', id: '1' }];
-    const fetchDonorsMutationMock = jest.fn().mockReturnValue({
-      then: (cb) => cb(mockData),
-    });
 
     useFetchDonors.mockClear().mockReturnValue({
-      fetchDonorsMutation: fetchDonorsMutationMock,
+      donors: mockData,
       isLoading: false,
     });
 
     renderComponent({ donorOrganizationIds: ['1'] });
 
-    expect(fetchDonorsMutationMock).toHaveBeenCalled();
     expect(screen.getByText(mockData[0].name)).toBeDefined();
   });
 });
diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index 78427b10..68ca5f3d 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -63,7 +63,7 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
         _index,
       };
     });
-  const contentData = sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]);
+  const contentData = useMemo(() => sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]), [donors]);
 
   const resultsFormatter = useMemo(() => {
     return getResultsFormatter({ intl, fields, canViewOrganizations });
diff --git a/lib/DonorsList/hooks/useFetchDonors/constants.js b/lib/DonorsList/hooks/useFetchDonors/constants.js
new file mode 100644
index 00000000..6dfde324
--- /dev/null
+++ b/lib/DonorsList/hooks/useFetchDonors/constants.js
@@ -0,0 +1 @@
+export const DEFAULT_DATA = [];
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
index 905da805..d891a6e1 100644
--- a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
@@ -7,6 +7,7 @@ import {
 
 import { VENDORS_API } from '../../../constants';
 import { batchRequest } from '../../../utils';
+import { DEFAULT_DATA } from './constants';
 
 const buildQueryByIds = (itemsChunk) => {
   const query = itemsChunk
@@ -16,11 +17,11 @@ const buildQueryByIds = (itemsChunk) => {
   return query || '';
 };
 
-export const useFetchDonors = (donorOrganizationIds = []) => {
+export const useFetchDonors = (donorOrganizationIds = DEFAULT_DATA) => {
   const ky = useOkapiKy();
   const namespace = useNamespace({ key: 'fetch-donors-list' });
 
-  const { isLoading, data, refetch } = useQuery(
+  const { isLoading, data } = useQuery(
     [namespace, donorOrganizationIds],
     () => {
       return batchRequest(
@@ -36,8 +37,7 @@ export const useFetchDonors = (donorOrganizationIds = []) => {
   );
 
   return ({
-    donors: data || [],
+    donors: data || DEFAULT_DATA,
     isLoading,
-    refetch,
   });
 };

From 1b6cb98d2b1e6a6ebc49a223cc9b134c4bef50ee Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 10:12:32 +0500
Subject: [PATCH 11/16] update callback names for better readability

---
 lib/DonorsList/AddDonorButton.js  | 6 +++---
 lib/DonorsList/DonorsContainer.js | 8 ++------
 lib/DonorsList/DonorsList.js      | 6 +++---
 lib/DonorsList/DonorsList.test.js | 4 ++--
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/lib/DonorsList/AddDonorButton.js b/lib/DonorsList/AddDonorButton.js
index 1a1a8493..f470de74 100644
--- a/lib/DonorsList/AddDonorButton.js
+++ b/lib/DonorsList/AddDonorButton.js
@@ -13,13 +13,13 @@ import {
   visibleFilters,
 } from './constants';
 
-const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
+const AddDonorButton = ({ onAddDonors, fields, stripes, name }) => {
   const addDonors = (donors = []) => {
     const addedDonorIds = new Set(fields.value);
     const newDonorsIds = map(donors.filter(({ id }) => !addedDonorIds.has(id)), 'id');
 
     if (newDonorsIds.length) {
-      fetchDonors([...addedDonorIds, ...newDonorsIds]);
+      onAddDonors([...addedDonorIds, ...newDonorsIds]);
       newDonorsIds.forEach(contactId => fields.push(contactId));
     }
   };
@@ -51,7 +51,7 @@ const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
 };
 
 AddDonorButton.propTypes = {
-  fetchDonors: PropTypes.func.isRequired,
+  onAddDonors: PropTypes.func.isRequired,
   fields: PropTypes.object,
   stripes: PropTypes.object,
   name: PropTypes.string.isRequired,
diff --git a/lib/DonorsList/DonorsContainer.js b/lib/DonorsList/DonorsContainer.js
index bf0b719f..daba1ea1 100644
--- a/lib/DonorsList/DonorsContainer.js
+++ b/lib/DonorsList/DonorsContainer.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -15,10 +15,6 @@ function DonorsContainer({ name, donorOrganizationIds }) {
   const [donorIds, setDonorIds] = useState(() => donorOrganizationIds);
   const { donors, isLoading } = useFetchDonors(donorIds);
 
-  const handleFetchDonors = useCallback(ids => {
-    setDonorIds(ids);
-  }, []);
-
   const donorsMap = donors.reduce((acc, contact) => {
     acc[contact.id] = contact;
 
@@ -36,7 +32,7 @@ function DonorsContainer({ name, donorOrganizationIds }) {
           name={name}
           id={name}
           component={DonorsList}
-          fetchDonors={handleFetchDonors}
+          setDonorIds={setDonorIds}
           donorsMap={donorsMap}
         />
       </Col>
diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index 68ca5f3d..173e2891 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -50,7 +50,7 @@ const getResultsFormatter = ({
   ),
 });
 
-const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
+const DonorsList = ({ setDonorIds, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
@@ -82,7 +82,7 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
       />
       <br />
       <AddDonorButton
-        fetchDonors={fetchDonors}
+        onAddDonors={setDonorIds}
         fields={fields}
         stripes={stripes}
         name={id}
@@ -92,7 +92,7 @@ const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
 };
 
 DonorsList.propTypes = {
-  fetchDonors: PropTypes.func.isRequired,
+  setDonorIds: PropTypes.func.isRequired,
   fields: PropTypes.object,
   donorsMap: PropTypes.object,
   id: PropTypes.string.isRequired,
diff --git a/lib/DonorsList/DonorsList.test.js b/lib/DonorsList/DonorsList.test.js
index c64b15ba..2dd4647c 100644
--- a/lib/DonorsList/DonorsList.test.js
+++ b/lib/DonorsList/DonorsList.test.js
@@ -3,10 +3,10 @@ import { render, screen } from '@testing-library/react';
 
 import DonorsList from './DonorsList';
 
-const mockFetchDonors = jest.fn();
+const mockSetDonorIds = jest.fn();
 
 const defaultProps = {
-  fetchDonors: mockFetchDonors,
+  setDonorIds: mockSetDonorIds,
   fields: {},
   donorsMap: {},
   id: 'donors',

From 98ef11b91ea3b423a1ad252cd2527c44a8e03537 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 13:56:22 +0500
Subject: [PATCH 12/16] improve and optimize the code

---
 lib/DonorsList/DonorsList.js                          | 6 ++++--
 lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js | 9 ---------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/lib/DonorsList/DonorsList.js b/lib/DonorsList/DonorsList.js
index 173e2891..c17e54a1 100644
--- a/lib/DonorsList/DonorsList.js
+++ b/lib/DonorsList/DonorsList.js
@@ -54,7 +54,8 @@ const DonorsList = ({ setDonorIds, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
-  const donors = (fields.value || [])
+
+  const donors = useMemo(() => (fields.value || [])
     .map((contactId, _index) => {
       const contact = donorsMap?.[contactId];
 
@@ -62,7 +63,8 @@ const DonorsList = ({ setDonorIds, fields, donorsMap, id }) => {
         ...(contact || { isDeleted: true }),
         _index,
       };
-    });
+    }), [donorsMap, fields.value]);
+
   const contentData = useMemo(() => sortBy(donors, [({ lastName }) => lastName?.toLowerCase()]), [donors]);
 
   const resultsFormatter = useMemo(() => {
diff --git a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
index d891a6e1..ae7c10e1 100644
--- a/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
+++ b/lib/DonorsList/hooks/useFetchDonors/useFetchDonors.js
@@ -9,14 +9,6 @@ import { VENDORS_API } from '../../../constants';
 import { batchRequest } from '../../../utils';
 import { DEFAULT_DATA } from './constants';
 
-const buildQueryByIds = (itemsChunk) => {
-  const query = itemsChunk
-    .map(chunkId => `id==${chunkId}`)
-    .join(' or ');
-
-  return query || '';
-};
-
 export const useFetchDonors = (donorOrganizationIds = DEFAULT_DATA) => {
   const ky = useOkapiKy();
   const namespace = useNamespace({ key: 'fetch-donors-list' });
@@ -30,7 +22,6 @@ export const useFetchDonors = (donorOrganizationIds = DEFAULT_DATA) => {
           .json()
           .then(({ organizations }) => organizations),
         donorOrganizationIds,
-        buildQueryByIds,
       );
     },
     { enabled: Boolean(donorOrganizationIds.length) },

From c96feaec6fb2e19336069569d27bfaa61791a500 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 15:14:04 +0500
Subject: [PATCH 13/16] update state initializer

---
 lib/DonorsList/DonorsContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/DonorsList/DonorsContainer.js b/lib/DonorsList/DonorsContainer.js
index daba1ea1..3c914f5e 100644
--- a/lib/DonorsList/DonorsContainer.js
+++ b/lib/DonorsList/DonorsContainer.js
@@ -12,7 +12,7 @@ import DonorsList from './DonorsList';
 import { useFetchDonors } from './hooks';
 
 function DonorsContainer({ name, donorOrganizationIds }) {
-  const [donorIds, setDonorIds] = useState(() => donorOrganizationIds);
+  const [donorIds, setDonorIds] = useState(donorOrganizationIds);
   const { donors, isLoading } = useFetchDonors(donorIds);
 
   const donorsMap = donors.reduce((acc, contact) => {

From 11bb6c91e3fe5828b068fa15b6268d8eb635e6f0 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 16:51:28 +0500
Subject: [PATCH 14/16] tests: add test cases for the button

---
 lib/DonorsList/AddDonorButton.test.js | 35 +++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 lib/DonorsList/AddDonorButton.test.js

diff --git a/lib/DonorsList/AddDonorButton.test.js b/lib/DonorsList/AddDonorButton.test.js
new file mode 100644
index 00000000..142c89b8
--- /dev/null
+++ b/lib/DonorsList/AddDonorButton.test.js
@@ -0,0 +1,35 @@
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+
+import AddDonorButton from './AddDonorButton';
+
+const mockOnAddDonors = jest.fn();
+
+const defaultProps = {
+  onAddDonors: mockOnAddDonors,
+  fields: {},
+  stripes: {},
+  name: 'donors',
+};
+
+const wrapper = ({ children }) => (
+  <MemoryRouter>
+    {children}
+  </MemoryRouter>
+);
+
+const renderComponent = (props = {}) => (render(
+  <AddDonorButton
+    {...defaultProps}
+    {...props}
+  />,
+  { wrapper },
+));
+
+describe('AddDonorButton', () => {
+  it('should render component', () => {
+    renderComponent();
+
+    expect(screen.getByText('stripes-acq-components.donors.noFindOrganizationPlugin')).toBeDefined();
+  });
+});

From 32ec435a3c3a4513fcc12977662ed478b319883b Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 16:52:38 +0500
Subject: [PATCH 15/16] remove unused packages and imports

---
 lib/DonorsList/AddDonorButton.test.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/lib/DonorsList/AddDonorButton.test.js b/lib/DonorsList/AddDonorButton.test.js
index 142c89b8..cdc84650 100644
--- a/lib/DonorsList/AddDonorButton.test.js
+++ b/lib/DonorsList/AddDonorButton.test.js
@@ -1,4 +1,3 @@
-import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 
 import AddDonorButton from './AddDonorButton';
@@ -12,18 +11,11 @@ const defaultProps = {
   name: 'donors',
 };
 
-const wrapper = ({ children }) => (
-  <MemoryRouter>
-    {children}
-  </MemoryRouter>
-);
-
 const renderComponent = (props = {}) => (render(
   <AddDonorButton
     {...defaultProps}
     {...props}
   />,
-  { wrapper },
 ));
 
 describe('AddDonorButton', () => {

From a989e499d7a2a725eed2b9d2170adc301084596f Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Fri, 3 Nov 2023 18:30:28 +0500
Subject: [PATCH 16/16] tests: add test cases

---
 lib/DonorsList/AddDonorButton.test.js | 52 +++++++++++++++++++++------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/lib/DonorsList/AddDonorButton.test.js b/lib/DonorsList/AddDonorButton.test.js
index cdc84650..86465a20 100644
--- a/lib/DonorsList/AddDonorButton.test.js
+++ b/lib/DonorsList/AddDonorButton.test.js
@@ -1,27 +1,59 @@
 import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
 
 import AddDonorButton from './AddDonorButton';
 
+const mockVendorData = { id: '1', name: 'Amazon' };
+
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  Pluggable: jest.fn(({ children, ...rest }) => {
+    return (
+      <div>
+        {children}
+        <button
+          type="button"
+          id={rest?.name}
+          onClick={() => rest?.selectVendor([mockVendorData])}
+        >
+          Add donor
+        </button>
+      </div>
+    );
+  }),
+}));
+
 const mockOnAddDonors = jest.fn();
 
 const defaultProps = {
   onAddDonors: mockOnAddDonors,
-  fields: {},
-  stripes: {},
+  fields: {
+    name: 'donors',
+  },
   name: 'donors',
 };
 
-const renderComponent = (props = {}) => (render(
-  <AddDonorButton
-    {...defaultProps}
-    {...props}
-  />,
+const renderComponent = (props = defaultProps) => (render(
+  <AddDonorButton {...props} />,
 ));
 
 describe('AddDonorButton', () => {
-  it('should render component', () => {
-    renderComponent();
+  it('should render component', async () => {
+    renderComponent({
+      fields: {
+        name: 'donors',
+        push: jest.fn(),
+      },
+      name: 'donors',
+      onAddDonors: mockOnAddDonors,
+    });
+
+    const addDonorsButton = screen.getByText('Add donor');
+
+    expect(addDonorsButton).toBeDefined();
+
+    await user.click(addDonorsButton);
 
-    expect(screen.getByText('stripes-acq-components.donors.noFindOrganizationPlugin')).toBeDefined();
+    expect(mockOnAddDonors).toHaveBeenCalledWith([mockVendorData.id]);
   });
 });