@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/dist/module/components/CommentSection.js

@@ -1,22 +1,23 @@
 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, 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';
+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);
@@ -27,7 +28,7 @@ class CommentSection extends Component {
     });
     _defineProperty(this, "onPressConfirmDelete", () => {
       reactionActions.removeComment(this.state.commentToDelete.Id).then(res => {
-        console.log('deleted');
+        console.log("deleted");
       });
       const newComments = _.filter(this.state.comments, c => {
         return c.Id !== this.state.commentToDelete.Id;
@@ -89,13 +90,13 @@ class CommentSection extends Component {
       }, () => {
         reactionActions.reportComment(commentId).then(res => {
           this.setState({
-            commentReportedStatus: 'success',
+            commentReportedStatus: "success",
             reportLoading: false
           });
         }).catch(error => {
-          console.log('reportComment', error);
+          console.log("reportComment", error);
           this.setState({
-            commentReportedStatus: 'fail',
+            commentReportedStatus: "fail",
             reportLoading: false
           });
         });
@@ -112,7 +113,7 @@ class CommentSection extends Component {
       });
     });
     _defineProperty(this, "onOpenThread", comment => {
-      Services.navigation.navigate('thread', {
+      Services.navigation.navigate("thread", {
         ...this.props,
         threadId: comment.Id
       });
@@ -136,7 +137,7 @@ class CommentSection extends Component {
             processing: false
           });
         } catch (error) {
-          console.error('onMute', error);
+          console.error("onMute", error);
           this.setState({
             processing: false
           });
@@ -161,7 +162,7 @@ class CommentSection extends Component {
             processing: false
           });
         } catch (error) {
-          console.error('onUnmute', error);
+          console.error("onUnmute", error);
           this.setState({
             processing: false
           });
@@ -206,7 +207,7 @@ class CommentSection extends Component {
             processing: false
           });
         } catch (error) {
-          console.error('getNotificationSate', error);
+          console.error("getNotificationSate", error);
           this.setState({
             processing: false
           });
@@ -236,7 +237,7 @@ class CommentSection extends Component {
           style: [styles.commentRepliesText, {
             color: this.props.colourBrandingMain
           }]
-        }, `Reply to ${getFirstName(!isUserBlocked && c.User ? c.User.displayName : 'comment')}`);
+        }, `Reply to ${getFirstName(!isUserBlocked && c.User ? c.User.displayName : "comment")}`);
       } else {
         // existing replies
         const profilePics = _.take(_.uniqBy(threadComments, c => c.UserId), 3);
@@ -256,7 +257,7 @@ class CommentSection extends Component {
             marginLeft: 20,
             color: this.props.colourBrandingMain
           }]
-        }, `${threadComments.length} repl${getPluralOptions(threadComments.length, 'y', 'ies')}`));
+        }, `${threadComments.length} repl${getPluralOptions(threadComments.length, "y", "ies")}`));
       }
       return /*#__PURE__*/React.createElement(View, {
         style: styles.commentReplies
@@ -281,7 +282,7 @@ class CommentSection extends Component {
   }
   componentDidMount() {
     this.getNotificationSate();
-    if (!_.includes(this.props.user.hidden, 'viewComment')) {
+    if (!_.includes(this.props.user.hidden, "viewComment")) {
       this.getComments();
     }
   }
@@ -334,7 +335,7 @@ class CommentSection extends Component {
           return c.Id === this.props.threadId || c.ParentId === this.props.threadId;
         }), c => {
           return c.Id;
-        }), 'Timestamp'),
+        }), "Timestamp"),
         commentsLoading: false
       }, () => {
         if (this.props.onCommentsLoaded) {
@@ -429,16 +430,16 @@ class CommentSection extends Component {
     const {
       commentReportedStatus
     } = this.state;
-    const isSuccess = commentReportedStatus === 'success';
+    const isSuccess = commentReportedStatus === "success";
     return /*#__PURE__*/React.createElement(ConfirmPopup, {
       visible: !!commentReportedStatus,
       onConfirm: this.onPressConfirmReportStatus,
-      text: isSuccess ? 'Thank you for reporting' : 'Unable to report',
+      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'),
+      }, isSuccess ? "We will review the comment within 24 hours" : "There was a problem reporting the comment please try again later"),
       hideNo: true,
-      yesText: 'Done'
+      yesText: "Done"
     });
   }
   renderCommentImage(c) {
@@ -520,17 +521,17 @@ class CommentSection extends Component {
       style: [styles.commentName, {
         fontSize: this.getAdjustedSize(13)
       }]
-    }, isUserBlocked ? '[blocked user]' : c.User.displayName)), !_.isEmpty(c.Comment) && /*#__PURE__*/React.createElement(Text, {
+    }, 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, {
+    }, 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)));
+    }, moment.utc(c.Timestamp).local().format("D MMM • h:mma")), this.renderReplyText(c, isUserBlocked)));
   }
   renderMute() {
     const {
@@ -545,7 +546,7 @@ class CommentSection extends Component {
     if (processing) return /*#__PURE__*/React.createElement(View, {
       style: styles.muteSpinnerContainer
     }, /*#__PURE__*/React.createElement(Spinner, {
-      size: 'small',
+      size: "small",
       color: this.props.colourBrandingMain
     }));
     const isMuted = this.isMuted();
@@ -571,8 +572,8 @@ class CommentSection extends Component {
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.muteButtonInner
     }, /*#__PURE__*/React.createElement(Icon, {
-      name: isMuted ? 'bell-o' : 'bell-slash-o',
-      type: 'font-awesome',
+      name: isMuted ? "bell-o" : "bell-slash-o",
+      type: "font-awesome",
       iconStyle: [{
         color: this.props.colourBrandingMain
       }, styles.muteButtonIcon]
@@ -580,7 +581,7 @@ class CommentSection extends Component {
       style: [{
         color: this.props.colourBrandingMain
       }, styles.muteButtonText]
-    }, isMuted ? 'Unmute' : 'Mute'))));
+    }, isMuted ? "Unmute" : "Mute"))));
   }
   renderComments() {
     if (this.state.commentsLoading) {
@@ -591,7 +592,7 @@ class CommentSection extends Component {
       }));
     }
     if (this.isEmpty() && !this.state.addingComment) {
-      if (_.includes(this.props.user.hidden, 'addComment')) {
+      if (_.includes(this.props.user.hidden, "addComment")) {
         return null;
       }
       if (!_.isNil(this.props.placeHolder) && _.isEmpty(this.props.placeHolder)) return null;
@@ -601,7 +602,7 @@ class CommentSection extends Component {
         style: [styles.commentsEmpty, {
           fontSize: this.getAdjustedSize(15)
         }]
-      }, _.isNil(this.props.placeHolder) ? 'Be the first to add a comment!' : this.props.placeHolder));
+      }, _.isNil(this.props.placeHolder) ? "Be the first to add a comment!" : this.props.placeHolder));
     }
     let source = [...this.state.comments];
     if (this.props.reverseOrder) {
@@ -618,7 +619,7 @@ class CommentSection extends Component {
       style: styles.commentSectionTitleRow
     }, /*#__PURE__*/React.createElement(View, {
       style: {
-        alignItems: 'flex-end'
+        alignItems: "flex-end"
       }
     }, this.renderMute(), !this.props.hideAddComment && this.state.comments.length > 2 && /*#__PURE__*/React.createElement(TouchableOpacity, {
       onPress: this.onGoToAdd.bind(this)
@@ -642,8 +643,7 @@ class CommentSection extends Component {
     return /*#__PURE__*/React.createElement(ImagePopup, {
       visible: this.state.imagePopupOpen,
       images: this.state.imagePopupSource,
-      onClose: this.closeCommentGallery.bind(this),
-      ref: "commentImagePopup"
+      onClose: this.closeCommentGallery.bind(this)
     });
   }
   renderReportLoading() {
@@ -655,7 +655,7 @@ class CommentSection extends Component {
     }));
   }
   render() {
-    if (_.includes(this.props.user.hidden, 'viewComment')) {
+    if (_.includes(this.props.user.hidden, "viewComment")) {
       return null;
     }
     return /*#__PURE__*/React.createElement(View, {
@@ -675,7 +675,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1
   },
   commentCount: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     color: TEXT_DARKEST,
     flex: 1,
     marginTop: 4
@@ -684,7 +684,7 @@ const styles = StyleSheet.create({
     marginTop: 16
   },
   commentFlex: {
-    flexDirection: 'row'
+    flexDirection: "row"
   },
   commentProfilePic: {
     marginRight: 8
@@ -696,52 +696,52 @@ const styles = StyleSheet.create({
     padding: 8
   },
   commentTitleRow: {
-    flexDirection: 'row-reverse',
-    alignItems: 'center'
+    flexDirection: "row-reverse",
+    alignItems: "center"
   },
   commentButtonContainer: {
     width: 24,
     height: 24,
     borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   commentButtonIcon: {
     fontSize: 13,
-    color: '#fff'
+    color: "#fff"
   },
   commentName: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     color: TEXT_DARKEST,
     flex: 1
   },
   commentText: {
     marginTop: 8,
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     color: TEXT_DARKEST
   },
   commentBottom: {
-    flexDirection: 'row-reverse',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    flexDirection: "row-reverse",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   commentTime: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     marginTop: 4,
     color: TEXT_LIGHT,
-    textAlign: 'right'
+    textAlign: "right"
   },
   commentReplies: {
     flex: 1,
     paddingLeft: 48
   },
   commentRepliesText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 15
   },
   multiReplyContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingVertical: 4
   },
   commentImageContainer: {
@@ -755,17 +755,17 @@ const styles = StyleSheet.create({
     borderRadius: 2
   },
   commentsEmpty: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     color: TEXT_DARKEST
   },
   commentSectionTitleRow: {
-    flexDirection: 'row-reverse'
+    flexDirection: "row-reverse"
   },
   commentReportText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 14,
     paddingHorizontal: 22,
-    textAlign: 'center'
+    textAlign: "center"
   },
   reportLoadingContainer: {
     paddingVertical: 10
@@ -778,13 +778,13 @@ const styles = StyleSheet.create({
     marginBottom: 6
   },
   muteContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
     marginBottom: 6
   },
   mutedForText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 13,
     marginRight: 8
   },
@@ -793,14 +793,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8
   },
   muteButtonInner: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   muteButtonIcon: {
     fontSize: 14
   },
   muteButtonText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 14,
     marginLeft: 6
   }
@@ -809,7 +809,7 @@ const mapStateToProps = state => {
   return {
     colourBrandingMain: getMainBrandingColourFromState(state),
     user: state.user,
-    notificationsForComments: getSiteSettingFromState(state, 'NotificationsForComments', false),
+    notificationsForComments: getSiteSettingFromState(state, "NotificationsForComments", false),
     blockedUsers: state.userSettings.blockedUsers || []
   };
 };