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

package/src/components/profile/AUProfileContainerComponent.js

@@ -1,283 +1,283 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-import AUModalComponent from '../delphinus/AUModalComponent';
-import AUProfileItemComponent from './AUProfileItemComponent';
-import AUProfileNameComponent from './AUProfileNameComponent';
-import AUProfileMailComponent from './AUProfileMailComponent';
-import AUProfileMobileComponent from './AUProfileMobileComponent';
-import AUProfileLanguageComponent from './AUProfileLanguageComponent';
-import AUProfileNextOfKinComponent from './AUProfileNextOfKinComponent';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-import { prettyPrintPhone, scrollTo } from '../../lib/helpers';
-import { profileLabels, countryCodes } from '../../lib/i18n';
-
-const getLinkElement = (path, language) => <Link className="settings-list__item__action button button--small" to={path}>{profileLabels[language].edit}</Link>;
-const langPath = '/(da|en)';
-
-const AUProfileContainerComponent = ({
-  user: {
-    firstNames,
-    lastName,
-    hasChosenName,
-    chosenFirstNames,
-    chosenLastName,
-    preferredLanguage,
-    privateMobileNumber,
-    privateMailAddress,
-    nextOfKinName,
-    nextOfKinPhoneNumber,
-    isStudentAdGroupMember,
-    studentMailAddress,
-    studentChosenMailAddress,
-    workMailAddress,
-    workMailDomain,
-    saving,
-    saved,
-    loaded,
-  },
-  path,
-  onSaveName,
-  onSaveMail,
-  onSaveMobile,
-  onSaveLanguage,
-  onSaveNextOfKin,
-  dismissMessages,
-  clear,
-  onUserLoaded,
-}) => {
-  useEffect(() => {
-    scrollTo();
-  }, []);
-
-  useEffect(() => {
-    if (loaded) {
-      onUserLoaded();
-    }
-  }, [loaded]);
-
-  return (
-    <Router key="router">
-      <div className="page__content__block">
-        <Route
-          path={`${langPath}${path}`}
-          exact
-          render={() => [
-            <div key="navigator" className="list-navigator list-navigator--top-level">
-              <h1 className="list-navigator__header">{profileLabels[preferredLanguage].headerContainer}</h1>
-            </div>,
-            <AUModalComponent
-              key="modal"
-              lang={preferredLanguage}
-            >
-              <div className="modal-view__body">
-                <h2 className="modal-view__header">
-                  Indholdet af en modal
-                </h2>
-                <div className="modal-view__content">
-                  Indhold
-                </div>
-              </div>
-            </AUModalComponent>,
-            <ul key="links" className="settings-list links--plain">
-              <AUProfileItemComponent
-                lang={preferredLanguage}
-                header={profileLabels[preferredLanguage].headerName}
-                values={hasChosenName ? [`${chosenFirstNames} ${chosenLastName}`] : [`${firstNames} ${lastName}`]}
-                linkElement={getLinkElement(`/${preferredLanguage}${path}/name`, preferredLanguage, profileLabels)}
-              />
-              <AUProfileItemComponent
-                lang={preferredLanguage}
-                header={profileLabels[preferredLanguage].headerMail}
-                values={[
-                  workMailAddress && !workMailAddress.includes('@uni.au.dk') ? workMailAddress : '',
-                  studentChosenMailAddress || studentMailAddress,
-                  privateMailAddress,
-                ]}
-                empty={!privateMailAddress ? [profileLabels[preferredLanguage].emptyMail] : []}
-                linkElement={getLinkElement(`/${preferredLanguage}${path}/mail`, preferredLanguage, profileLabels)}
-              />
-              <AUProfileItemComponent
-                lang={preferredLanguage}
-                header={profileLabels[preferredLanguage].headerMobile}
-                values={[prettyPrintPhone(countryCodes, privateMobileNumber)]}
-                empty={!privateMobileNumber ? [profileLabels[preferredLanguage].emptyMobile] : []}
-                linkElement={getLinkElement(`/${preferredLanguage}${path}/mobile`, preferredLanguage, profileLabels)}
-              />
-              <AUProfileItemComponent
-                lang={preferredLanguage}
-                header={profileLabels[preferredLanguage].headerLanguage}
-                values={[`${profileLabels[preferredLanguage].languageIn}`]}
-                linkElement={getLinkElement(`/${preferredLanguage}${path}/language`, preferredLanguage, profileLabels)}
-              />
-              <AUProfileItemComponent
-                lang={preferredLanguage}
-                header={profileLabels[preferredLanguage].headerNextOfKin}
-                values={[nextOfKinName, prettyPrintPhone(countryCodes, nextOfKinPhoneNumber)]}
-                empty={!nextOfKinPhoneNumber ? [profileLabels[preferredLanguage].emptyNok] : []}
-                linkElement={getLinkElement(`/${preferredLanguage}${path}/nextofkin`, preferredLanguage, profileLabels)}
-              />
-            </ul>,
-          ]}
-        />
-        <Route
-          path={`${langPath}${path}/name`}
-          render={(routeProps) => (
-            <AUSpinnerComponent
-              loaded={loaded}
-              loadingCondition={!loaded}
-            >
-              <AUProfileNameComponent
-                lang={preferredLanguage}
-                path={`/${preferredLanguage}${path}`}
-                routeProps={routeProps}
-                firstNames={firstNames}
-                lastName={lastName}
-                chosenFirstNames={chosenFirstNames}
-                chosenLastName={chosenLastName}
-                hasChosenName={hasChosenName}
-                onSave={onSaveName}
-                saving={saving}
-                saved={saved}
-                dismissMessages={dismissMessages}
-                clear={clear}
-              />
-            </AUSpinnerComponent>
-          )}
-        />
-        <Route
-          path={`${langPath}${path}/mail`}
-          render={(routeProps) => (
-            <AUSpinnerComponent
-              loaded={loaded}
-              loadingCondition={!loaded}
-            >
-              <AUProfileMailComponent
-                lang={preferredLanguage}
-                path={`/${preferredLanguage}${path}`}
-                routeProps={routeProps}
-                isStudentAdGroupMember={isStudentAdGroupMember}
-                studentMailAddress={studentMailAddress}
-                studentChosenMailAddress={studentChosenMailAddress || studentMailAddress || ''}
-                workMailAddress={workMailAddress}
-                workMailDomain={workMailDomain}
-                privateMailAddress={privateMailAddress || ''}
-                onSave={onSaveMail}
-                saving={saving}
-                saved={saved}
-                dismissMessages={dismissMessages}
-                clear={clear}
-              />
-            </AUSpinnerComponent>
-          )}
-        />
-        <Route
-          path={`${langPath}${path}/mobile`}
-          render={(routeProps) => (
-            <AUSpinnerComponent
-              loaded={loaded}
-              loadingCondition={!loaded}
-            >
-              <AUProfileMobileComponent
-                lang={preferredLanguage}
-                path={`/${preferredLanguage}${path}`}
-                routeProps={routeProps}
-                countryCodes={countryCodes}
-                privateMobileNumber={privateMobileNumber || ''}
-                onSave={onSaveMobile}
-                saving={saving}
-                saved={saved}
-                dismissMessages={dismissMessages}
-                clear={clear}
-              />
-            </AUSpinnerComponent>
-          )}
-        />
-        <Route
-          path={`${langPath}${path}/language`}
-          render={(routeProps) => (
-            <AUSpinnerComponent
-              loaded={loaded}
-              loadingCondition={!loaded}
-            >
-              <AUProfileLanguageComponent
-                lang={preferredLanguage}
-                path={`/${preferredLanguage}${path}`}
-                routeProps={routeProps}
-                preferredLanguage={preferredLanguage}
-                onSave={onSaveLanguage}
-                saving={saving}
-                saved={saved}
-                dismissMessages={dismissMessages}
-                clear={clear}
-              />
-            </AUSpinnerComponent>
-          )}
-        />
-        <Route
-          path={`${langPath}${path}/nextofkin`}
-          render={(routeProps) => (
-            <AUSpinnerComponent
-              loaded={loaded}
-              loadingCondition={!loaded}
-            >
-              <AUProfileNextOfKinComponent
-                lang={preferredLanguage}
-                path={`/${preferredLanguage}${path}`}
-                routeProps={routeProps}
-                countryCodes={countryCodes}
-                nextOfKinName={nextOfKinName || ''}
-                nextOfKinPhoneNumber={nextOfKinPhoneNumber || ''}
-                onSave={onSaveNextOfKin}
-                saving={saving}
-                saved={saved}
-                dismissMessages={dismissMessages}
-                clear={clear}
-              />
-            </AUSpinnerComponent>
-          )}
-        />
-      </div>
-    </Router>
-  );
-};
-
-AUProfileContainerComponent.defaultProps = {
-  onUserLoaded: () => { },
-};
-
-AUProfileContainerComponent.propTypes = {
-  user: PropTypes.shape({
-    firstNames: PropTypes.string.isRequired,
-    lastName: PropTypes.string.isRequired,
-    hasChosenName: PropTypes.bool.isRequired,
-    chosenFirstNames: PropTypes.string.isRequired,
-    chosenLastName: PropTypes.string.isRequired,
-    preferredLanguage: PropTypes.string.isRequired,
-    privateMobileNumber: PropTypes.string.isRequired,
-    privateMailAddress: PropTypes.string.isRequired,
-    nextOfKinName: PropTypes.string.isRequired,
-    nextOfKinPhoneNumber: PropTypes.string.isRequired,
-    isStudentAdGroupMember: PropTypes.bool.isRequired,
-    studentMailAddress: PropTypes.string.isRequired,
-    studentChosenMailAddress: PropTypes.string.isRequired,
-    workMailAddress: PropTypes.string.isRequired,
-    workMailDomain: PropTypes.string.isRequired,
-    saving: PropTypes.bool.isRequired,
-    saved: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-  }).isRequired,
-  path: PropTypes.string.isRequired,
-  onSaveName: PropTypes.func.isRequired,
-  onSaveMail: PropTypes.func.isRequired,
-  onSaveMobile: PropTypes.func.isRequired,
-  onSaveLanguage: PropTypes.func.isRequired,
-  onSaveNextOfKin: PropTypes.func.isRequired,
-  dismissMessages: PropTypes.func.isRequired,
-  clear: PropTypes.func.isRequired,
-  onUserLoaded: PropTypes.func,
-};
-
-AUProfileContainerComponent.displayName = 'AUProfileContainerComponent';
-export default AUProfileContainerComponent;
+/* eslint-env browser */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import AUModalComponent from '../delphinus/AUModalComponent';
+import AUProfileItemComponent from './AUProfileItemComponent';
+import AUProfileNameComponent from './AUProfileNameComponent';
+import AUProfileMailComponent from './AUProfileMailComponent';
+import AUProfileMobileComponent from './AUProfileMobileComponent';
+import AUProfileLanguageComponent from './AUProfileLanguageComponent';
+import AUProfileNextOfKinComponent from './AUProfileNextOfKinComponent';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+import { prettyPrintPhone, scrollTo } from '../../lib/helpers';
+import { profileLabels, countryCodes } from '../../lib/i18n';
+
+const getLinkElement = (path, language) => <Link className="settings-list__item__action button button--small" to={path}>{profileLabels[language].edit}</Link>;
+const langPath = '/(da|en)';
+
+const AUProfileContainerComponent = ({
+  user: {
+    firstNames,
+    lastName,
+    hasChosenName,
+    chosenFirstNames,
+    chosenLastName,
+    preferredLanguage,
+    privateMobileNumber,
+    privateMailAddress,
+    nextOfKinName,
+    nextOfKinPhoneNumber,
+    isStudentAdGroupMember,
+    studentMailAddress,
+    studentChosenMailAddress,
+    workMailAddress,
+    workMailDomain,
+    saving,
+    saved,
+    loaded,
+  },
+  path,
+  onSaveName,
+  onSaveMail,
+  onSaveMobile,
+  onSaveLanguage,
+  onSaveNextOfKin,
+  dismissMessages,
+  clear,
+  onUserLoaded,
+}) => {
+  useEffect(() => {
+    scrollTo();
+  }, []);
+
+  useEffect(() => {
+    if (loaded) {
+      onUserLoaded();
+    }
+  }, [loaded]);
+
+  return (
+    <Router key="router">
+      <div className="page__content__block">
+        <Route
+          path={`${langPath}${path}`}
+          exact
+          render={() => [
+            <div key="navigator" className="list-navigator list-navigator--top-level">
+              <h1 className="list-navigator__header">{profileLabels[preferredLanguage].headerContainer}</h1>
+            </div>,
+            <AUModalComponent
+              key="modal"
+              lang={preferredLanguage}
+            >
+              <div className="modal-view__body">
+                <h2 className="modal-view__header">
+                  Indholdet af en modal
+                </h2>
+                <div className="modal-view__content">
+                  Indhold
+                </div>
+              </div>
+            </AUModalComponent>,
+            <ul key="links" className="settings-list links--plain">
+              <AUProfileItemComponent
+                lang={preferredLanguage}
+                header={profileLabels[preferredLanguage].headerName}
+                values={hasChosenName ? [`${chosenFirstNames} ${chosenLastName}`] : [`${firstNames} ${lastName}`]}
+                linkElement={getLinkElement(`/${preferredLanguage}${path}/name`, preferredLanguage, profileLabels)}
+              />
+              <AUProfileItemComponent
+                lang={preferredLanguage}
+                header={profileLabels[preferredLanguage].headerMail}
+                values={[
+                  workMailAddress && !workMailAddress.includes('@uni.au.dk') ? workMailAddress : '',
+                  studentChosenMailAddress || studentMailAddress,
+                  privateMailAddress,
+                ]}
+                empty={!privateMailAddress ? [profileLabels[preferredLanguage].emptyMail] : []}
+                linkElement={getLinkElement(`/${preferredLanguage}${path}/mail`, preferredLanguage, profileLabels)}
+              />
+              <AUProfileItemComponent
+                lang={preferredLanguage}
+                header={profileLabels[preferredLanguage].headerMobile}
+                values={[prettyPrintPhone(countryCodes, privateMobileNumber)]}
+                empty={!privateMobileNumber ? [profileLabels[preferredLanguage].emptyMobile] : []}
+                linkElement={getLinkElement(`/${preferredLanguage}${path}/mobile`, preferredLanguage, profileLabels)}
+              />
+              <AUProfileItemComponent
+                lang={preferredLanguage}
+                header={profileLabels[preferredLanguage].headerLanguage}
+                values={[`${profileLabels[preferredLanguage].languageIn}`]}
+                linkElement={getLinkElement(`/${preferredLanguage}${path}/language`, preferredLanguage, profileLabels)}
+              />
+              <AUProfileItemComponent
+                lang={preferredLanguage}
+                header={profileLabels[preferredLanguage].headerNextOfKin}
+                values={[nextOfKinName, prettyPrintPhone(countryCodes, nextOfKinPhoneNumber)]}
+                empty={!nextOfKinPhoneNumber ? [profileLabels[preferredLanguage].emptyNok] : []}
+                linkElement={getLinkElement(`/${preferredLanguage}${path}/nextofkin`, preferredLanguage, profileLabels)}
+              />
+            </ul>,
+          ]}
+        />
+        <Route
+          path={`${langPath}${path}/name`}
+          render={(routeProps) => (
+            <AUSpinnerComponent
+              loaded={loaded}
+              loadingCondition={!loaded}
+            >
+              <AUProfileNameComponent
+                lang={preferredLanguage}
+                path={`/${preferredLanguage}${path}`}
+                routeProps={routeProps}
+                firstNames={firstNames}
+                lastName={lastName}
+                chosenFirstNames={chosenFirstNames}
+                chosenLastName={chosenLastName}
+                hasChosenName={hasChosenName}
+                onSave={onSaveName}
+                saving={saving}
+                saved={saved}
+                dismissMessages={dismissMessages}
+                clear={clear}
+              />
+            </AUSpinnerComponent>
+          )}
+        />
+        <Route
+          path={`${langPath}${path}/mail`}
+          render={(routeProps) => (
+            <AUSpinnerComponent
+              loaded={loaded}
+              loadingCondition={!loaded}
+            >
+              <AUProfileMailComponent
+                lang={preferredLanguage}
+                path={`/${preferredLanguage}${path}`}
+                routeProps={routeProps}
+                isStudentAdGroupMember={isStudentAdGroupMember}
+                studentMailAddress={studentMailAddress}
+                studentChosenMailAddress={studentChosenMailAddress || studentMailAddress || ''}
+                workMailAddress={workMailAddress}
+                workMailDomain={workMailDomain}
+                privateMailAddress={privateMailAddress || ''}
+                onSave={onSaveMail}
+                saving={saving}
+                saved={saved}
+                dismissMessages={dismissMessages}
+                clear={clear}
+              />
+            </AUSpinnerComponent>
+          )}
+        />
+        <Route
+          path={`${langPath}${path}/mobile`}
+          render={(routeProps) => (
+            <AUSpinnerComponent
+              loaded={loaded}
+              loadingCondition={!loaded}
+            >
+              <AUProfileMobileComponent
+                lang={preferredLanguage}
+                path={`/${preferredLanguage}${path}`}
+                routeProps={routeProps}
+                countryCodes={countryCodes}
+                privateMobileNumber={privateMobileNumber || ''}
+                onSave={onSaveMobile}
+                saving={saving}
+                saved={saved}
+                dismissMessages={dismissMessages}
+                clear={clear}
+              />
+            </AUSpinnerComponent>
+          )}
+        />
+        <Route
+          path={`${langPath}${path}/language`}
+          render={(routeProps) => (
+            <AUSpinnerComponent
+              loaded={loaded}
+              loadingCondition={!loaded}
+            >
+              <AUProfileLanguageComponent
+                lang={preferredLanguage}
+                path={`/${preferredLanguage}${path}`}
+                routeProps={routeProps}
+                preferredLanguage={preferredLanguage}
+                onSave={onSaveLanguage}
+                saving={saving}
+                saved={saved}
+                dismissMessages={dismissMessages}
+                clear={clear}
+              />
+            </AUSpinnerComponent>
+          )}
+        />
+        <Route
+          path={`${langPath}${path}/nextofkin`}
+          render={(routeProps) => (
+            <AUSpinnerComponent
+              loaded={loaded}
+              loadingCondition={!loaded}
+            >
+              <AUProfileNextOfKinComponent
+                lang={preferredLanguage}
+                path={`/${preferredLanguage}${path}`}
+                routeProps={routeProps}
+                countryCodes={countryCodes}
+                nextOfKinName={nextOfKinName || ''}
+                nextOfKinPhoneNumber={nextOfKinPhoneNumber || ''}
+                onSave={onSaveNextOfKin}
+                saving={saving}
+                saved={saved}
+                dismissMessages={dismissMessages}
+                clear={clear}
+              />
+            </AUSpinnerComponent>
+          )}
+        />
+      </div>
+    </Router>
+  );
+};
+
+AUProfileContainerComponent.defaultProps = {
+  onUserLoaded: () => { },
+};
+
+AUProfileContainerComponent.propTypes = {
+  user: PropTypes.shape({
+    firstNames: PropTypes.string.isRequired,
+    lastName: PropTypes.string.isRequired,
+    hasChosenName: PropTypes.bool.isRequired,
+    chosenFirstNames: PropTypes.string.isRequired,
+    chosenLastName: PropTypes.string.isRequired,
+    preferredLanguage: PropTypes.string.isRequired,
+    privateMobileNumber: PropTypes.string.isRequired,
+    privateMailAddress: PropTypes.string.isRequired,
+    nextOfKinName: PropTypes.string.isRequired,
+    nextOfKinPhoneNumber: PropTypes.string.isRequired,
+    isStudentAdGroupMember: PropTypes.bool.isRequired,
+    studentMailAddress: PropTypes.string.isRequired,
+    studentChosenMailAddress: PropTypes.string.isRequired,
+    workMailAddress: PropTypes.string.isRequired,
+    workMailDomain: PropTypes.string.isRequired,
+    saving: PropTypes.bool.isRequired,
+    saved: PropTypes.bool.isRequired,
+    loaded: PropTypes.bool.isRequired,
+  }).isRequired,
+  path: PropTypes.string.isRequired,
+  onSaveName: PropTypes.func.isRequired,
+  onSaveMail: PropTypes.func.isRequired,
+  onSaveMobile: PropTypes.func.isRequired,
+  onSaveLanguage: PropTypes.func.isRequired,
+  onSaveNextOfKin: PropTypes.func.isRequired,
+  dismissMessages: PropTypes.func.isRequired,
+  clear: PropTypes.func.isRequired,
+  onUserLoaded: PropTypes.func,
+};
+
+AUProfileContainerComponent.displayName = 'AUProfileContainerComponent';
+export default AUProfileContainerComponent;

package/src/components/profile/AUProfileHooks.js

@@ -1,30 +1,30 @@
-/* eslint-env browser */
-import { useState, useEffect } from 'react';
-
-const useProfileForm = (saved, history, lang, callback = () => { }) => {
-  const onCancel = () => {
-    history.push(`/${lang}/profile`);
-    callback();
-  };
-
-  useEffect(() => {
-    if (saved) {
-      onCancel();
-    }
-  });
-
-  return [onCancel];
-};
-
-const useMobilePrefix = (splitPhoneNumber, countryCodes, phone) => {
-  const { prefix: p, number: n } = splitPhoneNumber(countryCodes, phone);
-  const [prefix, setPrefix] = useState(p);
-  const [mobile, setMobile] = useState(n);
-
-  return [prefix, mobile, setPrefix, setMobile];
-};
-
-export {
-  useProfileForm,
-  useMobilePrefix,
-};
+/* eslint-env browser */
+import { useState, useEffect } from 'react';
+
+const useProfileForm = (saved, history, lang, callback = () => { }) => {
+  const onCancel = () => {
+    history.push(`/${lang}/profile`);
+    callback();
+  };
+
+  useEffect(() => {
+    if (saved) {
+      onCancel();
+    }
+  });
+
+  return [onCancel];
+};
+
+const useMobilePrefix = (splitPhoneNumber, countryCodes, phone) => {
+  const { prefix: p, number: n } = splitPhoneNumber(countryCodes, phone);
+  const [prefix, setPrefix] = useState(p);
+  const [mobile, setMobile] = useState(n);
+
+  return [prefix, mobile, setPrefix, setMobile];
+};
+
+export {
+  useProfileForm,
+  useMobilePrefix,
+};