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

package/src/components/profile/AUProfileMobileComponent.js

@@ -1,164 +1,164 @@
-/* eslint-env browser */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable max-len */
-import React, { useEffect, useState } 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 AUProfileMobileComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  countryCodes,
-  privateMobileNumber,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validMobile,
-    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
-  }];
-
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, privateMobileNumber);
-  const [mobileValidationMessages, setMobileValidationMessages] = useState([]);
-  const [isMobileValid, setIsMobileValid] = useState(!!privateMobileNumber);
-
-  const validate = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, prefix + value, validationRules);
-    setMobile(value);
-    setMobileValidationMessages(alert ? messages : []);
-    setIsMobileValid(valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validate(mobile, !isMobileValid);
-    if (isMobileValid) {
-      onSave({
-        privatePhoneNumber: '',
-        privateMobileNumber: prefix + mobile,
-      }, onSaveAction);
-    }
-  };
-
-  let mobileValidationClassName = '';
-  if (!isMobileValid && mobileValidationMessages.length) {
-    mobileValidationClassName = ' form-info--error';
-  } else if (isMobileValid) {
-    mobileValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    document.getElementById('contact-phone').focus();
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerMobile}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <form key="form" className="form" noValidate="novalidate">
-      <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${mobileValidationClassName}`}>
-        <label htmlFor="contact-phone">
-          {profileLabels[lang].number}
-          {renderValidation(mobileValidationMessages)}
-        </label>
-        <input
-          type="tel"
-          id="contact-phone"
-          value={mobile}
-          onChange={(e) => {
-            validate(e.target.value.trim(), mobileValidationMessages.length);
-          }}
-          onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              validate(e.target.value.trim());
-            }
-          }}
-          disabled={saving}
-        />
-      </div>
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileMobileComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdatePrivatePhoneNumbers`;
-      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();
-  },
-};
-
-AUProfileMobileComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  privateMobileNumber: 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,
-};
-
-AUProfileMobileComponent.displayName = 'AUProfileMobileComponent';
-export default AUProfileMobileComponent;
+/* eslint-env browser */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable max-len */
+import React, { useEffect, useState } 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 AUProfileMobileComponent = ({
+  lang,
+  routeProps: { history },
+  path,
+  countryCodes,
+  privateMobileNumber,
+  onSave,
+  onSaveAction,
+  saving,
+  saved,
+  dismissMessages,
+  clear,
+}) => {
+  const validationRules = [{
+    message: profileLabels[lang].validMobile,
+    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
+  }];
+
+  const [onCancel] = useProfileForm(saved, history, lang, clear);
+  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, privateMobileNumber);
+  const [mobileValidationMessages, setMobileValidationMessages] = useState([]);
+  const [isMobileValid, setIsMobileValid] = useState(!!privateMobileNumber);
+
+  const validate = (value, alert = true) => {
+    const [valid, messages] = validateForm(lang, prefix + value, validationRules);
+    setMobile(value);
+    setMobileValidationMessages(alert ? messages : []);
+    setIsMobileValid(valid);
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+    validate(mobile, !isMobileValid);
+    if (isMobileValid) {
+      onSave({
+        privatePhoneNumber: '',
+        privateMobileNumber: prefix + mobile,
+      }, onSaveAction);
+    }
+  };
+
+  let mobileValidationClassName = '';
+  if (!isMobileValid && mobileValidationMessages.length) {
+    mobileValidationClassName = ' form-info--error';
+  } else if (isMobileValid) {
+    mobileValidationClassName = ' form-info--confirmed';
+  }
+
+  useEffect(() => {
+    dismissMessages();
+    scrollTo();
+    document.getElementById('contact-phone').focus();
+  }, []);
+
+  return [
+    <div key="header" className="list-navigator">
+      <h1 className="list-navigator__header">{profileLabels[lang].headerMobile}</h1>
+      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
+    </div>,
+    <form key="form" className="form" noValidate="novalidate">
+      <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${mobileValidationClassName}`}>
+        <label htmlFor="contact-phone">
+          {profileLabels[lang].number}
+          {renderValidation(mobileValidationMessages)}
+        </label>
+        <input
+          type="tel"
+          id="contact-phone"
+          value={mobile}
+          onChange={(e) => {
+            validate(e.target.value.trim(), mobileValidationMessages.length);
+          }}
+          onKeyUp={(e) => {
+            if (e.key === 'Enter') {
+              validate(e.target.value.trim());
+            }
+          }}
+          disabled={saving}
+        />
+      </div>
+      <AUSubmitButtonContainerComponent
+        lang={lang}
+        disabled={saving}
+        onSubmit={submit}
+        onCancel={onCancel}
+      />
+    </form>,
+  ];
+};
+
+AUProfileMobileComponent.defaultProps = {
+  onSaveAction: (data, callback) => {
+    const putData = async () => {
+      let url = `${window.profileApiUri}/UpdatePrivatePhoneNumbers`;
+      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();
+  },
+};
+
+AUProfileMobileComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  routeProps: PropTypes.shape({}).isRequired,
+  path: PropTypes.string.isRequired,
+  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  privateMobileNumber: 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,
+};
+
+AUProfileMobileComponent.displayName = 'AUProfileMobileComponent';
+export default AUProfileMobileComponent;