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" }