@plusscommunities/pluss-feeds-web 1.0.1-beta.0

package/src/screens/Feed.js

@@ -0,0 +1,323 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { Link } from 'react-router-dom';
+import moment from 'moment';
+import _ from 'lodash';
+import FontAwesome from 'react-fontawesome';
+import Textarea from 'react-textarea-autosize';
+import { connect } from 'react-redux';
+import { feedsLoaded, removeFeedSubmission } from '../actions';
+import { PlussCore } from '../feature.config';
+import { feedActions, reactionActions } from '../apis';
+import { values } from '../values.config';
+
+const { Helper, Session, Colours, Components } = PlussCore;
+
+class Feed extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feedId: Helper.safeReadParams(props, 'feedId') ? props.match.params.feedId : null,
+      feed: null,
+      types: [],
+      comments: [],
+      commentInput: '',
+      loadingComments: false,
+      editing: false,
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    Session.checkLoggedIn(this, this.props.auth);
+  }
+
+  componentDidMount() {
+    this.getFeedTypes();
+    if (this.state.feedId) {
+      this.getFeed();
+      this.getComments();
+    }
+  }
+
+  getFeed = async () => {
+    try {
+      const res = await feedActions.getFeed(this.state.feedId);
+      // console.log('getFeed:', res.data);
+      this.setState({ feed: res.data });
+      this.props.feedsLoaded([res.data]);
+    } catch (error) {
+      console.error('getFeed', error);
+    }
+  };
+
+  getFeedTypes = async () => {
+    try {
+      const res = await feedActions.getFeedTypes(this.props.auth.site);
+      this.setState({ types: res.data });
+    } catch (error) {
+      console.error('getFeedTypes', error);
+    }
+  };
+
+  canEdit = () => {
+    return Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth);
+  };
+
+  canApprove = () => {
+    const { feed } = this.state;
+    return feed && _.isNil(feed.approved) && this.canEdit();
+  };
+
+  editFeed = () => {};
+
+  getComments = () => {
+    reactionActions.getComments(this.state.feedId, values.featureKey, 0).then((res) => {
+      this.setState({ comments: res.data });
+    });
+  };
+
+  onAddComment = async () => {
+    const { commentInput, feedId, feed, comments } = this.state;
+    try {
+      this.setState({ commentInput: '' });
+      const res = await reactionActions.addComment(feedId, values.featureKey, feed.title, feed.site, commentInput);
+      this.setState({ comments: [...comments, res.data] });
+    } catch (error) {
+      console.error('onAddComment', error);
+    }
+  };
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  onReviewFeed = async (approved = true) => {
+    if (window.confirm(approved ? values.textAreYouSureYouWantToApprove : values.textAreYouSureYouWantToReject)) {
+      try {
+        this.setState({ editing: true });
+
+        const { feed } = this.state;
+        const res = await feedActions.reviewFeed(feed.id, approved);
+        // console.log('onReviewFeed:', res.data);
+        const updated = res.data && res.data.updated;
+        this.props.removeFeedSubmission(updated.id);
+        this.setState({ editing: false, feed: updated });
+      } catch (error) {
+        this.setState({ editing: false });
+        console.log('onReviewFeed', error);
+        alert('Something went wrong with the request. Please try again.');
+      }
+    }
+  };
+
+  renderComment(c) {
+    return <Components.Comment key={c.Id} comment={c} />;
+  }
+
+  renderCommentSection() {
+    if (this.state.loadingComments) return null;
+
+    return (
+      <div className="padding-60 paddingTop-8 paddingLeft-20">
+        <div className="newTopBar paddingLeft-40">
+          <Components.Text type="formTitleSmall" className="marginBottom-16">
+            Comments
+          </Components.Text>
+          <div className="commentSection">{this.state.comments.map((c) => this.renderComment(c))}</div>
+          <div className="commentReply">
+            <div
+              className={`commentReply_button${!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''}`}
+              onClick={this.onAddComment}
+            >
+              <FontAwesome className="commentReply_icon" name="paper-plane-o" />
+            </div>
+            <Textarea
+              id="commentInput"
+              placeholder="Reply here..."
+              type="text"
+              className="commentReply_input"
+              value={this.state.commentInput}
+              onChange={(e) => this.onHandleChange(e)}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderImages() {
+    const { feed } = this.state;
+    if (_.isEmpty(feed.photo) && _.isEmpty(feed.photos)) return null;
+
+    const imagesToUse = _.isEmpty(feed.photo) ? feed.photos : [feed.photo];
+    return (
+      <div className="imageGrid">
+        {imagesToUse.map((image, i) => {
+          return (
+            <a href={image} target="_blank" rel="noopener noreferrer" key={i}>
+              <div className="imageGrid_image" style={{ backgroundImage: `url('${Helper.get1400(image)}')` }}></div>
+            </a>
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderInner() {
+    const { feed, types } = this.state;
+    if (feed == null) return null;
+
+    const feedType = types.find((t) => t.label === feed.type);
+    const editable = this.canEdit();
+
+    return (
+      <div style={{ paddingBottom: 40 }}>
+        <div className="padding-60 paddingVertical-40 relative">
+          <Components.Text type="formTitleLarge" className="marginBottom-8">
+            {feed.title || 'Feed'}
+          </Components.Text>
+          <div className="marginTop-16">
+            <div className={'fieldLabel'}>Posted to</div>
+            <div className={'marginTop-5'}>
+              <Components.UserListing size={25} user={feed.user} />
+            </div>
+          </div>
+          {editable && feed.author ? (
+            <div className="marginTop-16">
+              <div className={'fieldLabel'}>Posted by</div>
+              <div className={'marginTop-5'}>
+                <Components.UserListing size={25} user={feed.author} />
+              </div>
+            </div>
+          ) : null}
+          <div className="marginTop-16">
+            <Components.Tag
+              text={feed.type}
+              style={{ backgroundColor: feedType ? feedType.colour : undefined, borderRadius: 8, marginRight: 10 }}
+            />
+          </div>
+          {this.renderImages()}
+          <div className="marginTop-16">
+            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{feed.text}</div>
+          </div>
+        </div>
+        {feed.approved ? this.renderCommentSection() : null}
+      </div>
+    );
+  }
+
+  renderHistoryEntry(e, i) {
+    const action = (() => {
+      const { approved, deleted } = e.changes;
+      if (approved && approved.new === true) return 'Approved';
+      if (approved && approved.new === false) return 'Rejected';
+      if (deleted && deleted.new === true) return 'Deleted';
+      return 'Edited';
+    })();
+    return (
+      <div className="ticketHistoryEntry" key={i}>
+        <p className="ticketHistoryEntry_timestamp">{moment.utc(e.timestamp).local().format('D MMM YYYY h:mma')}</p>
+        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor: Colours.COLOUR_DUSK }}>
+          <span className="statusLabel_text">{`${action} by ${e.user.displayName}`}</span>
+        </div>
+      </div>
+    );
+  }
+
+  renderEditHistory() {
+    const { feed } = this.state;
+    if (!feed || !feed.history) return null;
+
+    const source = _.sortBy(feed.history, 'timestamp');
+    // console.log('renderEditHistory', JSON.stringify(source, null, 2));
+
+    return (
+      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+        <div className="newTopBar clearfix flex flex-reverse">
+          <Components.Text type="formTitleSmall" className="flex-1">
+            Edit History
+          </Components.Text>
+        </div>
+        {source.map(this.renderHistoryEntry)}
+      </div>
+    );
+  }
+
+  renderButtons() {
+    const editable = this.canEdit();
+    const approvable = this.canApprove();
+    const isEditing = this.state.editing;
+
+    return (
+      <div>
+        <Components.Button
+          inline
+          buttonType="tertiary"
+          onClick={() => {
+            window.history.back();
+          }}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          Back
+        </Components.Button>
+        {!_.isEmpty(this.state.feed) ? (
+          <>
+            {editable ? (
+              <Link to={`${values.routeAddFeed}/${this.state.feedId}`}>
+                <Components.Button inline style={{ marginRight: 25 }} buttonType="outlined" isActive={!isEditing} onClick={this.editFeed}>
+                  Edit
+                </Components.Button>
+              </Link>
+            ) : null}
+            {approvable ? (
+              <>
+                <Components.Button
+                  inline
+                  style={{ marginRight: 25 }}
+                  buttonType="outlined"
+                  isActive={!isEditing}
+                  onClick={() => this.onReviewFeed(false)}
+                >
+                  Reject
+                </Components.Button>
+                <Components.Button
+                  inline
+                  style={{ marginRight: 25 }}
+                  buttonType="primary"
+                  isActive={!isEditing}
+                  onClick={() => this.onReviewFeed(true)}
+                >
+                  Approve
+                </Components.Button>
+              </>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Components.OverlayPage>
+        <Components.OverlayPageContents>
+          <Components.OverlayPageSection className="pageSectionWrapper--fixedPopupSize">{this.renderInner()}</Components.OverlayPageSection>
+          <Components.OverlayPageSection className="pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth">
+            {this.renderEditHistory()}
+          </Components.OverlayPageSection>
+        </Components.OverlayPageContents>
+        <Components.OverlayPageBottomButtons>{this.renderButtons()}</Components.OverlayPageBottomButtons>
+      </Components.OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return { auth };
+};
+
+export default connect(mapStateToProps, { feedsLoaded, removeFeedSubmission })(withRouter(Feed));

package/src/screens/FeedHub.js

@@ -0,0 +1,245 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import _ from 'lodash';
+import FontAwesome from 'react-fontawesome';
+import Config, { PlussCore } from '../feature.config';
+import { feedsLoaded, feedsSubmissionsLoaded } from '../actions';
+import { feedActions } from '../apis';
+import FeedList from '../components/FeedList';
+import FeedSubmissions from '../components/FeedSubmissions';
+import FeedTypes from '../components/FeedTypes';
+import { values } from '../values.config';
+
+const { Components, Session, Helper } = PlussCore;
+
+class FeedHub extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedSection: 'all',
+      loadingFeeds: false,
+      feeds: [],
+      feedSubmissions: [],
+      selectedUserId: '',
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.updateProps(this.props);
+  }
+
+  componentDidMount() {
+    this.getFeeds();
+    this.getSubmissions();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!_.isEqual(this.props.feeds, nextProps.feeds) || !_.isEqual(this.props.submissions, nextProps.submissions))
+      this.updateProps(nextProps);
+  }
+
+  updateProps(props) {
+    this.setState({ feeds: props.feeds, feedSubmissions: props.submissions }, this.setData);
+  }
+
+  setData = () => {
+    const feeds = [];
+    const feedSubmissions = [];
+
+    this.state.feeds.forEach((ev) => {
+      if (ev != null && !ev.deleted) feeds.push(ev);
+    });
+    this.state.feedSubmissions.forEach((ev) => {
+      if (ev != null && !ev.deleted) feedSubmissions.push(ev);
+    });
+
+    this.setState({ feeds, feedSubmissions });
+  };
+
+  getFeeds = () => {
+    const { auth } = this.props;
+    this.setState({ loadingFeeds: true }, async () => {
+      try {
+        const res = await feedActions.getFeedsRecursive(auth.site);
+        if (!_.isEmpty(res) && res[0].site === auth.site) {
+          this.props.feedsLoaded(res);
+        }
+      } catch (error) {
+        console.error('getFeeds', error);
+      } finally {
+        this.setState({ loadingFeeds: false });
+      }
+    });
+  };
+
+  getSubmissions = () => {
+    const { auth } = this.props;
+    if (!Session.validateAccess(auth.site, values.permissionFeedManagement, auth)) return;
+
+    this.setState({ loadingSubmissions: true }, async () => {
+      try {
+        const res = await feedActions.getFeedSubmissions(auth.site);
+        const submissions = res.data.Items;
+        // console.log('getSubmissions', submissions && submissions[0]);
+        if (!_.isEmpty(submissions) && submissions[0].site === auth.site) {
+          this.props.feedsSubmissionsLoaded(submissions);
+        }
+      } catch (error) {
+        console.log('getSubmissions error', error);
+      } finally {
+        this.setState({ loadingSubmissions: false });
+      }
+    });
+  };
+
+  canAddNew = (isClass) => {
+    const { auth } = this.props;
+    if (
+      Session.validateAccess(auth.site, values.permissionFeedPost, auth) ||
+      Session.validateAccess(auth.site, values.permissionFeedDraft, auth)
+    )
+      return isClass ? '' : true;
+    return isClass ? ' hub-sideContent-topButton--hide' : false;
+  };
+
+  onAddNew = () => {
+    const { selectedUserId } = this.state;
+    if (this.canAddNew()) {
+      // Preselect user if filter set
+      this.props.history.push(`${values.routeAddFeed}${selectedUserId ? `?userId=${selectedUserId}` : ''}`);
+    }
+  };
+
+  getSideBarSectionColour = (id) => (this.state.selectedSection === id ? { backgroundColor: '#fff' } : {});
+
+  renderStats = (stat, loading) => (loading ? <FontAwesome style={styles.spinner} name="spinner fa-pulse fa-fw" /> : stat);
+
+  renderLeftBar() {
+    const sectionItems = [];
+
+    if (this.canAddNew()) {
+      sectionItems.push({
+        type: 'newButton',
+        text: 'New Feed',
+        onClick: this.onAddNew,
+      });
+    }
+
+    sectionItems.push({
+      type: 'navItem',
+      text: 'View Posts',
+      icon: 'eye',
+      isFontAwesome: true,
+      selected: this.state.selectedSection === 'all',
+      onClick: () => {
+        this.setState({ selectedSection: 'all' });
+      },
+    });
+
+    if (Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth)) {
+      let submissionText = 'View Submissions';
+      if (!this.state.loadingSubmissions) {
+        submissionText = `View Submission${Helper.getPluralS(this.state.feedSubmissions.length)} (${this.state.feedSubmissions.length})`;
+      }
+      sectionItems.push({
+        type: 'navItem',
+        text: submissionText,
+        // icon: 'question-circle-o',
+        // isFontAwesome: true,
+        selected: this.state.selectedSection === 'submissions',
+        onClick: () => {
+          this.setState({ selectedSection: 'submissions' });
+        },
+      });
+    }
+
+    if (Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth)) {
+      sectionItems.push({
+        type: 'navItem',
+        text: 'Feed Types',
+        // icon: 'maintenance2',
+        // isSVG: true,
+        selected: this.state.selectedSection === 'feedTypes',
+        onClick: () => {
+          this.setState({ selectedSection: 'feedTypes' });
+        },
+      });
+    }
+
+    return (
+      <Components.HubSidebar
+        sections={[
+          {
+            title: this.props.strings[`${values.featureKey}_textTitleRequests`] || values.textTitleFeeds,
+            items: sectionItems,
+          },
+        ]}
+        // helpGuide={{
+        //   text: `Help with Feeds`,
+        //   url: Urls.HelpGuide.Feeds,
+        // }}
+      />
+    );
+  }
+
+  renderRight() {
+    const { selectedSection, feeds, feedSubmissions } = this.state;
+
+    if (selectedSection === 'submissions') {
+      return <FeedSubmissions source={feedSubmissions} />;
+    }
+    if (selectedSection === 'feedTypes') {
+      return <FeedTypes />;
+    }
+    return <FeedList source={feeds} onUserSelected={(userId) => this.setState({ selectedUserId: userId })} />;
+  }
+
+  render() {
+    return (
+      <div className="hub-wrapperContainer">
+        {this.renderLeftBar()}
+        <div className="hub-headerContentWrapper">
+          <Components.Header />
+          <div className="hub-contentWrapper">{this.renderRight()}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = {
+  sideBarTitleSection: {
+    lineHeight: '40px',
+    marginTop: 30,
+    marginBottom: 30,
+    paddingLeft: 24,
+    paddingRight: 24,
+  },
+  sideBarSection: {
+    weight: '100%',
+    minWidth: 200,
+    padding: 32,
+    paddingLeft: 24,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  spinner: {
+    fontSize: 32,
+    color: Config.env.colourBrandingOff,
+  },
+};
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    feeds: state[values.reducerKey].feeds,
+    submissions: state[values.reducerKey].submissions,
+    auth,
+    strings: (state.strings && state.strings.config) || {},
+  };
+};
+
+export default connect(mapStateToProps, { feedsLoaded, feedsSubmissionsLoaded })(withRouter(FeedHub));

package/src/values.config.default.js

@@ -0,0 +1,42 @@
+const values = {
+  featureKey: 'feeds',
+  aliases: [],
+  serviceKey: 'feeds',
+  reducerKey: 'feeds',
+  analyticsKey: 'feeds',
+  actionFeedsLoading: 'FEEDS_LOADING',
+  actionFeedsLoaded: 'FEEDS_LOADED',
+  actionFeedRemoved: 'FEEDS_REMOVED',
+  actionFeedsSubmissionsLoaded: 'FEEDS_SUBMISSIONS_LOADED',
+  actionFeedsSubmissionsRemoved: 'FEEDS_SUBMISSIONS_REMOVED',
+  actionFeedTypeLoaded: 'FEED_TYPES_LOADED',
+  permissionFeedManagement: 'feedManagement',
+  permissionFeedPost: 'feedPost',
+  permissionFeedDraft: 'feedDraft',
+  routeHub: '/feedHub',
+  routeAddFeed: '/feedHub/feed',
+  routeFeedDetails: '/feedHub/feedDetails',
+  routeFeedTypes: '/feedTypes',
+  screenFeedHub: 'FeedHub',
+  screenAddFeed: 'AddFeed',
+  screenFeed: 'Feed',
+  screenFeedTypes: 'FeedTypes',
+  svgPathGridIcon:
+    'M5 4.5C4.17157 4.5 3.5 5.17157 3.5 6C3.5 6.82843 4.17157 7.5 5 7.5H14C14.8284 7.5 15.5 6.82843 15.5 6C15.5 5.17157 14.8284 4.5 14 4.5H5ZM5 11.5C4.17157 11.5 3.5 12.1716 3.5 13C3.5 13.8284 4.17157 14.5 5 14.5H21C21.8284 14.5 22.5 13.8284 22.5 13C22.5 12.1716 21.8284 11.5 21 11.5H5ZM5 18.5C4.17157 18.5 3.5 19.1716 3.5 20C3.5 20.8284 4.17157 21.5 5 21.5H17C17.8284 21.5 18.5 20.8284 18.5 20C18.5 19.1716 17.8284 18.5 17 18.5H5Z',
+  svgPathGridIconViewBox: '0 0 26 26',
+  menuOrder: 20,
+  textEmptyDescription: 'allows your users to submit feed posts.',
+  textEmptyExample: '',
+  textAreYouSureYouWantToDelete: 'Are you sure you want to delete the post?',
+  textAreYouSureYouWantToApprove: 'Are you sure you want to approve the post?',
+  textAreYouSureYouWantToReject: 'Are you sure you want to reject the post?',
+  textSingularName: 'Resident Feed',
+  textEmptyState: 'Your Resident Feeds will show here',
+  textTitleFeeds: 'Care Feeds',
+  textMenuTitle: 'Care Feeds',
+  textPermissionFeedManagement: 'Resident Feed Management',
+  textPermissionFeedPost: 'Post Resident Feed',
+  textPermissionFeedDraft: 'Draft Resident Feed',
+};
+
+export { values };

package/src/values.config.js

@@ -0,0 +1,42 @@
+const values = {
+  featureKey: 'feeds',
+  aliases: [],
+  serviceKey: 'feeds',
+  reducerKey: 'feeds',
+  analyticsKey: 'feeds',
+  actionFeedsLoading: 'FEEDS_LOADING',
+  actionFeedsLoaded: 'FEEDS_LOADED',
+  actionFeedRemoved: 'FEEDS_REMOVED',
+  actionFeedsSubmissionsLoaded: 'FEEDS_SUBMISSIONS_LOADED',
+  actionFeedsSubmissionsRemoved: 'FEEDS_SUBMISSIONS_REMOVED',
+  actionFeedTypeLoaded: 'FEED_TYPES_LOADED',
+  permissionFeedManagement: 'feedManagement',
+  permissionFeedPost: 'feedPost',
+  permissionFeedDraft: 'feedDraft',
+  routeHub: '/feedHub',
+  routeAddFeed: '/feedHub/feed',
+  routeFeedDetails: '/feedHub/feedDetails',
+  routeFeedTypes: '/feedTypes',
+  screenFeedHub: 'FeedHub',
+  screenAddFeed: 'AddFeed',
+  screenFeed: 'Feed',
+  screenFeedTypes: 'FeedTypes',
+  svgPathGridIcon:
+    'M5 4.5C4.17157 4.5 3.5 5.17157 3.5 6C3.5 6.82843 4.17157 7.5 5 7.5H14C14.8284 7.5 15.5 6.82843 15.5 6C15.5 5.17157 14.8284 4.5 14 4.5H5ZM5 11.5C4.17157 11.5 3.5 12.1716 3.5 13C3.5 13.8284 4.17157 14.5 5 14.5H21C21.8284 14.5 22.5 13.8284 22.5 13C22.5 12.1716 21.8284 11.5 21 11.5H5ZM5 18.5C4.17157 18.5 3.5 19.1716 3.5 20C3.5 20.8284 4.17157 21.5 5 21.5H17C17.8284 21.5 18.5 20.8284 18.5 20C18.5 19.1716 17.8284 18.5 17 18.5H5Z',
+  svgPathGridIconViewBox: '0 0 26 26',
+  menuOrder: 20,
+  textEmptyDescription: 'allows your users to submit feed posts.',
+  textEmptyExample: '',
+  textAreYouSureYouWantToDelete: 'Are you sure you want to delete the post?',
+  textAreYouSureYouWantToApprove: 'Are you sure you want to approve the post?',
+  textAreYouSureYouWantToReject: 'Are you sure you want to reject the post?',
+  textSingularName: 'Resident Feed',
+  textEmptyState: 'Your Resident Feeds will show here',
+  textTitleFeeds: 'Care Feeds',
+  textMenuTitle: 'Care Feeds',
+  textPermissionFeedManagement: 'Resident Feed Management',
+  textPermissionFeedPost: 'Post Resident Feed',
+  textPermissionFeedDraft: 'Draft Resident Feed',
+};
+
+export { values };