@aarhus-university/au-lib-react-components 8.20.2 → 8.82.0

package/src/components/news/NewsListComponent.js

@@ -1,291 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import EventLayout1Component from './EventLayout1Component';
-import EventLayout2Component from './EventLayout2Component';
-import EventLayout3Component from './EventLayout3Component';
-import NewsLayout1Component from './NewsLayout1Component';
-import NewsLayout2Component from './NewsLayout2Component';
-import NewsLayout3Component from './NewsLayout3Component';
-import NewsLayout4Component from './NewsLayout4Component';
-import NewsLayout5Component from './NewsLayout5Component';
-import NewsLayout6Component from './NewsLayout6Component';
-import NewsLayout7Component from './NewsLayout7Component';
-import NewsLayout8Component from './NewsLayout8Component';
-import NewsColumnsComponent from './NewsColumnsComponent';
-import NewsRSSComponent from './NewsRSSComponent';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsConfig } from '../../lib/au-news';
-
-class NewsListComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.pointer = -1;
-    this.layouts = [
-      <NewsLayout1Component />,
-      <NewsLayout2Component />,
-      <NewsLayout3Component />,
-      <NewsLayout4Component />,
-      <NewsLayout5Component />,
-      <NewsLayout6Component />,
-      <NewsLayout7Component />,
-      <NewsLayout8Component />,
-    ];
-
-    this.layoutsEvents = [
-      <EventLayout1Component />,
-      <EventLayout2Component />,
-      <EventLayout3Component />,
-    ];
-
-    const { list, elements } = props;
-
-    this.state = {
-      loading: true,
-      more: !list.noPageBrowser,
-      items: [],
-      elements,
-    };
-
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-    this.incrementPointer = this.incrementPointer.bind(this);
-  }
-
-  componentDidMount() {
-    this.setHeader();
-  }
-
-  getItems(index, amount, callback) {
-    const { list, lang } = this.props;
-    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=key&key=${list.feed_key}&index=${index}&amount=${(amount + (list.noPageBrowser === 0 ? 1 : 0))}&lang=${lang}${list.extra_param}&callback=?`;
-
-    // Axios does not support JSONP requests!
-    $.ajax({
-      url,
-      dataType: 'json',
-      jsonpCallback: url.hashCode(),
-      jsonp: true,
-      cache: true,
-      success: (items) => {
-        callback(items, items.length > amount && list.noPageBrowser === 0);
-      },
-    });
-  }
-
-  setHeader() {
-    const { list } = this.props;
-    list.header = document.querySelector(`#c${list.id} .csc-header h1`);
-    if (!list.header) {
-      list.header = document.querySelector(`#c${list.id} .csc-header h2`);
-    }
-    if (list.header) {
-      list.header.parentNode.classList.add('relative');
-    }
-  }
-
-  incrementPointer() {
-    // "Global" pointer til at holde styr på, hvor langt vi er nået igennem data
-    // til de forskellige elementer
-    this.pointer += 1;
-  }
-
-  handleLoadMore(e) {
-    e.preventDefault();
-    this.setState({
-      loading: true,
-    });
-
-    const { elements } = this.props;
-    let lastElement = elements[elements.length - 1];
-    if (Array.isArray(lastElement)) {
-      const temp = lastElement[lastElement.length - 1];
-      if (Array.isArray(temp)) {
-        lastElement = temp[temp.length - 1];
-      } else {
-        lastElement = temp;
-      }
-    }
-
-    const amount = 10;
-    const newElements = [];
-    for (let i = 0; i < amount; i += 1) {
-      newElements.push(lastElement);
-    }
-
-    const { items, elements: sElements } = this.state;
-    this.getItems(items.length - 1, amount, (_items, more) => {
-      this.setState({
-        items: items.slice(0, items.length - 1).concat(_items),
-        elements: sElements.concat(newElements),
-        loading: false,
-        more,
-      });
-    });
-  }
-
-  render() {
-    this.pointer = -1;
-    const {
-      list,
-      elements: pElements,
-      lang,
-      setItem,
-    } = this.props;
-    const {
-      items,
-      elements,
-      loading,
-      more,
-    } = this.state;
-    let isHeader = false;
-    const headerElementValue = list.feed_type === 'events' ? 3 : 6;
-    const renderElements = elements.map((e, j) => {
-      const key = j;
-      // Kolonne
-      if (Array.isArray(e)) {
-        let length = 0;
-        for (let i = 0; i < e.length; i += 1) {
-          for (let n = 0; n < e[i].length; n += 1) {
-            this.incrementPointer();
-            length += 1;
-          }
-        }
-
-        return (
-          <NewsColumnsComponent
-            key={key}
-            type={list.feed_type}
-            listid={list.id}
-            cols={e}
-            items={items.slice(j, j + length)}
-            setPopupItem={setItem}
-            incrementPointer={this.incrementPointer}
-            lang={lang}
-          />
-        );
-      }
-
-      // Ikke-kolonne
-      const element = parseInt(e, 10);
-      if (element === headerElementValue && !isHeader) {
-        isHeader = true;
-        const hItems = [];
-        for (let x = j; x < items.length; x += 1) {
-          // Høker-hack-fix af load more ved listevisning
-          // jf. FB84396 - der er givetvis stadig et issue, hvis listerne ligger i en kolonne...
-          if (parseInt(pElements[x], 10) === headerElementValue
-            || (!Number.isNaN(pElements[x]) && items.length - pElements.length > 2)) {
-            this.incrementPointer();
-            hItems.push(items[this.pointer]);
-          } else {
-            break;
-          }
-        }
-
-        if (list.feed_type === 'events') {
-          return (
-            <EventLayout3Component
-              key={key}
-              listid={list.id}
-              items={hItems}
-              setPopupItem={setItem}
-              lang={lang}
-            />
-          );
-        }
-
-        return (
-          <NewsLayout6Component
-            key={key}
-            listid={list.id}
-            items={hItems}
-            setPopupItem={setItem}
-            lang={lang}
-          />
-        );
-      }
-
-      if (element !== headerElementValue) {
-        this.incrementPointer();
-        isHeader = false;
-        const layoutsArray = list.feed_type === 'events' ? this.layoutsEvents : this.layouts;
-        return React.cloneElement(layoutsArray[element - 1], {
-          key,
-          item: items[this.pointer],
-          listid: list.id,
-          setPopupItem: setItem,
-          lang,
-        });
-      }
-
-      return null;
-    });
-
-    let syndication = null;
-    const syndicationNode = document.querySelector(`#c${list.id} .csc-header`);
-    if (syndicationNode && AUNewsConfig.useSyndication && list.feed_type !== 'events') {
-      syndication = ReactDOM.createPortal(
-        <NewsRSSComponent
-          url={`http:${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=xml&key=${list.feed_key}&lang=${lang}`}
-          lang={lang}
-        />,
-        syndicationNode,
-        '2',
-      );
-    }
-
-    return [
-      <div key={0}>
-        {renderElements}
-        {(() => {
-          if (more) {
-            return (
-              <button
-                type="button"
-                onClick={this.handleLoadMore}
-                className="button small"
-              >
-                {labels[lang].news.listLoadMore}
-              </button>
-            );
-          }
-          return null;
-        })()}
-      </div>,
-      <AUSpinnerComponent
-        key={1}
-        domID={`news-spinner-${list.id}`}
-        loaded={!loading}
-        loadingCondition={loading}
-        onLoad={() => {
-          this.getItems(0, list.amount, (_items, _more) => {
-            this.setState({ items: _items, loading: false, more: _more });
-          });
-        }}
-        content={<div />}
-      />,
-      syndication,
-    ];
-  }
-}
-
-NewsListComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  list: PropTypes.shape({
-    feed_key: PropTypes.string.isRequired,
-    noPageBrowser: PropTypes.bool.isRequired,
-    id: PropTypes.number.isRequired,
-    amount: PropTypes.number.isRequired,
-    extra_param: PropTypes.string.isRequired,
-    header: PropTypes.instanceOf(Element).isRequired,
-    feed_type: PropTypes.string.isRequired,
-  }).isRequired,
-  elements: PropTypes.arrayOf(PropTypes.number).isRequired,
-  setItem: PropTypes.func.isRequired,
-};
-
-NewsListComponent.displayName = 'NewsListComponent';
-export default NewsListComponent;