@aarhus-university/au-lib-react-components 10.19.0 → 10.19.1

package/src/components/profile/AUProfileContainerComponent.js

@@ -1,283 +0,0 @@
-/* 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 +0,0 @@
-/* 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,
-};

package/src/components/profile/AUProfileItemComponent.js

@@ -1,54 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AUProfileItemComponent = ({
-  header,
-  values,
-  empty,
-  linkElement,
-  appendix,
-}) => {
-  const renderValues = values.map((value, i) => <div key={`${value}-${i}`} className="settings-list__item__value">{value}</div>);
-  const renderEmpty = empty.map((e) => <div key={e} className="settings-list__item__value settings-list__item__value--empty">{e}</div>);
-  return (
-    <li className="settings-list__item">
-      {(() => {
-        if (appendix) {
-          return (
-            <div className="settings-list__item__label settings-list__item__label--with-appendix">
-              <span>{header}</span>
-              {appendix}
-            </div>
-          );
-        }
-        return (
-          <div className="settings-list__item__label">
-            {header}
-          </div>
-        );
-      })()}
-      <div className="settings-list__item__values">
-        {renderValues}
-        {renderEmpty}
-      </div>
-      {linkElement}
-    </li>
-  );
-};
-
-AUProfileItemComponent.defaultProps = {
-  empty: [],
-  appendix: null,
-};
-
-AUProfileItemComponent.propTypes = {
-  header: PropTypes.string.isRequired,
-  values: PropTypes.arrayOf(PropTypes.string).isRequired,
-  empty: PropTypes.arrayOf(PropTypes.string),
-  linkElement: PropTypes.element.isRequired,
-  appendix: PropTypes.element,
-};
-
-AUProfileItemComponent.displayName = 'AUProfileItemComponent';
-export default AUProfileItemComponent;

package/src/components/profile/AUProfileLanguageComponent.js

@@ -1,131 +0,0 @@
-/* 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';
-
-const AUProfileLanguageComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  preferredLanguage: pPreferredLanguage,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const [preferredLanguage, setLanguage] = useState(pPreferredLanguage);
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-
-  useEffect(() => {
-    scrollTo();
-    dismissMessages();
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerLanguage}</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].languageLegend}
-            <div className="form-info__hint">
-              {profileLabels[lang].legendNameHint}
-            </div>
-          </div>
-        </legend>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="language-da">
-            Dansk
-          </label>
-          <input
-            type="radio"
-            id="language-da"
-            checked={preferredLanguage === 'da'}
-            onChange={() => {
-              setLanguage('da');
-            }}
-            disabled={saving}
-          />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="language-en">
-            English
-          </label>
-          <input
-            type="radio"
-            id="language-en"
-            checked={preferredLanguage === 'en'}
-            onChange={() => {
-              setLanguage('en');
-            }}
-            disabled={saving}
-          />
-        </div>
-      </fieldset>
-      <AUSubmitButtonContainerComponent
-        lang={pPreferredLanguage}
-        disabled={saving}
-        onSubmit={(e) => {
-          e.preventDefault();
-          onSave({
-            preferredLanguage,
-          }, onSaveAction);
-        }}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileLanguageComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdatePreferredLanguage`;
-      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();
-  },
-};
-
-AUProfileLanguageComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  preferredLanguage: 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,
-};
-
-AUProfileLanguageComponent.displayName = 'AUProfileLanguageComponent';
-export default AUProfileLanguageComponent;

package/src/components/profile/AUProfileLoginComponent.tsx

@@ -1,26 +0,0 @@
-/* eslint-env browser */
-import React, { FC } from 'react';
-
-const AUProfileLoginComponent: FC<AUProfileLoginComponentProps> = ({
-  loggedIn,
-  loginUri,
-  children,
-  text,
-}: AUProfileLoginComponentProps) => {
-  if (!loggedIn) {
-    return (
-      <a
-        className="nav__item nav__item--icon nav__item--icon--right nav__item--icon--always-show-label"
-        data-icon=""
-        href={loginUri}
-      >
-        {text}
-      </a>
-    );
-  }
-
-  return children;
-};
-
-AUProfileLoginComponent.displayName = 'AUProfileLoginComponent';
-export default AUProfileLoginComponent;