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

package/src/{components → layout-2016/components}/alphabox/AlphaBoxComponent.js

@@ -1,9 +1,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
 import AlphaBoxContentComponent from './AlphaBoxContentComponent';
-import AutoSuggestComponent from '../AutoSuggestComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
 import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
 
 class AlphaBoxComponent extends React.Component {
@@ -24,19 +23,22 @@ class AlphaBoxComponent extends React.Component {
       if (data.itemsOnly) {
         data.source += '?itemsOnly=true';
       }
-      axios.get(data.source).then((promise) => {
-        const { data: pData } = promise;
+      fetch(data.source).then((promise) => promise.json()).then((pData) => {
         this.setState({ items: pData.items });
       });
     }
   }
 
-  getSuggestions(value, collection, callback) {
+  getSuggestions(value, _, callback) {
     const { items } = this.state;
     const inputValue = value.trim().toLowerCase();
     const inputLength = inputValue.length;
     callback(inputLength < 2 ? []
-      : items.filter((x) => x.name.toLowerCase().indexOf(inputValue) > -1)
+      : items.filter(
+        (x) => x.name.toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/-/ig, ' ').toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/ /ig, '-').toLowerCase().indexOf(inputValue) > -1,
+      )
         .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
   }
 
@@ -66,31 +68,16 @@ class AlphaBoxComponent extends React.Component {
           <h2>
             <a href={config.url}>{config.title}</a>
           </h2>
-          {(() => {
-            if (config.description !== '') {
-              return <p>{config.description}</p>;
-            }
-            return null;
-          })()}
-          {(() => {
-            if (config.links.length > 0) {
-              return (
-                <ul className="quicklinks resetlist">
-                  {renderLinks}
-                </ul>
-              );
-            }
-            return null;
-          })()}
           <AlphaBoxContentComponent
             items={items}
             linkColor={box.background.linkColor}
+            noResultsText={config.noResultsAlphabet}
+            noResultsUri={config.noResultsUri}
           />
-          <AutoSuggestComponent
+          <AUAutoSuggestComponent
             placeholder={box.search.placeHolder}
-            setQuery={() => { }}
             setResults={(_items) => {
-              if (_items.length === 1 && _items[0].url) {
+              if (_items.length >= 1 && _items[0].url) {
                 window.location.href = _items[0].url;
               }
             }}
@@ -98,7 +85,20 @@ class AlphaBoxComponent extends React.Component {
             getSuggestions={this.getSuggestions}
             getSuggestionValue={(suggestion) => suggestion.name}
             renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
+            noResultsText={config.noResultsSearch}
           />
+          {
+            config.description !== '' && (
+              <h3>{config.description}</h3>
+            )
+          }
+          {
+            config.links.length > 0 && (
+              <ul className="quicklinks resetlist">
+                {renderLinks}
+              </ul>
+            )
+          }
         </div>
       </div>
     );
@@ -124,6 +124,9 @@ AlphaBoxComponent.propTypes = {
         url: PropTypes.string.isRequired,
       })).isRequired,
       title: PropTypes.string.isRequired,
+      noResultsAlphabet: PropTypes.string.isRequired,
+      noResultsSearch: PropTypes.string.isRequired,
+      noResultsUri: PropTypes.string.isRequired,
     }).isRequired,
     background: PropTypes.shape({
       color: PropTypes.string.isRequired,

package/src/{components → layout-2016/components}/alphabox/AlphaBoxContentComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class AlphaBoxContentComponent extends React.Component {
   constructor(props) {
@@ -13,7 +13,9 @@ class AlphaBoxContentComponent extends React.Component {
 
   render() {
     const { letterIndex } = this.state;
-    const { items, linkColor } = this.props;
+    const {
+      items, linkColor, noResultsText, noResultsUri,
+    } = this.props;
 
     const renderLetters = this.letters.map((l, i) => {
       const available = items.filter(
@@ -96,29 +98,38 @@ class AlphaBoxContentComponent extends React.Component {
         <ul className="letters">
           {renderLetters}
         </ul>
-        {(() => {
-          if (letterIndex > -1) {
-            return (
-              <div>
-                <ul className="items">
-                  {renderItems}
-                </ul>
-              </div>
-            );
-          }
-          return null;
-        })()}
+        {
+          letterIndex > -1 && (
+            <div>
+              <ul className="items">
+                {renderItems}
+                {
+                  (noResultsText && noResultsUri) && (
+                    <li className="no-results"><a href={noResultsUri}>{noResultsText}</a></li>
+                  )
+                }
+              </ul>
+            </div>
+          )
+        }
       </div>
     );
   }
 }
 
+AlphaBoxContentComponent.defaultProps = {
+  noResultsText: '',
+  noResultsUri: '',
+};
+
 AlphaBoxContentComponent.propTypes = {
   linkColor: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   })).isRequired,
+  noResultsText: PropTypes.string,
+  noResultsUri: PropTypes.string,
 };
 
 AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';

package/src/{components → layout-2016/components/common}/AUCollapsibleComponent.js

@@ -1,28 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/**
- * AU Kollapserbart Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUCollapsibleComponent
-            key="collapse"
-            collapsed
-            header="Collapsible element"
-            level={2}
-            className="hide-for-small-only"
-            onClick={(collapsed, node) => {
-              this.setState({
-                spinnerVisible: !collapsed,
-              });
-            }}
-          >
-            <h1>Test</h1>
-          </AUCollapsibleComponent>
- * ```
- */
-
 class AUCollapsibleComponent extends React.Component {
   constructor(props) {
     super(props);

package/src/{components → layout-2016/components/common}/AUSpinnerComponent.js

@@ -1,30 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isElementInViewport } from '../lib/helpers';
-/**
- * AU Spinner Komponent
- * Bliver brugt til lazy-loading af elementer, der først skal indlæses når de er synlige.
- *
- * Eksempel:
- * ```jsx
- * <AUSpinnerComponent
-          domID={spinnerID}
-          visible={this.state.spinnerVisible}
-          columns="large-12 medium-12 small-12"
-          content={<h1>Hej</h1>}
-          loaded={this.state.spinnerLoaded}
-          loadingCondition
-          onLoad={() => {
-            setTimeout(() => {
-              this.setState({
-                spinnerLoaded: true,
-              });
-            }, 2000);
-          }}
-        />
- * ```
- */
+import { isElementInViewport } from '../../../lib/helpers';
 
 class AUSpinnerComponent extends React.Component {
   constructor(props) {

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

@@ -1,7 +1,7 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class DataBoxAlphabetComponent extends React.Component {
   constructor(props) {

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

@@ -1,8 +1,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
-import AUCollapsibleComponent from '../AUCollapsibleComponent';
+import { sortAlphaObj } from '../../../lib/helpers';
+import AUCollapsibleComponent from '../common/AUCollapsibleComponent';
 
 class DataBoxAssociationComponent extends React.Component {
   constructor(props) {

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

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import AutoSuggestComponent from '../AutoSuggestComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
 import DataBoxSuggestionComponent from './DataBoxSuggestionComponent';
 
 class DataBoxButtonComponent extends React.Component {
@@ -58,7 +59,7 @@ class DataBoxButtonComponent extends React.Component {
         return (
           <div className={classNames} key={i}>
             <span dangerouslySetInnerHTML={{ __html: b.text }} />
-            <AutoSuggestComponent
+            <AUAutoSuggestComponent
               placeholder={box.search.placeHolder}
               setQuery={() => { }}
               setResults={(items) => {
@@ -130,7 +131,10 @@ DataBoxButtonComponent.propTypes = {
   searchValue: PropTypes.string,
   setActive: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
-  button: PropTypes.shape({}).isRequired,
+  button: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+  }).isRequired,
   box: PropTypes.shape({
     background: PropTypes.shape({
       color: PropTypes.string.isRequired,

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

@@ -7,8 +7,8 @@ import DataBoxButtonComponent from './DataBoxButtonComponent';
 import DataBoxGroupingComponent from './DataBoxGroupingComponent';
 import DataBoxSearchResultComponent from './DataBoxSearchResultComponent';
 import DataBoxAlphabetComponent from './DataBoxAlphabetComponent';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { sortAlphaObj } from '../../lib/helpers';
+import AUSpinnerComponent from '../common/AUSpinnerComponent';
+import { sortAlphaObj } from '../../../lib/helpers';
 
 class DataBoxComponent extends React.Component {
   constructor(props) {

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

@@ -14,10 +14,12 @@ const DataBoxGroupingComponent = (props) => {
   } = props;
   let renderAssociations;
   if (stacked && grouping.associations.length === 1) {
+    // eslint-disable-next-line react/destructuring-assignment
     renderAssociations = props.grouping.associations.map(
       (a) => <DataBoxStackedAssociationComponent key={a.id} assoc={a} />,
     );
   } else {
+    // eslint-disable-next-line react/destructuring-assignment
     renderAssociations = props.grouping.associations.map((a, i) => {
       const open = expand
         || grouping.associations.length === 1

package/src/{components → layout-2016/components}/databox/DataBoxSearchResultComponent.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 DataBoxSearchResultComponent = (props) => {
   const { items, searchValue } = props;
@@ -23,10 +23,6 @@ const DataBoxSearchResultComponent = (props) => {
   );
 };
 
-DataBoxSearchResultComponent.defaultProps = {
-
-};
-
 DataBoxSearchResultComponent.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,

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);
     }
   }
 }