@plusscommunities/pluss-core-web 1.2.4 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.4",
+  "version": "1.2.8",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/AudienceSelector.js

@@ -12,38 +12,41 @@ import { DropdownInput } from './DropdownInput';
 import { Tag } from './Tag';
 
 class AudienceSelector extends Component {
-  state = {
-    categories: [
-      {
-        Title: 'All Primary Users',
-        Key: 'resident',
-        ShortName: 'Primary',
-      },
-      {
-        Title: 'All Staff Users',
-        Key: 'staff',
-        ShortName: 'Staff',
-      },
-      {
-        Title: 'All Linked Users',
-        Key: 'family',
-        ShortName: 'Linked',
-      },
-    ],
-    types: [],
-    AudienceType: 'All',
-
-    showInclude: false,
-    includeList: [],
-    showExclude: false,
-    excludeList: [],
-    Type: '',
-    Category: '',
-
-    userList: [],
-    tagList: [],
-    AudienceTagList: [],
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      categories: [
+        {
+          Title: 'All Primary Users',
+          Key: 'resident',
+          ShortName: 'Primary',
+        },
+        {
+          Title: 'All Staff Users',
+          Key: 'staff',
+          ShortName: 'Staff',
+        },
+        {
+          Title: 'All Linked Users',
+          Key: 'family',
+          ShortName: 'Linked',
+        },
+      ],
+      types: [],
+      AudienceType: props.audienceType || 'All',
+      showInclude: false,
+      includeList: [],
+      showExclude: false,
+      excludeList: [],
+      Type: '',
+      Category: '',
+
+      userList: [],
+      tagList: [],
+      AudienceTagList: props.audienceTypeSelection || [],
+    };
+  }
 
   componentDidMount() {
     const { disallowUserType, custom, disallowSingleUsers, allowTags } = this.props;
@@ -52,6 +55,14 @@ class AudienceSelector extends Component {
     if (allowTags || custom) this.getUserTags();
   }
 
+  componentDidUpdate(prevProps) {
+    const newState = {};
+    if (prevProps.audienceType !== this.props.audienceType) newState.AudienceType = this.props.audienceType;
+    if (!_.isEqual(prevProps.audienceTypeSelection, this.props.audienceTypeSelection))
+      newState.AudienceTagList = this.props.audienceTypeSelection;
+    if (!_.isEmpty(newState)) this.setState(newState);
+  }
+
   onSubmit() {
     if (this.state.AudienceType === 'User' && _.isEmpty(this.state.includeList)) {
       this.setState({ showInclude: true });
@@ -64,13 +75,7 @@ class AudienceSelector extends Component {
 
   getAudienceTypeSelection() {
     const { AudienceType, AudienceTagList, Category, Tag, Type } = this.state;
-    if (AudienceType === 'Custom')
-      return AudienceTagList.map((at) => {
-        return {
-          AudienceType: at.AudienceType,
-          AudienceTypeSelection: at.AudienceTypeSelection,
-        };
-      });
+    if (AudienceType === 'Custom') return AudienceTagList || [];
     if (AudienceType === 'Category') return Category;
     if (AudienceType === 'UserTags') return Tag;
     return Type;
@@ -116,6 +121,13 @@ class AudienceSelector extends Component {
     this.setState(newState);
   }
 
+  onChangeSelection = () => {
+    const { updateValidation, onChange } = this.props;
+    const isValid = this.validateAudienceSelection();
+    if (updateValidation) updateValidation(isValid);
+    if (onChange) onChange(this.getAudienceType(), this.getAudienceTypeSelection(), isValid);
+  };
+
   onChangeOption(type) {
     this.setState({
       AudienceType: type,
@@ -123,10 +135,9 @@ class AudienceSelector extends Component {
       Category: '',
       includeList: [],
       excludeList: [],
+      AudienceTagList: [],
     });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   }
 
   getOptions() {
@@ -190,9 +201,7 @@ class AudienceSelector extends Component {
       includeList: [],
       excludeList: [],
     });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   }
 
   getTypeTitle() {
@@ -211,9 +220,7 @@ class AudienceSelector extends Component {
       includeList: [],
       excludeList: [],
     });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   };
 
   getTagTitle() {
@@ -281,9 +288,7 @@ class AudienceSelector extends Component {
       includeList: [],
       excludeList: [],
     });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   }
 
   getCatTitle() {
@@ -370,9 +375,7 @@ class AudienceSelector extends Component {
       profilePic: user.profilePic,
     });
     this.setState({ includeList: list });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   }
 
   removeUserInc(user) {
@@ -381,9 +384,7 @@ class AudienceSelector extends Component {
         return ev.Id !== user.Id;
       }),
     });
-    setTimeout(() => {
-      this.props.updateValidation(this.validateAudienceSelection());
-    }, 50);
+    setTimeout(this.onChangeSelection, 50);
   }
 
   addToEx(user) {
@@ -404,7 +405,7 @@ class AudienceSelector extends Component {
     });
   }
 
-  getAvailableAudienceTags = () => {
+  getAvailableAudienceTags = (includeSelected = false) => {
     const { categories, types, tagList, AudienceTagList } = this.state;
     const categoryTags = categories.map((c) => {
       return {
@@ -430,19 +431,18 @@ class AudienceSelector extends Component {
         Title: `User Tag: ${t.Title}`,
       };
     });
-    return [...categoryTags, ...userTypeTags, ...userTagTags].filter((t) => {
-      return !_.some(AudienceTagList, (at) => at.Id === t.Id);
-    });
+    const result = [...categoryTags, ...userTypeTags, ...userTagTags];
+    return includeSelected ? result : result.filter((t) => !_.some(AudienceTagList, (at) => at.Id === t.Id));
   };
 
   onAttachAudienceTag = (tag) => {
     const AudienceTagList = [...this.state.AudienceTagList, tag];
-    this.setState({ AudienceTagList }, () => this.props.updateValidation(this.validateAudienceSelection()));
+    this.setState({ AudienceTagList }, this.onChangeSelection);
   };
 
   onDetachAudienceTag = (tag) => {
     const AudienceTagList = _.filter(this.state.AudienceTagList, (at) => at.Id !== tag.Id);
-    this.setState({ AudienceTagList }, () => this.props.updateValidation(this.validateAudienceSelection()));
+    this.setState({ AudienceTagList }, this.onChangeSelection);
   };
 
   renderExcludes() {

package/src/components/Comment.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import { toParagraphed } from '../helper';
+import { ProfilePic } from './ProfilePic';
+
+class Comment extends Component {
+  render() {
+    const { comment } = this.props;
+    return (
+      <div key={comment.Id} className="comment">
+        <p className="comment_text">{toParagraphed(comment.Comment)}</p>
+        <div className="comment_bottom">
+          <ProfilePic className="comment_profilePic" size={25} image={comment.User.profilePic} />
+          <p className="comment_name">{comment.User.displayName}</p>
+          <p className="comment_time">{moment.utc(comment.Timestamp).local().format('D MMM YYYY • h:mma')}</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { Comment };

package/src/components/CommentSection.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
+import Textarea from 'react-textarea-autosize';
+import { Text } from './Text';
+import { Comment } from './Comment';
+
+class CommentSection extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      commentInput: '',
+    };
+  }
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  onAddComment = async () => {
+    const { commentInput } = this.state;
+    this.setState({ commentInput: '' });
+    this.props.onAddComment(commentInput);
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.includeTitle && (
+          <Text type="formTitleSmall" className="marginBottom-16">
+            Comments
+          </Text>
+        )}
+        <div className="commentSection">
+          {this.props.comments.map((c) => (
+            <Comment key={c.Id} comment={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>
+    );
+  }
+}
+
+export { CommentSection };

package/src/components/index.js

@@ -2,6 +2,8 @@ export * from './AddButton';
 export * from './Attachment';
 export * from './Button';
 export * from './CheckBox';
+export * from './Comment';
+export * from './CommentSection';
 export * from './DatePicker';
 export * from './FileInput';
 export * from './GenericInput';