@plusscommunities/pluss-core-web 1.2.9 → 1.2.10

package/dist/index.cjs.js

@@ -691,6 +691,14 @@ var isVideo = function isVideo(url) {
   return ['mov', 'mp4'].includes(extension);
 };
 
+var getFirstName = function getFirstName(string) {
+  if (___default['default'].isEmpty(string)) {
+    return '';
+  }
+
+  return string.split(' ')[0];
+};
+
 var isEmail = function isEmail(email) {
   if (___default['default'].isEmpty(email)) return false;
   var atpos = email.indexOf('@');
@@ -839,12 +847,6 @@ var setLocalStorage = function setLocalStorage(key, value, isJson) {
 //   }
 //   return string.charAt(0).toUpperCase() + string.slice(1);
 // };
-// export const getFirstName = (string) => {
-//   if (_.isEmpty(string)) {
-//     return '';
-//   }
-//   return string.split(' ')[0];
-// };
 // export const get300 = (url) => {
 //   if (!url) {
 //     return url;
@@ -1566,6 +1568,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getFileName: getFileName,
   getThumb300: getThumb300,
   isVideo: isVideo,
+  getFirstName: getFirstName,
   isEmail: isEmail,
   isUrl: isUrl,
   randomString: randomString,
@@ -4342,10 +4345,10 @@ var Text = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React__default['default'].createElement("p", {
+      return /*#__PURE__*/React__default['default'].createElement("p", _extends__default['default']({}, this.props, {
         className: "text-".concat(this.props.type).concat(this.getClassName()),
         style: this.props.style
-      }, this.props.children);
+      }), this.props.children);
     }
   }]);
 
@@ -4431,8 +4434,8 @@ var Comment = /*#__PURE__*/function (_Component) {
   }
 
   _createClass__default['default'](Comment, [{
-    key: "render",
-    value: function render() {
+    key: "renderComment",
+    value: function renderComment() {
       var comment = this.props.comment;
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: comment.Id,
@@ -4451,6 +4454,11 @@ var Comment = /*#__PURE__*/function (_Component) {
         className: "comment_time"
       }, moment__default['default'].utc(comment.Timestamp).local().format('D MMM YYYY • h:mma'))));
     }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderComment(), this.props.bottomContent);
+    }
   }]);
 
   return Comment;
@@ -4501,6 +4509,58 @@ var CommentSection = /*#__PURE__*/function (_Component) {
       }, _callee);
     })));
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getComments", function () {
+      if (!_this.props.onlyParents) {
+        return _this.props.comments;
+      }
+
+      return ___default['default'].filter(_this.props.comments, function (c) {
+        return !c.ParentId;
+      });
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderReplyText", function (c) {
+      if (!_this.props.onOpenThread) {
+        return null;
+      }
+
+      var threadComments = ___default['default'].filter(_this.props.comments, function (innerC) {
+        return innerC.ParentId === c.Id;
+      });
+
+      if (___default['default'].isEmpty(threadComments)) {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "comment_reply"
+        }, /*#__PURE__*/React__default['default'].createElement(Text, {
+          className: "comment_reply_button",
+          type: "button",
+          onClick: function onClick() {
+            _this.props.onOpenThread(c);
+          }
+        }, "Reply to ".concat(getFirstName(c.User ? c.User.displayName : 'comment'))));
+      }
+
+      var profilePics = ___default['default'].take(___default['default'].uniqBy(threadComments, function (c) {
+        return c.UserId;
+      }), 3);
+
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "comment_reply comment_reply-hasReplies"
+      }, profilePics.map(function (c) {
+        return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+          className: "comment_reply_profilePic",
+          size: 20,
+          image: c.User.profilePic
+        });
+      }), /*#__PURE__*/React__default['default'].createElement(Text, {
+        className: "comment_reply_button",
+        type: "button",
+        onClick: function onClick() {
+          _this.props.onOpenThread(c);
+        }
+      }, "".concat(threadComments.length, " repl").concat(getPluralOptions(threadComments.length, 'y', 'ies'))));
+    });
+
     _this.state = {
       commentInput: ''
     };
@@ -4517,10 +4577,11 @@ var CommentSection = /*#__PURE__*/function (_Component) {
         className: "marginBottom-16"
       }, "Comments"), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "commentSection"
-      }, this.props.comments.map(function (c) {
+      }, this.getComments().map(function (c) {
         return /*#__PURE__*/React__default['default'].createElement(Comment, {
           key: c.Id,
-          comment: c
+          comment: c,
+          bottomContent: _this2.renderReplyText(c)
         });
       })), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "commentReply"

package/dist/index.esm.js

@@ -664,6 +664,14 @@ var isVideo = function isVideo(url) {
   return ['mov', 'mp4'].includes(extension);
 };
 
+var getFirstName = function getFirstName(string) {
+  if (_.isEmpty(string)) {
+    return '';
+  }
+
+  return string.split(' ')[0];
+};
+
 var isEmail = function isEmail(email) {
   if (_.isEmpty(email)) return false;
   var atpos = email.indexOf('@');
@@ -812,12 +820,6 @@ var setLocalStorage = function setLocalStorage(key, value, isJson) {
 //   }
 //   return string.charAt(0).toUpperCase() + string.slice(1);
 // };
-// export const getFirstName = (string) => {
-//   if (_.isEmpty(string)) {
-//     return '';
-//   }
-//   return string.split(' ')[0];
-// };
 // export const get300 = (url) => {
 //   if (!url) {
 //     return url;
@@ -1539,6 +1541,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getFileName: getFileName,
   getThumb300: getThumb300,
   isVideo: isVideo,
+  getFirstName: getFirstName,
   isEmail: isEmail,
   isUrl: isUrl,
   randomString: randomString,
@@ -4315,10 +4318,10 @@ var Text = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("p", {
+      return /*#__PURE__*/React.createElement("p", _extends({}, this.props, {
         className: "text-".concat(this.props.type).concat(this.getClassName()),
         style: this.props.style
-      }, this.props.children);
+      }), this.props.children);
     }
   }]);
 
@@ -4404,8 +4407,8 @@ var Comment = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Comment, [{
-    key: "render",
-    value: function render() {
+    key: "renderComment",
+    value: function renderComment() {
       var comment = this.props.comment;
       return /*#__PURE__*/React.createElement("div", {
         key: comment.Id,
@@ -4424,6 +4427,11 @@ var Comment = /*#__PURE__*/function (_Component) {
         className: "comment_time"
       }, moment.utc(comment.Timestamp).local().format('D MMM YYYY • h:mma'))));
     }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, this.renderComment(), this.props.bottomContent);
+    }
   }]);
 
   return Comment;
@@ -4474,6 +4482,58 @@ var CommentSection = /*#__PURE__*/function (_Component) {
       }, _callee);
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "getComments", function () {
+      if (!_this.props.onlyParents) {
+        return _this.props.comments;
+      }
+
+      return _.filter(_this.props.comments, function (c) {
+        return !c.ParentId;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderReplyText", function (c) {
+      if (!_this.props.onOpenThread) {
+        return null;
+      }
+
+      var threadComments = _.filter(_this.props.comments, function (innerC) {
+        return innerC.ParentId === c.Id;
+      });
+
+      if (_.isEmpty(threadComments)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "comment_reply"
+        }, /*#__PURE__*/React.createElement(Text, {
+          className: "comment_reply_button",
+          type: "button",
+          onClick: function onClick() {
+            _this.props.onOpenThread(c);
+          }
+        }, "Reply to ".concat(getFirstName(c.User ? c.User.displayName : 'comment'))));
+      }
+
+      var profilePics = _.take(_.uniqBy(threadComments, function (c) {
+        return c.UserId;
+      }), 3);
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "comment_reply comment_reply-hasReplies"
+      }, profilePics.map(function (c) {
+        return /*#__PURE__*/React.createElement(ProfilePic, {
+          className: "comment_reply_profilePic",
+          size: 20,
+          image: c.User.profilePic
+        });
+      }), /*#__PURE__*/React.createElement(Text, {
+        className: "comment_reply_button",
+        type: "button",
+        onClick: function onClick() {
+          _this.props.onOpenThread(c);
+        }
+      }, "".concat(threadComments.length, " repl").concat(getPluralOptions(threadComments.length, 'y', 'ies'))));
+    });
+
     _this.state = {
       commentInput: ''
     };
@@ -4490,10 +4550,11 @@ var CommentSection = /*#__PURE__*/function (_Component) {
         className: "marginBottom-16"
       }, "Comments"), /*#__PURE__*/React.createElement("div", {
         className: "commentSection"
-      }, this.props.comments.map(function (c) {
+      }, this.getComments().map(function (c) {
         return /*#__PURE__*/React.createElement(Comment, {
           key: c.Id,
-          comment: c
+          comment: c,
+          bottomContent: _this2.renderReplyText(c)
         });
       })), /*#__PURE__*/React.createElement("div", {
         className: "commentReply"

package/dist/index.umd.js

@@ -666,6 +666,14 @@
     return ['mov', 'mp4'].includes(extension);
   };
 
+  var getFirstName = function getFirstName(string) {
+    if (___default['default'].isEmpty(string)) {
+      return '';
+    }
+
+    return string.split(' ')[0];
+  };
+
   var isEmail = function isEmail(email) {
     if (___default['default'].isEmpty(email)) return false;
     var atpos = email.indexOf('@');
@@ -814,12 +822,6 @@
   //   }
   //   return string.charAt(0).toUpperCase() + string.slice(1);
   // };
-  // export const getFirstName = (string) => {
-  //   if (_.isEmpty(string)) {
-  //     return '';
-  //   }
-  //   return string.split(' ')[0];
-  // };
   // export const get300 = (url) => {
   //   if (!url) {
   //     return url;
@@ -1541,6 +1543,7 @@
     getFileName: getFileName,
     getThumb300: getThumb300,
     isVideo: isVideo,
+    getFirstName: getFirstName,
     isEmail: isEmail,
     isUrl: isUrl,
     randomString: randomString,
@@ -4317,10 +4320,10 @@
     }, {
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("p", {
+        return /*#__PURE__*/React__default['default'].createElement("p", _extends__default['default']({}, this.props, {
           className: "text-".concat(this.props.type).concat(this.getClassName()),
           style: this.props.style
-        }, this.props.children);
+        }), this.props.children);
       }
     }]);
 
@@ -4406,8 +4409,8 @@
     }
 
     _createClass__default['default'](Comment, [{
-      key: "render",
-      value: function render() {
+      key: "renderComment",
+      value: function renderComment() {
         var comment = this.props.comment;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: comment.Id,
@@ -4426,6 +4429,11 @@
           className: "comment_time"
         }, moment__default['default'].utc(comment.Timestamp).local().format('D MMM YYYY • h:mma'))));
       }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderComment(), this.props.bottomContent);
+      }
     }]);
 
     return Comment;
@@ -4476,6 +4484,58 @@
         }, _callee);
       })));
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getComments", function () {
+        if (!_this.props.onlyParents) {
+          return _this.props.comments;
+        }
+
+        return ___default['default'].filter(_this.props.comments, function (c) {
+          return !c.ParentId;
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderReplyText", function (c) {
+        if (!_this.props.onOpenThread) {
+          return null;
+        }
+
+        var threadComments = ___default['default'].filter(_this.props.comments, function (innerC) {
+          return innerC.ParentId === c.Id;
+        });
+
+        if (___default['default'].isEmpty(threadComments)) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "comment_reply"
+          }, /*#__PURE__*/React__default['default'].createElement(Text, {
+            className: "comment_reply_button",
+            type: "button",
+            onClick: function onClick() {
+              _this.props.onOpenThread(c);
+            }
+          }, "Reply to ".concat(getFirstName(c.User ? c.User.displayName : 'comment'))));
+        }
+
+        var profilePics = ___default['default'].take(___default['default'].uniqBy(threadComments, function (c) {
+          return c.UserId;
+        }), 3);
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "comment_reply comment_reply-hasReplies"
+        }, profilePics.map(function (c) {
+          return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+            className: "comment_reply_profilePic",
+            size: 20,
+            image: c.User.profilePic
+          });
+        }), /*#__PURE__*/React__default['default'].createElement(Text, {
+          className: "comment_reply_button",
+          type: "button",
+          onClick: function onClick() {
+            _this.props.onOpenThread(c);
+          }
+        }, "".concat(threadComments.length, " repl").concat(getPluralOptions(threadComments.length, 'y', 'ies'))));
+      });
+
       _this.state = {
         commentInput: ''
       };
@@ -4492,10 +4552,11 @@
           className: "marginBottom-16"
         }, "Comments"), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "commentSection"
-        }, this.props.comments.map(function (c) {
+        }, this.getComments().map(function (c) {
           return /*#__PURE__*/React__default['default'].createElement(Comment, {
             key: c.Id,
-            comment: c
+            comment: c,
+            bottomContent: _this2.renderReplyText(c)
           });
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "commentReply"

package/package.json

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

package/src/components/Comment.js

@@ -4,7 +4,7 @@ import { toParagraphed } from '../helper';
 import { ProfilePic } from './ProfilePic';
 
 class Comment extends Component {
-  render() {
+  renderComment() {
     const { comment } = this.props;
     return (
       <div key={comment.Id} className="comment">
@@ -17,6 +17,15 @@ class Comment extends Component {
       </div>
     );
   }
+
+  render() {
+    return (
+      <div>
+        {this.renderComment()}
+        {this.props.bottomContent}
+      </div>
+    );
+  }
 }
 
 export { Comment };

package/src/components/CommentSection.js

@@ -4,6 +4,8 @@ import _ from 'lodash';
 import Textarea from 'react-textarea-autosize';
 import { Text } from './Text';
 import { Comment } from './Comment';
+import { getFirstName, getPluralOptions } from '../helper';
+import { ProfilePic } from './ProfilePic';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -26,6 +28,57 @@ class CommentSection extends Component {
     this.props.onAddComment(commentInput);
   };
 
+  getComments = () => {
+    if (!this.props.onlyParents) {
+      return this.props.comments;
+    }
+    return _.filter(this.props.comments, (c) => {
+      return !c.ParentId;
+    });
+  };
+
+  renderReplyText = (c) => {
+    if (!this.props.onOpenThread) {
+      return null;
+    }
+
+    const threadComments = _.filter(this.props.comments, (innerC) => {
+      return innerC.ParentId === c.Id;
+    });
+    if (_.isEmpty(threadComments)) {
+      return (
+        <div className="comment_reply">
+          <Text
+            className="comment_reply_button"
+            type="button"
+            onClick={() => {
+              this.props.onOpenThread(c);
+            }}
+          >{`Reply to ${getFirstName(c.User ? c.User.displayName : 'comment')}`}</Text>
+        </div>
+      );
+    }
+
+    const profilePics = _.take(
+      _.uniqBy(threadComments, (c) => c.UserId),
+      3,
+    );
+    return (
+      <div className="comment_reply comment_reply-hasReplies">
+        {profilePics.map((c) => {
+          return <ProfilePic className="comment_reply_profilePic" size={20} image={c.User.profilePic} />;
+        })}
+        <Text
+          className="comment_reply_button"
+          type="button"
+          onClick={() => {
+            this.props.onOpenThread(c);
+          }}
+        >{`${threadComments.length} repl${getPluralOptions(threadComments.length, 'y', 'ies')}`}</Text>
+      </div>
+    );
+  };
+
   render() {
     return (
       <div>
@@ -35,8 +88,8 @@ class CommentSection extends Component {
           </Text>
         )}
         <div className="commentSection">
-          {this.props.comments.map((c) => (
-            <Comment key={c.Id} comment={c} />
+          {this.getComments().map((c) => (
+            <Comment key={c.Id} comment={c} bottomContent={this.renderReplyText(c)} />
           ))}
         </div>
         <div className="commentReply">

package/src/components/Text.js

@@ -10,7 +10,7 @@ class Text extends Component {
 
   render() {
     return (
-      <p className={`text-${this.props.type}${this.getClassName()}`} style={this.props.style}>
+      <p {...this.props} className={`text-${this.props.type}${this.getClassName()}`} style={this.props.style}>
         {this.props.children}
       </p>
     );

package/src/helper/helper.js

@@ -67,13 +67,6 @@ import moment from 'moment';
 //   return string.charAt(0).toUpperCase() + string.slice(1);
 // };
 
-// export const getFirstName = (string) => {
-//   if (_.isEmpty(string)) {
-//     return '';
-//   }
-//   return string.split(' ')[0];
-// };
-
 // export const get300 = (url) => {
 //   if (!url) {
 //     return url;

package/src/helper/index.js

@@ -18,6 +18,7 @@ export { default as getThumb300 } from './files/getThumb300';
 export { default as isVideo } from './files/isVideo';
 
 // strings
+export { default as getFirstName } from './strings/getFirstName';
 export { default as isEmail } from './strings/isEmail';
 export { default as isUrl } from './strings/isUrl';
 export { default as randomString } from './strings/randomString';

package/src/helper/strings/getFirstName.js

@@ -0,0 +1,10 @@
+import _ from 'lodash';
+
+const getFirstName = (string) => {
+  if (_.isEmpty(string)) {
+    return '';
+  }
+  return string.split(' ')[0];
+};
+
+export default getFirstName;