@plusscommunities/pluss-core-app 4.0.4-auth.0 → 6.0.0-auth.0

package/dist/module/components/CommentSection.js

@@ -0,0 +1,822 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import _ from 'lodash';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import { Icon } from 'react-native-elements';
+import { getPluralS, getThumb300, get1400, getSiteSettingFromState, getFirstName, getPluralOptions } from '../helper';
+import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from '../colours';
+import { reactionActions, notificationActions } from '../apis';
+import { blockUser, unblockUser } from '../actions';
+import { ConfirmPopup } from './ConfirmPopup';
+import { ProfilePic } from './ProfilePic';
+import { ImagePopup } from './ImagePopup';
+import { InlineButton } from './InlineButton';
+import { Spinner } from './Spinner';
+import { Services } from '../config';
+class CommentSection extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onPressDeleteComment", c => {
+      this.setState({
+        commentToDelete: c
+      });
+    });
+    _defineProperty(this, "onPressConfirmDelete", () => {
+      reactionActions.removeComment(this.state.commentToDelete.Id).then(res => {
+        console.log('deleted');
+      });
+      const newComments = _.filter(this.state.comments, c => {
+        return c.Id !== this.state.commentToDelete.Id;
+      });
+      this.setState({
+        comments: newComments,
+        commentToDelete: null
+      });
+    });
+    _defineProperty(this, "onPressCancelDelete", () => {
+      this.setState({
+        commentToDelete: null
+      });
+    });
+    _defineProperty(this, "onPressReportComment", c => {
+      this.setState({
+        commentToReport: c
+      });
+    });
+    _defineProperty(this, "onPressBlockUser", c => {
+      this.setState({
+        commentToBlock: c
+      });
+    });
+    _defineProperty(this, "onPressConfirmBlock", () => {
+      const userId = this.state.commentToBlock.UserId;
+      this.props.blockUser(userId);
+      this.setState({
+        commentToBlock: null
+      });
+    });
+    _defineProperty(this, "onPressCancelBlock", () => {
+      this.setState({
+        commentToBlock: null
+      });
+    });
+    _defineProperty(this, "onPressUnblockUser", c => {
+      this.setState({
+        commentToUnblock: c
+      });
+    });
+    _defineProperty(this, "onPressConfirmUnblock", () => {
+      const userId = this.state.commentToUnblock.UserId;
+      this.props.unblockUser(userId);
+      this.setState({
+        commentToUnblock: null
+      });
+    });
+    _defineProperty(this, "onPressCancelUnblock", () => {
+      this.setState({
+        commentToUnblock: null
+      });
+    });
+    _defineProperty(this, "onPressConfirmReport", () => {
+      const commentId = this.state.commentToReport.Id;
+      this.setState({
+        reportLoading: true,
+        commentToReport: null
+      }, () => {
+        reactionActions.reportComment(commentId).then(res => {
+          this.setState({
+            commentReportedStatus: 'success',
+            reportLoading: false
+          });
+        }).catch(error => {
+          console.log('reportComment', error);
+          this.setState({
+            commentReportedStatus: 'fail',
+            reportLoading: false
+          });
+        });
+      });
+    });
+    _defineProperty(this, "onPressCancelReport", () => {
+      this.setState({
+        commentToReport: null
+      });
+    });
+    _defineProperty(this, "onPressConfirmReportStatus", () => {
+      this.setState({
+        commentReportedStatus: null
+      });
+    });
+    _defineProperty(this, "onOpenThread", comment => {
+      Services.navigation.navigate('thread', {
+        ...this.props,
+        threadId: comment.Id
+      });
+    });
+    _defineProperty(this, "onMute", () => {
+      const {
+        entityType,
+        entityId
+      } = this.props;
+      this.setState({
+        processing: true
+      }, async () => {
+        try {
+          const {
+            data
+          } = await notificationActions.muteEntity(entityType, entityId);
+          // console.log('onMute', data);
+          const muteExpiry = moment(data.Expiry);
+          this.setState({
+            muteExpiry,
+            processing: false
+          });
+        } catch (error) {
+          console.error('onMute', error);
+          this.setState({
+            processing: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "onUnmute", () => {
+      const {
+        entityType,
+        entityId
+      } = this.props;
+      this.setState({
+        processing: true
+      }, async () => {
+        try {
+          const {
+            data
+          } = await notificationActions.unmuteEntity(entityType, entityId);
+          // console.log('onUnmute', data);
+          this.setState({
+            muteExpiry: null,
+            processing: false
+          });
+        } catch (error) {
+          console.error('onUnmute', error);
+          this.setState({
+            processing: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "isMuted", () => {
+      const {
+        muteExpiry
+      } = this.state;
+      return muteExpiry && moment() <= muteExpiry;
+    });
+    _defineProperty(this, "getMuteRemaining", () => {
+      const {
+        muteExpiry
+      } = this.state;
+      const actual = muteExpiry ? moment.duration(muteExpiry.diff(moment())).asHours() : 0;
+      return Math.abs(Math.ceil(actual));
+    });
+    _defineProperty(this, "getNotificationSate", () => {
+      const {
+        processing
+      } = this.state;
+      const {
+        entityType,
+        entityId,
+        notificationsForComments
+      } = this.props;
+      if (processing || !notificationsForComments) return;
+      this.setState({
+        processing: true
+      }, async () => {
+        try {
+          const {
+            data
+          } = await notificationActions.getEntityNotificationSetting(entityType, entityId);
+          // console.log('getNotificationSate', data);
+          const muteExpiry = data ? moment(data.Expiry) : null;
+          this.setState({
+            muteExpiry,
+            muteLoaded: true,
+            processing: false
+          });
+        } catch (error) {
+          console.error('getNotificationSate', error);
+          this.setState({
+            processing: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "isLoading", () => {
+      return this.state.commentsLoading;
+    });
+    _defineProperty(this, "isUserBlocked", c => {
+      return _.includes(this.props.blockedUsers, c.UserId);
+    });
+    _defineProperty(this, "canBlockComment", c => {
+      return this.props.user.uid !== c.UserId;
+    });
+    _defineProperty(this, "renderReplyText", (c, isUserBlocked) => {
+      if (this.props.threadId || this.props.hideReplyButton) {
+        return null;
+      }
+      const threadComments = _.filter(this.state.comments, innerC => {
+        return innerC.ParentId === c.Id;
+      });
+      let content = null;
+      if (_.isEmpty(threadComments)) {
+        // no replies
+        content = /*#__PURE__*/React.createElement(Text, {
+          style: [styles.commentRepliesText, {
+            color: this.props.colourBrandingMain
+          }]
+        }, `Reply to ${getFirstName(!isUserBlocked && c.User ? c.User.displayName : 'comment')}`);
+      } else {
+        // existing replies
+        const profilePics = _.take(_.uniqBy(threadComments, c => c.UserId), 3);
+        content = /*#__PURE__*/React.createElement(View, {
+          style: styles.multiReplyContainer
+        }, profilePics.map((c, i) => {
+          return /*#__PURE__*/React.createElement(ProfilePic, {
+            style: {
+              marginRight: -10
+            },
+            Diameter: 20,
+            ProfilePic: c.User.profilePic
+          });
+        }), /*#__PURE__*/React.createElement(Text, {
+          style: [styles.commentRepliesText, {
+            marginLeft: 20,
+            color: this.props.colourBrandingMain
+          }]
+        }, `${threadComments.length} repl${getPluralOptions(threadComments.length, 'y', 'ies')}`));
+      }
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.commentReplies
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: () => {
+          this.onOpenThread(c);
+        }
+      }, content));
+    });
+    this.state = {
+      commentsLoading: false,
+      comments: [],
+      addingComment: false,
+      commentToDelete: null,
+      commentToReport: null,
+      commentReportedStatus: null,
+      reportLoading: false,
+      processing: false,
+      muteExpiry: null,
+      muteLoaded: false
+    };
+  }
+  componentDidMount() {
+    this.getNotificationSate();
+    if (!_.includes(this.props.user.hidden, 'viewComment')) {
+      this.getComments();
+    }
+  }
+  componentWillUnmount() {
+    if (this.loadTimer) {
+      clearTimeout(this.loadTimer);
+    }
+  }
+  onPressCommentImage(image) {
+    this.setState({
+      imagePopupSource: [image],
+      imagePopupOpen: true
+    });
+  }
+  onGoToAdd() {
+    var _this$props$commentRe;
+    (_this$props$commentRe = this.props.commentReply) === null || _this$props$commentRe === void 0 || (_this$props$commentRe = _this$props$commentRe.current) === null || _this$props$commentRe === void 0 || _this$props$commentRe.focusInput();
+  }
+  getAdjustedSize(size) {
+    if (this.props.scaleFont) {
+      return size + this.props.user.fontScale;
+    }
+    return size;
+  }
+  getComments() {
+    if (!this.state.commentsLoadStarted) {
+      var _this$props$commentRe2;
+      this.setState({
+        commentsLoadStarted: true,
+        commentsLoading: true
+      });
+      (_this$props$commentRe2 = this.props.commentReply) === null || _this$props$commentRe2 === void 0 || (_this$props$commentRe2 = _this$props$commentRe2.current) === null || _this$props$commentRe2 === void 0 || _this$props$commentRe2.loadingStarted();
+      this.loadComments();
+    }
+  }
+  isEmpty() {
+    return _.isEmpty(this.state.comments);
+  }
+  loadComments() {
+    const minTime = this.isEmpty() ? 0 : _.maxBy(this.state.comments, c => {
+      return c.Timestamp;
+    }).Timestamp;
+    reactionActions.getComments(this.props.entityId, this.props.entityType, minTime).then(res => {
+      var _this$props$commentRe3;
+      this.setState({
+        comments: _.sortBy(_.uniqBy(_.filter(_.concat(this.state.comments, res.data), c => {
+          if (!this.props.threadId) {
+            return true;
+          }
+          return c.Id === this.props.threadId || c.ParentId === this.props.threadId;
+        }), c => {
+          return c.Id;
+        }), 'Timestamp'),
+        commentsLoading: false
+      }, () => {
+        if (this.props.onCommentsLoaded) {
+          this.props.onCommentsLoaded(this.state.comments.length);
+        }
+      });
+      //if (this.props.commentReply) {
+      (_this$props$commentRe3 = this.props.commentReply) === null || _this$props$commentRe3 === void 0 || (_this$props$commentRe3 = _this$props$commentRe3.current) === null || _this$props$commentRe3 === void 0 || _this$props$commentRe3.loadingCompleted();
+      //}
+      if (this.props.live) {
+        this.loadTimer = setTimeout(() => {
+          this.loadComments();
+        }, this.props.refreshFrequency || 2000);
+      }
+    });
+  }
+  startedAddingComment() {
+    this.setState({
+      addingComment: true
+    });
+  }
+  commentAdded(comment) {
+    const newComments = this.state.comments;
+    newComments.push(comment);
+    this.setState({
+      addingComment: false,
+      comments: newComments
+    }, () => {
+      if (this.props.onCommentAdded) {
+        this.props.onCommentAdded();
+      }
+    });
+  }
+  canRemoveComment(c) {
+    if (this.props.user.uid === c.UserId) {
+      return true;
+    }
+    return _.includes(this.props.user.permissions, this.props.adminPermission);
+  }
+  closeCommentGallery() {
+    this.setState({
+      imagePopupSource: [],
+      imagePopupOpen: false
+    });
+  }
+  renderCommentDeleteConfirm() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: !!this.state.commentToDelete,
+      onConfirm: this.onPressConfirmDelete,
+      onCancel: this.onPressCancelDelete,
+      onClose: this.onPressCancelDelete,
+      text: "Are you sure you want to delete this comment?"
+    });
+  }
+  renderCommentReportConfirm() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: !!this.state.commentToReport,
+      onConfirm: this.onPressConfirmReport,
+      onCancel: this.onPressCancelReport,
+      onClose: this.onPressCancelReport,
+      text: "Are you sure you want to report this comment?",
+      extraContent: /*#__PURE__*/React.createElement(Text, {
+        style: styles.commentReportText
+      }, "This comment will be reported to our team and considered for deletion")
+    });
+  }
+  renderCommentBlockConfirm() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: !!this.state.commentToBlock,
+      onConfirm: this.onPressConfirmBlock,
+      onCancel: this.onPressCancelBlock,
+      onClose: this.onPressCancelBlock,
+      text: "Are you sure you want to block this user?",
+      extraContent: /*#__PURE__*/React.createElement(Text, {
+        style: styles.commentReportText
+      }, "You will no longer see comments made by this user")
+    });
+  }
+  renderCommentUnblockConfirm() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: !!this.state.commentToUnblock,
+      onConfirm: this.onPressConfirmUnblock,
+      onCancel: this.onPressCancelUnblock,
+      onClose: this.onPressCancelUnblock,
+      text: "Are you sure you want to unblock this user?",
+      extraContent: /*#__PURE__*/React.createElement(Text, {
+        style: styles.commentReportText
+      }, "You will once again see comments made by this user")
+    });
+  }
+  renderCommentReportStatus() {
+    const {
+      commentReportedStatus
+    } = this.state;
+    const isSuccess = commentReportedStatus === 'success';
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: !!commentReportedStatus,
+      onConfirm: this.onPressConfirmReportStatus,
+      text: isSuccess ? 'Thank you for reporting' : 'Unable to report',
+      extraContent: /*#__PURE__*/React.createElement(Text, {
+        style: styles.commentReportText
+      }, isSuccess ? 'We will review the comment within 24 hours' : 'There was a problem reporting the comment please try again later'),
+      hideNo: true,
+      yesText: 'Done'
+    });
+  }
+  renderCommentImage(c) {
+    if (_.isEmpty(c.Image)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.commentImageContainer,
+      onPress: this.onPressCommentImage.bind(this, get1400(c.Image))
+    }, /*#__PURE__*/React.createElement(Image, {
+      style: styles.commentImage,
+      source: {
+        uri: getThumb300(c.Image)
+      }
+    }));
+  }
+  renderComment(c) {
+    const isUserBlocked = this.isUserBlocked(c);
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.comment,
+      key: c.Id
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.commentFlex
+    }, /*#__PURE__*/React.createElement(ProfilePic, {
+      ProfilePic: isUserBlocked ? null : c.User.profilePic,
+      Diameter: 40,
+      style: styles.commentProfilePic
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.commentBlock
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.commentTitleRow
+    }, this.canRemoveComment(c) ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onPressDeleteComment.bind(this, c)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.commentButtonContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "trash",
+      type: "font-awesome",
+      iconStyle: styles.commentButtonIcon
+    }))) : !this.props.disableFlag && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onPressReportComment.bind(this, c)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.commentButtonContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "flag",
+      type: "font-awesome",
+      iconStyle: styles.commentButtonIcon
+    }))), !this.props.disableFlag && this.canBlockComment(c) && (isUserBlocked ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: {
+        marginRight: 8
+      },
+      onPress: this.onPressUnblockUser.bind(this, c)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.commentButtonContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "user-plus",
+      type: "font-awesome",
+      iconStyle: styles.commentButtonIcon
+    }))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: {
+        marginRight: 8
+      },
+      onPress: this.onPressBlockUser.bind(this, c)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.commentButtonContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "user-times",
+      type: "font-awesome",
+      iconStyle: styles.commentButtonIcon
+    })))), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.commentName, {
+        fontSize: this.getAdjustedSize(13)
+      }]
+    }, isUserBlocked ? '[blocked user]' : c.User.displayName)), !_.isEmpty(c.Comment) && /*#__PURE__*/React.createElement(Text, {
+      style: [styles.commentText, {
+        fontSize: this.getAdjustedSize(13)
+      }]
+    }, isUserBlocked ? '[hidden]' : c.Comment), !isUserBlocked && this.renderCommentImage(c))), /*#__PURE__*/React.createElement(View, {
+      style: styles.commentBottom
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.commentTime, {
+        fontSize: this.getAdjustedSize(13)
+      }]
+    }, moment.utc(c.Timestamp).local().format('D MMM • h:mma')), this.renderReplyText(c, isUserBlocked)));
+  }
+  renderMute() {
+    const {
+      notificationsForComments
+    } = this.props;
+    const {
+      muteLoaded,
+      muteExpiry,
+      processing
+    } = this.state;
+    if (!notificationsForComments || !muteLoaded) return null;
+    if (processing) return /*#__PURE__*/React.createElement(View, {
+      style: styles.muteSpinnerContainer
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: 'small',
+      color: this.props.colourBrandingMain
+    }));
+    const isMuted = this.isMuted();
+    const hours = this.getMuteRemaining();
+    const mutedFor = `Muted for ${hours} hour${getPluralS(hours)}`;
+    // console.log(muteExpiry.format('DD MMM YYYY hh:mm a'));
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.muteContainer
+    }, isMuted && muteExpiry ? /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        color: this.props.colourBrandingMain
+      }, styles.mutedForText]
+    }, mutedFor) : null, /*#__PURE__*/React.createElement(InlineButton, {
+      onPress: isMuted ? this.onUnmute : this.onMute,
+      color: "#fff",
+      style: [{
+        borderColor: this.props.colourBrandingMain
+      }, styles.muteButton],
+      disabled: processing,
+      disabledOpacity: true,
+      noText: true
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.muteButtonInner
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isMuted ? 'bell-o' : 'bell-slash-o',
+      type: 'font-awesome',
+      iconStyle: [{
+        color: this.props.colourBrandingMain
+      }, styles.muteButtonIcon]
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        color: this.props.colourBrandingMain
+      }, styles.muteButtonText]
+    }, isMuted ? 'Unmute' : 'Mute'))));
+  }
+  renderComments() {
+    if (this.state.commentsLoading) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.commentSection
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        color: this.props.colourBrandingMain
+      }));
+    }
+    if (this.isEmpty() && !this.state.addingComment) {
+      if (_.includes(this.props.user.hidden, 'addComment')) {
+        return null;
+      }
+      if (!_.isNil(this.props.placeHolder) && _.isEmpty(this.props.placeHolder)) return null;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.commentSection
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [styles.commentsEmpty, {
+          fontSize: this.getAdjustedSize(15)
+        }]
+      }, _.isNil(this.props.placeHolder) ? 'Be the first to add a comment!' : this.props.placeHolder));
+    }
+    let source = [...this.state.comments];
+    if (this.props.reverseOrder) {
+      source = source.reverse();
+    }
+    if (!this.props.showReplies && !this.props.threadId) {
+      source = _.filter(source, c => {
+        return !c.ParentId;
+      });
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.commentSection
+    }, !this.isEmpty() && /*#__PURE__*/React.createElement(View, {
+      style: styles.commentSectionTitleRow
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        alignItems: 'flex-end'
+      }
+    }, this.renderMute(), !this.props.hideAddComment && this.state.comments.length > 2 && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onGoToAdd.bind(this)
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.goToText, {
+        color: this.props.colourBrandingMain
+      }]
+    }, "Add a comment"))), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.commentCount, {
+        fontSize: this.getAdjustedSize(15)
+      }]
+    }, this.state.comments.length, ` comment${getPluralS(this.state.comments.length)}`)), this.props.reverseOrder && this.state.addingComment && /*#__PURE__*/React.createElement(Spinner, {
+      color: this.props.colourBrandingMain
+    }), source.map(c => {
+      return this.renderComment(c);
+    }), !this.props.reverseOrder && this.state.addingComment && /*#__PURE__*/React.createElement(Spinner, {
+      color: this.props.colourBrandingMain
+    }));
+  }
+  renderCommentImagePopup() {
+    return /*#__PURE__*/React.createElement(ImagePopup, {
+      visible: this.state.imagePopupOpen,
+      images: this.state.imagePopupSource,
+      onClose: this.closeCommentGallery.bind(this),
+      ref: "commentImagePopup"
+    });
+  }
+  renderReportLoading() {
+    if (!this.state.reportLoading) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.reportLoadingContainer
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      color: this.props.colourBrandingMain
+    }));
+  }
+  render() {
+    if (_.includes(this.props.user.hidden, 'viewComment')) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.commentSectionOuter, this.props.style]
+    }, this.renderComments(), this.renderReportLoading(), this.renderCommentDeleteConfirm(), this.renderCommentReportConfirm(), this.renderCommentBlockConfirm(), this.renderCommentUnblockConfirm(), this.renderCommentReportStatus(), this.renderCommentImagePopup());
+  }
+}
+const styles = StyleSheet.create({
+  commentSectionOuter: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  commentSection: {
+    flex: 1,
+    paddingVertical: 12,
+    borderTopColor: LINEGREY,
+    borderTopWidth: 1
+  },
+  commentCount: {
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARKEST,
+    flex: 1,
+    marginTop: 4
+  },
+  comment: {
+    marginTop: 16
+  },
+  commentFlex: {
+    flexDirection: 'row'
+  },
+  commentProfilePic: {
+    marginRight: 8
+  },
+  commentBlock: {
+    flex: 1,
+    backgroundColor: BG_GREY,
+    borderRadius: 5,
+    padding: 8
+  },
+  commentTitleRow: {
+    flexDirection: 'row-reverse',
+    alignItems: 'center'
+  },
+  commentButtonContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  commentButtonIcon: {
+    fontSize: 13,
+    color: '#fff'
+  },
+  commentName: {
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARKEST,
+    flex: 1
+  },
+  commentText: {
+    marginTop: 8,
+    fontFamily: 'sf-regular',
+    color: TEXT_DARKEST
+  },
+  commentBottom: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  commentTime: {
+    fontFamily: 'sf-regular',
+    marginTop: 4,
+    color: TEXT_LIGHT,
+    textAlign: 'right'
+  },
+  commentReplies: {
+    flex: 1,
+    paddingLeft: 48
+  },
+  commentRepliesText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 15
+  },
+  multiReplyContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4
+  },
+  commentImageContainer: {
+    marginTop: 8,
+    width: 60,
+    height: 60
+  },
+  commentImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 2
+  },
+  commentsEmpty: {
+    fontFamily: 'sf-semibold',
+    color: TEXT_DARKEST
+  },
+  commentSectionTitleRow: {
+    flexDirection: 'row-reverse'
+  },
+  commentReportText: {
+    fontFamily: 'sf-regular',
+    fontSize: 14,
+    paddingHorizontal: 22,
+    textAlign: 'center'
+  },
+  reportLoadingContainer: {
+    paddingVertical: 10
+  },
+  goToText: {
+    marginTop: 4
+  },
+  muteSpinnerContainer: {
+    width: 100,
+    marginBottom: 6
+  },
+  muteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 6
+  },
+  mutedForText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    marginRight: 8
+  },
+  muteButton: {
+    borderWidth: 1,
+    paddingHorizontal: 8
+  },
+  muteButtonInner: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  muteButtonIcon: {
+    fontSize: 14
+  },
+  muteButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    marginLeft: 6
+  }
+});
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    user: state.user,
+    notificationsForComments: getSiteSettingFromState(state, 'NotificationsForComments', false),
+    blockedUsers: state.userSettings.blockedUsers || []
+  };
+};
+const commentSection = connect(mapStateToProps, {
+  blockUser,
+  unblockUser
+}, null, {
+  forwardRef: true
+})(CommentSection);
+export { commentSection as CommentSection };
+//# sourceMappingURL=CommentSection.js.map