update

CHANGELOG.md

@@ -15,6 +15,7 @@
 * [UITEN-298] (https://issues.folio.org/browse/UITEN-298) Update translation ids for reading room.
 * [UITEN-301] (https://issues.folio.org/browse/UITEN-301) Display Reading room access in alphabetical order on settings page.
 * [UITEN-212](https://folio-org.atlassian.net/browse/UITEN-212) Permission changes for service point management.
+* [UITEN-299](https://folio-org.atlassian.net/browse/UITEN-299) Rewrite class components to functional ones (ui-tenant-settings module).
 
 ## [8.1.0](https://github.com/folio-org/ui-tenant-settings/tree/v8.1.0)(2024-03-19)
 [Full Changelog](https://github.com/folio-org/ui-tenant-settings/compare/v8.0.0...v8.1.0)

src/settings/LocationLocations/LocationDetail.js

@@ -330,9 +330,6 @@ const LocationDetail = ({
 
 LocationDetail.propTypes = {
   initialValues: PropTypes.object,
-  institutions: PropTypes.arrayOf(PropTypes.object),
-  campuses: PropTypes.arrayOf(PropTypes.object),
-  libraries: PropTypes.arrayOf(PropTypes.object),
   servicePointsById: PropTypes.object,
   onEdit: PropTypes.func.isRequired,
   onClone: PropTypes.func.isRequired,

src/settings/LocationLocations/LocationForm/LocationForm.js

@@ -57,7 +57,13 @@ const LocationForm = ({
     detailsSection: true,
   });
 
-  const mappedInstitutions = institutions.map(i => ({ value: i.id, label: `${i.name} ${i.code ? `(${i.code})` : ''}` }));
+  const mappedInstitutions = institutions.map(i => {
+    let label = i.name;
+    if (i.code) {
+      label += ` (${i.code})`;
+    }
+    return { value: i.id, label };
+  });
   const mappedServicePoints = sortBy(servicePoints, ['name']).map(i => ({ label: `${i.name}` }));
 
   const handleExpandAll = (newSections) => {

src/settings/LocationLocations/LocationForm/LocationFormContainer.js

@@ -24,28 +24,23 @@ const LocationFormContainer = ({
 
   const callout = useContext(CalloutContext);
 
-  function showSubmitErrorCallout(error) {
+  const showSubmitErrorCallout = (error) => {
     callout.sendCallout({
       type: 'error',
       message: error.message || error.statusText || <FormattedMessage id="ui-tenant-settings.settings.save.error.network" />,
     });
-  }
+  };
 
   const { setMapping } = useRemoteStorageApi();
-
-  const { createLocation } = useLocationCreate({
+  const sharedOptions = {
     onSuccess: () => {
       queryClient.invalidateQueries(SERVICE_POINTS);
       queryClient.invalidateQueries(LOCATIONS);
     },
-  });
+  };
 
-  const { updateLocation } = useLocationUpdate({
-    onSuccess: () => {
-      queryClient.invalidateQueries(SERVICE_POINTS);
-      queryClient.invalidateQueries(LOCATIONS);
-    },
-  });
+  const { createLocation } = useLocationCreate(sharedOptions);
+  const { updateLocation } = useLocationUpdate(sharedOptions);
 
   const initiateSetMapping = (...args) => setMapping(...args).catch(showSubmitErrorCallout);
 

src/settings/LocationLocations/LocationManager.js

@@ -160,7 +160,13 @@ const LocationManager = ({ label }) => {
   };
 
   const formatLocationDisplayName = (loc) => {
-    return `${loc.name}${loc.code ? ` (${loc.code})` : ''}`;
+    let lbl = loc.name;
+
+    if (loc.code) {
+      lbl += ` (${loc.code})`;
+    }
+
+    return lbl;
   };
 
   const onSort = (e, { name: fieldName }) => {
@@ -292,7 +298,8 @@ const LocationManager = ({ label }) => {
 
   const parseInitialValues = (loc, cloning = false) => {
     if (!loc) return loc;
-    loc.detailsArray = Object.keys(loc.details || []).map(name => ({ name, value: loc.details[name] })).sort();
+    loc.detailsArray = Object.keys(loc.details || []).map(name => ({ name, value: loc.details[name] }))
+      .sort((a, b) => a.name.localeCompare(b.name));
     return cloning ? omit(loc, 'id') : loc;
   };
 

src/settings/Plugins/PluginForm.js

@@ -33,7 +33,7 @@ const PluginForm = ({
 
     const options = [{ value: '@@', label: '(none)' }].concat(pluginType.map(p => ({
       value: p.module,
-      label: `${intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` })} ${p.version}`,
+      label: intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` }) + ' ' + p.version,
     })));
 
     const lbl = <FormattedMessage id={`ui-tenant-settings.settings.pluginNames.${plugin.configName}`} />;

src/settings/Plugins/Plugins.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { map, omit } from 'lodash';
+import { useQueryClient } from 'react-query';
 
 import { modules } from 'stripes-config'; // eslint-disable-line import/no-unresolved, import/no-extraneous-dependencies
 import {
@@ -13,12 +14,13 @@ import { TitleManager, useStripes } from '@folio/stripes/core';
 import PluginForm from './PluginForm';
 import { useConfigurationsCreate } from '../../hooks/useConfigurationsCreate';
 import { useConfigurationsUpdate } from '../../hooks/useConfigurationsUpdate';
-import { useConfigurations } from '../../hooks/useConfigurations';
+import { CONFIGURATIONS, useConfigurations } from '../../hooks/useConfigurations';
 
 
 const Plugins = ({ label }) => {
   const intl = useIntl();
   const stripes = useStripes();
+  const queryClient = useQueryClient();
   const callout = useRef(null);
 
   const { configs } = useConfigurations({
@@ -27,8 +29,15 @@ const Plugins = ({ label }) => {
       limit: '1000',
     },
   });
-  const { createConfiguration } = useConfigurationsCreate();
-  const { updateConfiguration } = useConfigurationsUpdate();
+
+  const sharedOptions = {
+    onSuccess: () => {
+      queryClient.invalidateQueries(CONFIGURATIONS);
+    },
+  };
+
+  const { createConfiguration } = useConfigurationsCreate(sharedOptions);
+  const { updateConfiguration } = useConfigurationsUpdate(sharedOptions);
 
   const pluginTypes = (() => {
     const plugins = modules.plugin || [];

src/settings/ServicePoints/LocationList.js

@@ -8,22 +8,22 @@ import {
 const LocationList = ({ locations, expanded, servicePoint, onToggle }) => {
   const intl = useIntl();
 
-  const renderLocation = (location) => {
+  const renderLocation = (location, index) => {
     if (!location) return (<div />);
 
     const { name, code, primaryServicePoint } = location;
     const primary = (primaryServicePoint === servicePoint.id)
       ? intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.primary' }) :
       '';
     const title = `${name} - ${code} ${primary}`;
-    return (<li key={title}>{title}</li>);
+    return (<li key={index}>{title}</li>);
   };
 
   const renderLocations = () => {
     return (
       <List
         items={locations}
-        itemFormatter={location => renderLocation(location)}
+        itemFormatter={renderLocation}
         isEmptyMessage={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.noLocationsFound" />}
       />
     );

src/settings/ServicePoints/constants.js

@@ -1,5 +1,4 @@
 export const shortTermExpiryPeriod = ['Hours', 'Minutes'];
-export const longTermExpiryPeriod = ['Months', 'Weeks', 'Days'];
 
 export const closedLibraryDateManagementMapping = {
   Keep_the_current_due_date_time: 'keepTheOriginalDateTime',