@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/AvailableNews.js

@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import _ from 'lodash';
+import { withRouter } from 'react-router';
+import FontAwesome from 'react-fontawesome';
+import { newsLoaded, removeNews } from '../../actions';
+import { newsletterActions } from '../../webapi';
+import { checkLoggedIn } from '../../session';
+import { COLOUR_BRANDING_OFF } from '../../js';
+import { values } from '../../feature.config';
+
+class ListNewsletter extends Component {
+  state = {
+    newsletterEntries: [],
+    sortColumn: 'DateUnix', // column to sort by
+    sortDesc: false, // if true, sort descending rather than ascending
+    now: moment.utc(),
+    onlyFuture: true,
+    selectedId: '',
+    checkingPublished: false,
+  };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+  }
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  getData() {
+    newsletterActions.getAvailableNews().then((res) => {
+      this.setState({
+        newsletterEntries: res.data,
+      });
+    });
+  }
+
+  sortByCol(col) {
+    if (this.state.sortColumn === col) {
+      this.setState({
+        sortDesc: !this.state.sortDesc,
+      });
+    } else {
+      this.setState({
+        sortColumn: col,
+        sortDesc: false,
+      });
+    }
+  }
+
+  openContent = (e) => {
+    const selectedId = e.target.id;
+    this.setState({ checkingPublished: true, selectedId });
+    newsletterActions.getPublishedAvailableNews(this.props.auth.site, selectedId).then((res) => {
+      this.setState({ checkingPublished: false, selectedId: '' }, () => {
+        if (res.data && res.data.length > 0) {
+          if (!window.confirm(values.textThisPostHasPreviouslyBeenPublished)) return;
+        }
+        this.props.history.push(`${values.routePublishAvailableNews}${selectedId}`);
+      });
+    });
+  };
+
+  renderItem(n) {
+    const { checkingPublished, selectedId } = this.state;
+    return (
+      <div className="newsTile" key={n.RowId}>
+        <div className="newsTile_image" style={{ backgroundImage: `url(${n.Image})` }}></div>
+        <div className="newsTile_bottom">
+          <div className="newsTile_tagDate">
+            <p className="newsTile_date">{moment.utc(n.Timestamp).local().format('DD-MM-YYYY')}</p>
+            <p className="newsTile_tag"></p>
+          </div>
+          <a onClick={this.openContent} id={n.RowId} className="newsTile_title">
+            {n.Title}
+          </a>
+          {checkingPublished && selectedId === n.RowId && <FontAwesome style={styles.spinner} name="spinner fa-pulse fa-fw" />}
+          {n.Publisher && <p className="newsTile_publisher">{n.Publisher.Title}</p>}
+          {n.Publisher && <img src={n.Publisher.Image} alt="Publisher" className="newsTile_publisherImage" />}
+        </div>
+      </div>
+    );
+  }
+
+  renderContent() {
+    let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
+    if (this.state.sortDesc) {
+      source.reverse();
+    }
+    source = _.filter(source, (ev) => {
+      if (!ev) {
+        return false;
+      }
+      return true;
+    });
+    return source.map((n) => {
+      return this.renderItem(n);
+    });
+  }
+
+  render() {
+    return <div style={{ minWidth: '100%' }}>{this.renderContent()}</div>;
+  }
+}
+
+const styles = {
+  spinner: {
+    marginLeft: 2,
+    fontSize: 18,
+    color: COLOUR_BRANDING_OFF,
+  },
+};
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    news: state[values.reducerKey].news,
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { newsLoaded, removeNews })(withRouter(ListNewsletter));