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

package/src/components/profile/AUProfileItemComponent.js

@@ -1,54 +1,54 @@
-/* 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;
+/* 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 +1,131 @@
-/* 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;
+/* 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.js → AUProfileLoginComponent.tsx}

@@ -1,13 +1,12 @@
 /* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
-const AUProfileLoginComponent = ({
+const AUProfileLoginComponent: FC<AUProfileLoginComponentProps> = ({
   loggedIn,
   loginUri,
   children,
   text,
-}) => {
+}: AUProfileLoginComponentProps) => {
   if (!loggedIn) {
     return (
       <a
@@ -23,19 +22,5 @@ const AUProfileLoginComponent = ({
   return children;
 };
 
-AUProfileLoginComponent.defaultProps = {
-  loggedIn: false,
-  loginUri: '',
-  lang: 'da',
-};
-
-AUProfileLoginComponent.propTypes = {
-  loggedIn: PropTypes.bool,
-  loginUri: PropTypes.string,
-  children: PropTypes.element.isRequired,
-  lang: PropTypes.string,
-  text: PropTypes.string.isRequired,
-};
-
 AUProfileLoginComponent.displayName = 'AUProfileLoginComponent';
 export default AUProfileLoginComponent;