@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/ListNewsletterEntries.js

@@ -0,0 +1,234 @@
+import React, { Component } from 'react';
+import { Table } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import _ from 'lodash';
+import FontAwesome from 'react-fontawesome';
+import { Link } from 'react-router-dom';
+import { newsLoaded, removeNews } from '../../actions';
+import { newsletterActions } from '../../webapi';
+import { checkLoggedIn, validateAccess } from '../../session';
+import { Text } from '../../components/text';
+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,
+  };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+    this.updateProps(this.props);
+  }
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.updateProps(nextProps);
+  }
+
+  updateProps(props) {
+    this.setState({
+      newsletterEntries: props.news,
+    });
+  }
+
+  getData() {
+    newsletterActions.recursiveGetNews(this.props.auth.site).then((res) => {
+      if (!_.isEmpty(res) && res[0].Site === this.props.auth.site) {
+        this.props.newsLoaded(res);
+      }
+    });
+  }
+
+  sortByCol(col) {
+    if (this.state.sortColumn === col) {
+      this.setState({
+        sortDesc: !this.state.sortDesc,
+      });
+    } else {
+      this.setState({
+        sortColumn: col,
+        sortDesc: false,
+      });
+    }
+  }
+
+  removeNewsletterEntry(newsletter) {
+    if (window.confirm(values.textAreYouSureYouWantToDelete)) {
+      this.props.removeNews(newsletter.RowId);
+      newsletterActions
+        .deleteNewsletterEntry(this.props.auth.site, newsletter.RowId)
+        .then((res) => {
+          this.getData();
+        })
+        .catch((res) => {
+          alert('Something went wrong with the request. Please try again.');
+        });
+    }
+  }
+
+  renderNewsletter(source) {
+    // 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;
+    // });
+
+    // if (this.props.onlyFuture) {
+    //     const nownow = moment().startOf('month');
+    //     source = _.filter(source, (ev) => {
+    //         return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
+    //     });
+    // }
+
+    return source.map((ev) => {
+      if (ev != null) {
+        return (
+          <tr key={ev.RowId}>
+            <td>{moment.utc(ev.Timestamp).local().format('DD-MM-YYYY')}</td>
+            <td className="table-TitleColumn">
+              {ev.SourceId ? (
+                <span>{ev.Title}</span>
+              ) : (
+                <Link to={`${values.routeAddNewsletterEntry}/${ev.RowId}`}>
+                  <span>{ev.Title}</span>
+                </Link>
+              )}
+            </td>
+            <td className="table-options">
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                {validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) && (
+                  <Link to={`${values.routeNewsletterAnalytics}${ev.RowId}`}>
+                    <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 12, cursor: 'pointer' }} name="bar-chart" />
+                  </Link>
+                )}
+                {validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) && !ev.SourceId && (
+                  <Link to={`${values.routeAddNewsletterEntry}/${ev.RowId}`}>
+                    <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 12, cursor: 'pointer' }} name="pencil" />
+                  </Link>
+                )}
+                {validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) && (
+                  <a
+                    onClick={() => {
+                      this.removeNewsletterEntry(ev);
+                    }}
+                  >
+                    <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 8, cursor: 'pointer' }} name="minus-circle" />
+                  </a>
+                )}
+              </div>
+            </td>
+          </tr>
+        );
+      }
+      return null;
+    });
+  }
+
+  renderSort(col) {
+    if (col !== this.state.sortColumn) {
+      return null;
+    }
+    return <FontAwesome style={{ marginLeft: 5 }} name={this.state.sortDesc ? 'chevron-up' : 'chevron-down'} />;
+  }
+
+  sortIsActive(col) {
+    if (col !== this.state.sortColumn) {
+      return '';
+    }
+    return ' table--columnActive';
+  }
+
+  renderView(source) {
+    return (
+      <Table className="plussTable" striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th
+              className={`${this.sortIsActive('DateUnix')}`}
+              style={{ cursor: 'pointer', width: 140 }}
+              onClick={() => {
+                this.sortByCol('DateUnix');
+              }}
+            >
+              Date published{this.renderSort('DateUnix')}
+            </th>
+            <th
+              className={`${this.sortIsActive('Title')}`}
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                this.sortByCol('Title');
+              }}
+            >
+              Title{this.renderSort('Title')}
+            </th>
+            <th style={{ width: 70 }} />
+          </tr>
+        </thead>
+        <tbody>{this.renderNewsletter(source)}</tbody>
+      </Table>
+    );
+  }
+
+  renderEmpty() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 32 }}>
+        <div className="emptyState" />
+        <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
+          <Text type="h3">{values.textThereAreNoNews}</Text>
+        </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;
+    });
+
+    if (this.props.onlyFuture) {
+      const nownow = moment().startOf('month');
+      source = _.filter(source, (ev) => {
+        return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
+      });
+    }
+    // source = []
+    if (_.isEmpty(source)) {
+      return this.renderEmpty();
+    }
+    return this.renderView(source);
+  }
+
+  render() {
+    return <div style={{ minWidth: '100%' }}>{this.renderContent()}</div>;
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    news: state[values.reducerKey].news,
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { newsLoaded, removeNews })(ListNewsletter);

package/src/screens/Newsletter/NewsHub.js

@@ -0,0 +1,328 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import moment from 'moment';
+import FontAwesome from 'react-fontawesome';
+import { Header, AddButton, Button } from '../../components';
+import { isTheBest, validateAccess } from '../../session';
+import { newsLoaded, newsSubmissionsLoaded, setAuth } from '../../actions';
+import { newsletterActions } from '../../webapi';
+import { COLOUR_BRANDING_OFF, COLOUR_BRANDING_ACTION, TEXT_LIGHT } from '../../js';
+import ListNewsletterEntries from './ListNewsletterEntries';
+import NewsletterSubmissions from './NewsletterSubmissions';
+import NewsHubAnalytics from './NewsHubAnalytics';
+import AvailableNews from './AvailableNews';
+import { getUrlParams } from '../../helper';
+import { hasAvailableNews } from '../../config';
+import { Text } from '../../components/text';
+import { values } from '../../feature.config';
+
+class NewsHub extends Component {
+  constructor(props) {
+    super(props);
+
+    const params = getUrlParams();
+    let selectedSection = 'thisMonth';
+    if (params.tab) {
+      selectedSection = params.tab;
+    }
+
+    this.state = {
+      selectedSection,
+      location: '',
+
+      loadingAll: false,
+      loadingSubmissions: false,
+
+      submissionEntries: [],
+
+      allList: [],
+      thisMonth: [],
+      now: moment.utc(),
+      onlyFuture: true,
+      search: '',
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.updateProps(this.props);
+  }
+
+  componentDidMount() {
+    this.getData();
+    this.getSubmissions();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.updateProps(nextProps);
+  }
+
+  updateProps(props) {
+    const thisMonth = [];
+    const nownow = moment().startOf('month');
+
+    props.news.forEach((rep) => {
+      const isThisMonth = nownow.isSameOrBefore(moment.utc(rep.UnixTimestamp).local());
+      if (isThisMonth) {
+        thisMonth.push(rep);
+      }
+    });
+
+    this.setState({
+      allList: props.news,
+      thisMonth,
+      submissionEntries: props.submissions,
+    });
+  }
+
+  getData() {
+    this.setState({
+      loadingAll: true,
+    });
+    newsletterActions
+      .recursiveGetNews(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          loadingAll: false,
+        });
+        if (!_.isEmpty(res) && res[0].Site === this.props.auth.site) {
+          this.props.newsLoaded(res);
+        }
+      })
+      .catch((res) => {
+        this.setState({ loadingAll: false });
+      });
+  }
+
+  getSubmissions() {
+    this.setState({
+      loadingSubmissions: true,
+    });
+    newsletterActions
+      .getNewsletterSubmissions(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          loadingSubmissions: false,
+        });
+        if (res.data != null && !_.isEmpty(res.data) && res.data[0].Site === this.props.auth.site) {
+          this.props.newsSubmissionsLoaded(res.data);
+        }
+      })
+      .catch((res) => {
+        this.setState({ loadingSubmissions: false });
+      });
+  }
+
+  goToGenerate = () => {
+    this.props.history.push(values.routeGenerateNewsletter);
+  };
+
+  addNew() {
+    if (
+      validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) ||
+      validateAccess(this.props.auth.site, values.permissionNewsletterSubmit, this.props.auth)
+    ) {
+      this.props.history.push(values.routeAddNewsletterEntry);
+    }
+  }
+
+  canAddNew(isClass) {
+    if (validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth)) {
+      return isClass ? '' : true;
+    }
+    return isClass ? ' hub-sideContent-topButton--hide' : false;
+  }
+
+  getSideBarSectionColour(id) {
+    return this.state.selectedSection === id ? { backgroundColor: '#fff' } : {};
+  }
+
+  renderStats(gweg, loading) {
+    if (loading) {
+      return <FontAwesome style={styles.spinner} name="spinner fa-pulse fa-fw" />;
+    }
+    return gweg;
+  }
+
+  renderLeftBar() {
+    if (
+      validateAccess(this.props.auth.site, values.permissionNewsletterSubmit, this.props.auth) &&
+      !validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth)
+    ) {
+      return null;
+    }
+    return (
+      <div className="hub-sideContent">
+        {/* Top Add Button */}
+        <div className="hub-sideContent-topButton" />
+        <div style={{ paddingLeft: 15, width: '100%' }}>
+          {/* Title */}
+          <div className="fontMedium fontSize-36 text-dark" style={styles.sideBarTitleSection}>
+            {values.textTitleNews}
+          </div>
+          {/* Content */}
+          {/* Analytics */}
+          <div
+            onClick={() => {
+              this.setState({ selectedSection: 'Analytics' });
+            }}
+            className="sideBarSection"
+            style={this.getSideBarSectionColour('Analytics')}
+          >
+            <div className="fontMedium fontSize-36 text-dark" style={{ lineHeight: '50px' }}>
+              <FontAwesome name="line-chart" className="sideBarSection__icon" />
+            </div>
+            <div className="fontRegular fontSize-16 text-light lineHeight-22">Analytics</div>
+          </div>
+          {/* All Articles */}
+          <div
+            onClick={() => {
+              this.setState({ selectedSection: 'all' });
+            }}
+            className="sideBarSection"
+            style={this.getSideBarSectionColour('all')}
+          >
+            <div className="fontMedium fontSize-36 text-dark" style={{ lineHeight: '50px' }}>
+              {this.renderStats(this.state.allList.length, this.state.loadingAll)}
+            </div>
+            <div className="fontRegular fontSize-16 text-light lineHeight-22">All posts</div>
+          </div>
+          <div
+            onClick={() => {
+              this.setState({ selectedSection: 'thisMonth' });
+            }}
+            className="sideBarSection"
+            style={this.getSideBarSectionColour('thisMonth')}
+          >
+            <div className="fontMedium fontSize-36 text-dark" style={{ lineHeight: '50px' }}>
+              {this.renderStats(this.state.thisMonth.length, this.state.loadingAll)}
+            </div>
+            <div className="fontRegular fontSize-16 text-light lineHeight-22">This month</div>
+          </div>
+          {/* Article Submissions */}
+          {this.props.auth.site !== 'hq' && validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) && (
+            <div
+              onClick={() => {
+                this.setState({ selectedSection: 'submissions' });
+              }}
+              className="sideBarSection"
+              style={this.getSideBarSectionColour('submissions')}
+            >
+              <div
+                className="fontMedium fontSize-36"
+                style={{
+                  lineHeight: '50px',
+                  color: !this.state.loadingSubmissions && this.state.submissionEntries.length > 0 ? COLOUR_BRANDING_ACTION : TEXT_LIGHT,
+                }}
+              >
+                {this.renderStats(this.state.submissionEntries.length, this.state.loadingSubmissions)}
+              </div>
+              <div className="fontRegular fontSize-16 text-light lineHeight-22">Submissions</div>
+            </div>
+          )}
+          {hasAvailableNews && (
+            <div
+              onClick={() => {
+                this.setState({ selectedSection: 'available' });
+              }}
+              className="sideBarSection"
+              style={this.getSideBarSectionColour('available')}
+            >
+              <div className="fontMedium fontSize-36 text-dark" style={{ lineHeight: '50px' }}>
+                <FontAwesome name="newspaper-o" className="sideBarSection__icon" />
+              </div>
+              <div className="fontRegular fontSize-16 text-light lineHeight-22">Available posts</div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  renderEventSubmitButton() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', height: 'fit-content' }}>
+        <AddButton onClick={this.addNew.bind(this)} text="SUBMIT NEW POST" />
+        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 32 }}>
+          <div className="emptyState" />
+          <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
+            <Text type="h3">{values.textSubmitYourNewNewsPostHere}</Text>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderRight() {
+    if (
+      validateAccess(this.props.auth.site, values.permissionNewsletterSubmit, this.props.auth) &&
+      !validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth)
+    ) {
+      return this.renderEventSubmitButton();
+    }
+    if (this.state.selectedSection === 'Analytics') {
+      return <NewsHubAnalytics news={this.props.news} />;
+    }
+    if (this.state.selectedSection === 'submissions') {
+      return <NewsletterSubmissions />;
+    }
+    if (this.state.selectedSection === 'available') {
+      return <AvailableNews />;
+    }
+    return <ListNewsletterEntries onlyFuture={this.state.selectedSection === 'thisMonth'} />;
+  }
+
+  render() {
+    return (
+      <div className="hub-wrapperContainer">
+        {this.renderLeftBar()}
+        <div className="hub-headerContentWrapper">
+          <Header>
+            {this.canAddNew() && <AddButton onClick={this.addNew.bind(this)} text="NEW POST" />}
+
+            {isTheBest(this.props.auth, true) && (
+              <Button leftIcon="print" buttonType="outlined" onClick={this.goToGenerate} narrow isActive className="marginLeft-16">
+                {values.textPrintNewsletter}
+              </Button>
+            )}
+          </Header>
+          <div className="hub-contentWrapper">{this.renderRight()}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = {
+  sideBarTitleSection: {
+    lineHeight: '50px',
+    marginTop: 30,
+    marginBottom: 30,
+    paddingLeft: 24,
+  },
+  sideBarSection: {
+    weight: '100%',
+    minWidth: 200,
+    padding: 32,
+    paddingLeft: 24,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  spinner: {
+    fontSize: 32,
+    color: COLOUR_BRANDING_OFF,
+  },
+};
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    news: state[values.reducerKey].news,
+    submissions: state[values.reducerKey].submissions,
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { newsLoaded, newsSubmissionsLoaded, setAuth })(NewsHub);