DonorsListContainer component to fetch data with `donorOrganization…

…Ids`

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,
 };

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,16 +19,15 @@ export const DonorsList = ({
   formatter: formatterProp,
   id,
   visibleColumns,
+  ...rest
 }) => {
   const stripes = useStripes();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
   const formatter = useMemo(() => {
     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}
     />
   );
 };

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';