@aarhus-university/au-lib-react-components 9.11.19 → 10.0.2

package/src/components/profile/AUProfileNextOfKinComponent.js

@@ -1,216 +1,216 @@
-/* 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 AUMobilePrefixComponent from '../form/AUMobilePrefixComponent';
-import { useProfileForm, useMobilePrefix } from './AUProfileHooks';
-import {
-  splitPhoneNumber,
-  scrollTo,
-} from '../../lib/helpers';
-import { profileLabels } from '../../lib/i18n';
-import { renderValidation, validateForm } from '../../lib/validation';
-
-const AUProfileNextOfKinComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  countryCodes,
-  nextOfKinName: pNextOfKinName,
-  nextOfKinPhoneNumber,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  },
-  {
-    message: profileLabels[lang].validMobile,
-    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
-  }];
-
-  const [nextOfKinName, setNextOfKinName] = useState(pNextOfKinName);
-  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, nextOfKinPhoneNumber);
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-  const [nokNameValidationMessages, setNokNameValidationMessages] = useState([]);
-  const [nokMobileValidationMessages, setNokMobileValidationMessages] = useState([]);
-  const [isNokNameValid, setIsNokNameValid] = useState(!!pNextOfKinName);
-  const [isNokMobileValid, setIsNokMobileValid] = useState(!!nextOfKinPhoneNumber);
-
-  const validateName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
-    setNextOfKinName(value);
-    setNokNameValidationMessages(alert ? messages : []);
-    setIsNokNameValid(valid);
-  };
-
-  const validateMobile = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, prefix + value, [validationRules[1]]);
-    setMobile(value);
-    setNokMobileValidationMessages(alert ? messages : []);
-    setIsNokMobileValid(valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validateName(nextOfKinName, !isNokNameValid);
-    validateMobile(mobile, !isNokMobileValid);
-    if (isNokNameValid && isNokMobileValid) {
-      onSave({
-        nextOfKinName: nextOfKinName.trim(),
-        nextOfKinPhoneNumber: prefix + mobile,
-      }, onSaveAction);
-    }
-  };
-
-  let nokNameValidationClassName = '';
-  if (!isNokNameValid && nokNameValidationMessages.length) {
-    nokNameValidationClassName = ' form-info--error';
-  } else if (isNokNameValid) {
-    nokNameValidationClassName = ' form-info--confirmed';
-  }
-
-  let nokMobileValidationClassName = '';
-  if (!isNokMobileValid && nokMobileValidationMessages.length) {
-    nokMobileValidationClassName = ' form-info--error';
-  } else if (isNokMobileValid) {
-    nokMobileValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    document.getElementById('contact-name').focus();
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerNextOfKin}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <p key="paragraph">
-      {profileLabels[lang].nextOfKinParagraph}
-    </p>,
-    <form key="form" className="form" noValidate="novalidate">
-      <div className={`form__field${nokNameValidationClassName}`}>
-        <label htmlFor="contact-name">
-          {profileLabels[lang].nextOfKinName}
-          {renderValidation(nokNameValidationMessages)}
-        </label>
-        <input
-          type="text"
-          id="contact-name"
-          value={nextOfKinName}
-          onChange={(e) => {
-            validateName(e.target.value, nokNameValidationMessages.length);
-          }}
-          onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              validateName(e.target.value);
-            }
-          }}
-          disabled={saving}
-        />
-      </div>
-      <fieldset className="fieldset--not-radio-checkbox">
-        <legend>
-          <div className="fieldset__legend-wrapper">{profileLabels[lang].nextOfKinTelephone}</div>
-        </legend>
-        <div className="form__field">
-          <label htmlFor="contact-country-code">{profileLabels[lang].countryCode}</label>
-          <select
-            id="contact-country-code"
-            value={prefix}
-            onChange={(e) => {
-              setPrefix(e.target.value);
-            }}
-          >
-            <AUMobilePrefixComponent countryCodes={countryCodes} important />
-            <optgroup label="Alle lande">
-              <AUMobilePrefixComponent countryCodes={countryCodes} />
-            </optgroup>
-          </select>
-        </div>
-        <div className={`form__field${nokMobileValidationClassName}`}>
-          <label htmlFor="contact-phone">
-            {profileLabels[lang].number}
-            {renderValidation(nokMobileValidationMessages)}
-          </label>
-          <input
-            type="tel"
-            id="contact-phone"
-            value={mobile}
-            onChange={(e) => {
-              validateMobile(e.target.value, nokMobileValidationMessages.length);
-            }}
-            onKeyUp={(e) => {
-              if (e.key === 'Enter') {
-                validateMobile(e.target.value);
-              }
-            }}
-            disabled={saving}
-          />
-        </div>
-      </fieldset>
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileNextOfKinComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdateNextOfKin`;
-      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();
-  },
-};
-
-AUProfileNextOfKinComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  nextOfKinName: PropTypes.string.isRequired,
-  nextOfKinPhoneNumber: 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,
-};
-
-AUProfileNextOfKinComponent.displayName = 'AUProfileNextOfKinComponent';
-export default AUProfileNextOfKinComponent;
+/* 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 AUMobilePrefixComponent from '../form/AUMobilePrefixComponent';
+import { useProfileForm, useMobilePrefix } from './AUProfileHooks';
+import {
+  splitPhoneNumber,
+  scrollTo,
+} from '../../lib/helpers';
+import { profileLabels } from '../../lib/i18n';
+import { renderValidation, validateForm } from '../../lib/validation';
+
+const AUProfileNextOfKinComponent = ({
+  lang,
+  routeProps: { history },
+  path,
+  countryCodes,
+  nextOfKinName: pNextOfKinName,
+  nextOfKinPhoneNumber,
+  onSave,
+  onSaveAction,
+  saving,
+  saved,
+  dismissMessages,
+  clear,
+}) => {
+  const validationRules = [{
+    message: profileLabels[lang].validName,
+    rule: (fieldValue) => fieldValue.trim().length > 0,
+  },
+  {
+    message: profileLabels[lang].validMobile,
+    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
+  }];
+
+  const [nextOfKinName, setNextOfKinName] = useState(pNextOfKinName);
+  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, nextOfKinPhoneNumber);
+  const [onCancel] = useProfileForm(saved, history, lang, clear);
+  const [nokNameValidationMessages, setNokNameValidationMessages] = useState([]);
+  const [nokMobileValidationMessages, setNokMobileValidationMessages] = useState([]);
+  const [isNokNameValid, setIsNokNameValid] = useState(!!pNextOfKinName);
+  const [isNokMobileValid, setIsNokMobileValid] = useState(!!nextOfKinPhoneNumber);
+
+  const validateName = (value, alert = true) => {
+    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
+    setNextOfKinName(value);
+    setNokNameValidationMessages(alert ? messages : []);
+    setIsNokNameValid(valid);
+  };
+
+  const validateMobile = (value, alert = true) => {
+    const [valid, messages] = validateForm(lang, prefix + value, [validationRules[1]]);
+    setMobile(value);
+    setNokMobileValidationMessages(alert ? messages : []);
+    setIsNokMobileValid(valid);
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+    validateName(nextOfKinName, !isNokNameValid);
+    validateMobile(mobile, !isNokMobileValid);
+    if (isNokNameValid && isNokMobileValid) {
+      onSave({
+        nextOfKinName: nextOfKinName.trim(),
+        nextOfKinPhoneNumber: prefix + mobile,
+      }, onSaveAction);
+    }
+  };
+
+  let nokNameValidationClassName = '';
+  if (!isNokNameValid && nokNameValidationMessages.length) {
+    nokNameValidationClassName = ' form-info--error';
+  } else if (isNokNameValid) {
+    nokNameValidationClassName = ' form-info--confirmed';
+  }
+
+  let nokMobileValidationClassName = '';
+  if (!isNokMobileValid && nokMobileValidationMessages.length) {
+    nokMobileValidationClassName = ' form-info--error';
+  } else if (isNokMobileValid) {
+    nokMobileValidationClassName = ' form-info--confirmed';
+  }
+
+  useEffect(() => {
+    dismissMessages();
+    scrollTo();
+    document.getElementById('contact-name').focus();
+  }, []);
+
+  return [
+    <div key="header" className="list-navigator">
+      <h1 className="list-navigator__header">{profileLabels[lang].headerNextOfKin}</h1>
+      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
+    </div>,
+    <p key="paragraph">
+      {profileLabels[lang].nextOfKinParagraph}
+    </p>,
+    <form key="form" className="form" noValidate="novalidate">
+      <div className={`form__field${nokNameValidationClassName}`}>
+        <label htmlFor="contact-name">
+          {profileLabels[lang].nextOfKinName}
+          {renderValidation(nokNameValidationMessages)}
+        </label>
+        <input
+          type="text"
+          id="contact-name"
+          value={nextOfKinName}
+          onChange={(e) => {
+            validateName(e.target.value, nokNameValidationMessages.length);
+          }}
+          onKeyUp={(e) => {
+            if (e.key === 'Enter') {
+              validateName(e.target.value);
+            }
+          }}
+          disabled={saving}
+        />
+      </div>
+      <fieldset className="fieldset--not-radio-checkbox">
+        <legend>
+          <div className="fieldset__legend-wrapper">{profileLabels[lang].nextOfKinTelephone}</div>
+        </legend>
+        <div className="form__field">
+          <label htmlFor="contact-country-code">{profileLabels[lang].countryCode}</label>
+          <select
+            id="contact-country-code"
+            value={prefix}
+            onChange={(e) => {
+              setPrefix(e.target.value);
+            }}
+          >
+            <AUMobilePrefixComponent countryCodes={countryCodes} important />
+            <optgroup label="Alle lande">
+              <AUMobilePrefixComponent countryCodes={countryCodes} />
+            </optgroup>
+          </select>
+        </div>
+        <div className={`form__field${nokMobileValidationClassName}`}>
+          <label htmlFor="contact-phone">
+            {profileLabels[lang].number}
+            {renderValidation(nokMobileValidationMessages)}
+          </label>
+          <input
+            type="tel"
+            id="contact-phone"
+            value={mobile}
+            onChange={(e) => {
+              validateMobile(e.target.value, nokMobileValidationMessages.length);
+            }}
+            onKeyUp={(e) => {
+              if (e.key === 'Enter') {
+                validateMobile(e.target.value);
+              }
+            }}
+            disabled={saving}
+          />
+        </div>
+      </fieldset>
+      <AUSubmitButtonContainerComponent
+        lang={lang}
+        disabled={saving}
+        onSubmit={submit}
+        onCancel={onCancel}
+      />
+    </form>,
+  ];
+};
+
+AUProfileNextOfKinComponent.defaultProps = {
+  onSaveAction: (data, callback) => {
+    const putData = async () => {
+      let url = `${window.profileApiUri}/UpdateNextOfKin`;
+      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();
+  },
+};
+
+AUProfileNextOfKinComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  routeProps: PropTypes.shape({}).isRequired,
+  path: PropTypes.string.isRequired,
+  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  nextOfKinName: PropTypes.string.isRequired,
+  nextOfKinPhoneNumber: 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,
+};
+
+AUProfileNextOfKinComponent.displayName = 'AUProfileNextOfKinComponent';
+export default AUProfileNextOfKinComponent;