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

Author: elsenhans

src/components/MetadataSources/SourceManagement/SourceManagementView.js

@@ -1,56 +1,54 @@
 import PropTypes from 'prop-types';
-import {
-  get,
-  isEmpty,
-} from 'lodash';
+import { get } from 'lodash';
 import { withRouter, Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import { useQuery } from 'react-query';
 
-import { useOkapiKyQuery } from '@folio/stripes-leipzig-components';
 import {
   Button,
   Col,
   KeyValue,
   NoValue,
   Row,
 } from '@folio/stripes/components';
+import { useOkapiKy } from '@folio/stripes/core';
 
-import {
-  API_ORGANIZATIONS,
-  QK_ORGANIZATIONS,
-} from '../../../util/constants';
+import { API_ORGANIZATION_BY_ID } from '../../../util/constants';
 import urls from '../../DisplayUtils/urls';
 import SelectAllCollections from './SelectAllCollections';
 
 const SourceManagementView = ({
   metadataSource,
-  organizationId,
   stripes,
 }) => {
-  let orgValue;
   const sourceId = get(metadataSource, 'id', '-');
-  const sourcesOrganization = get(metadataSource, 'organization', <NoValue />);
+  const organization = get(metadataSource, 'organization', <NoValue />);
 
-  const { data: organization, isLoading: isLoadingOrganization, isError } = useOkapiKyQuery({
-    queryKey: [QK_ORGANIZATIONS, organizationId],
-    id: organizationId,
-    api: API_ORGANIZATIONS,
-  });
+  const useOrganization = () => {
+    const ky = useOkapiKy();
 
-  if (!isEmpty(organizationId) && !isLoadingOrganization) {
-    if (isError) {
-      if (sourcesOrganization.name) {
-        orgValue = sourcesOrganization.name;
-      } else {
-        orgValue = <NoValue />;
-      }
-    } else {
-      orgValue = (
-        <Link to={{ pathname: `${urls.organizationView(organization.id)}` }}>
-          {sourcesOrganization.name}
-        </Link>
-      );
-    }
+    const { isError } = useQuery(
+      [organization?.id],
+      () => ky.get(API_ORGANIZATION_BY_ID(organization?.id)).json(),
+      // The query will not execute until the id exists
+      { enabled: Boolean(organization?.id) }
+    );
+    return ({ isError });
+  };
+
+  const { isError } = useOrganization();
+
+  let orgValue;
+  if (!organization?.name) {
+    orgValue = <NoValue />;
+  } else if (isError) {
+    orgValue = organization.name;
+  } else {
+    orgValue = (
+      <Link to={{ pathname: `${urls.organizationView(organization.id)}` }}>
+        {organization.name}
+      </Link>
+    );
   }
 
   return (
@@ -107,7 +105,6 @@ const SourceManagementView = ({
 
 SourceManagementView.propTypes = {
   metadataSource: PropTypes.object,
-  organizationId: PropTypes.string,
   stripes: PropTypes.object,
 };
 

src/util/constants.js

@@ -4,6 +4,7 @@ export const API_COLLECTIONS_SELECT_ALL_BY_SOURCE_ID = (sourceId) => `finc-selec
 export const API_EZB_CREDENTIALS = 'finc-select/ezb-credentials';
 export const API_FILTERS = 'finc-select/filters';
 export const API_ORGANIZATIONS = 'organizations-storage/organizations';
+export const API_ORGANIZATION_BY_ID = (organizationId) => `organizations-storage/organizations/${organizationId}`;
 export const API_SOURCES = 'finc-select/metadata-sources';
 export const API_TINY_SOURCES = 'finc-config/tiny-metadata-sources';