@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/GenerateNewsletter.js

@@ -0,0 +1,891 @@
+import React, { Component } from 'react';
+import { Table } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import moment from 'moment';
+import { v4 } from 'uuid';
+import FontAwesome from 'react-fontawesome';
+import { Button, Header, CheckBox, GenericInput, DatePicker, Popup, ImageInput } from '../../components';
+import { newsLoaded, setAuth } from '../../actions';
+import { eventActions, newsletterActions, typeActions } from '../../webapi';
+import { Text } from '../../components/text';
+import { MakerPopup } from '../../components/MakerPopup';
+import { COLOUR_BRANDING_APP, getEventTimes } from '../../js';
+import { get1400, getPluralS, getSiteNameFromRoles, onlyAlphanumeric, setLocalStorage } from '../../helper';
+import { logo } from '../../config';
+import { values } from '../../feature.config';
+
+class GenerateNewsletter extends Component {
+  constructor(props) {
+    super(props);
+
+    let nextMonth = moment();
+    nextMonth.add(1, 'month');
+    nextMonth = nextMonth.startOf('month');
+    const nextMonthEnd = moment(nextMonth).endOf('month');
+
+    this.state = {
+      loadingAll: false,
+      selectedNews: [],
+      selectedEvents: [],
+      startDate: nextMonth.format('YYYY-MM-DD'),
+      startDateText: nextMonth.format('DD/MM/YYYY'),
+      endDate: nextMonthEnd.format('YYYY-MM-DD'),
+      endDateText: nextMonthEnd.format('DD/MM/YYYY'),
+      issueTitle: moment().format('MMMM YYYY'),
+      newsletterTitle: `${getSiteNameFromRoles(this.props.auth.site, this.props.auth.user.Roles)} ${values.textNewsletterTitlePostfix}`,
+    };
+  }
+
+  componentDidMount() {
+    this.getBranding();
+    this.getData();
+    this.loadEvents();
+  }
+
+  getBranding() {
+    typeActions.getSiteBranding(this.props.auth.site).then((res) => {
+      const brandData = {
+        siteName: res.data.Name,
+        colour: res.data.MainBrandingColour || COLOUR_BRANDING_APP,
+        logo: res.data.Logo || logo,
+        headerType: res.data.HeaderType || 'white',
+      };
+
+      const lastUpdate = moment.utc().valueOf();
+
+      setLocalStorage(values.localStorageNewsletterBrandData, brandData, true);
+      setLocalStorage(values.localStorageNewsletterMakerLastUpdate, lastUpdate);
+
+      this.setState({
+        loadingBranding: false,
+        brandData,
+        lastUpdate,
+      });
+    });
+  }
+
+  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 });
+      });
+  }
+
+  getNewsAuthor = (post) => {
+    if (post.hideAuthor) {
+      return null;
+    }
+    let author = post.Author;
+    if (this.props.auth.siteSettings && this.props.auth.siteSettings[values.optionForceNewsAuthorName]) {
+      author = author || post.SubmittedBy;
+    }
+    return author;
+  };
+
+  getSelectedEvents = () => {
+    if (!this.state.includeEvents) {
+      return [];
+    }
+    return _.sortBy(this.state.selectedEvents, (e) => {
+      return moment(e.Date).valueOf();
+    }).map((e) => {
+      return {
+        Title: _.trim(e.Title),
+        Timestamp: e.TimeSort,
+        Date: moment.utc(e.TimeSort).local().format('dddd D MMMM'),
+        Time: moment.utc(e.TimeSort).local().format('h:mma'),
+      };
+    });
+  };
+
+  loadEvents() {
+    this.setState({
+      loadingEvents: true,
+    });
+
+    eventActions
+      .getEvents(this.props.auth.site, 0, true)
+      .then((res) => {
+        this.setState({
+          loadingEvents: false,
+        });
+        if (res.data != null && !_.isEmpty(res.data) && res.data[0].Site === this.props.auth.site) {
+          this.setEvents(res.data);
+        }
+      })
+      .catch((res) => {
+        this.setState({ loadingEvents: false });
+        alert('Something went wrong with the request. Please try again.');
+      });
+  }
+
+  setEvents(data) {
+    const eventReps = getEventTimes(data);
+    const events = _.filter(eventReps, (e) => {
+      return (
+        e.TimeSort >= moment(this.state.startDate, 'YYYY-MM-DD').valueOf() &&
+        e.TimeSort <= moment(this.state.endDate, 'YYYY-MM-DD').valueOf()
+      );
+    });
+    this.setState({
+      selectedEvents: events,
+    });
+    this.checkCompileMakerData();
+  }
+
+  toggleIncludeEvents = () => {
+    this.setState({
+      includeEvents: !this.state.includeEvents,
+    });
+    this.checkCompileMakerData();
+  };
+
+  checkCompileMakerData() {
+    const lastChange = moment.utc().valueOf();
+    this.setState({
+      lastChange,
+    });
+    // if no changes have been made for 1 second, refresh preview
+    setTimeout(() => {
+      if (lastChange === this.state.lastChange) {
+        this.compileMakerData();
+      }
+    }, 1000);
+  }
+
+  compileMakerData() {
+    const makerData = {
+      title: this.state.newsletterTitle,
+      month: this.state.issueTitle,
+      news: this.state.selectedNews.map((n) => {
+        return {
+          Images: n.Images,
+          Title: n.Title,
+          Text: n.Text,
+          Author: this.getNewsAuthor(n),
+        };
+      }),
+      events: this.getSelectedEvents(),
+    };
+    const lastUpdate = moment.utc().valueOf();
+
+    setLocalStorage(values.localStorageNewsletterMakerData, makerData, true);
+    setLocalStorage(values.localStorageNewsletterMakerLastUpdate, lastUpdate);
+
+    this.setState({ makerData, lastUpdate });
+  }
+
+  validateForm() {
+    return !_.isEmpty(this.state.selectedNews);
+  }
+
+  handleNewsChange = (key, value) => {
+    this.setState({
+      editingNews: { ...this.state.editingNews, [key]: value },
+    });
+  };
+
+  toggleNewsAuthor = () => {
+    this.setState({
+      editingNews: { ...this.state.editingNews, hideAuthor: !this.state.editingNews.hideAuthor },
+    });
+  };
+
+  handleAuthorNameChange = (value) => {
+    this.setState({
+      editingNews: { ...this.state.editingNews, Author: { ...this.getNewsAuthor(this.state.editingNews), displayName: value } },
+    });
+  };
+
+  handleStartDateTextChange(value) {
+    const newState = { startDateText: value };
+    const m = moment(value, 'DD/MM/YYYY');
+
+    if (m.isValid() && m.year() > 1900) {
+      newState.startDate = m.format('YYYY-MM-DD');
+    }
+    this.setState(newState);
+  }
+
+  handleStartDateChange(date) {
+    var stateChange = {
+      startDate: date,
+      startDateText: moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+      showStartDate: false,
+    };
+    this.setState(stateChange);
+  }
+
+  handleEndDateTextChange(value) {
+    const newState = { endDateText: value };
+    const m = moment(value, 'DD/MM/YYYY');
+
+    if (m.isValid() && m.year() > 1900) {
+      newState.endDate = m.format('YYYY-MM-DD');
+    }
+    this.setState(newState);
+  }
+
+  handleEndDateChange(date) {
+    var stateChange = {
+      endDate: date,
+      endDateText: moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+      showEndDate: false,
+    };
+    this.setState(stateChange);
+  }
+
+  handleTextChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+    this.checkCompileMakerData();
+  };
+
+  handleSubmit = () => {
+    if (!this.validateForm()) {
+      return;
+    }
+    this.setState({
+      makerOpen: true,
+    });
+  };
+
+  closeMaker = () => {
+    this.setState({
+      makerOpen: false,
+    });
+  };
+
+  onPressNews = (post) => {
+    if (this.isSelected(post.RowId)) {
+      this.setState({
+        selectedNews: _.filter(this.state.selectedNews, (n) => {
+          return n.RowId !== post.RowId;
+        }),
+      });
+    } else {
+      const newSelection = [...this.state.selectedNews, post];
+      this.setState({
+        selectedNews: newSelection,
+      });
+    }
+    this.checkCompileMakerData();
+  };
+
+  onMoveUpNews = (post, index) => {
+    if (index === 0) return;
+    let newNews = [...this.state.selectedNews];
+    newNews.splice(index, 1);
+    newNews.splice(index - 1, 0, post);
+    this.setState({
+      selectedNews: newNews,
+    });
+    this.checkCompileMakerData();
+  };
+
+  onMoveDownNews = (post, index) => {
+    if (index === this.state.selectedNews.length - 1) return;
+    let newNews = [...this.state.selectedNews];
+    newNews.splice(index + 2, 0, post);
+    newNews.splice(index, 1);
+    this.setState({
+      selectedNews: newNews,
+    });
+    this.checkCompileMakerData();
+  };
+
+  checkSetImage(post) {
+    if (this.refs.newsImageInput) {
+      if (post.Images) {
+        this.refs.newsImageInput.getWrappedInstance().setValue(post.Images);
+      } else {
+        this.refs.newsImageInput.getWrappedInstance().setValue(post.Image);
+      }
+    } else {
+      setTimeout(() => {
+        this.checkSetImage(post);
+      }, 100);
+    }
+  }
+
+  checkSetAuthorImage(post) {
+    if (this.refs.authorImage) {
+      const author = this.getNewsAuthor(post);
+      if (author && author.profilePic) {
+        this.refs.authorImage.getWrappedInstance().setValue(author.profilePic);
+      }
+    } else {
+      setTimeout(() => {
+        this.checkSetAuthorImage(post);
+      }, 100);
+    }
+  }
+
+  onPressAddNews = () => {
+    const post = { Title: '', Text: '', Images: [], Author: {}, hideAuthor: true, isNew: true, RowId: v4() };
+    this.setState({
+      editingNews: post,
+    });
+    this.checkSetImage(post);
+    this.checkSetAuthorImage(post);
+  };
+
+  onPressEditNews = (post) => {
+    const author = this.getNewsAuthor(post) || {};
+    this.setState({
+      editingNews: { ...post, hideAuthor: !author || _.isEmpty(Object.keys(author)), Author: author },
+    });
+    this.checkSetImage(post);
+    this.checkSetAuthorImage(post);
+  };
+
+  cancelEditNews = () => {
+    this.setState({
+      editingNews: null,
+    });
+  };
+
+  saveEditNews = () => {
+    const newNews = [...this.state.selectedNews];
+    const author = this.getNewsAuthor(this.state.editingNews);
+    if (author) {
+      author.profilePic = this.refs.authorImage.getWrappedInstance().getValue();
+    }
+    const newEntry = {
+      ...this.state.editingNews,
+      Images: this.refs.newsImageInput
+        .getWrappedInstance()
+        .getValue()
+        .map((url) => {
+          return get1400(url);
+        }),
+      isNew: null,
+    };
+    if (this.state.editingNews.isNew) {
+      newNews.push(newEntry);
+    } else {
+      const index = _.findIndex(newNews, (n) => {
+        return n.RowId === this.state.editingNews.RowId;
+      });
+      newNews.splice(index, 1, newEntry);
+    }
+    this.setState({
+      selectedNews: newNews,
+      editingNews: null,
+    });
+    this.checkCompileMakerData();
+  };
+
+  onPressEditEvents = () => {
+    this.setState({
+      editingEvents: [...this.state.selectedEvents],
+    });
+  };
+
+  cancelEditEvents = () => {
+    this.setState({
+      editingEvents: null,
+    });
+  };
+
+  saveEditEvents = () => {
+    this.setState({
+      selectedEvents: [...this.state.editingEvents],
+      editingEvents: null,
+    });
+    this.checkCompileMakerData();
+  };
+
+  onRemoveEvent = (entryId) => {
+    this.setState({
+      editingEvents: _.filter(this.state.editingEvents, (e) => {
+        return e.EntryId !== entryId;
+      }),
+    });
+  };
+
+  isSelected(id) {
+    return _.some(this.state.selectedNews, (n) => {
+      return n.RowId === id;
+    });
+  }
+
+  renderEntry(post, index, isSelected) {
+    if (isSelected) {
+      return (
+        <tr key={post.RowId}>
+          <td>{moment.utc(post.Timestamp).local().format('DD-MM-YYYY')}</td>
+          <td className="table-TitleColumn">
+            <span>{post.Title}</span>
+          </td>
+          <td className="table-options">
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <FontAwesome
+                className="pointer"
+                style={{ fontSize: 20, padding: 5, marginLeft: 12, visibility: index > 0 ? 'visible' : 'hidden' }}
+                name="arrow-up"
+                onClick={() => {
+                  this.onMoveUpNews(post, index);
+                }}
+              />
+              <FontAwesome
+                className="pointer"
+                style={{
+                  fontSize: 20,
+                  padding: 5,
+                  marginLeft: 12,
+                  visibility: index < this.state.selectedNews.length - 1 ? 'visible' : 'hidden',
+                }}
+                name="arrow-down"
+                onClick={() => {
+                  this.onMoveDownNews(post, index);
+                }}
+              />
+              <FontAwesome
+                className="pointer"
+                style={{ fontSize: 20, padding: 5, marginLeft: 12 }}
+                name="pencil"
+                onClick={() => {
+                  this.onPressEditNews(post);
+                }}
+              />
+              <FontAwesome
+                className="pointer"
+                style={{ fontSize: 20, padding: 5, marginLeft: 12 }}
+                name="remove"
+                onClick={() => {
+                  this.onPressNews(post);
+                }}
+              />
+            </div>
+          </td>
+        </tr>
+      );
+    }
+    return (
+      <tr
+        key={post.RowId}
+        className="pointer"
+        onClick={() => {
+          this.onPressNews(post);
+        }}
+      >
+        <td>{moment.utc(post.Timestamp).local().format('DD-MM-YYYY')}</td>
+        <td className="table-TitleColumn">
+          <span>{post.Title}</span>
+        </td>
+        <td className="table-options">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 12 }} name="plus" />
+          </div>
+        </td>
+      </tr>
+    );
+  }
+
+  renderSelection() {
+    if (_.isEmpty(this.state.selectedNews)) {
+      return <Text type="body">{values.textNoSelectedNews}</Text>;
+    }
+    return (
+      <Table className="plussTable" striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th style={{ width: 100 }}>Date published</th>
+            <th>Title</th>
+            <th style={{ width: 30 }} />
+          </tr>
+        </thead>
+        <tbody>
+          {this.state.selectedNews.map((post, index) => {
+            return this.renderEntry(post, index, true);
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  renderContent() {
+    let source = _.sortBy(this.props.news, 'DateUnix');
+    if (this.state.sortDesc) {
+      source.reverse();
+    }
+    source = _.filter(source, (ev) => {
+      if (!ev) {
+        return false;
+      }
+      return true;
+    });
+
+    return (
+      <Table className="plussTable" striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th style={{ width: 100 }}>Date published</th>
+            <th>Title</th>
+            <th style={{ width: 30 }} />
+          </tr>
+        </thead>
+        <tbody>
+          {source.map((post, index) => {
+            if (this.isSelected(post.RowId)) {
+              return null;
+            }
+            return this.renderEntry(post, index, false);
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  renderMakerPopup() {
+    if (!this.state.makerOpen) {
+      return null;
+    }
+    return (
+      <MakerPopup
+        title={values.textCreateNewsletter}
+        onClose={this.closeMaker}
+        initialData={this.state.makerData}
+        templateId="4a423aa0-eba1-46d1-baf3-1b3d972b505e"
+        minWidth={600}
+        inputs={[
+          {
+            key: 'title',
+            type: 'string',
+            title: values.textNewsletterTitle,
+          },
+          {
+            key: 'month',
+            type: 'string',
+            title: 'Issue Title',
+          },
+          {
+            key: 'news',
+            type: 'array',
+            title: values.textSelectedNews,
+            readOnly: true,
+          },
+          {
+            key: 'events',
+            type: 'array',
+            title: 'Calendar Events',
+            readOnly: true,
+          },
+        ]}
+        requestData={{
+          colorSpace: 'cmyk',
+          postProcessing: {
+            optimize: false,
+            targetDPI: 300,
+          },
+          fileName: onlyAlphanumeric(`${this.state.makerData.title}_${this.state.makerData.month}`),
+        }}
+      />
+    );
+  }
+
+  renderEditNewsPopup() {
+    if (!this.state.editingNews) {
+      return null;
+    }
+    return (
+      <Popup
+        hasPadding
+        title={`${this.state.editingNews.isNew ? 'Add' : 'Edit'} ${values.textAddEditNewsPostfix}`}
+        minWidth={600}
+        onClose={this.cancelEditNews}
+        buttons={[
+          {
+            type: 'primary',
+            onClick: this.saveEditNews,
+            isActive: true,
+            text: 'Save',
+          },
+          {
+            type: 'tertiary',
+            onClick: this.cancelEditNews,
+            isActive: true,
+            text: 'Cancel',
+          },
+        ]}
+      >
+        <Text type="highlightedHelp" className="marginTop-10">
+          {values.textNoteThisWillNotChangeInTheApp(this.state.editingNews.isNew ? 'add' : 'change')}
+        </Text>
+        <GenericInput
+          className="marginTop-10"
+          id="editingNewsTitle"
+          label="Title"
+          alwaysShowLabel
+          value={this.state.editingNews.Title}
+          onChange={(e) => this.handleNewsChange('Title', e.target.value)}
+        />
+        <GenericInput
+          className="marginTop-10"
+          id="editingNewsTitle"
+          label="Text"
+          alwaysShowLabel
+          value={this.state.editingNews.Text}
+          onChange={(e) => this.handleNewsChange('Text', e.target.value)}
+          type="textarea"
+        />
+        <Text type="formLabel" className="marginTop-10">
+          Images
+        </Text>
+        <ImageInput className="marginTop-5" ref="newsImageInput" multiple limit={50} />
+
+        <Text type="formLabel" className="marginTop-10">
+          Author
+        </Text>
+        <CheckBox
+          className="marginTop-5"
+          id={`hideAuthor`}
+          label="Hide Author"
+          isActive={this.state.editingNews.hideAuthor}
+          onChange={this.toggleNewsAuthor}
+        />
+        <div className="marginTop-5" style={{ display: this.state.editingNews.hideAuthor ? 'none' : 'flex' }}>
+          <div className="marginRight-10">
+            <Text type="formLabel" className="marginTop-10">
+              Author Image
+            </Text>
+            <ImageInput
+              ref="authorImage"
+              containerStyle={{ width: 150, height: 150 }}
+              style={{ width: 150, height: 150, borderRadius: 4 }}
+              simpleStyle
+              noMenu
+              noDownload
+            />
+          </div>
+          <div className="flex-1">
+            <GenericInput
+              className="marginTop-10"
+              id="authorName"
+              label="Author Name"
+              alwaysShowLabel
+              value={this.state.editingNews.Author.displayName}
+              onChange={(e) => this.handleAuthorNameChange(e.target.value)}
+            />
+          </div>
+        </div>
+      </Popup>
+    );
+  }
+
+  renderEvent(event, index) {
+    return (
+      <tr key={event.EntryId}>
+        <td>{moment.utc(event.TimeSort).local().format('DD-MM-YYYY h:mma')}</td>
+        <td className="table-TitleColumn">
+          <span>{event.Title}</span>
+        </td>
+        <td className="table-options">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <FontAwesome
+              className="pointer"
+              style={{ fontSize: 20, padding: 5, marginLeft: 12 }}
+              name="remove"
+              onClick={() => {
+                this.onRemoveEvent(event.EntryId);
+              }}
+            />
+          </div>
+        </td>
+      </tr>
+    );
+  }
+
+  renderEditEventsPopup() {
+    if (!this.state.editingEvents) {
+      return null;
+    }
+    return (
+      <Popup
+        hasPadding
+        title="Edit events"
+        minWidth={600}
+        onClose={this.cancelEditEvents}
+        buttons={[
+          {
+            type: 'primary',
+            onClick: this.saveEditEvents,
+            isActive: true,
+            text: 'Save',
+          },
+          {
+            type: 'tertiary',
+            onClick: this.cancelEditEvents,
+            isActive: true,
+            text: 'Cancel',
+          },
+        ]}
+      >
+        <Text type="highlightedHelp" className="marginTop-10">
+          Note: Your changes will be reset if you change the calendar time frame
+        </Text>
+
+        <Table className="plussTable" striped bordered condensed hover>
+          <thead>
+            <tr>
+              <th style={{ width: 100 }}>Time</th>
+              <th>Title</th>
+              <th style={{ width: 30 }} />
+            </tr>
+          </thead>
+          <tbody>
+            {this.state.editingEvents.map((event, index) => {
+              return this.renderEvent(event, index);
+            })}
+          </tbody>
+        </Table>
+      </Popup>
+    );
+  }
+
+  renderPreview() {
+    if (this.state.loadingBranding) {
+      return null;
+    }
+    return (
+      <iframe
+        key={this.state.lastUpdate}
+        title="NewsletterPreview"
+        className="newsletterPreview"
+        src={`${window.location.origin}${values.routeNewsletterTemplate}`}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderEditNewsPopup()}
+        {this.renderEditEventsPopup()}
+        {this.renderMakerPopup()}
+        <Header />
+        <div className="pageContainer paddingVertical-20 paddingHorizontal-40">
+          <div className="marginBottom-40 flex flex-between flex-center">
+            <Text type="h1" className="">
+              {values.textCreateNewsletter}
+            </Text>
+            <Button inline buttonType="primary" onClick={this.handleSubmit} isActive={this.validateForm()}>
+              Create
+            </Button>
+          </div>
+          <div className="flex flex-reverse marginTop-60">
+            <div className="newsletterPreviewOuter">{this.renderPreview()}</div>
+            <div className="flex-1 paddingRight-20">
+              <div>
+                <Text type="h3">Basic Info</Text>
+                <GenericInput
+                  className="marginTop-10"
+                  id="newsletterTitle"
+                  label={values.textNewsletterTitle}
+                  alwaysShowLabel
+                  value={this.state.newsletterTitle}
+                  onChange={this.handleTextChange}
+                />
+                <GenericInput
+                  className="marginTop-10"
+                  id="issueTitle"
+                  label="Issue Title"
+                  alwaysShowLabel
+                  value={this.state.issueTitle}
+                  onChange={this.handleTextChange}
+                />
+                <Text type="h3" className="marginTop-20">
+                  Event Calendar
+                </Text>
+                <CheckBox
+                  className="marginTop-10"
+                  id={`includeEvents`}
+                  label="Include event calendar"
+                  isActive={this.state.includeEvents}
+                  onChange={this.toggleIncludeEvents}
+                />
+                {this.state.includeEvents && (
+                  <Text type="body" className="marginTop-10">
+                    {this.state.selectedEvents.length} event{getPluralS(this.state.selectedEvents.length)}
+                    <FontAwesome className="pointer" style={{ marginLeft: 12 }} name="pencil" onClick={this.onPressEditEvents} />
+                  </Text>
+                )}
+                {this.state.includeEvents && (
+                  <div className="flex">
+                    <div className="flex-1 paddingRight-20">
+                      <GenericInput
+                        className="marginTop-10"
+                        id="eventStartDate"
+                        label="Start Date"
+                        alwaysShowLabel
+                        value={this.state.startDateText}
+                        onChange={(e) => this.handleStartDateTestChange(e.target.value)}
+                        onClick={(e) => this.setState({ showStartDate: !this.state.showStartDate })}
+                      />
+                      {this.state.showStartDate && (
+                        <DatePicker selectedDate={this.state.startDate} selectDate={this.handleStartDateChange.bind(this)} />
+                      )}
+                    </div>
+                    <div className="flex-1 paddingLeft-20">
+                      <GenericInput
+                        className="marginTop-10"
+                        id="eventEndDate"
+                        label="End Date"
+                        alwaysShowLabel
+                        value={this.state.endDateText}
+                        onChange={(e) => this.handleEndDateTextChange(e.target.value)}
+                        onClick={(e) => this.setState({ showEndDate: !this.state.showEndDate })}
+                      />
+                      {this.state.showEndDate && (
+                        <DatePicker selectedDate={this.state.endDate} selectDate={this.handleEndDateChange.bind(this)} />
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="marginTop-20 marginBottom-10 flex flex-center">
+                <Text type="h3" className="marginRight-20">
+                  Selected
+                </Text>
+
+                <Button inline buttonType="primary" onClick={this.onPressAddNews} isActive>
+                  Add new post
+                </Button>
+              </div>
+              {this.renderSelection()}
+              <Text type="h3" className="marginTop-20">
+                {values.textSelectNews}
+              </Text>
+              {this.renderContent()}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    news: state[values.reducerKey].news,
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { newsLoaded, setAuth })(GenerateNewsletter);