refactor: code based on comments

src/Settings/BankingAccountTypeSettings/BankingAccountTypeSettings.js

@@ -1,72 +1,60 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { stripesShape } from '@folio/stripes/core';
+import { useStripes } from '@folio/stripes/core';
 import { ControlledVocab } from '@folio/stripes/smart-components';
 import { getControlledVocabTranslations } from '@folio/stripes-acq-components';
 
 import { BANKING_ACCOUNT_TYPES_API } from '../constants';
 
-class BankingAccountTypeSettings extends React.Component {
-  constructor(props) {
-    super(props);
-    this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
-  }
-
-  render() {
-    const { stripes } = this.props;
-
-    const columnMapping = {
-      value: <FormattedMessage id="ui-organizations.settings.name" />,
-      action: <FormattedMessage id="ui-organizations.settings.action" />,
-    };
-
-    const hasEditPerms = stripes.hasPerm('ui-organizations.settings');
-    const actionSuppressor = {
-      edit: () => !hasEditPerms,
-      delete: () => !hasEditPerms,
-    };
-
-    const setUniqValidation = (value, index, items) => {
-      const errors = {};
-
-      const isBankingAccountTypeExist = items.some(({ id, name }) => {
-        return name?.toLowerCase() === value?.name?.toLowerCase() && id !== value?.id;
-      });
-
-      if (isBankingAccountTypeExist) {
-        errors.name = <FormattedMessage id="ui-organizations.settings.accountTypes.save.error.accountTypeMustBeUnique" />;
-      }
-
-      return errors;
-    };
-
-    const ConnectedComponent = this.connectedControlledVocab;
-
-    return (
-      <ConnectedComponent
-        actionSuppressor={actionSuppressor}
-        canCreate={hasEditPerms}
-        stripes={stripes}
-        baseUrl={BANKING_ACCOUNT_TYPES_API}
-        records="bankingAccountTypes"
-        label={<FormattedMessage id="ui-organizations.settings.bankingAccountTypes" />}
-        translations={getControlledVocabTranslations('ui-organizations.settings.bankingAccountTypes')}
-        objectLabel="BankingAccountTypes"
-        visibleFields={['name']}
-        columnMapping={columnMapping}
-        hiddenFields={['lastUpdated', 'numberOfObjects']}
-        nameKey="bankingAccountTypes"
-        id="bankingAccountTypes"
-        validate={setUniqValidation}
-        sortby="name"
-      />
-    );
-  }
-}
-
-BankingAccountTypeSettings.propTypes = {
-  stripes: stripesShape.isRequired,
+const BankingAccountTypeSettings = () => {
+  const stripes = useStripes();
+  const ConnectedComponent = stripes.connect(ControlledVocab);
+
+  const columnMapping = {
+    value: <FormattedMessage id="ui-organizations.settings.name" />,
+    action: <FormattedMessage id="ui-organizations.settings.action" />,
+  };
+
+  const hasEditPerms = stripes.hasPerm('ui-organizations.settings');
+  const actionSuppressor = {
+    edit: () => !hasEditPerms,
+    delete: () => !hasEditPerms,
+  };
+
+  const setUniqValidation = (value, index, items) => {
+    const errors = {};
+
+    const isBankingAccountTypeExist = items.some(({ id, name }) => {
+      return name?.toLowerCase() === value?.name?.toLowerCase() && id !== value?.id;
+    });
+
+    if (isBankingAccountTypeExist) {
+      errors.name = <FormattedMessage id="ui-organizations.settings.accountTypes.save.error.accountTypeMustBeUnique" />;
+    }
+
+    return errors;
+  };
+
+  return (
+    <ConnectedComponent
+      actionSuppressor={actionSuppressor}
+      canCreate={hasEditPerms}
+      stripes={stripes}
+      baseUrl={BANKING_ACCOUNT_TYPES_API}
+      records="bankingAccountTypes"
+      label={<FormattedMessage id="ui-organizations.settings.bankingAccountTypes" />}
+      translations={getControlledVocabTranslations('ui-organizations.settings.bankingAccountTypes')}
+      objectLabel="BankingAccountTypes"
+      visibleFields={['name']}
+      columnMapping={columnMapping}
+      hiddenFields={['lastUpdated', 'numberOfObjects']}
+      nameKey="bankingAccountTypes"
+      id="bankingAccountTypes"
+      validate={setUniqValidation}
+      sortby="name"
+    />
+  );
 };
 
 export default BankingAccountTypeSettings;

src/Settings/BankingAccountTypeSettings/BankingAccountTypeSettings.test.js

@@ -1,5 +1,5 @@
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
-
+import { useStripes } from '@folio/stripes/core';
 import { ControlledVocab } from '@folio/stripes/smart-components';
 
 import BankingAccountTypeSettings from './BankingAccountTypeSettings';
@@ -38,9 +38,13 @@ const stripesMock = {
   clone: jest.fn(),
 };
 
-const renderCategorySettings = () => render(<BankingAccountTypeSettings stripes={stripesMock} resources={[]} />);
+const renderCategorySettings = () => render(<BankingAccountTypeSettings />);
 
 describe('BankingAccountTypeSettings', () => {
+  beforeEach(() => {
+    useStripes.mockReturnValue(stripesMock);
+  });
+
   it('should render component', () => {
     renderCategorySettings();
 

src/Settings/BankingInformationSettings/BankingInformationSettings.js

@@ -1,6 +1,5 @@
 import { FormattedMessage } from 'react-intl';
 import { Field, Form } from 'react-final-form';
-import { useQueryClient } from 'react-query';
 
 import {
   Button,
@@ -13,34 +12,35 @@ import {
   Row,
 } from '@folio/stripes/components';
 import { useShowCallout } from '@folio/stripes-acq-components';
-import {
-  useOkapiKy,
-  useNamespace,
-} from '@folio/stripes/core';
+import { useOkapiKy } from '@folio/stripes/core';
 
 import { useBankingInformation } from '../hooks';
 import { SETTINGS_API } from '../constants';
 
 const BankingInformationSettings = () => {
-  const { enabled, key, id: bankingInformationId, isLoading } = useBankingInformation();
+  const {
+    enabled,
+    key,
+    id: bankingInformationId,
+    isLoading,
+    refetch,
+  } = useBankingInformation();
   const ky = useOkapiKy();
-  const queryClient = useQueryClient();
-  const [namespace] = useNamespace({ key: 'banking-information-settings' });
   const sendCallout = useShowCallout();
 
   const onSubmit = async ({ value }) => {
     try {
       await ky.put(`${SETTINGS_API}/${bankingInformationId}`, {
         json: { value, key },
       });
-      queryClient.invalidateQueries([namespace]);
+
+      refetch();
       sendCallout({
-        type: 'success',
         message: <FormattedMessage id="ui-organizations.settings.accountTypes.save.success.message" />,
       });
     } catch (error) {
       sendCallout({
-        type: 'success',
+        type: 'error',
         message: <FormattedMessage id="settings.accountTypes.save.error.generic.message" />,
       });
     }

src/Settings/BankingInformationSettings/BankingInformationSettings.test.js

@@ -5,12 +5,7 @@ import { useOkapiKy } from '@folio/stripes/core';
 import BankingInformationSettings from './BankingInformationSettings';
 import { useBankingInformation } from '../hooks';
 
-jest.mock('react-query', () => ({
-  ...jest.requireActual('react-query'),
-  useQueryClient: jest.fn(() => ({
-    invalidateQueries: jest.fn(),
-  })),
-}));
+const mockRefetch = jest.fn();
 
 jest.mock('@folio/stripes/components', () => ({
   ...jest.requireActual('@folio/stripes/components'),
@@ -21,6 +16,7 @@ jest.mock('../hooks', () => ({
   useBankingInformation: jest.fn(() => ({
     isLoading: false,
     enabled: false,
+    refetch: mockRefetch,
   })),
 }));
 
@@ -59,6 +55,7 @@ describe('BankingInformationSettings component', () => {
     useBankingInformation.mockClear().mockReturnValue({
       isLoading: false,
       enabled: true,
+      refetch: mockRefetch,
     });
     const mockPutMethod = jest.fn(() => ({
       json: () => Promise.resolve('ok'),
@@ -81,5 +78,6 @@ describe('BankingInformationSettings component', () => {
     });
 
     expect(mockPutMethod).toHaveBeenCalled();
+    expect(mockPutMethod).toHaveBeenCalled();
   });
 });

src/Settings/constants.js

@@ -2,3 +2,4 @@ export const SETTINGS_API = 'organizations-storage/settings';
 export const BANKING_ACCOUNT_TYPES_API = 'organizations-storage/banking-account-types';
 
 export const MAX_LIMIT = 1;
+export const BANKING_INFORMATION_SEARCH_QUERY = 'key=BANKING_INFORMATION_ENABLED';

src/Settings/hooks/useBankingInformation.js

@@ -6,18 +6,22 @@ import {
   useOkapiKy,
 } from '@folio/stripes/core';
 
-import { MAX_LIMIT, SETTINGS_API } from '../constants';
+import {
+  MAX_LIMIT,
+  SETTINGS_API,
+  BANKING_INFORMATION_SEARCH_QUERY,
+} from '../constants';
 
 export const useBankingInformation = () => {
   const ky = useOkapiKy();
   const [namespace] = useNamespace({ key: 'banking-information-settings' });
 
   const searchParams = {
     limit: MAX_LIMIT,
-    query: 'key=BANKING_INFORMATION_ENABLED',
+    query: BANKING_INFORMATION_SEARCH_QUERY,
   };
 
-  const { isLoading, data } = useQuery(
+  const { isLoading, data, refetch } = useQuery(
     [namespace],
     () => ky.get(SETTINGS_API, { searchParams }).json().catch(() => null),
   );
@@ -29,5 +33,6 @@ export const useBankingInformation = () => {
     enabled: bankingInformation.value === 'true',
     key: bankingInformation.key,
     isLoading,
+    refetch,
   });
 };