UIFC-437-use-generic-hooks undo more for specific requests

Author: elsenhans

src/components/MetadataCollections/CollectionInfo/CollectionInfoView.js

@@ -22,8 +22,6 @@ const CollectionInfoView = ({ metadataCollection, stripes }) => {
     }
   };
 
-  console.log(metadataCollection);
-
   const collectionId = get(metadataCollection, 'id', '-');
   const selectedInitial = get(metadataCollection, 'selected');
   const permittedLabel = getDataLable('permitted');

src/settings/CredentialsSettings.js

@@ -1,33 +1,32 @@
+import { useQuery, useMutation } from 'react-query';
 import { FormattedMessage } from 'react-intl';
 
+import { useOkapiKy } from '@folio/stripes/core';
 import { Loading, MessageBanner } from '@folio/stripes/components';
-import {
-  useOkapiKyMutation,
-  useOkapiKyQuery,
-} from '@folio/stripes-leipzig-components';
-
-import {
-  API_EZB_CREDENTIALS,
-  QK_EZB_CREDENTIALS,
-} from '../util/constants';
+
+import { API_EZB_CREDENTIALS } from '../util/constants';
 import CredentialsSettingsForm from './CredentialsSettingsForm';
 
 const CredentialsSettings = () => {
-  const { data: credentials = {}, isError, isLoading, refetch } = useOkapiKyQuery({
-    queryKey: [QK_EZB_CREDENTIALS],
-    api: API_EZB_CREDENTIALS,
+  const ky = useOkapiKy();
+
+  const { data: credentials, error, isLoading, refetch } = useQuery({
+    queryKey: ['ezbCredentials'],
+    queryFn: async () => {
+      const res = await ky.get(API_EZB_CREDENTIALS).json();
+      return res ?? {};
+    }
   });
 
-  const { useUpdate } = useOkapiKyMutation({
-    mutationKey: [QK_EZB_CREDENTIALS],
-    api: API_EZB_CREDENTIALS,
+  const { mutate: updateCredentials } = useMutation({
+    mutationFn: async (values) => {
+      return ky.put(API_EZB_CREDENTIALS, { json: values });
+    },
     onSuccess: () => {
       refetch();
     }
   });
 
-  const { mutateAsync: updateCredentials } = useUpdate();
-
   const handleSubmit = (values) => {
     updateCredentials(values);
   };
@@ -36,7 +35,7 @@ const CredentialsSettings = () => {
     return <Loading />;
   }
 
-  if (isError) {
+  if (error) {
     return (
       <MessageBanner type="error">
         <FormattedMessage id="ui-finc-select.settings.ezbCredentials.error" />

src/settings/CredentialsSettings.test.js

@@ -2,15 +2,36 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
 
 import { render, screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
-import { useOkapiKyQuery } from '@folio/stripes-leipzig-components';
 
 import CredentialsSettings from './CredentialsSettings';
 
 jest.mock('./CredentialsSettingsForm', () => () => <div>CredentialsSettingsForm</div>);
 
-jest.mock('@folio/stripes-leipzig-components', () => ({
-  ...jest.requireActual('@folio/stripes-leipzig-components'),
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
   useOkapiKyQuery: jest.fn(),
+  Loading: () => <div>Loading</div>,
+}));
+
+const mockUseQuery = jest.fn();
+const mockKyGet = jest.fn();
+
+jest.mock('react-query', () => {
+  const actual = jest.requireActual('react-query');
+  return {
+    ...actual,
+    useQuery: (...args) => mockUseQuery(...args),
+    useMutation: () => ({
+      mutate: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('@folio/stripes/core', () => ({
+  useOkapiKy: () => ({
+    get: mockKyGet,
+    put: jest.fn(),
+  }),
 }));
 
 const renderComponent = () => {
@@ -26,26 +47,27 @@ const renderComponent = () => {
 
 describe('CredentialsSettings', () => {
   beforeEach(() => {
-    useOkapiKyQuery.mockReset();
+    mockUseQuery.mockReset();
+    mockKyGet.mockReset();
   });
 
   test('renders loading state', () => {
-    useOkapiKyQuery.mockReturnValue({
+    mockUseQuery.mockReturnValue({
       data: undefined,
-      isError: false,
+      error: null,
       isLoading: true,
       refetch: jest.fn(),
     });
 
     renderComponent();
 
-    expect(document.querySelector('.spinner')).toBeInTheDocument();
+    expect(screen.getByText('Loading')).toBeInTheDocument();
   });
 
   test('renders error state', () => {
-    useOkapiKyQuery.mockReturnValue({
+    mockUseQuery.mockReturnValue({
       data: undefined,
-      isError: true,
+      error: { message: 'Network error' },
       isLoading: false,
       refetch: jest.fn(),
     });
@@ -56,9 +78,9 @@ describe('CredentialsSettings', () => {
   });
 
   test('renders form when credentials are defined', async () => {
-    useOkapiKyQuery.mockReturnValue({
+    mockUseQuery.mockReturnValue({
       data: {},
-      isError: false,
+      error: null,
       isLoading: false,
       refetch: jest.fn(),
     });
@@ -70,12 +92,14 @@ describe('CredentialsSettings', () => {
     });
   });
 
-  test('renders form when ky.get().json() returns null', async () => {
-    useOkapiKyQuery.mockReturnValue({
-      data: null,
-      isError: false,
-      isLoading: false,
-      refetch: jest.fn(),
+  test('renders form when GET returns null', async () => {
+    // Use actual useQuery implementation
+    const { useQuery: actualUseQuery } = jest.requireActual('react-query');
+    mockUseQuery.mockImplementation(actualUseQuery);
+
+    // Mock ky.get().json() to return null
+    mockKyGet.mockReturnValue({
+      json: jest.fn().mockResolvedValue(null),
     });
 
     renderComponent();