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

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.3.1",
+  "version": "1.4.4-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
+    "prepatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
+    "preupload": "npm publish --access public --tag beta && rm -rf node_modules",
+    "preupload:p": "npm run prepatch && npm run preupload",
     "upload": "npm publish --access public && rm -rf node_modules",
     "upload:p": "npm run patch && npm run upload"
   },
@@ -12,30 +15,33 @@
   "license": "ISC",
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
-    "aws-amplify": "^3.4.0",
-    "aws-amplify-react-native": "^4.3.3",
-    "expo-av": "~9.1.2",
-    "expo-constants": "~10.1.3",
-    "expo-file-system": "~11.0.2",
-    "expo-image-manipulator": "~9.1.0",
-    "expo-image-picker": "~10.1.4",
-    "expo-linear-gradient": "~9.1.0",
-    "expo-media-library": "~12.0.2",
-    "expo-screen-orientation": "~3.1.0",
-    "expo-sharing": "~9.1.2",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/netinfo": "7.1.3",
+    "@react-native-picker/picker": "2.2.1",
+    "aws-amplify": "^4.3.11",
+    "aws-amplify-react-native": "^6.0.2",
+    "expo-av": "~10.2.0",
+    "expo-constants": "~13.0.0",
+    "expo-file-system": "~13.1.0",
+    "expo-image-manipulator": "~10.2.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linear-gradient": "~11.0.0",
+    "expo-media-library": "~14.0.0",
+    "expo-screen-orientation": "~4.1.1",
+    "expo-sharing": "~10.1.0",
     "expo-video-player": "^1.6.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.4",
     "mime-types": "^2.1.24",
     "moment": "^2.18.1",
-    "react": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react": "17.0.1",
+    "react-native": "0.64.3",
     "react-native-auto-height-image": "3.1.3",
     "react-native-elements": "^0.17.0",
     "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-vimeo-iframe": "^1.0.4",
-    "react-native-webview": "11.2.3",
+    "react-native-webview": "11.15.0",
     "react-native-youtube-iframe": "^2.2.1",
     "react-redux": "^5.0.5"
   },

package/src/apis/index.js

@@ -5,4 +5,6 @@ export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
 export * from './notificationActions';
+export * from './typeActions';
 export { default as userActions } from './userActions';
+export { default as profileActions } from './profileActions';

package/src/apis/profileActions.js

@@ -0,0 +1,13 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+const profileActions = {
+  getUserTagsBySite: site => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('profile', 'usertags/site', { site }),
+    });
+  },
+};
+
+export default profileActions;

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/apis/typeActions.js

@@ -0,0 +1,13 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export const typeActions = {
+  getUserTypes: site => {
+    const url = getUrl('types', 'getusertypes');
+    return authedFunction({
+      method: 'POST',
+      url,
+      data: { site },
+    });
+  },
+};

package/src/components/AudienceSelectorLauncher.js

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react';
+import { StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
+import { FormCardSectionOptionLauncher } from './FormCardSectionOptionLauncher';
+import { getMainBrandingColourFromState, TEXT_DARK } from '../colours';
+import { Services } from '../config';
+
+class AudienceSelectorLauncher extends PureComponent {
+  onPressAudience = () => {
+    const { user, audienceType, audienceTypeSelection } = this.props;
+
+    Services.navigation.navigate('audienceSelectorPage', {
+      site: user.site,
+      audienceType: audienceType || 'Custom',
+      audienceTypeSelection: audienceTypeSelection || [],
+      onChange: (audienceType, audienceTypeSelection) => {
+        if (this.props.onChange) this.props.onChange(audienceType, audienceTypeSelection);
+      },
+    });
+  };
+
+  render() {
+    const { style, textStyle, audienceTypeSelection } = this.props;
+    const selected =
+      audienceTypeSelection && audienceTypeSelection.length > 0
+        ? `Current selection: ${audienceTypeSelection.map(i => i.Title).join(', ')}`
+        : '';
+
+    return (
+      <FormCardSectionOptionLauncher
+        sectionStyle={[styles.audienceSection, style]}
+        textStyle={[styles.audienceText, textStyle]}
+        onPress={this.onPressAudience}
+        title="Audience"
+        description={selected}
+        value={selected ? 'Custom' : 'All Users'}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  audienceSection: {
+    paddingHorizontal: 0,
+  },
+  audienceText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    color: TEXT_DARK,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const audienceSelectorLauncher = connect(mapStateToProps, {})(AudienceSelectorLauncher);
+export { audienceSelectorLauncher as AudienceSelectorLauncher };

package/src/components/AudienceSelectorPage.js

@@ -0,0 +1,344 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { TouchableOpacity, View, ScrollView, Text, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { Services } from '../config';
+import { FormCard } from './FormCard';
+import { FormCardSection } from './FormCardSection';
+import { InlineButton } from './InlineButton';
+import Header from './Header';
+import { Spinner } from './Spinner';
+import { TEXT_DARK, COLOUR_GREEN, BG_GREY, INACTIVE_BUTTON, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';
+import { typeActions, profileActions } from '../apis';
+
+class AudienceSelectorPage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+      categories: [
+        {
+          name: 'All Primary Users',
+          key: 'resident',
+        },
+        {
+          name: 'All Staff Users',
+          key: 'staff',
+        },
+        {
+          name: 'All Linked Users',
+          key: 'family',
+        },
+      ],
+      types: [],
+      tags: [],
+      combinedList: [],
+      seeAll: false,
+    };
+  }
+
+  componentDidMount = async () => {
+    try {
+      this.setState({ loading: true });
+      await this.getUserTypes();
+      await this.getUserTags();
+      this.setState({ loading: false, combinedList: this.getAvailableAudienceTags() });
+    } catch (error) {
+      console.error('loading types error', error);
+      this.setState({ loading: false });
+    }
+  };
+
+  getUserTypes = async () => {
+    const { data } = await typeActions.getUserTypes(this.props.site);
+    data.forEach(e => {
+      e.name = e.category ? `(${e.category[0].toUpperCase() + e.category.substring(1)}) ${e.displayName}` : e.displayName;
+      e.key = e.typeName;
+    });
+    // console.log('getUserTypes', data);
+    this.setState({ types: data });
+  };
+
+  getUserTags = async () => {
+    const { data } = await profileActions.getUserTagsBySite(this.props.site);
+    data.forEach(e => {
+      e.name = e.Title;
+      e.key = e.Id;
+    });
+    // console.log('getUserTags', data);
+    this.setState({ tags: data });
+  };
+
+  getAvailableAudienceTags = () => {
+    const { categories, types, tags } = this.state;
+    const { audienceTypeSelection } = this.props;
+
+    const categoryTags = categories.map(c => {
+      const Id = `category_${c.key}`;
+      return {
+        AudienceType: 'Category',
+        AudienceTypeSelection: c.key,
+        Id,
+        Title: c.name,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    const userTypeTags = types.map(t => {
+      const Id = `userType_${t.typeName}`;
+      return {
+        AudienceType: 'UserType',
+        AudienceTypeSelection: t.typeName,
+        Id,
+        Title: `User Type: ${t.displayName}`,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    const userTagTags = tags.map(t => {
+      const Id = `userTag_${t.Id}`;
+      return {
+        AudienceType: 'UserTags',
+        AudienceTypeSelection: t.Id,
+        Id,
+        Title: `User Tag: ${t.Title}`,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    return [...categoryTags, ...userTypeTags, ...userTagTags];
+  };
+
+  onPressBack = () => {
+    Services.navigation.goBack();
+  };
+
+  onSelectAll = () => {
+    const newList = [...this.state.combinedList];
+    newList.forEach(i => (i.Selected = false));
+    this.setState({ combinedList: newList });
+  };
+
+  onSeeAll = () => {
+    this.setState({ seeAll: !this.state.seeAll });
+  };
+
+  onToggleAudienceOption = option => {
+    const newList = [...this.state.combinedList];
+    const selected = newList.find(i => i.Id === option.Id);
+    if (selected) {
+      selected.Selected = !selected.Selected;
+      this.setState({ combinedList: newList });
+    }
+  };
+
+  onDone = () => {
+    if (this.props.onChange) {
+      const { combinedList } = this.state;
+      const selected = combinedList.filter(i => i.Selected);
+      if (selected && selected.length > 0) {
+        this.props.onChange('Custom', selected);
+      } else {
+        this.props.onChange(null, null);
+      }
+    }
+    Services.navigation.goBack();
+  };
+
+  renderOption(label, selected, onSelect, key = null, hasUnderline = true) {
+    return (
+      <TouchableOpacity key={key} onPress={onSelect}>
+        <FormCardSection hasUnderline={hasUnderline} hasContent>
+          <View style={styles.labelContainer}>
+            <Text style={styles.labelText}>{label}</Text>
+            <Icon
+              name="check-circle"
+              type="font-awesome"
+              iconStyle={[{ color: INACTIVE_BUTTON, fontSize: 20 }, selected && { color: COLOUR_GREEN }]}
+            />
+          </View>
+        </FormCardSection>
+      </TouchableOpacity>
+    );
+  }
+
+  renderSelectAll() {
+    const { combinedList, loading } = this.state;
+    const allSelected = !combinedList.find(i => i.Selected);
+    if (loading) return null;
+
+    return (
+      <FormCard style={styles.selectAllContainer}>{this.renderOption('All Users', allSelected, this.onSelectAll, null, false)}</FormCard>
+    );
+  }
+
+  renderSelection() {
+    const { loading, combinedList, seeAll } = this.state;
+    if (loading) return null;
+
+    const selectedText = combinedList
+      .filter(i => i.Selected)
+      .map(i => i.Title)
+      .join(', ');
+    const hasSelected = !_.isEmpty(selectedText);
+
+    return (
+      <View style={styles.selectionContainer}>
+        <View style={styles.selectionContainerInner}>
+          <Text style={styles.selectionTitle}>or select from below</Text>
+          {hasSelected ? (
+            <TouchableOpacity onPress={this.onSeeAll}>
+              <Text style={styles.seeAllButton}>{seeAll ? 'See less' : 'See all'}</Text>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {hasSelected ? (
+          <Text style={styles.selectionText} numberOfLines={seeAll ? null : 1}>{`Current selection: ${selectedText}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  renderTips() {
+    return (
+      <View style={styles.tipContainer}>
+        <Text style={styles.tipText}>
+          <Text style={{ fontFamily: 'sf-semibold' }}>Tip: </Text>
+          Group your users using User Tags from your website Community Manager
+        </Text>
+      </View>
+    );
+  }
+
+  renderAvailableAudiences() {
+    const { loading, combinedList } = this.state;
+
+    return (
+      <ScrollView style={styles.availableScrollContainer} contentContainerStyle={styles.availabelScrollContent}>
+        <FormCard>
+          {combinedList.map((option, index) => {
+            const notLast = index < combinedList.length - 1;
+            return this.renderOption(option.Title, option.Selected, () => this.onToggleAudienceOption(option), index, notLast);
+          })}
+        </FormCard>
+        {loading ? <Spinner /> : null}
+        {this.renderTips()}
+      </ScrollView>
+    );
+  }
+
+  renderButtons() {
+    const { loading } = this.state;
+
+    return (
+      <View style={styles.doneButtonContainer}>
+        <InlineButton
+          color={loading ? INACTIVE_BUTTON : this.props.colourBrandingMain}
+          onPress={this.onDone}
+          touchableStyle={styles.doneButton}
+          fillTouchable
+          large
+          disabled={loading}
+        >
+          Done
+        </InlineButton>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Header leftIcon="angle-left" onPressLeft={this.onPressBack} text={'Select Audience'} />
+        {this.renderSelectAll()}
+        {this.renderSelection()}
+        {this.renderAvailableAudiences()}
+        {this.renderButtons()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: BG_GREY,
+  },
+  selectAllContainer: {
+    marginTop: 20,
+  },
+  selectionContainer: {
+    padding: 20,
+  },
+  selectionContainerInner: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  selectionTitle: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_DARK,
+  },
+  selectionText: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_DARK,
+    marginTop: 10,
+  },
+  seeAllButton: {
+    marginLeft: 10,
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_LIGHT,
+  },
+  availableScrollContainer: {
+    flex: 1,
+  },
+  availabelScrollContent: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+  },
+  tipContainer: {
+    padding: 10,
+  },
+  tipText: {
+    fontSize: 14,
+    fontFamily: 'sf-regular',
+    color: TEXT_DARK,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  labelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    color: TEXT_DARK,
+  },
+  description: {
+    marginTop: 5,
+    fontSize: 14,
+    fontFamily: 'sf-regular',
+    color: TEXT_DARK,
+  },
+  doneButtonContainer: {
+    backgroundColor: '#fff',
+    marginTop: 1,
+    flexDirection: 'row',
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  doneButton: {
+    flex: 1,
+    marginHorizontal: 6,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(AudienceSelectorPage);

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.getWrappedInstance().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.getWrappedInstance().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.getWrappedInstance().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);
       })
@@ -125,7 +126,7 @@ class CommentReply extends Component {
     if (this.state.uploadingCommentImage || !_.isEmpty(this.state.commentImageInput)) {
       return;
     }
-    this.commentImageUploader.getWrappedInstance().showUploadMenu();
+    this.commentImageUploader.showUploadMenu();
   }
 
   renderImageAttachment() {
@@ -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: {
@@ -329,5 +333,5 @@ const mapStateToProps = state => {
   return { user };
 };
 
-const commentReply = connect(mapStateToProps, {}, null, { withRef: true })(CommentReply);
+const commentReply = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentReply);
 export { commentReply as CommentReply };

package/src/components/CommentSection.js

@@ -4,10 +4,15 @@ 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, ProfilePic, ImagePopup, InlineButton, Spinner } from './';
+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) {
@@ -96,9 +101,13 @@ class CommentSection extends Component {
   }
 
   onGoToAdd() {
-    this.props.commentReply.getWrappedInstance().focusInput();
+    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 () => {
@@ -170,9 +179,8 @@ class CommentSection extends Component {
         commentsLoadStarted: true,
         commentsLoading: true,
       });
-      if (this.props.commentReply) {
-        this.props.commentReply.getWrappedInstance().loadingStarted();
-      }
+      this.props.commentReply?.current?.getWrappedInstance().loadingStarted();
+
       this.loadComments();
     }
   }
@@ -191,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,
@@ -204,9 +220,9 @@ class CommentSection extends Component {
           }
         },
       );
-      if (this.props.commentReply) {
-        this.props.commentReply.getWrappedInstance().loadingCompleted();
-      }
+      //if (this.props.commentReply) {
+      this.props.commentReply?.current?.getWrappedInstance().loadingCompleted();
+      //}
       if (this.props.live) {
         this.loadTimer = setTimeout(() => {
           this.loadComments();
@@ -310,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}>
@@ -323,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>
     );
   }
@@ -414,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() && (
@@ -535,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,
@@ -611,5 +704,5 @@ const mapStateToProps = state => {
   };
 };
 
-const commentSection = connect(mapStateToProps, {}, null, { withRef: true })(CommentSection);
+const commentSection = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentSection);
 export { commentSection as CommentSection };

package/src/components/FormCardSectionOptionLauncher.js

@@ -2,23 +2,26 @@ import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { connect } from 'react-redux';
-import { TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+import { TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';
 import { FormCardSection } from './FormCardSection';
 
 class FormCardSectionOptionLauncher extends PureComponent {
   render() {
+    const { onPress, sectionStyle, textStyle, title, description, value, icon, colourBrandingMain } = this.props;
+
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <FormCardSection hasContent sectionStyle={this.props.sectionStyle}>
+      <TouchableOpacity onPress={onPress}>
+        <FormCardSection hasContent sectionStyle={sectionStyle}>
           <View style={styles.container}>
-            <Text style={[styles.text, { marginRight: 16, flex: 1 }, this.props.textStyle]}>{this.props.title}</Text>
-            <Text style={[styles.text, { marginRight: 16 }]}>{this.props.value}</Text>
+            <Text style={[styles.text, { marginRight: 16, flex: 1 }, textStyle]}>{title}</Text>
+            <Text style={[styles.text, { marginRight: 16 }]}>{value}</Text>
             <Icon
-              name={this.props.icon ? this.props.icon : 'angle-right'}
+              name={icon ? icon : 'angle-right'}
               type="font-awesome"
-              iconStyle={[styles.text, { fontSize: 20, color: this.props.colourBrandingMain }]}
+              iconStyle={[styles.text, { fontSize: 20, color: colourBrandingMain }]}
             />
           </View>
+          {description ? <Text style={styles.description}>{description}</Text> : null}
         </FormCardSection>
       </TouchableOpacity>
     );
@@ -36,6 +39,12 @@ const styles = {
     fontSize: 17,
     color: TEXT_DARK,
   },
+  description: {
+    fontFamily: 'sf-regular',
+    fontSize: 15,
+    color: TEXT_LIGHT,
+    marginTop: 8,
+  },
 };
 
 const mapStateToProps = state => {

package/src/components/ImageUploadProgress.js

@@ -5,7 +5,7 @@ import { Spinner } from './Spinner';
 
 class ImageUploadProgress extends Component {
   onRetryUpload = (imageUri, uploadUri) => {
-    this.props.uploader.getWrappedInstance().retryUpload(imageUri, uploadUri);
+    this.props.uploader.retryUpload(imageUri, uploadUri);
   };
 
   render() {

package/src/components/ImageUploader.js

@@ -786,4 +786,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { withRef: true })(ImageUploader);
+export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { forwardRef: true })(ImageUploader);

package/src/components/PlussChat.js

@@ -158,7 +158,7 @@ class PlussChat extends Component {
   };
 
   showUploadMenu() {
-    this.imageUploader.getWrappedInstance().showUploadMenu();
+    this.imageUploader.showUploadMenu();
   }
 
   onFocusInput = () => {

package/src/components/VideoPopup.js

@@ -3,7 +3,8 @@ import { Platform, View, Modal, TouchableOpacity, StyleSheet } from 'react-nativ
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBarHeight, getCompressed, imageExists } from '../helper';
 import { Pl60Icon } from '../fonts';
-import { SharingTools, MediaPlayer } from './';
+import { SharingTools } from './SharingTools';
+import { MediaPlayer } from './MediaPlayer';
 
 class VideoPopup extends Component {
   constructor(props) {

package/src/components/index.js

@@ -36,6 +36,7 @@ export * from './FontScalePopup';
 export * from './FontScaleButton';
 export * from './UserListPopup';
 export * from './Reactions';
+export * from './AudienceSelectorLauncher';
 export { default as EmptyStateWidget } from './EmptyStateWidget';
 export { default as EmptyStateMain } from './EmptyStateMain';
 export { default as LoadingStateWidget } from './LoadingStateWidget';
@@ -48,3 +49,4 @@ export { default as PlussChat } from './PlussChat';
 export { default as PositionedImage } from './PositionedImage';
 export { default as FormattedText } from './FormattedText';
 export { default as MediaPlayer } from './MediaPlayer';
+export { default as AudienceSelectorPage } from './AudienceSelectorPage';