add ability to load ref data

lib/FindLocation/FindLocation.js

@@ -1,3 +1,4 @@
+import keyBy from 'lodash/keyBy';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -6,7 +7,12 @@ import { ColumnManager } from '@folio/stripes/smart-components';
 
 import { EVENT_EMMITER_EVENTS } from '../constants';4
 import { FindRecords } from '../FindRecords';
-import { useEventEmitter } from '../hooks';
+import {
+  useCampuses,
+  useEventEmitter,
+  useInstitutions,
+  useLibraries,
+} from '../hooks';
 import {
   COLUMN_MAPPING,
   COLUMN_NAMES,
@@ -30,6 +36,11 @@ export const FindLocation = (props) => {
   const eventEmitter = useEventEmitter();
 
   const [selectedLocations, setSelectedLocations] = useState({});
+
+  const { institutions, isLoading: isInstitutionsLoading } = useInstitutions();
+  const { campuses, isLoading: isCampusesLoading } = useCampuses();
+  const { libraries, isLoading: isLibrariesLoading } = useLibraries();
+  const { locations, isLoading: isLocationsLoading } = useLocationsRecords();
 
   useEffect(() => {
     const eventType = EVENT_EMMITER_EVENTS.FIND_RECORDS_SELECTED_CHANGED;
@@ -51,32 +62,56 @@ export const FindLocation = (props) => {
     )
   }), [isMultiSelect]);
 
+  const institutionsMap = useMemo(() => keyBy(institutions, 'id'), [institutions]);
+  const campusessMap = useMemo(() => keyBy(campuses, 'id'), [campuses]);
+  const librariesMap = useMemo(() => keyBy(libraries, 'id'), [libraries]);
+
   const resultsFormatter = useMemo(() => ({
     [COLUMN_NAMES.name]: ({ name }) => name,
-    // TODO: add formatters for the rest of colls
     [COLUMN_NAMES.code]: ({ code }) => code,
+    [COLUMN_NAMES.institution]: ({ institutionId }) => institutionsMap[institutionId]?.name,
+    [COLUMN_NAMES.campus]: ({ campusId }) => campusessMap[campusId]?.name,
+    [COLUMN_NAMES.library]: ({ libraryId }) => librariesMap[libraryId]?.name,
     [COLUMN_NAMES.isActive]: ({ isActive }) => (
       <FormattedMessage id={`stripes-acq-components.find-location.results.column.status.${ isActive ? 'active': 'inactive'}`} />
     ),
     [COLUMN_NAMES.isAssigned]: ({ id }) => (
       <FormattedMessage id={`stripes-acq-components.filter.assignment.${ selectedLocations[id] ? 'assigned': 'unassigned'}`} />
     ),
-  }), [selectedLocations]);
-
-  const { locations, isLoading } = useLocationsRecords();
+  }), [
+    campusessMap,
+    institutionsMap,
+    librariesMap,
+    selectedLocations,
+  ]);
 
   const renderFilters = useCallback((activeFilters, applyFilters) => (
     <FindLocationFilters
       activeFilters={activeFilters}
       applyFilters={applyFilters}
       isMultiSelect={isMultiSelect}
+      institutions={institutions}
+      campuses={campuses}
+      libraries={libraries}
     />
-  ), [isMultiSelect]);
+  ), [
+    campuses,
+    institutions,
+    isMultiSelect,
+    libraries,
+  ]);
 
   const refreshRecords = useCallback((data) => {
     console.log('refresh', data)
   }, []);
 
+  const isLoading = (
+    isInstitutionsLoading
+    || isCampusesLoading
+    || isLibrariesLoading
+    || isLocationsLoading
+  );
+
   return (
     <ColumnManager
       id="find-locations"

lib/FindLocation/FindLocationFilters/FindLocationFilters.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AccordionSet } from '@folio/stripes/components';
 
@@ -12,14 +12,26 @@ import { CampusesFilter } from './CampusesFilter';
 import { InstitutionsFilter } from './InstitutionsFilter';
 import { LibrariesFilter } from './LibrariesFilter';
 
+const getSelectionFilterOptions = ({ id, name, code }) => ({
+  label: [name, code && `(${code})`].join(' '),
+  value: id,
+});
+
 export const FindLocationFilters = ({
   activeFilters,
   applyFilters,
+  campuses,
   disabled,
+  institutions,
   isMultiSelect,
+  libraries,
 }) => {
   const adaptedApplyFilters = useCallback(({ name, values }) => applyFilters(name, values), [applyFilters]);
 
+  const institutionOptions = useMemo(() => institutions.map(getSelectionFilterOptions), [institutions]);
+  const campusesOptions = useMemo(() => campuses.map(getSelectionFilterOptions), [campuses]);
+  const librariesOptions = useMemo(() => libraries.map(getSelectionFilterOptions), [libraries]);
+
   return (
     <AccordionSet>
       <InstitutionsFilter
@@ -28,7 +40,7 @@ export const FindLocationFilters = ({
         name={FILTERS.institutions}
         onChange={adaptedApplyFilters}
         disabled={disabled}
-        options={[]}
+        options={institutionOptions}
       />
 
       <CampusesFilter
@@ -37,7 +49,7 @@ export const FindLocationFilters = ({
         name={FILTERS.campuses}
         onChange={adaptedApplyFilters}
         disabled={disabled}
-        options={[]}
+        options={campusesOptions}
       />
 
       <LibrariesFilter
@@ -46,7 +58,7 @@ export const FindLocationFilters = ({
         name={FILTERS.libraries}
         onChange={adaptedApplyFilters}
         disabled={disabled}
-        options={[]}
+        options={librariesOptions}
       />
 
       {isMultiSelect && (
@@ -63,11 +75,32 @@ export const FindLocationFilters = ({
       )}
     </AccordionSet>
   );
-}
+};
+
+FindLocationFilters.defaultProps = {
+  campuses: [],
+  institutions: [],
+  libraries: [],
+};
 
 FindLocationFilters.propTypes = {
   activeFilters: PropTypes.object.isRequired,
   applyFilters: PropTypes.func.isRequired,
+  campuses: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    code: PropTypes.string,
+  })),
   disabled: PropTypes.bool,
+  institutions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    code: PropTypes.string,
+  })),
   isMultiSelect: PropTypes.bool,
+  libraries: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    code: PropTypes.string,
+  })),
 };

lib/constants/api.js

@@ -3,15 +3,18 @@ export const ACQUISITIONS_UNITS_API = 'acquisitions-units/units';
 export const ACQUISITIONS_UNIT_MEMBERSHIPS_API = 'acquisitions-units/memberships';
 export const BATCH_GROUPS_API = 'batch-groups';
 export const BUDGETS_API = 'finance/budgets';
+export const CAMPUSES_API = 'location-units/campuses';
 export const CONFIG_API = 'configurations/entries';
 export const CONTRIBUTOR_NAME_TYPES_API = 'contributor-name-types';
 export const EXCHANGE_RATE_API = 'finance/exchange-rate';
 export const EXPENSE_CLASSES_API = 'finance/expense-classes';
 export const FUNDS_API = 'finance/funds';
+export const INSTITUTIONS_API = 'location-units/institutions';
 export const INVOICES_API = 'invoice/invoices';
 export const INVOICE_LINE_API = 'invoice/invoice-lines';
 export const ITEMS_API = 'inventory/items';
 export const IDENTIFIER_TYPES_API = 'identifier-types';
+export const LIBRARIES_API = 'location-units/libraries';
 export const LINES_API = 'orders/order-lines';
 export const LOAN_TYPES_API = 'loan-types';
 export const LOCATIONS_API = 'locations';

lib/constants/constants.js

@@ -2,6 +2,7 @@ export const DATE_FORMAT = 'YYYY-MM-DD';
 export const TIMEZONE = 'UTC';
 
 export const LIMIT_MAX = 1000;
+export const LIMIT_MAX_EXTENDED = 5000;
 export const RESULT_COUNT_INCREMENT = 50;
 export const PLUGIN_RESULT_COUNT_INCREMENT = 50;
 

lib/hooks/index.js

@@ -1,9 +1,12 @@
 export * from './useAccordionToggle';
 export * from './useAcqMethodsOptions';
 export * from './useAsyncDebounce';
+export * from './useCampuses';
 export * from './useEventEmitter';
 export * from './useFunds';
+export * from './useInstitutions';
 export * from './useIntegrationConfigs';
+export * from './useLibraries';
 export * from './useLineHoldings';
 export * from './useLocaleDateFormat';
 export * from './useLocations';

lib/hooks/useCampuses/index.js

@@ -0,0 +1 @@
+export { useCampuses } from './useCampuses';

lib/hooks/useCampuses/useCampuses.js

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import {
+  CAMPUSES_API,
+  LIMIT_MAX_EXTENDED,
+} from '../../constants';
+
+const DEFAULT_DATA = [];
+
+export const useCampuses = () => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'location-units-campuses' });
+
+  const searchParams = {
+    limit: LIMIT_MAX_EXTENDED,
+    query: 'cql.allRecords=1 sortby name',
+  };
+
+  const { isLoading, data = {} } = useQuery(
+    [namespace],
+    () => ky.get(CAMPUSES_API, { searchParams }).json(),
+  );
+
+  return {
+    campuses: data.loccamps || DEFAULT_DATA,
+    isLoading,
+  };
+};

lib/hooks/useInstitutions/index.js

@@ -0,0 +1 @@
+export { useInstitutions } from './useInstitutions';

lib/hooks/useInstitutions/useInstitutions.js

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import {
+  INSTITUTIONS_API,
+  LIMIT_MAX_EXTENDED,
+} from '../../constants';
+
+const DEFAULT_DATA = [];
+
+export const useInstitutions = () => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'location-units-institutions' });
+
+  const searchParams = {
+    limit: LIMIT_MAX_EXTENDED,
+    query: 'cql.allRecords=1 sortby name',
+  };
+
+  const { isLoading, data = {} } = useQuery(
+    [namespace],
+    () => ky.get(INSTITUTIONS_API, { searchParams }).json(),
+  );
+
+  return {
+    institutions: data.locinsts || DEFAULT_DATA,
+    isLoading,
+  };
+};

lib/hooks/useLibraries/index.js

@@ -0,0 +1 @@
+export { useLibraries } from './useLibraries';

lib/hooks/useLibraries/useLibraries.js

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import {
+  LIBRARIES_API,
+  LIMIT_MAX_EXTENDED,
+} from '../../constants';
+
+const DEFAULT_DATA = [];
+
+export const useLibraries = () => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'location-units-libraries' });
+
+  const searchParams = {
+    limit: LIMIT_MAX_EXTENDED,
+    query: 'cql.allRecords=1 sortby name',
+  };
+
+  const { isLoading, data = {} } = useQuery(
+    [namespace],
+    () => ky.get(LIBRARIES_API, { searchParams }).json(),
+  );
+
+  return {
+    libraries: data.loclibs || DEFAULT_DATA,
+    isLoading,
+  };
+};

lib/hooks/useLocations/useLocations.js

@@ -35,8 +35,6 @@ export const useLocations = () => {
     }
   );
 
-  console.log('locations', data);
-
   return ({
     locations: data || DEFAULT_DATA,
     isLoading,