@aarhus-university/au-lib-react-components 8.20.0 → 8.80.0

package/src/{components → layout-2016/components}/databox/DataBoxStackedAssociationComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 const DataBoxStackedAssociationComponent = (props) => {
   const { assoc } = props;
@@ -44,10 +44,6 @@ const DataBoxStackedAssociationComponent = (props) => {
   );
 };
 
-DataBoxStackedAssociationComponent.defaultProps = {
-
-};
-
 DataBoxStackedAssociationComponent.propTypes = {
   assoc: PropTypes.shape({
     items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,

package/src/{components → layout-2016/components/diagramme}/AUDiagrammeComponent.js

@@ -2,7 +2,6 @@
 /* eslint no-mixed-operators: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 
 const diagrammeLabels = {
   da: {
@@ -82,16 +81,16 @@ class AUDiagrammeComponent extends React.PureComponent {
     response.lines.forEach((value, key) => {
       promises.push(new Promise((resolve) => {
         const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=GetStudiediagramData&lang=en&allowOrigin=true&linjeid=${value.id}`;
-        axios.get(url).then((promise) => {
-          const periodType = promise.data.DiagramMetaData.DATA[0] ? promise.data.DiagramMetaData.DATA[0][3] : '';
+        fetch(url).then((promise) => promise.json()).then((data) => {
+          const periodType = data.DiagramMetaData.DATA[0] ? data.DiagramMetaData.DATA[0][3] : '';
           const node = {
             name: lang === 'da' ? value.name : value.nameEnglish,
             periodType,
-            table: AUDiagrammeComponent.diagrammeParse(promise.data, lang),
-            list: AUDiagrammeComponent.diagrammeParse(promise.data, lang, 'list'),
+            table: AUDiagrammeComponent.diagrammeParse(data, lang),
+            list: AUDiagrammeComponent.diagrammeParse(data, lang, 'list'),
           };
           nodes[key] = node;
-          resolve(promise.data);
+          resolve(data);
         });
       }));
     });

package/src/{components → layout-2016/components}/flowbox/FlowBoxComponent.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FlowBoxPhoneComponent from './FlowBoxPhoneComponent';
-import { flowboxLabels as labels } from '../../lib/i18n';
+import { flowboxLabels as labels } from '../../../lib/i18n';
 
 class FlowBoxComponent extends React.Component {
   constructor(props) {
@@ -20,23 +20,23 @@ class FlowBoxComponent extends React.Component {
     this.handleSelectChange = this.handleSelectChange.bind(this);
   }
 
-  nextNode(child) {
+  handleSelectChange(event) {
+    const { node } = this.state;
+    const child = node.children.find((n) => n.name === event.target.value);
     this.setState({
       node: child,
     });
   }
 
-  prevNode(node) {
+  nextNode(child) {
     this.setState({
-      node: node.parent,
+      node: child,
     });
   }
 
-  handleSelectChange(event) {
-    const { node } = this.state;
-    const child = node.children.find((n) => n.name === event.target.value);
+  prevNode(node) {
     this.setState({
-      node: child,
+      node: node.parent,
     });
   }
 

package/src/{components → layout-2016/components}/flowbox/FlowBoxPhoneComponent.js

@@ -1,9 +1,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { flowboxLabels as labels } from '../../lib/i18n';
+import AUSpinnerComponent from '../common/AUSpinnerComponent';
+import { flowboxLabels as labels } from '../../../lib/i18n';
 
 class FlowBoxPhoneComponent extends React.Component {
   constructor(props) {
@@ -16,8 +15,7 @@ class FlowBoxPhoneComponent extends React.Component {
   componentDidMount() {
     const { phone } = this.props;
     const iPureUrl = `https://ipure.nfit.au.dk/searchPeople.php?mode=json&q=${phone}`;
-    axios.get(iPureUrl).then((promise) => {
-      const persons = promise.data;
+    fetch(iPureUrl).then((promise) => promise.json()).then((persons) => {
       this.setState({
         persons,
       }, () => {

package/src/{components → layout-2016/components}/profile/AUProfileAvatar2016Component.js

@@ -1,8 +1,11 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from './AUProfileWidgetComponent';
-import AUUserContextComponent from '../context/AUUserContextComponent';
+import AUProfileWidgetComponent from '../../../components/profile/AUProfileWidgetComponent';
+
+// TODO: Re-implement portal context i staff portal and mitstudie
+//  before upgrading this lib-component!
+const AUUserContextComponent = null;
 
 const AUProfileAvatar2016Component = ({
   lang,
@@ -63,6 +66,7 @@ const AUProfileAvatar2016Component = ({
         onLoad(userContext);
       }}
       handleError={(status, json) => {
+        // eslint-disable-next-line no-console
         console.log(status, json);
       }}
       spinner={false}

package/src/{components → layout-2016/components}/universe/StaffTopComponent.js

@@ -6,10 +6,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import AUCollapsibleComponent from '../AUCollapsibleComponent';
-import AUProfileLoginComponent from '../profile/AUProfileLoginComponent';
+import AUCollapsibleComponent from '../common/AUCollapsibleComponent';
+import AUProfileLoginComponent from '../../../components/profile/AUProfileLoginComponent';
 import AUProfileAvatar2016Component from '../profile/AUProfileAvatar2016Component';
-import { getCookie, setCookie } from '../../lib/helpers';
+import { getCookie, setCookie } from '../../../lib/helpers';
 
 const parseBurgerLinks = (elements) => {
   const links = [];
@@ -94,6 +94,7 @@ class StaffTopComponent extends React.Component {
             onLoad({ ...user, ...{ auId: json.auId } });
           });
         }).catch((err) => {
+          // eslint-disable-next-line no-console
           console.log(err);
         });
     }

package/src/{components → layout-2016/components}/universe/UniverseContainerComponent.js

@@ -1,7 +1,6 @@
 /* eslint-env browser */
 import React, { useState } from 'react';
-import axios from 'axios';
-import { universeLabels, profileLabels } from '../../lib/i18n';
+import { universeLabels, profileLabels } from '../../../lib/i18n';
 import StaffTopComponent from './StaffTopComponent';
 import StudentTopComponent from './StudentTopComponent';
 
@@ -26,9 +25,11 @@ const UniverseContainerComponent = () => {
         lang={lang}
         user={user}
         promiseHandler={(callback) => {
-          axios.get(universeGlobalContentPath).then((promise) => {
-            callback(promise.data);
-          });
+          fetch(universeGlobalContentPath).then(
+            (promise) => promise.json(),
+          ).then(
+            (data) => callback(data),
+          );
         }}
         onLoad={(context) => {
           setUser(context);
@@ -45,9 +46,11 @@ const UniverseContainerComponent = () => {
         lang={lang}
         user={user}
         promiseHandler={(callback) => {
-          axios.get(universeGlobalContentPath).then((promise) => {
-            callback(promise.data);
-          });
+          fetch(universeGlobalContentPath).then(
+            (promise) => promise.json(),
+          ).then(
+            (data) => callback(data),
+          );
         }}
         universeLabels={universeLabels}
         profileLabels={profileLabels}

package/src/layout-2016/lib/all.js

@@ -0,0 +1,3 @@
+import '../../styles/app.scss';
+import './au-databox';
+import './au-alphabox';

package/src/{lib → layout-2016/lib}/au-alphabox.js

@@ -89,9 +89,7 @@ class AUAlphabox {
         const mountNode = document.querySelector(box.config.container);
         const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
         if (visible) {
-          ReactDOM.render(
-            <AlphaBoxComponent box={box} />, mountNode,
-          );
+          ReactDOM.render(<AlphaBoxComponent box={box} />, mountNode);
           box.loaded = true;
         }
       }

package/src/{lib → layout-2016/lib}/au-databox.js

@@ -6,7 +6,6 @@
 /* eslint-env browser */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import axios from 'axios';
 import DataBoxComponent from '../components/databox/DataBoxComponent';
 
 const defaultOptions = {
@@ -58,8 +57,8 @@ class AUDataboxParser {
       const promises = [];
       sourceArr.forEach((s) => {
         promises.push(new Promise((resolve) => {
-          axios.get(s).then((promise) => {
-            resolve(promise.data);
+          fetch(s).then((promise) => promise.json()).then((data) => {
+            resolve(data);
           });
         }));
       });
@@ -380,12 +379,10 @@ class AUDatabox {
           box.config.stacked = true;
         }
         if (visible) {
-          ReactDOM.render(
-            <DataBoxComponent
-              box={box}
-              parse={parser[box.data.mode]}
-            />, mountNode,
-          );
+          ReactDOM.render(<DataBoxComponent
+            box={box}
+            parse={parser[box.data.mode]}
+          />, mountNode);
           box.loaded = true;
         }
 

package/src/{lib → layout-2016/lib}/au-diagramme.js

@@ -4,8 +4,7 @@
 /* eslint-env browser */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import axios from 'axios';
-import AUDiagrammeComponent from '../components/AUDiagrammeComponent';
+import AUDiagrammeComponent from '../components/diagramme/AUDiagrammeComponent';
 
 const defaultOptions = {
   config: {
@@ -64,8 +63,7 @@ class AUDiagramme {
       table.id = i;
       AUDiagramme.mergeOptions(table);
       const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=getLinjeListByDokordningId&tjekForVisningIstudieDiagram=true&allowOrigin=true&dokordningId=${table.config.courseID}`;
-      axios.get(url).then((promise) => {
-        const { data } = promise;
+      fetch(url).then((promise) => promise.json()).then((data) => {
         const mountNode = document.querySelector(table.config.container);
         if (mountNode) {
           ReactDOM.render(

package/src/{lib → layout-2016/lib}/au-flowbox.js

@@ -85,9 +85,7 @@ class AUFlowbox {
       };
       AUFlowbox.parse(box);
       const mountNode = document.querySelector(box.config.container);
-      ReactDOM.render(
-        <FlowBoxComponent box={box} lang={this.lang} />, mountNode,
-      );
+      ReactDOM.render(<FlowBoxComponent box={box} lang={this.lang} />, mountNode);
     }
   }
 }

package/src/lib/{helpers.js → helpers.ts}

@@ -1,7 +1,8 @@
 /* eslint-env browser */
 /* NO IMPORTS! */
 
-const { serviceScopeProfile } = window; // Sættes pr. webapp
+// eslint-disable-next-line no-control-regex
+const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
 
 const sortAlphaObj = (a, b) => {
   if (typeof a.name !== 'undefined' && typeof b.name !== 'undefined') {
@@ -10,7 +11,7 @@ const sortAlphaObj = (a, b) => {
   return 0;
 };
 
-const isElementInViewport = (element) => {
+const isElementInViewport = (element: HTMLElement): boolean => {
   if (element === null) {
     return false;
   }
@@ -23,7 +24,7 @@ const isElementInViewport = (element) => {
     && rect.top < (window.innerHeight || document.documentElement.clientHeight);
 };
 
-const isElementPartlyInViewport = (element) => {
+const isElementPartlyInViewport = (element: HTMLElement): boolean => {
   let top = element.offsetTop;
   let left = element.offsetLeft;
   const width = element.offsetWidth;
@@ -31,7 +32,7 @@ const isElementPartlyInViewport = (element) => {
 
   let offsetElement = element;
   while (offsetElement.offsetParent) {
-    offsetElement = element.offsetParent;
+    offsetElement = element.offsetParent as HTMLElement;
     top += element.offsetTop;
     left += element.offsetLeft;
   }
@@ -44,7 +45,13 @@ const isElementPartlyInViewport = (element) => {
   );
 };
 
-const setCookie = (cookieName, value, maxAge = null, exdays = null, path = ';path=/;domain=au.dk') => {
+const setCookie = (
+  cookieName: string,
+  value: string,
+  maxAge: number | null = null,
+  exdays: number | null = null,
+  path = ';path=/;domain=au.dk',
+): void => {
   let cookieValue = encodeURI(value);
   if (exdays != null) {
     const exdate = new Date();
@@ -57,8 +64,8 @@ const setCookie = (cookieName, value, maxAge = null, exdays = null, path = ';pat
   document.cookie = `${cookieName}=${cookieValue}${path}`;
 };
 
-const getCookie = (cookieName) => {
-  let cookieValue = document.cookie;
+const getCookie = (cookieName: string): string | null => {
+  let cookieValue: string | null = document.cookie;
   let cookieStart = cookieValue.indexOf(` ${cookieName}=`);
   if (cookieStart === -1) {
     cookieStart = cookieValue.indexOf(`${cookieName}=`);
@@ -76,7 +83,7 @@ const getCookie = (cookieName) => {
   return cookieValue;
 };
 
-const addToSessionStorage = (key, data) => {
+const addToSessionStorage = (key: string, data: unknown): unknown => {
   if (window.sessionStorage) {
     sessionStorage.setItem(key, JSON.stringify(data));
   }
@@ -84,7 +91,7 @@ const addToSessionStorage = (key, data) => {
   return data;
 };
 
-const getFromSessionStorage = (key) => {
+const getFromSessionStorage = (key: string): unknown | null => {
   if (window.sessionStorage) {
     const data = sessionStorage.getItem(key);
     if (data) {
@@ -95,7 +102,7 @@ const getFromSessionStorage = (key) => {
   return null;
 };
 
-const addToLocalStorage = (key, data) => {
+const addToLocalStorage = (key: string, data: unknown): unknown => {
   if (window.localStorage) {
     localStorage.setItem(key, JSON.stringify(data));
   }
@@ -103,7 +110,7 @@ const addToLocalStorage = (key, data) => {
   return data;
 };
 
-const getFromLocalStorage = (key) => {
+const getFromLocalStorage = (key: string): unknown | null => {
   if (window.localStorage) {
     const data = localStorage.getItem(key);
     if (data) {
@@ -114,35 +121,8 @@ const getFromLocalStorage = (key) => {
   return null;
 };
 
-const setContextInSession = (key, data, clearPrevious = true) => {
-  if (clearPrevious) {
-    Object.entries(window.sessionStorage).forEach((entry) => {
-      const entryKey = entry[0];
-      if (entryKey.includes('user-context')) {
-        window.sessionStorage.removeItem(entryKey);
-      }
-    });
-  }
-  window.sessionStorage.setItem(`user-context-${key}`, data);
-};
-
-const getContextFromSession = (key = '', any = false) => {
-  if (any) {
-    let foundContext = null;
-    Object.entries(window.sessionStorage).forEach((entry) => {
-      const entryKey = entry[0];
-      if (entryKey.includes('user-context')) {
-        foundContext = window.sessionStorage.getItem(entryKey);
-      }
-    });
-    return foundContext;
-  }
-
-  return window.sessionStorage.getItem(`user-context-${key}`);
-};
-
 // Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
-const setCaretPosition = (element, pos) => {
+const setCaretPosition = (element: HTMLInputElement, pos: number): void => {
   // Modern browsers
   if (element && element.setSelectionRange) {
     element.focus();
@@ -150,23 +130,26 @@ const setCaretPosition = (element, pos) => {
   }
 };
 
-const splitPhoneNumber = (countryCodes, phoneNumber) => {
-  const countryCodeFound = (code) => countryCodes.filter(
+const splitPhoneNumber = (countryCodes: ICountryCode[], phoneNumber: string): IPhoneNumber => {
+  const countryCodeFound = (code: string) => countryCodes.filter(
     (x) => x.code === parseInt(code, 10),
   ).length > 0;
 
-  const findPrefix = () => {
-    const skip = '+';
-    let count = 1;
-    let prefix = countryCodes.find((x) => x.important).code;
-    while (count < phoneNumber.length) {
-      const split = phoneNumber.substring(skip.length, skip.length + count);
-      if (countryCodeFound(split)) {
-        prefix = split;
+  const findPrefix = (): string => {
+    if (countryCodes.length > 0) {
+      const skip = '';
+      let count = 1;
+      let prefix = countryCodes.find((x) => x.important)?.code;
+      while (count < phoneNumber.length) {
+        const split = phoneNumber.substring(skip.length, skip.length + count);
+        if (countryCodeFound(split)) {
+          prefix = parseInt(split, 10);
+        }
+        count += 1;
       }
-      count += 1;
+      return skip + prefix;
     }
-    return skip + prefix;
+    return '';
   };
 
   const prefix = findPrefix();
@@ -176,25 +159,21 @@ const splitPhoneNumber = (countryCodes, phoneNumber) => {
   };
 };
 
-const prettyPrintPhone = (countryCodes, phone) => {
+const prettyPrintPhone = (countryCodes: ICountryCode[], phone: string) => {
   if (phone) {
     const { prefix, number } = splitPhoneNumber(countryCodes, phone);
-    return `${prefix} ${number.match(/\d{1,2}/g).join(' ')}`;
+    if (prefix) {
+      return `${prefix} ${number?.match(/\d{1,2}/g)?.join(' ')}`;
+    }
+    return number?.match(/\d{1,2}/g)?.join(' ');
   }
   return '';
 };
 
-const getAccessToken = (auAuth, serviceScope, callback) => {
-  auAuth.getAccessToken([serviceScope]).then((accessToken) => {
-    callback(accessToken.accessToken);
-  });
-};
-
-const parseError = (errorArray) => errorArray.map((e) => e.errorMessage).join(', ');
-
 const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
 
 export {
+  emailRegex,
   sortAlphaObj,
   isElementInViewport,
   isElementPartlyInViewport,
@@ -205,12 +184,7 @@ export {
   addToSessionStorage,
   getFromSessionStorage,
   setCaretPosition,
-  getAccessToken,
-  serviceScopeProfile,
   splitPhoneNumber,
   prettyPrintPhone,
-  parseError,
   scrollTo,
-  setContextInSession,
-  getContextFromSession,
 };

package/src/lib/hooks.ts

@@ -0,0 +1,33 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+
+const useModal = (
+  domId: string,
+  initialState: boolean,
+  showCondition = true,
+  hideCondition = false,
+  closeable = true,
+): [IModal, (modal: IModal) => void] => {
+  const [modal, setModal] = useState<IModal>({ modal: initialState, sender: null });
+
+  useEffect(() => {
+    if (modal.modal && modal.sender && showCondition) {
+      showModal(domId, modal.sender, () => {
+        setModal({ modal: false, sender: null });
+      }, closeable);
+    }
+
+    if (modal.modal && modal.sender && hideCondition) {
+      hideModal(domId, modal.sender, () => {
+        setModal({ modal: false, sender: null });
+      });
+    }
+  });
+
+  return [modal, setModal];
+};
+
+export {
+  useModal,
+};