@plusscommunities/pluss-core-app 1.4.3-beta.0 → 1.4.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.4.3-beta.0",
+  "version": "1.4.4-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {

package/src/apis/reactionActions.js

@@ -26,13 +26,14 @@ export const reactionActions = {
       },
     });
   },
-  addComment: (entityId, entityType, entityName, site, comment, image) => {
+  addComment: (entityId, entityType, entityName, site, comment, image, parentId) => {
     const data = {
       entityId,
       entityType,
       entityName,
       site,
       comment,
+      parentId,
     };
     if (!_.isEmpty(image)) data.image = image;
     return authedFunction({

package/src/components/CommentReply.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Keyboard, TextInput, View, ImageBackground, TouchableOpacity, Dimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 import _ from 'lodash';
 import { getApiError } from '../session';
 import { getShadowStyle } from '../helper';
@@ -26,9 +27,9 @@ class CommentReply extends Component {
   }
 
   componentDidMount() {
-    if (this.props.commentSection) {
+    if (this.props.commentSection && this.props.commentSection.current) {
       this.setState({
-        commentsLoading: this.props.commentSection.isLoading(),
+        commentsLoading: this.props.commentSection.current.getWrappedInstance().isLoading(),
       });
     }
   }
@@ -39,7 +40,7 @@ class CommentReply extends Component {
     });
     setTimeout(() => {
       if (!this.props.noScroll) {
-        this.props.scrollView.scrollToEnd({ animated: true });
+        this.props.scrollView?.current?.scrollToEnd({ animated: true });
       }
     }, 500);
   };
@@ -81,7 +82,7 @@ class CommentReply extends Component {
   addComment() {
     setTimeout(() => {
       if (!this.props.noScroll) {
-        this.props.scrollView.scrollToEnd({ animated: true });
+        this.props.scrollView?.current?.scrollToEnd({ animated: true });
       }
     }, 500);
     const text = this.state.commentInput;
@@ -93,20 +94,20 @@ class CommentReply extends Component {
     });
     Keyboard.dismiss();
     if (this.props.commentSection) {
-      this.props.commentSection.startedAddingComment();
+      this.props.commentSection?.current?.getWrappedInstance().startedAddingComment();
     }
     reactionActions
-      .addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image)
+      .addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image, this.props.threadId)
       .then(res => {
         if (this.props.commentSection) {
-          this.props.commentSection.commentAdded(res.data);
+          this.props.commentSection?.current?.getWrappedInstance().commentAdded(res.data);
         }
         this.setState({
           addingComment: false,
         });
         setTimeout(() => {
           if (!this.props.noScroll) {
-            this.props.scrollView.scrollToEnd({ animated: true });
+            this.props.scrollView?.current?.scrollToEnd({ animated: true });
           }
         }, 500);
       })
@@ -181,9 +182,11 @@ class CommentReply extends Component {
 
   render() {
     if (_.includes(this.props.user.hidden, 'addComment')) {
+      console.log('no way');
       return null;
     }
     if (this.state.commentsLoading) {
+      console.log('still loading');
       return null;
     }
     return (
@@ -202,12 +205,12 @@ class CommentReply extends Component {
             value={this.state.commentInput}
             onFocus={() => {
               if (!this.props.noScroll) {
-                this.props.scrollView.scrollToEnd({ animated: true });
+                this.props.scrollView?.current?.scrollToEnd({ animated: true });
               }
             }}
             onChangeText={value => {
               if (!this.props.noScroll) {
-                this.props.scrollView.scrollToEnd({ animated: false });
+                this.props.scrollView?.current?.scrollToEnd({ animated: false });
               }
               this.setState({
                 commentInput: value,
@@ -290,6 +293,7 @@ const styles = {
     backgroundColor: '#fff',
     paddingVertical: 8,
     paddingHorizontal: 8,
+    paddingBottom: 8 + getBottomSpace(),
     flexGrow: 1,
   },
   inputText: {

package/src/components/CommentSection.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
-import { getPluralS, getThumb300, get1400, getSiteSettingFromState } from '../helper';
+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 { ConfirmPopup } from './ConfirmPopup';
@@ -12,6 +12,7 @@ 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) {
@@ -103,6 +104,10 @@ class CommentSection extends Component {
     this.props.commentReply.focusInput();
   }
 
+  onOpenThread = comment => {
+    Services.navigation.navigate('thread', { ...this.props, threadId: comment.Id });
+  };
+
   onMute = () => {
     const { entityType, entityId } = this.props;
     this.setState({ processing: true }, async () => {
@@ -174,9 +179,8 @@ class CommentSection extends Component {
         commentsLoadStarted: true,
         commentsLoading: true,
       });
-      if (this.props.commentReply) {
-        this.props.commentReply.loadingStarted();
-      }
+      this.props.commentReply?.current?.getWrappedInstance().loadingStarted();
+
       this.loadComments();
     }
   }
@@ -195,9 +199,17 @@ class CommentSection extends Component {
       this.setState(
         {
           comments: _.sortBy(
-            _.uniqBy(_.concat(this.state.comments, res.data), c => {
-              return c.Id;
-            }),
+            _.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,
@@ -208,9 +220,9 @@ class CommentSection extends Component {
           }
         },
       );
-      if (this.props.commentReply) {
-        this.props.commentReply.loadingCompleted();
-      }
+      //if (this.props.commentReply) {
+      this.props.commentReply?.current?.getWrappedInstance().loadingCompleted();
+      //}
       if (this.props.live) {
         this.loadTimer = setTimeout(() => {
           this.loadComments();
@@ -314,6 +326,55 @@ class CommentSection extends Component {
     );
   }
 
+  renderReplyText = c => {
+    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 = (
+        <Text style={[styles.commentRepliesText, { color: this.props.colourBrandingMain }]}>{`Reply to ${getFirstName(
+          c.User ? c.User.displayName : 'comment',
+        )}`}</Text>
+      );
+    } else {
+      // existing replies
+      const profilePics = _.take(
+        _.uniqBy(threadComments, c => c.UserId),
+        3,
+      );
+      content = (
+        <View style={styles.multiReplyContainer}>
+          {profilePics.map((c, i) => {
+            return <ProfilePic style={{ marginRight: -10 }} Diameter={20} ProfilePic={c.User.profilePic} />;
+          })}
+          <Text style={[styles.commentRepliesText, { marginLeft: 20, color: this.props.colourBrandingMain }]}>{`${
+            threadComments.length
+          } repl${getPluralOptions(threadComments.length, 'y', 'ies')}`}</Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.commentReplies}>
+        <TouchableOpacity
+          onPress={() => {
+            this.onOpenThread(c);
+          }}
+        >
+          {content}
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
   renderComment(c) {
     return (
       <View style={styles.comment} key={c.Id}>
@@ -327,27 +388,32 @@ class CommentSection extends Component {
                     <Icon name="trash" type="font-awesome" iconStyle={styles.commentButtonIcon} />
                   </View>
                 </TouchableOpacity>
-              ) : (
-                !this.props.disableFlag && (
-                  <TouchableOpacity onPress={this.onPressReportComment.bind(this, c)}>
-                    <View style={[styles.commentButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
-                      <Icon name="flag" type="font-awesome" iconStyle={styles.commentButtonIcon} />
-                    </View>
-                  </TouchableOpacity>
-                )
-              )}
+              ) : null
+              // (
+              //   !this.props.disableFlag && (
+              //     <TouchableOpacity onPress={this.onPressReportComment.bind(this, c)}>
+              //       <View style={[styles.commentButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+              //         <Icon name="flag" type="font-awesome" iconStyle={styles.commentButtonIcon} />
+              //       </View>
+              //     </TouchableOpacity>
+              //   )
+              // )
+              }
               <Text style={[styles.commentName, { fontSize: this.getAdjustedSize(13) }]}>{c.User.displayName}</Text>
             </View>
             {!_.isEmpty(c.Comment) && <Text style={[styles.commentText, { fontSize: this.getAdjustedSize(13) }]}>{c.Comment}</Text>}
             {this.renderCommentImage(c)}
           </View>
         </View>
-        <Text style={[styles.commentTime, { fontSize: this.getAdjustedSize(13) }]}>
-          {moment
-            .utc(c.Timestamp)
-            .local()
-            .format('D MMM • h:mma')}
-        </Text>
+        <View style={styles.commentBottom}>
+          <Text style={[styles.commentTime, { fontSize: this.getAdjustedSize(13) }]}>
+            {moment
+              .utc(c.Timestamp)
+              .local()
+              .format('D MMM • h:mma')}
+          </Text>
+          {this.renderReplyText(c)}
+        </View>
       </View>
     );
   }
@@ -418,6 +484,11 @@ class CommentSection extends Component {
     if (this.props.reverseOrder) {
       source = source.reverse();
     }
+    if (!this.props.showReplies && !this.props.threadId) {
+      source = _.filter(source, c => {
+        return !c.ParentId;
+      });
+    }
     return (
       <View style={styles.commentSection}>
         {!this.isEmpty() && (
@@ -539,12 +610,30 @@ const styles = StyleSheet.create({
     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,