@plusscommunities/pluss-core-app 8.0.37 → 8.0.38

package/dist/module/components/CommentSection.js

@@ -1,832 +0,0 @@
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { Component } from "react";
-import { View, TouchableOpacity, Image, StyleSheet } from "react-native";
-import { Text } from "./Text";
-import _ from "lodash";
-import moment from "moment";
-import { connect } from "react-redux";
-import { Icon } from "@rneui/themed";
-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) => {
-          var _c$User;
-          return /*#__PURE__*/React.createElement(ProfilePic, {
-            key: c.Id,
-            style: {
-              marginRight: -10
-            },
-            Diameter: 20,
-            ProfilePic: (_c$User = c.User) === null || _c$User === void 0 ? void 0 : _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);
-      }
-    }).catch(error => {
-      var _this$props$commentRe4;
-      console.error("loadComments error", error);
-      this.setState({
-        commentsLoading: false
-      });
-      (_this$props$commentRe4 = this.props.commentReply) === null || _this$props$commentRe4 === void 0 || (_this$props$commentRe4 = _this$props$commentRe4.current) === null || _this$props$commentRe4 === void 0 || _this$props$commentRe4.loadingCompleted();
-    });
-  }
-  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) {
-    var _c$User2;
-    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 || !c.User ? 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$User2 = c.User) === null || _c$User2 === void 0 ? void 0 : _c$User2.displayName) || "Unknown User")), !_.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)
-    });
-  }
-  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