@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/NewsletterSubmission.js

@@ -0,0 +1,476 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import FontAwesome from 'react-fontawesome';
+import { connect } from 'react-redux';
+import { removeNewsSubmission, newsSubmissionsLoaded } from '../../actions';
+import {
+  GenericInput,
+  ImageInput,
+  Button,
+  OverlayPage,
+  OverlayPageContents,
+  OverlayPageSection,
+  OverlayPageBottomButtons,
+  SuccessPopup,
+} from '../../components';
+import { newsletterActions } from '../../webapi';
+import { safeReadParams, getThumb300, get1400 } from '../../helper';
+import { checkLoggedIn } from '../../session';
+import { COLOUR_BRANDING_MAIN, COLOUR_BRANDING_OFF } from '../../js';
+import { values } from '../../feature.config';
+
+class NewsletterSubmission extends Component {
+  initialState = {
+    updateId: safeReadParams(this.props, 'updateId'),
+    success: false,
+    submitting: false,
+    editSubmitting: false,
+    showEditWarnings: false,
+    updating: false,
+    update: {},
+    newUpdate: {},
+    action: '',
+  };
+
+  state = { ...this.initialState };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+
+    if (this.state.updateId) {
+      this.getData();
+    }
+  }
+
+  handleChange(event) {
+    var stateChange = { newUpdate: { ...this.state.newUpdate } };
+    stateChange.newUpdate[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  }
+
+  getData() {
+    newsletterActions.getNewsletterSubmission(this.state.updateId).then((res) => {
+      this.setState({
+        update: res.data,
+        newUpdate: res.data,
+      });
+    });
+  }
+
+  getDate() {
+    if (!this.state.update.Timestamp) {
+      return '';
+    }
+    return moment.utc(this.state.update.Timestamp).local().format('D MMM');
+  }
+
+  validateForm() {
+    if (this.state.submitting) {
+      return false;
+    }
+    return true;
+  }
+
+  handleSubmit(action) {
+    if (!this.validateForm()) {
+      this.setState({ showWarnings: true });
+      return;
+    }
+    if (
+      window.confirm(
+        action === 'accept'
+          ? 'Approving this post will make it visible to everyone in the app. Are you sure you want to continue?'
+          : 'Rejecting this post will remove it from the system. Are you sure you want to continue?',
+      )
+    ) {
+      this.setState({ submitting: true, action });
+
+      newsletterActions
+        .handleNewsletterSubmission(this.props.auth.site, this.state.updateId, action)
+        .then((res) => {
+          this.setState({
+            success: true,
+            submitting: false,
+          });
+          this.props.removeNewsSubmission(this.state.updateId);
+        })
+        .catch((res) => {
+          this.setState({ submitting: false });
+          alert('Something went wrong with the request. Please try again.');
+        });
+    }
+  }
+
+  renderSuccess() {
+    if (!this.state.success) {
+      return null;
+    }
+    return (
+      <SuccessPopup
+        text={`Update has been ${this.state.action === 'accept' ? 'approved' : 'rejected'}`}
+        buttons={[
+          {
+            type: 'outlined',
+            onClick: () => {
+              window.history.back();
+            },
+            text: 'Go to home',
+          },
+        ]}
+      />
+    );
+  }
+
+  checkSetImage() {
+    if (this.refs.imageInput) {
+      if (this.state.newUpdate.Images) {
+        this.refs.imageInput.getWrappedInstance().setValue(this.state.newUpdate.Images);
+      } else {
+        this.refs.imageInput.getWrappedInstance().setValue(this.state.newUpdate.Image);
+      }
+    } else {
+      setTimeout(() => {
+        this.checkSetImage();
+      }, 100);
+    }
+  }
+
+  validateLoading() {
+    if (this.state.submitting) {
+      return false;
+    }
+    return true;
+  }
+
+  validateImage() {
+    if (_.isEmpty(this.state.newUpdate.Image)) {
+      return true;
+    }
+    return this.state.newUpdate.Image.match(/\.(jpeg|jpg|gif|png|ashx)/) != null;
+  }
+
+  validateCompulsoryText() {
+    if (_.isEmpty(this.state.newUpdate.Title)) {
+      return false;
+    }
+    if (_.isEmpty(this.state.newUpdate.Text)) {
+      return false;
+    }
+    return true;
+  }
+
+  validateEditForm() {
+    if (!this.validateCompulsoryText()) {
+      return false;
+    }
+    if (!this.validateImage()) {
+      return false;
+    }
+    if (this.state.editSubmitting) {
+      return false;
+    }
+    return true;
+  }
+
+  setTags(input) {
+    const tags = [];
+
+    if (!_.isEmpty(this.state.newUpdate.Tags)) {
+      this.state.newUpdate.Tags.split(',').forEach((tag) => {
+        if (!_.isEmpty(tag)) {
+          tags.push(tag.trim());
+        }
+      });
+    }
+
+    input.Tags = tags;
+  }
+
+  compileJson() {
+    const result = {
+      ...this.state.newUpdate,
+      Image: '',
+      Images: this.refs.imageInput
+        .getWrappedInstance()
+        .getValue()
+        .map((url) => {
+          return get1400(url);
+        }),
+      Thumbnail: '',
+    };
+    if (!_.isEmpty(result.Images)) {
+      result.Thumbnail = getThumb300(result.Images[0]);
+      result.Image = get1400(result.Images[0]);
+    }
+
+    result.EditedBy = {
+      displayName: this.props.auth.user.displayName,
+      id: this.props.auth.user.uid,
+    };
+
+    this.setTags(result);
+
+    return result;
+  }
+
+  handleEditSubmit() {
+    if (!this.validateEditForm()) {
+      this.setState({ showEditWarnings: true });
+      return;
+    }
+    this.setState({ showEditWarnings: false, editSubmitting: true });
+    const data = this.compileJson();
+
+    newsletterActions
+      .editNewsletterSubmission(this.props.auth.site, this.state.updateId, data)
+      .then((res) => {
+        this.setState({
+          update: { ...data },
+          edit: false,
+          editSubmitting: false,
+        });
+        this.getData();
+        this.props.newsSubmissionsLoaded([data]);
+      })
+      .catch((res) => {
+        this.setState({ editSubmitting: false });
+        alert('Something went wrong with the submission. Please try again.');
+      });
+  }
+
+  setEditForm() {
+    const newUpdate = {
+      ...this.state.update,
+    };
+    if (newUpdate.Tags != null) {
+      newUpdate.Tags = this.state.update.Tags.join(',');
+    } else {
+      newUpdate.Tags = '';
+    }
+    this.setState({ edit: true, newUpdate });
+    this.checkSetImage();
+  }
+
+  renderEditSubmit() {
+    if (this.state.editSubmitting) {
+      return <Button buttonType="secondary">Saving changes...</Button>;
+    }
+    return (
+      <div>
+        <Button
+          inline
+          buttonType="tertiary"
+          onClick={() => {
+            this.setState({ edit: false });
+          }}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          Cancel
+        </Button>
+        <Button inline buttonType="primary" onClick={this.handleEditSubmit.bind(this)} isActive={this.validateEditForm()}>
+          Save changes
+        </Button>
+      </div>
+    );
+  }
+
+  renderSubmit() {
+    if (this.state.edit) {
+      return this.renderEditSubmit();
+    }
+    if (this.state.submitting) {
+      return <Button buttonType="secondary">Saving...</Button>;
+    }
+    return (
+      <div style={{ width: '100%' }} className="flex flex-between">
+        <div>
+          <Button inline buttonType="primary" onClick={this.handleSubmit.bind(this, 'accept')} isActive={true}>
+            Approve
+          </Button>
+          <Button inline buttonType="secondary" onClick={this.handleSubmit.bind(this, 'reject')} isActive={true} style={{ marginLeft: 16 }}>
+            Reject
+          </Button>
+        </div>
+        <Button inline buttonType="outlined" onClick={() => this.setEditForm()} isActive={true} style={{ marginLeft: 16 }}>
+          Edit submission
+        </Button>
+      </div>
+    );
+  }
+
+  renderEditForm() {
+    return (
+      <div>
+        <div className="padding-60 paddingBottom-20 bottomDivideBorder">
+          <div className="newTopBar clearfix">
+            <p className="newTopBarTitle text-sectionTitle">{values.textNewsSubmission}</p>
+          </div>
+          <div className="newTopBar clearfix">
+            <span className="newTopBarTitle text-sectionTitle">
+              Submitted by <span className="text-brandingColour">{this.state.update.SubmittedBy.displayName}</span>
+            </span>
+          </div>
+          {!_.isUndefined(this.state.update.EditedBy) && (
+            <div className="newTopBar clearfix">
+              <span className="newTopBarTitle text-sectionTitle">
+                Last edited by <span className="text-brandingColour">{this.state.update.EditedBy.displayName}</span>
+              </span>
+            </div>
+          )}
+        </div>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          {/* title */}
+          <GenericInput
+            id="Title"
+            type="text"
+            label={values.textNewsPostTitle}
+            placeholder={values.textNewsPostTitle}
+            showError={() => {
+              return this.state.showWarnings && _.isEmpty(this.state.newUpdate.Title);
+            }}
+            isValid={() => {
+              return !_.isEmpty(this.state.newUpdate.Title);
+            }}
+            value={this.state.newUpdate.Title}
+            onChange={(e) => this.handleChange(e)}
+            large
+            isRequired
+            disabled={this.state.editSubmitting}
+          />
+          {/* tags */}
+          <GenericInput
+            id="Tags"
+            type="text"
+            label="Tags"
+            help="Separate tags by commas"
+            placeholder="Humour, Social, etc."
+            value={this.state.newUpdate.Tags}
+            onChange={(e) => this.handleChange(e)}
+            alwaysShowLabel
+            disabled={this.state.editSubmitting}
+          />
+          {/* description */}
+          <GenericInput
+            id="Text"
+            type="textarea"
+            label="Description"
+            placeholder="Enter story here"
+            value={this.state.newUpdate.Text}
+            onChange={(e) => this.handleChange(e)}
+            isRequired
+            showError={() => {
+              return this.state.showWarnings && _.isEmpty(this.state.newUpdate.Text);
+            }}
+            isValid={() => {
+              return !_.isEmpty(this.state.newUpdate.Text);
+            }}
+            disabled={this.state.editSubmitting}
+          />
+        </div>
+        <div className="padding-60 paddingVertical-40">
+          <p className="text-sectionTitle">IMAGES</p>
+          <ImageInput ref="imageInput" multiple limit={10} />
+        </div>
+      </div>
+    );
+  }
+
+  renderForm() {
+    if (this.state.success) {
+      return null;
+    }
+    if (_.isEmpty(this.state.update)) {
+      return (
+        <div className="padding-60 bottomPadding-40" style={{ textAlign: 'center' }}>
+          <FontAwesome style={{ fontSize: 32, color: COLOUR_BRANDING_OFF }} name="spinner fa-pulse fa-fw" />
+        </div>
+      );
+    }
+    if (this.state.edit) {
+      return this.renderEditForm();
+    }
+    return (
+      <div>
+        <div className="padding-60 bottomPadding-40">
+          <div className="newTopBar clearfix">
+            <p className="newTopBarTitle text-sectionTitle">{values.textNewsSubmission}</p>
+          </div>
+          <div className="newTopBar clearfix">
+            <span className="newTopBarTitle text-sectionTitle">
+              Submitted by <span className="text-brandingColour">{this.state.update.SubmittedBy.displayName}</span>
+            </span>
+          </div>
+          {!_.isUndefined(this.state.update.EditedBy) && (
+            <div className="newTopBar clearfix">
+              <span className="newTopBarTitle text-sectionTitle">
+                Last edited by <span className="text-brandingColour">{this.state.update.EditedBy.displayName}</span>
+              </span>
+            </div>
+          )}
+          <div className="marginTop-16 fontMedium text-dark" style={{ fontSize: 26 }}>
+            {this.state.update.Title}
+          </div>
+          <div className="fontMedium marginBottom-8 text-light">
+            <span>{this.getDate()}</span>
+            <span> · </span>
+            {_.map(this.state.update.Tags, (tag, index) => {
+              return (
+                <span key={index} style={{ color: COLOUR_BRANDING_MAIN }}>
+                  {tag}
+                  {index !== this.state.update.Tags.length - 1 ? ', ' : ''}
+                </span>
+              );
+            })}
+          </div>
+          {!_.isEmpty(this.state.update.Images) &&
+            _.map(this.state.update.Images, (im, index) => {
+              return (
+                <div
+                  key={index}
+                  style={{
+                    height: 250,
+                    backgroundImage: `url(${im})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    marginBottom: 10,
+                  }}
+                />
+              );
+            })}
+          {_.isEmpty(this.state.update.Images) && <div className="fontRegular text-light">No image</div>}
+          <div className="marginTop-16 fontRegular text-dark fontSize-16" style={{ whiteSpace: 'pre-line' }}>
+            {this.state.update.Text}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <OverlayPage>
+        <OverlayPageContents noBottomButtons={this.state.success}>
+          <OverlayPageSection className="pageSectionWrapper--newPopup">
+            {this.renderForm()}
+            {this.renderSuccess()}
+          </OverlayPageSection>
+        </OverlayPageContents>
+        {!this.state.success && (
+          <OverlayPageBottomButtons>
+            {this.renderSubmit()}
+            {/* {this.renderEditSubmit()} */}
+          </OverlayPageBottomButtons>
+        )}
+      </OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return { auth };
+};
+
+export default connect(mapStateToProps, { removeNewsSubmission, newsSubmissionsLoaded })(NewsletterSubmission);