UITEN-299 Rewrite class components to functional ones (ui-tenant-settings module)

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)

package.json

@@ -304,6 +304,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.4.4",
+    "react-query": "^3.6.0",
     "react-router-dom": "^5.2.0"
   }
 }

src/components/Period/Period.js

@@ -1,31 +1,24 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-
-import {
-  Field,
-} from 'react-final-form';
-
-import {
-  get,
-  isEmpty,
-  isNumber,
-} from 'lodash';
+import { Field } from 'react-final-form';
+import { get, isEmpty, isNumber } from 'lodash';
 
 import {
   Col,
   Row,
   Select,
   TextField,
-  Label,
+  Label
 } from '@folio/stripes/components';
 
-import css from './Period.css';
 import {
   shortTermExpiryPeriod,
   shortTermClosedDateManagementMenu,
   longTermClosedDateManagementMenu
 } from '../../settings/ServicePoints/constants';
+import css from './Period.css';
+
 
 const validateDuration = value => {
   if (typeof value !== 'number') {
@@ -39,32 +32,19 @@ const validateDuration = value => {
   return undefined;
 };
 
-class Period extends React.Component {
-  static propTypes = {
-    fieldLabel: PropTypes.string.isRequired,
-    selectPlaceholder: PropTypes.string.isRequired,
-    dependentValuePath: PropTypes.string.isRequired,
-    inputValuePath: PropTypes.string.isRequired,
-    selectValuePath: PropTypes.string.isRequired,
-    entity: PropTypes.object.isRequired,
-    intervalPeriods: PropTypes.arrayOf(PropTypes.object),
-    changeFormValue: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.inputRef = React.createRef();
-  }
-
-  onInputBlur = () => {
-    const {
-      inputValuePath,
-      selectValuePath,
-      entity,
-      changeFormValue,
-    } = this.props;
-
+const Period = ({
+  fieldLabel,
+  selectPlaceholder,
+  dependentValuePath,
+  inputValuePath,
+  selectValuePath,
+  entity,
+  intervalPeriods,
+  changeFormValue
+}) => {
+  const inputRef = useRef(null);
+
+  const onInputBlur = () => {
     const inputValue = get(entity, inputValuePath);
 
     if (isNumber(inputValue)) {
@@ -74,104 +54,90 @@ class Period extends React.Component {
     changeFormValue(selectValuePath, '');
   };
 
-  onInputClear = () => {
-    const {
-      inputValuePath,
-      changeFormValue,
-    } = this.props;
-
+  const onInputClear = () => {
     changeFormValue(inputValuePath, '');
   };
 
-  onSelectChange = (e) => {
-    const {
-      selectValuePath,
-      changeFormValue,
-      dependentValuePath,
-    } = this.props;
-
+  const onSelectChange = (e) => {
     changeFormValue(selectValuePath, e.target.value);
     const holdShelfClosedLibraryDateManagementValue =
       shortTermExpiryPeriod.findIndex(item => item === e.target.value) > -1
         ? shortTermClosedDateManagementMenu[0].value
         : longTermClosedDateManagementMenu[0].value;
     changeFormValue(dependentValuePath, holdShelfClosedLibraryDateManagementValue);
 
-    this.inputRef.current.focus();
+    inputRef.current.focus();
   };
 
-  transformInputValue = (value) => {
+  const transformInputValue = (value) => {
     if (isEmpty(value)) {
       return '';
     }
 
     return Number(value);
   };
 
-  generateOptions = () => {
-    const {
-      intervalPeriods,
-      selectValuePath,
-    } = this.props;
-
+  const generateOptions = () => {
     return intervalPeriods.map(({ value, label }) => (
       <option value={value} key={`${selectValuePath}-${value}`}>
         {label}
       </option>
     ));
   };
 
-  render() {
-    const {
-      fieldLabel,
-      selectPlaceholder,
-      inputValuePath,
-      selectValuePath,
-    } = this.props;
-
-    return (
-      <>
-        <Row className={css.labelRow}>
-          <Col xs={12}>
-            <Label className={css.label} required>
-              <FormattedMessage id={fieldLabel} />
-            </Label>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={2}>
-            <Field
-              data-test-period-duration
-              type="number"
-              name={inputValuePath}
-              component={TextField}
-              forwardRef
-              inputRef={this.inputRef}
-              onBlur={this.onInputBlur}
-              onClearField={this.onInputClear}
-              parse={this.transformInputValue}
-              validate={validateDuration}
-            />
-          </Col>
-          <Col xs={2}>
-            <FormattedMessage id={selectPlaceholder}>
-              {placeholder => (
-                <Field
-                  data-test-period-interval
-                  name={selectValuePath}
-                  component={Select}
-                  placeholder={placeholder}
-                  onChange={this.onSelectChange}
-                >
-                  {this.generateOptions()}
-                </Field>
-              )}
-            </FormattedMessage>
-          </Col>
-        </Row>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Row className={css.labelRow}>
+        <Col xs={12}>
+          <Label className={css.label} required>
+            <FormattedMessage id={fieldLabel} />
+          </Label>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={2}>
+          <Field
+            data-test-period-duration
+            type="number"
+            name={inputValuePath}
+            component={TextField}
+            forwardRef
+            inputRef={inputRef}
+            onBlur={onInputBlur}
+            onClearField={onInputClear}
+            parse={transformInputValue}
+            validate={validateDuration}
+          />
+        </Col>
+        <Col xs={2}>
+          <FormattedMessage id={selectPlaceholder}>
+            {placeholder => (
+              <Field
+                data-test-period-interval
+                name={selectValuePath}
+                component={Select}
+                placeholder={placeholder}
+                onChange={onSelectChange}
+              >
+                {generateOptions()}
+              </Field>
+            )}
+          </FormattedMessage>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+Period.propTypes = {
+  fieldLabel: PropTypes.string.isRequired,
+  selectPlaceholder: PropTypes.string.isRequired,
+  dependentValuePath: PropTypes.string.isRequired,
+  inputValuePath: PropTypes.string.isRequired,
+  selectValuePath: PropTypes.string.isRequired,
+  entity: PropTypes.object.isRequired,
+  intervalPeriods: PropTypes.arrayOf(PropTypes.object),
+  changeFormValue: PropTypes.func.isRequired,
+};
 
 export default Period;

src/hooks/useCampusDetails.js

@@ -0,0 +1,20 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CAMPUS_DETAILS = 'CAMPUS_DETAILS';
+
+export const useCampusDetails = ({ id, searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CAMPUS_DETAILS });
+
+  const { data, isLoading: isCampusLoading } = useQuery({
+    queryKey: [CAMPUS_DETAILS, namespaceKey, id, searchParams],
+    queryFn: () => ky.get(`location-units/campuses/${id}`, { searchParams }).json(),
+    enabled: !!id,
+  });
+
+  return {
+    campus: data,
+    isCampusLoading,
+  };
+};

src/hooks/useCampuses.js

@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CAMPUSES = 'CAMPUSES';
+
+export const useCampuses = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CAMPUSES });
+
+  const { data, isLoading: isCampusesLoading } = useQuery({
+    queryKey: [CAMPUSES, namespaceKey, searchParams],
+    queryFn: () => ky.get('location-units/campuses', { searchParams }).json(),
+  });
+
+  return {
+    campuses: data?.loccamps || [],
+    isCampusesLoading,
+  };
+};

src/hooks/useConfigurations.js

@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CONFIGURATIONS = 'CONFIGURATIONS';
+
+export const useConfigurations = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CONFIGURATIONS });
+
+  const { data, isLoading: isConfigsLoading } = useQuery({
+    queryKey: [CONFIGURATIONS, namespaceKey, searchParams],
+    queryFn: () => ky.get('configurations/entries', { searchParams }).json(),
+  });
+
+  return {
+    configs: data?.configs || [],
+    isConfigsLoading,
+  };
+};

src/hooks/useConfigurationsCreate.js

@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useConfigurationsCreate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: createConfiguration, isLoading: isCreatingConfiguration } = useMutation({
+    mutationFn: ({ data }) => ky.post('configurations/entries', { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    createConfiguration,
+    isCreatingConfiguration,
+  };
+};

src/hooks/useConfigurationsUpdate.js

@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useConfigurationsUpdate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: updateConfiguration, isLoading: isUpdatingConfiguration } = useMutation({
+    mutationFn: ({ id, data }) => ky.put(`configurations/entries/${id}`, { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    updateConfiguration,
+    isUpdatingConfiguration,
+  };
+};

src/hooks/useInstitutionDetails.js

@@ -0,0 +1,20 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const INSTITUTION_DETAILS = 'INSTITUTION_DETAILS';
+
+export const useInstitutionDetails = ({ id, searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: INSTITUTION_DETAILS });
+
+  const { data, isLoading: isInstitutionLoading } = useQuery({
+    queryKey: [INSTITUTION_DETAILS, namespaceKey, id, searchParams],
+    queryFn: () => ky.get(`location-units/institutions/${id}`, { searchParams }).json(),
+    enabled: !!id,
+  });
+
+  return {
+    institution: data,
+    isInstitutionLoading,
+  };
+};

src/hooks/useInstitutions.js

@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const INSTITUTIONS = 'INSTITUTIONS';
+
+export const useInstitutions = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: INSTITUTIONS });
+
+  const { data, isLoading: isInstitutionsLoading } = useQuery({
+    queryKey: [INSTITUTIONS, namespaceKey, searchParams],
+    queryFn: () => ky.get('location-units/institutions', { searchParams }).json(),
+  });
+
+  return {
+    institutions: data?.locinsts || [],
+    isInstitutionsLoading,
+  };
+};