refactor: upgrade mutation to query for better caching

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) {

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

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

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