From 226aa07f220dd285921d343077699f523547f3f0 Mon Sep 17 00:00:00 2001 From: Alisher Musurmonov Date: Fri, 10 Nov 2023 14:34:06 +0500 Subject: [PATCH] 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 | 24 ++++------- lib/Donors/DonorsList.js | 4 ++ lib/Donors/DonorsListContainer.js | 26 ++++++++++++ lib/Donors/DonorsListContainer.test.js | 58 ++++++++++++++++++++++++++ lib/Donors/constants.js | 5 +++ lib/Donors/index.js | 1 + lib/Donors/utils.js | 4 +- lib/Donors/utils.test.js | 6 +-- 8 files changed, 106 insertions(+), 22 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 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 => (