@aarhus-university/au-lib-react-components 10.5.0 → 10.6.0

package/src/components/profile/AUProfileNameComponent.js

@@ -1,253 +1,253 @@
-/* eslint-env browser */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable max-len */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import AUSubmitButtonContainerComponent from '../form/AUSubmitButtonContainerComponent';
-import { useProfileForm } from './AUProfileHooks';
-import { scrollTo } from '../../lib/helpers';
-import { profileLabels } from '../../lib/i18n';
-import { renderValidation, validateForm } from '../../lib/validation';
-
-const AUProfileNameComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  firstNames,
-  lastName,
-  hasChosenName: pHasChosenName,
-  chosenFirstNames: pChosenFirstNames,
-  chosenLastName: pChosenLastName,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validFirstName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  },
-  {
-    message: profileLabels[lang].validLastName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  }];
-
-  const [hasChosenName, setHasChosenName] = useState(pHasChosenName);
-  const [chosenFirstNames, setChosenFirstNames] = useState(pChosenFirstNames);
-  const [chosenLastName, setChosenLastName] = useState(pChosenLastName);
-  const [firstNameValidationMessages, setFirstNameValidationMessages] = useState([]);
-  const [lastNameValidationMessages, setLastNameValidationMessages] = useState([]);
-  const [isFirstNameValid, setIsFirstNameValid] = useState(!pHasChosenName || (!!pChosenFirstNames));
-  const [isLastNameValid, setIsLastNameValid] = useState(!pHasChosenName || (!!pChosenLastName));
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-
-  const validateFirstName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
-    setChosenFirstNames(value);
-    setFirstNameValidationMessages(alert ? messages : []);
-    setIsFirstNameValid(!hasChosenName || valid);
-  };
-
-  const validateLastName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[1]]);
-    setChosenLastName(value);
-    setLastNameValidationMessages(alert ? messages : []);
-    setIsLastNameValid(!hasChosenName || valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validateFirstName(chosenFirstNames, !isFirstNameValid);
-    validateLastName(chosenLastName, !isLastNameValid);
-    if (isFirstNameValid && isLastNameValid) {
-      onSave({
-        hasChosenName,
-        chosenFirstNames: chosenFirstNames.trim(),
-        chosenLastName: chosenLastName.trim(),
-      }, onSaveAction);
-    }
-  };
-
-  let firstNameValidationClassName = '';
-  if (!isFirstNameValid && firstNameValidationMessages.length) {
-    firstNameValidationClassName = ' form-info--error';
-  } else if (isFirstNameValid) {
-    firstNameValidationClassName = ' form-info--confirmed';
-  }
-
-  let lastNameValidationClassName = '';
-  if (!isLastNameValid && lastNameValidationMessages.length) {
-    lastNameValidationClassName = ' form-info--error';
-  } else if (isLastNameValid) {
-    lastNameValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    const firstName = document.getElementById('first-name');
-    if (firstName) {
-      firstName.focus();
-    }
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerName}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <form key="form" className="form" noValidate="novalidate">
-      <fieldset>
-        <legend>
-          <div className="fieldset__legend-wrapper">
-            {profileLabels[lang].legendName}
-            <div className="form-info__hint">
-              {profileLabels[lang].legendNameHint}
-            </div>
-          </div>
-        </legend>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="default-display-name">
-            {`${firstNames} ${lastName}`}
-            <div className="form-info__hint">
-              {profileLabels[lang].formNameHint}
-            </div>
-          </label>
-          <input
-            type="radio"
-            id="default-display-name"
-            checked={!hasChosenName}
-            onChange={() => {
-              setHasChosenName(false);
-              setChosenFirstNames(firstNames);
-              setChosenLastName(lastName);
-              setIsFirstNameValid(true);
-              setIsLastNameValid(true);
-            }}
-            disabled={saving}
-          />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="custom-display-name">
-            {profileLabels[lang].formNameDisplayName}
-          </label>
-          <input
-            type="radio"
-            id="custom-display-name"
-            checked={hasChosenName}
-            onChange={() => {
-              setHasChosenName(true);
-            }}
-            disabled={saving}
-          />
-        </div>
-      </fieldset>
-      {(() => {
-        if (hasChosenName) {
-          return [
-            <div key="fn" className={`form__field${firstNameValidationClassName}`}>
-              <label htmlFor="first-name">
-                {profileLabels[lang].firstName}
-                <div className="form-info__hint">
-                  {profileLabels[lang].firstNameHint}
-                </div>
-                {renderValidation(firstNameValidationMessages)}
-              </label>
-              <input
-                type="text"
-                id="first-name"
-                value={chosenFirstNames}
-                onChange={(e) => {
-                  validateFirstName(e.target.value, firstNameValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    validateFirstName(e.target.value);
-                  }
-                }}
-                disabled={saving}
-              />
-            </div>,
-            <div key="ln" className={`form__field${lastNameValidationClassName}`}>
-              <label htmlFor="last-name">
-                {profileLabels[lang].lastName}
-                {renderValidation(lastNameValidationMessages)}
-              </label>
-              <input
-                type="text"
-                id="last-name"
-                value={chosenLastName}
-                onChange={(e) => {
-                  validateLastName(e.target.value, lastNameValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    validateLastName(e.target.value);
-                  }
-                }}
-                disabled={saving}
-              />
-            </div>,
-          ];
-        }
-        return null;
-      })()}
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileNameComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdatePersonNames`;
-      if (typeof window.API_AUID !== 'undefined') {
-        url = `${url}?auid=${window.API_AUID}`;
-      }
-      const response = await fetch(url, {
-        method: 'PUT',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      });
-      const json = await response.json();
-      callback(response.ok, response.status, json);
-
-      // clear context cache
-      window.auAuth.setUserContext(window.API_AUID || 0, 'profile-clear-cache', true, () => {}, () => {}, true, window.authenticated);
-    };
-
-    putData();
-  },
-};
-
-AUProfileNameComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  firstNames: PropTypes.string.isRequired,
-  lastName: PropTypes.string.isRequired,
-  hasChosenName: PropTypes.bool.isRequired,
-  chosenFirstNames: PropTypes.string.isRequired,
-  chosenLastName: PropTypes.string.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onSaveAction: PropTypes.func,
-  saving: PropTypes.bool.isRequired,
-  saved: PropTypes.bool.isRequired,
-  dismissMessages: PropTypes.func.isRequired,
-  clear: PropTypes.func.isRequired,
-};
-
-AUProfileNameComponent.displayName = 'AUProfileNameComponent';
-export default AUProfileNameComponent;
+/* eslint-env browser */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable max-len */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import AUSubmitButtonContainerComponent from '../form/AUSubmitButtonContainerComponent';
+import { useProfileForm } from './AUProfileHooks';
+import { scrollTo } from '../../lib/helpers';
+import { profileLabels } from '../../lib/i18n';
+import { renderValidation, validateForm } from '../../lib/validation';
+
+const AUProfileNameComponent = ({
+  lang,
+  routeProps: { history },
+  path,
+  firstNames,
+  lastName,
+  hasChosenName: pHasChosenName,
+  chosenFirstNames: pChosenFirstNames,
+  chosenLastName: pChosenLastName,
+  onSave,
+  onSaveAction,
+  saving,
+  saved,
+  dismissMessages,
+  clear,
+}) => {
+  const validationRules = [{
+    message: profileLabels[lang].validFirstName,
+    rule: (fieldValue) => fieldValue.trim().length > 0,
+  },
+  {
+    message: profileLabels[lang].validLastName,
+    rule: (fieldValue) => fieldValue.trim().length > 0,
+  }];
+
+  const [hasChosenName, setHasChosenName] = useState(pHasChosenName);
+  const [chosenFirstNames, setChosenFirstNames] = useState(pChosenFirstNames);
+  const [chosenLastName, setChosenLastName] = useState(pChosenLastName);
+  const [firstNameValidationMessages, setFirstNameValidationMessages] = useState([]);
+  const [lastNameValidationMessages, setLastNameValidationMessages] = useState([]);
+  const [isFirstNameValid, setIsFirstNameValid] = useState(!pHasChosenName || (!!pChosenFirstNames));
+  const [isLastNameValid, setIsLastNameValid] = useState(!pHasChosenName || (!!pChosenLastName));
+  const [onCancel] = useProfileForm(saved, history, lang, clear);
+
+  const validateFirstName = (value, alert = true) => {
+    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
+    setChosenFirstNames(value);
+    setFirstNameValidationMessages(alert ? messages : []);
+    setIsFirstNameValid(!hasChosenName || valid);
+  };
+
+  const validateLastName = (value, alert = true) => {
+    const [valid, messages] = validateForm(lang, value, [validationRules[1]]);
+    setChosenLastName(value);
+    setLastNameValidationMessages(alert ? messages : []);
+    setIsLastNameValid(!hasChosenName || valid);
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+    validateFirstName(chosenFirstNames, !isFirstNameValid);
+    validateLastName(chosenLastName, !isLastNameValid);
+    if (isFirstNameValid && isLastNameValid) {
+      onSave({
+        hasChosenName,
+        chosenFirstNames: chosenFirstNames.trim(),
+        chosenLastName: chosenLastName.trim(),
+      }, onSaveAction);
+    }
+  };
+
+  let firstNameValidationClassName = '';
+  if (!isFirstNameValid && firstNameValidationMessages.length) {
+    firstNameValidationClassName = ' form-info--error';
+  } else if (isFirstNameValid) {
+    firstNameValidationClassName = ' form-info--confirmed';
+  }
+
+  let lastNameValidationClassName = '';
+  if (!isLastNameValid && lastNameValidationMessages.length) {
+    lastNameValidationClassName = ' form-info--error';
+  } else if (isLastNameValid) {
+    lastNameValidationClassName = ' form-info--confirmed';
+  }
+
+  useEffect(() => {
+    dismissMessages();
+    scrollTo();
+    const firstName = document.getElementById('first-name');
+    if (firstName) {
+      firstName.focus();
+    }
+  }, []);
+
+  return [
+    <div key="header" className="list-navigator">
+      <h1 className="list-navigator__header">{profileLabels[lang].headerName}</h1>
+      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
+    </div>,
+    <form key="form" className="form" noValidate="novalidate">
+      <fieldset>
+        <legend>
+          <div className="fieldset__legend-wrapper">
+            {profileLabels[lang].legendName}
+            <div className="form-info__hint">
+              {profileLabels[lang].legendNameHint}
+            </div>
+          </div>
+        </legend>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="default-display-name">
+            {`${firstNames} ${lastName}`}
+            <div className="form-info__hint">
+              {profileLabels[lang].formNameHint}
+            </div>
+          </label>
+          <input
+            type="radio"
+            id="default-display-name"
+            checked={!hasChosenName}
+            onChange={() => {
+              setHasChosenName(false);
+              setChosenFirstNames(firstNames);
+              setChosenLastName(lastName);
+              setIsFirstNameValid(true);
+              setIsLastNameValid(true);
+            }}
+            disabled={saving}
+          />
+        </div>
+        <div className="form__field form__field--horizontal">
+          <label htmlFor="custom-display-name">
+            {profileLabels[lang].formNameDisplayName}
+          </label>
+          <input
+            type="radio"
+            id="custom-display-name"
+            checked={hasChosenName}
+            onChange={() => {
+              setHasChosenName(true);
+            }}
+            disabled={saving}
+          />
+        </div>
+      </fieldset>
+      {(() => {
+        if (hasChosenName) {
+          return [
+            <div key="fn" className={`form__field${firstNameValidationClassName}`}>
+              <label htmlFor="first-name">
+                {profileLabels[lang].firstName}
+                <div className="form-info__hint">
+                  {profileLabels[lang].firstNameHint}
+                </div>
+                {renderValidation(firstNameValidationMessages)}
+              </label>
+              <input
+                type="text"
+                id="first-name"
+                value={chosenFirstNames}
+                onChange={(e) => {
+                  validateFirstName(e.target.value, firstNameValidationMessages.length);
+                }}
+                onKeyUp={(e) => {
+                  if (e.key === 'Enter') {
+                    validateFirstName(e.target.value);
+                  }
+                }}
+                disabled={saving}
+              />
+            </div>,
+            <div key="ln" className={`form__field${lastNameValidationClassName}`}>
+              <label htmlFor="last-name">
+                {profileLabels[lang].lastName}
+                {renderValidation(lastNameValidationMessages)}
+              </label>
+              <input
+                type="text"
+                id="last-name"
+                value={chosenLastName}
+                onChange={(e) => {
+                  validateLastName(e.target.value, lastNameValidationMessages.length);
+                }}
+                onKeyUp={(e) => {
+                  if (e.key === 'Enter') {
+                    validateLastName(e.target.value);
+                  }
+                }}
+                disabled={saving}
+              />
+            </div>,
+          ];
+        }
+        return null;
+      })()}
+      <AUSubmitButtonContainerComponent
+        lang={lang}
+        disabled={saving}
+        onSubmit={submit}
+        onCancel={onCancel}
+      />
+    </form>,
+  ];
+};
+
+AUProfileNameComponent.defaultProps = {
+  onSaveAction: (data, callback) => {
+    const putData = async () => {
+      let url = `${window.profileApiUri}/UpdatePersonNames`;
+      if (typeof window.API_AUID !== 'undefined') {
+        url = `${url}?auid=${window.API_AUID}`;
+      }
+      const response = await fetch(url, {
+        method: 'PUT',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      const json = await response.json();
+      callback(response.ok, response.status, json);
+
+      // clear context cache
+      window.auAuth.setUserContext(window.API_AUID || 0, 'profile-clear-cache', true, () => {}, () => {}, true, window.authenticated);
+    };
+
+    putData();
+  },
+};
+
+AUProfileNameComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  routeProps: PropTypes.shape({}).isRequired,
+  path: PropTypes.string.isRequired,
+  firstNames: PropTypes.string.isRequired,
+  lastName: PropTypes.string.isRequired,
+  hasChosenName: PropTypes.bool.isRequired,
+  chosenFirstNames: PropTypes.string.isRequired,
+  chosenLastName: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onSaveAction: PropTypes.func,
+  saving: PropTypes.bool.isRequired,
+  saved: PropTypes.bool.isRequired,
+  dismissMessages: PropTypes.func.isRequired,
+  clear: PropTypes.func.isRequired,
+};
+
+AUProfileNameComponent.displayName = 'AUProfileNameComponent';
+export default AUProfileNameComponent;