@plusscommunities/pluss-circles-app 1.0.11 → 1.0.12

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@plusscommunities/pluss-circles-app",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "src/index.js",
   "scripts": {
     "core": "npm i @plusscommunities/pluss-core-app@latest",
-    "upload": "npm version patch && npm publish --access public && rm -rf node_modules",
-    "deploy": "npm run core && npm run upload",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "patch": "npm version patch",
+    "upload": "npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload",
+    "upload:cp": "npm run core && npm run patch && npm run upload"
   },
   "author": "Phillip Suh",
   "license": "ISC",

package/src/components/chat/Chat.js

@@ -103,23 +103,24 @@ class Chat extends Component {
       }
 
       this.chatName = !_.isUndefined(chat.title) ? chat.title : chat.Title;
+      let newGroup = chat;
 
-      let newGrop = { Title: !_.isUndefined(chat.title) ? chat.title : chat.Title };
+      newGroup.Title = !_.isUndefined(chat.title) ? chat.title : chat.Title;
       _.forEach(this.props.groups, group => {
         if (group.Id === this.props.chat.key || group.Id === this.props.chat.Id) {
-          newGrop = { ...group };
+          newGroup = { ...group };
         }
       });
       let muteChat = false;
-      if (!_.isUndefined(newGrop.Muted)) {
-        newGrop.Muted.forEach(user => {
+      if (!_.isUndefined(newGroup.Muted)) {
+        newGroup.Muted.forEach(user => {
           if (user === this.props.user.uid) {
             muteChat = true;
           }
         });
       }
 
-      const statee = { chat, group: newGrop, muteChat };
+      const statee = { chat, group: newGroup, muteChat };
       if (this.chatKey && !_.isUndefined(this.props.reducerMessages[this.chatKey])) {
         statee.messages = this.props.reducerMessages[this.chatKey];
       }
@@ -163,7 +164,7 @@ class Chat extends Component {
       newStates.newLoading = false;
       this.setState({ newLoading: false });
     }
-    let newGrop2 = { Title: '' };
+    let newGrop2 = this.state.group;
     _.forEach(nextProps.groups, group => {
       if (group.Id === this.chatKey) {
         newGrop2 = { ...group };
@@ -183,6 +184,21 @@ class Chat extends Component {
     }
   }
 
+  getTitle = () => {
+    if (!this.state.group) {
+      return '';
+    }
+    if (_.isEmpty(this.state.group.Title) && this.state.group.IsPrivate) {
+      const otherUser = _.find(this.state.group.Audience || [], u => {
+        return u.userId !== this.props.user.Id;
+      });
+      if (otherUser) {
+        return otherUser.displayName;
+      }
+    }
+    return this.state.group.Title;
+  };
+
   onPressEvent = event => {
     NavigationService.navigate('eventDetail', { event });
   };
@@ -430,12 +446,11 @@ class Chat extends Component {
               onPress={this.muteTest.bind(this)}
               textStyle={this.state.muteSubmitting ? { color: TEXT_LIGHTER } : {}}
             />
-            {!this.isGroupOwner(this.props.user.uid) && (
-              <DropDownItem last text={'Leave'} onPress={this.onOpenDeletePrompt.bind(this, 'leave')} />
-            )}
+            {/* {!this.isGroupOwner(this.props.user.uid) &&
+              (<DropDownItem last text={'Leave'} onPress={this.onOpenDeletePrompt.bind(this, 'leave')} />)}
             {this.isGroupOwner(this.props.user.uid) && (
               <DropDownItem last text={'Delete'} onPress={this.onOpenDeletePrompt.bind(this, 'delete')} />
-            )}
+            )} */}
           </DropDownMenu>
           <Header
             leftIcon="angle-left"
@@ -443,7 +458,7 @@ class Chat extends Component {
             rightIconType="pluss"
             rightIcon="more_options"
             onPressRight={this.toggleSettings.bind(this)}
-            text={this.state.group.Title}
+            text={this.getTitle()}
             onTextPress={this.goToGroupInfo.bind(this)}
           />
 

package/src/components/chat/ChatList.js

@@ -4,12 +4,11 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import _ from 'lodash';
 import { Icon } from 'react-native-elements';
-import { ProfilePic, EmptyStateMain } from '../common';
+import { ProfilePic, EmptyStateMain, TextStyle } from '../common';
 import NavigationService from '../../js/NavigationService';
 import { TEXT_DARK, TEXT_MID, TEXT_LIGHT, COLOUR_GREEN, getMainBrandingColourFromState } from '../../js';
 import { clearGroupCounter } from '../../actions';
 import GroupInvite from '../notifications/GroupInvite';
-import PublicGroup from '../groups/PublicGroup';
 import { CONST_STRINGS } from '../../config';
 
 class ChatList extends Component {
@@ -21,7 +20,6 @@ class ChatList extends Component {
       showMore: true,
       dataSource: [],
       invites: [],
-      publicGroups: [],
     };
   }
 
@@ -29,7 +27,6 @@ class ChatList extends Component {
     this._isMounted = true;
 
     this.createDataSource(this.props);
-    this.setState({ publicGroups: this.props.publicGroups });
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -38,11 +35,6 @@ class ChatList extends Component {
         this.createDataSource(nextProps);
       }, 500);
     }
-    if (nextProps.publicGroups !== this.props.publicGroups) {
-      this.setState({
-        publicGroups: nextProps.publicGroups,
-      });
-    }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -62,25 +54,19 @@ class ChatList extends Component {
     NavigationService.goBack();
   }
 
-  onClosePublicGroup(group, joined) {
-    if (joined) {
-      const index = this.state.publicGroups.indexOf(group);
-      if (index > -1) {
-        this.state.publicGroups.splice(index, 1);
-        const newPublicGroups = this.state.publicGroups;
-        if (this._isMounted) {
-          this.setState({
-            publicGroups: newPublicGroups,
-          });
-        }
-      }
-    }
-  }
-
   getChatName(chat) {
     if (!_.isEmpty(chat.Title)) {
       return chat.Title;
     }
+    if (chat.IsPrivate) {
+      const otherUser = _.find(chat.Audience || [], u => {
+        return u.userId !== this.props.user.Id;
+      });
+      if (otherUser) {
+        return otherUser.displayName;
+      }
+      return null;
+    }
     if (chat.userNames) {
       const names = _.without(Object.keys(chat.userNames), this.props.user.displayName);
       return names.length > 2 ? `${names[0]} & ${names.length - 1} others` : names.join(', ');
@@ -89,9 +75,21 @@ class ChatList extends Component {
   }
 
   getChatImage(chat) {
-    if (!_.isUndefined(chat.Thumbnail) && !_.isEmpty(chat.Thumbnail)) {
+    if (!_.isEmpty(chat.Thumbnail)) {
       return chat.Thumbnail;
     }
+    if (!_.isEmpty(chat.Image)) {
+      return chat.Image;
+    }
+    if (chat.IsPrivate) {
+      const otherUser = _.find(chat.Audience || [], u => {
+        return u.userId !== this.props.user.Id;
+      });
+      if (otherUser) {
+        return otherUser.profilePic;
+      }
+      return null;
+    }
     if (chat.Creator) {
       return chat.Creator.profilePic;
     }
@@ -99,7 +97,7 @@ class ChatList extends Component {
   }
 
   getTimeText(input) {
-    const gug = moment.unix(input);
+    const gug = moment.unix(input).local();
     if (
       gug.isBefore(
         moment()
@@ -114,6 +112,9 @@ class ChatList extends Component {
 
   getLastMessage(chat) {
     if (_.isUndefined(chat.lastMessage)) {
+      if (chat.IsPrivate) {
+        return '';
+      }
       return 'New Circle';
     }
     if (typeof chat.lastMessage === 'string') {
@@ -137,9 +138,9 @@ class ChatList extends Component {
       return !_.isEmpty(chat) && !chat.deleted && !chat.Deleted && chat != null;
     });
 
-    const messages = !this.state.showMore ? _.take(_.orderBy(chatsToUse, 'Changed', 'desc'), 3) : _.orderBy(chatsToUse, 'Changed', 'desc');
+    const messages = _.orderBy(_.orderBy(chatsToUse, 'Changed', 'desc'), 'IsPrivate', 'desc');
 
-    const chats = [...messages];
+    const chats = [...(!this.state.showMore ? _.take(messages, 3) : messages)];
     // const chats = [
     //     ...messages,
     //     !this.state.showMore && chatsToUse.length > 3 ? { type: 'more' } : {}
@@ -147,6 +148,13 @@ class ChatList extends Component {
 
     if (!_.isEmpty(chats[0]) && chats[0] != null) {
       chats[0].first = true;
+
+      const firstPrivate = _.find(chats, c => {
+        return c.IsPrivate;
+      });
+      if (firstPrivate) {
+        firstPrivate.firstPrivate = true;
+      }
     }
 
     let invites = nextProps.invites;
@@ -168,13 +176,6 @@ class ChatList extends Component {
     return CONST_STRINGS.EMPTY_GROUPS;
   }
 
-  shouldRenderPublicGroups() {
-    if (_.isEmpty(this.state.publicGroups) || this.props.user.category === 'family') {
-      return false;
-    }
-    return true;
-  }
-
   renderReply(chat) {
     if (chat.lastUserKey === this.props.user.uid) {
       return <Icon name="mail-reply" type="font-awesome" iconStyle={styles.chatReplyIcon} />;
@@ -200,10 +201,15 @@ class ChatList extends Component {
 
     const chatName = this.getChatName(chat);
     const chatImage = this.getChatImage(chat);
-    const unread = chat.Unread[this.props.user.uid] > 0;
+    const unreadCounter = (chat.Unread && chat.Unread[this.props.user.Id]) || 0;
 
     return (
       <View key={`chat${chat.Id}`} style={[chat.first && _.isEmpty(this.state.invites) && { marginTop: 8 }]}>
+        {chat.firstPrivate && (
+          <TextStyle type="pageHeading" style={styles.dmHeading}>
+            Direct Messages
+          </TextStyle>
+        )}
         <TouchableOpacity activeOpacity={0.9} onPress={this.onPressChat.bind(this, chat)}>
           <View
             style={[
@@ -214,19 +220,19 @@ class ChatList extends Component {
             <ProfilePic Diameter={40} name={chatName} ProfilePic={chatImage} />
             <View style={styles.listItemTextContainer}>
               <View style={styles.rowReverse}>
-                <Text style={[styles.chatTimeStamp, unread && { color: TEXT_DARK, fontFamily: 'sf-bold' }]}>
+                <Text style={[styles.chatTimeStamp, !!unreadCounter && { color: TEXT_DARK, fontFamily: 'sf-bold' }]}>
                   {this.getTimeText(chat.Changed)}
                 </Text>
                 <View style={styles.fill}>
-                  <Text style={[styles.chatUserName, unread && styles.chatTextBold]} numberOfLines={1}>
+                  <Text style={[styles.chatUserName, !!unreadCounter && styles.chatTextBold]} numberOfLines={1}>
                     {chatName}
                   </Text>
                 </View>
               </View>
               <View style={styles.rowReverse}>
-                {this.renderUnreadCounter(chat.Unread[this.props.user.uid])}
+                {this.renderUnreadCounter(unreadCounter)}
                 <View style={styles.fill}>
-                  <Text style={[styles.chatLastMessage, unread && {}]} numberOfLines={1}>
+                  <Text style={[styles.chatLastMessage, !!unreadCounter && {}]} numberOfLines={1}>
                     {this.getLastMessage(chat)}
                   </Text>
                 </View>
@@ -255,34 +261,13 @@ class ChatList extends Component {
     });
   }
 
-  renderPublicGroups() {
-    if (!this.shouldRenderPublicGroups()) {
-      return null;
-    }
-    return this.state.publicGroups.map((group, index) => {
-      if (!group) {
-        return null;
-      }
-      return (
-        <View key={group.Id}>
-          <PublicGroup group={group} index={index} key={group.Id} showHeader onClose={this.onClosePublicGroup.bind(this, group)} />
-        </View>
-      );
-    });
-  }
-
   renderListHeader() {
-    if (!this.props.ListHeaderComponent && ((_.isEmpty(this.state.invites) && !this.shouldRenderPublicGroups()) || this.props.isWidget)) {
+    if (!this.props.ListHeaderComponent && (_.isEmpty(this.state.invites) || this.props.isWidget)) {
       return null;
     }
     let internalHeader = null;
-    if (!_.isEmpty(this.state.invites) || this.shouldRenderPublicGroups()) {
-      internalHeader = (
-        <ScrollView horizontal>
-          {!_.isEmpty(this.state.invites) && this.renderInvites()}
-          {this.renderPublicGroups()}
-        </ScrollView>
-      );
+    if (!_.isEmpty(this.state.invites)) {
+      internalHeader = <ScrollView horizontal>{!_.isEmpty(this.state.invites) && this.renderInvites()}</ScrollView>;
     }
     return (
       <View>
@@ -428,16 +413,19 @@ const styles = {
     fontFamily: 'sf-semibold',
     textAlign: 'center',
   },
+  dmHeading: {
+    // paddingHorizontal: 16,
+    // paddingVertical: 8,
+    padding: 16,
+  },
 };
 
 const mapStateToProps = state => {
-  const { circles, circleChats, user } = state;
-  // console.log('mapStateToProps - circles', circles);
+  const { circles, user } = state;
 
   return {
     groups: circles.list,
     invites: circles.invites,
-    chats: circleChats.list,
     unreadCount: circles && circles.unreadCount ? circles.unreadCount : 0,
     user,
     colourBrandingMain: getMainBrandingColourFromState(state),

package/src/components/common/index.js

@@ -1,23 +1,27 @@
 import { PlussCore } from '../../feature.config';
 
 const { Components } = PlussCore;
-export const InlineButton = Components.InlineButton;
-export const ProfilePic = Components.ProfilePic;
-export const EmptyStateMain = Components.EmptyStateMain;
-export const Spinner = Components.Spinner;
-export const MiddlePopup = Components.MiddlePopup;
+export const Attachment = Components.Attachment;
 export const BackButton = Components.BackButton;
-export const UserListing = Components.UserListing;
-export const GenericInput = Components.GenericInput;
-export const Toggle = Components.Toggle;
-export const ImageUploader = Components.ImageUploader;
-export const Header = Components.Header;
+export const ConfirmPopup = Components.ConfirmPopup;
+export const DropDownMenu = Components.DropDownMenu;
+export const DropDownItem = Components.DropDownItem;
+export const EmptyStateMain = Components.EmptyStateMain;
 export const FormCard = Components.FormCard;
 export const FormCardSection = Components.FormCardSection;
+export const GenericInput = Components.GenericInput;
+export const Header = Components.Header;
+export const ImagePopup = Components.ImagePopup;
+export const ImageUploader = Components.ImageUploader;
+export const InlineButton = Components.InlineButton;
 export const Input = Components.Input;
-export const StickyFooter = Components.StickyFooter;
 export const LoadingIndicator = Components.LoadingIndicator;
-export const ConfirmPopup = Components.ConfirmPopup;
-export const DropDownMenu = Components.DropDownMenu;
-export const DropDownItem = Components.DropDownItem;
+export const MiddlePopup = Components.MiddlePopup;
+export const PDFPopup = Components.PDFPopup;
 export const PlussChat = Components.PlussChat;
+export const ProfilePic = Components.ProfilePic;
+export const Spinner = Components.Spinner;
+export const StickyFooter = Components.StickyFooter;
+export const TextStyle = Components.TextStyle;
+export const Toggle = Components.Toggle;
+export const UserListing = Components.UserListing;

package/src/components/groups/GroupDetails.js

@@ -1,43 +1,42 @@
 import React, { Component } from 'react';
-import { View, ScrollView, ImageBackground, Animated, Dimensions, Text } from 'react-native';
+import { View, ScrollView, Text, TouchableOpacity, Image } from 'react-native';
 import { connect } from 'react-redux';
+import { Icon } from 'react-native-elements';
 import _ from 'lodash';
 import moment from 'moment';
-import { LinearGradient } from 'expo-linear-gradient';
 import NavigationService from '../../js/NavigationService';
-import {
-  getImageSource,
-  TEXT_DARK,
-  TEXT_BLUEGREY,
-  COLOUR_TRANSPARENT,
-  LINEGREY,
-  getMainBrandingColourFromState,
-  StatusBarHeight,
-} from '../../js';
-import { ProfilePic, BackButton } from '../common';
-import { getNewEventDefaults } from '../../config';
-
-const SCREEN_HEIGHT = Dimensions.get('window').height;
-const CARD_IMAGE_HEIGHT = SCREEN_HEIGHT * 0.3;
-const SCREEN_WIDTH = Dimensions.get('window').width;
-const CARD_TO_FIX = CARD_IMAGE_HEIGHT - 90;
+import { TEXT_DARK, COLOUR_DUSK, LINEGREY, getMainBrandingColourFromState, getFileName, getSite } from '../../js';
+import { Attachment, Header, TextStyle, UserListing, PDFPopup, ImagePopup } from '../common';
+import { circleActions } from '../../webapi';
 
 class GroupDetails extends Component {
-  state = {
-    group: {},
-    showingAction: false,
-    loading: false,
-    defaultImage: null,
+  constructor(props) {
+    super(props);
 
-    yOffset: new Animated.Value(0),
-  };
+    this.state = {
+      membersExpanded: true,
+      files: [],
+      images: [],
+    };
+  }
 
-  UNSAFE_componentWillMount() {
-    this.setState({ group: this.props.group });
-    const defaultImage = getNewEventDefaults()[Math.floor(Math.random() * getNewEventDefaults().length)];
-    this.setState({ defaultImage });
+  componentDidMount() {
+    this.getFiles();
   }
 
+  getFiles = () => {
+    circleActions.getFiles(this.props.group.Id).then(res => {
+      this.setState({
+        files: res.data,
+      });
+    });
+    circleActions.getImages(this.props.group.Id).then(res => {
+      this.setState({
+        images: res.data,
+      });
+    });
+  };
+
   onPressBack() {
     if (this.props.back) {
       NavigationService.goBack(this.props.back);
@@ -46,6 +45,63 @@ class GroupDetails extends Component {
     }
   }
 
+  toggleMembers = () => {
+    this.setState({
+      membersExpanded: !this.state.membersExpanded,
+    });
+  };
+
+  toggleInvites = () => {
+    this.setState({
+      invitesExpanded: !this.state.invitesExpanded,
+    });
+  };
+
+  toggleImages = () => {
+    this.setState({
+      imagesExpanded: !this.state.imagesExpanded,
+    });
+  };
+
+  toggleFiles = () => {
+    this.setState({
+      filesExpanded: !this.state.filesExpanded,
+    });
+  };
+
+  onOpenAttachment = a => {
+    this.setState({
+      selectedPDF: a,
+    });
+  };
+
+  onCloseAttachment = () => {
+    this.setState({
+      selectedPDF: null,
+    });
+  };
+
+  onPressUser = user => {
+    circleActions.getDirect(getSite(this.props.user.site), user.userId).then(res => {
+      NavigationService.goBack();
+      NavigationService.goBack();
+      NavigationService.navigate('circleChat', { chat: res.data });
+    });
+  };
+
+  openGallery = index => {
+    this.imagePopup.scrollTo(index);
+    this.setState({
+      galleryOpen: true,
+    });
+  };
+
+  closeGallery = () => {
+    this.setState({
+      galleryOpen: false,
+    });
+  };
+
   getShortName(name) {
     if (!name) {
       return name;
@@ -54,115 +110,157 @@ class GroupDetails extends Component {
     return names && names.length > 0 ? `${names[0]}${names.length > 1 ? names[names.length - 1] : ''}` : '';
   }
 
-  getGroupImage() {
-    if (!_.isUndefined(this.state.group.Image) && !_.isEmpty(this.state.group.Image)) {
-      return this.state.group.Image;
-    }
-    return this.state.defaultImage;
-  }
-
   renderPeople(isPending) {
-    // const source = _.filter([...this.state.group.Audience, ...this.state.group.Invites], item => {
-    //     return item != null && item.userId !== this.props.user.uid;
-    // });
-    let source = [...this.state.group.Audience];
+    let source = [...this.props.group.Audience];
     if (isPending) {
-      source = [...this.state.group.Invites];
+      source = [...this.props.group.Invites];
     }
     if (_.isEmpty(source)) {
       return null;
     }
+    const isExpanded = isPending ? this.state.invitesExpanded : this.state.membersExpanded;
     return (
-      <View style={[{ paddingTop: 8, paddingBottom: 16 }, !isPending && { borderTopColor: LINEGREY, borderTopWidth: 1 }]}>
-        <Text style={[styles.normalText, { fontFamily: 'sf-semibold' }]}>
-          {isPending ? `Invited (${source.length})` : `Members (${source.length})`}
-        </Text>
-        {source.map((user, index) => {
-          return (
-            <View key={user.userId} style={{ flexDirection: 'row', position: 'relative', marginTop: 8, alignItems: 'center' }}>
-              <ProfilePic Diameter={40} ProfilePic={user.profilePic} />
-              <Text
-                numberOfLines={1}
-                style={[styles.normalText, { fontFamily: 'sf-semibold', marginTop: 0, marginLeft: 14, lineHeight: 16 }]}
-              >
-                {user.displayName}
-              </Text>
-            </View>
-          );
-        })}
+      <View style={styles.section}>
+        <View style={styles.sectionHeadingContainer}>
+          <TouchableOpacity
+            onPress={isPending ? this.toggleInvites : this.toggleMembers}
+            hitSlop={{ top: 16, left: 16, right: 16, bottom: 16 }}
+          >
+            <Icon name={`chevron-${isExpanded ? 'up' : 'down'}`} type="font-awesome" iconStyle={styles.sectionCaret} />
+          </TouchableOpacity>
+          <View style={{ flex: 1 }}>
+            <TextStyle type="detailLabel">{isPending ? `Invited (${source.length})` : `Members (${source.length})`}</TextStyle>
+          </View>
+        </View>
+        {isExpanded &&
+          source.map(user => {
+            return (
+              <UserListing
+                user={user}
+                key={user.userId}
+                onPress={() => {
+                  this.onPressUser(user);
+                }}
+              />
+            );
+          })}
       </View>
     );
   }
 
-  render() {
-    const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: this.state.yOffset } } }], { useNativeDriver: false });
+  renderImages() {
+    return (
+      <View style={styles.section}>
+        <View style={styles.sectionHeadingContainer}>
+          <TouchableOpacity onPress={this.toggleImages} hitSlop={{ top: 16, left: 16, right: 16, bottom: 16 }}>
+            <Icon name={`chevron-${this.state.imagesExpanded ? 'up' : 'down'}`} type="font-awesome" iconStyle={styles.sectionCaret} />
+          </TouchableOpacity>
+          <View style={{ flex: 1 }}>
+            <TextStyle type="detailLabel">{`Images (${this.state.images.length})`}</TextStyle>
+          </View>
+        </View>
+        {this.state.imagesExpanded && (
+          <View style={styles.imageContainer}>
+            {this.state.images.map((image, i) => {
+              return (
+                <TouchableOpacity
+                  onPress={() => {
+                    this.openGallery(i);
+                  }}
+                >
+                  <Image source={{ uri: image.Url }} style={styles.image} />
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    );
+  }
 
-    const headerShow = this.state.yOffset.interpolate({
-      inputRange: [CARD_TO_FIX - 1, CARD_TO_FIX],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    });
+  renderFiles() {
+    return (
+      <View style={styles.section}>
+        <View style={styles.sectionHeadingContainer}>
+          <TouchableOpacity onPress={this.toggleFiles} hitSlop={{ top: 16, left: 16, right: 16, bottom: 16 }}>
+            <Icon name={`chevron-${this.state.filesExpanded ? 'up' : 'down'}`} type="font-awesome" iconStyle={styles.sectionCaret} />
+          </TouchableOpacity>
+          <View style={{ flex: 1 }}>
+            <TextStyle type="detailLabel">{`Files (${this.state.files.length})`}</TextStyle>
+          </View>
+        </View>
+        {this.state.filesExpanded && (
+          <View style={styles.fileContainer}>
+            {this.state.files.map((file, i) => {
+              return (
+                <Attachment
+                  onPress={() => {
+                    this.onOpenAttachment(file.Url);
+                  }}
+                  key={i}
+                  title={getFileName(file.Url)}
+                />
+              );
+            })}
+          </View>
+        )}
+      </View>
+    );
+  }
 
-    if (_.isEmpty(this.state.group)) {
+  renderImagePopup() {
+    return (
+      <ImagePopup
+        visible={this.state.galleryOpen}
+        images={this.state.images.map(img => {
+          return img.Url;
+        })}
+        onClose={this.closeGallery}
+        ref={ref => {
+          this.imagePopup = ref;
+        }}
+      />
+    );
+  }
+
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return (
+      <PDFPopup source={this.state.selectedPDF} onClose={this.onCloseAttachment} title={getFileName(this.state.selectedPDF)} pdfCount={1} />
+    );
+  }
+
+  render() {
+    if (_.isEmpty(this.props.group)) {
       return null;
     }
     return (
       <View style={{ position: 'relative', flex: 1, backgroundColor: '#fff' }}>
-        {/* Top Back Button */}
-        <View style={styles.backButton}>
-          <View style={styles.headerContent}>
-            <BackButton
-              onPress={this.onPressBack.bind(this)}
-              style={{
-                marginLeft: 16,
-              }}
-            />
-          </View>
-        </View>
-        <Animated.View style={[styles.secondHeader, { opacity: headerShow }]}>
-          <ImageBackground
-            Id="image"
-            style={[styles.image, { backgroundColor: TEXT_BLUEGREY }]}
-            key={this.state.group.Id}
-            source={getImageSource(this.getGroupImage())}
-          />
-        </Animated.View>
-        <ScrollView style={styles.scroll} scrollEventThrottle={16} onScroll={onScroll} keyboardShouldPersistTaps="always">
-          <View style={styles.mainHeader}>
-            <ImageBackground
-              Id="image"
-              style={[styles.image, { backgroundColor: TEXT_BLUEGREY }]}
-              key={this.state.group.Id}
-              source={getImageSource(this.getGroupImage())}
-            >
-              <LinearGradient
-                style={styles.gradientOverlay}
-                colors={['rgba(0,0,0,0.7)', COLOUR_TRANSPARENT]}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 0, y: 1 }}
-                locations={[0, 0.5]}
-              />
-            </ImageBackground>
-          </View>
-          <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
-            <View style={styles.titleContainer}>
-              <Text style={styles.eventTitle}>{this.state.group.Title}</Text>
-              <View style={{ flexDirection: 'row', marginTop: 2, paddingBottom: 8 }}>
-                <Text style={[styles.eventTitle, { fontFamily: 'sf-semibold', fontSize: 14 }]}>Created on</Text>
-                <Text style={[styles.eventTitle, { marginLeft: 24, fontSize: 14, fontFamily: 'sf-regular' }]}>
-                  {moment(this.state.group.CreatedTime).format('MMMM Do, YYYY')}
-                </Text>
-              </View>
+        {this.renderPDF()}
+        {this.renderImagePopup()}
+        <Header leftIcon="angle-left" onPressLeft={this.onPressBack.bind(this)} text={this.props.group.Title} />
+        <ScrollView style={styles.scroll} scrollEventThrottle={16} keyboardShouldPersistTaps="always">
+          <View style={styles.titleContainer}>
+            <Text style={styles.eventTitle}>{this.props.group.Title}</Text>
+            <View style={{ flexDirection: 'row', marginTop: 2, paddingBottom: 8 }}>
+              <Text style={[styles.eventTitle, { fontFamily: 'sf-semibold', fontSize: 14 }]}>Created on</Text>
+              <Text style={[styles.eventTitle, { marginLeft: 24, fontSize: 14, fontFamily: 'sf-regular' }]}>
+                {moment(this.props.group.CreatedTime).format('MMMM Do, YYYY')}
+              </Text>
             </View>
-            {!_.isEmpty(this.state.group.Description) && (
-              <View style={{ borderTopColor: LINEGREY, borderTopWidth: 1, paddingTop: 8, paddingBottom: 16 }}>
-                <Text style={[styles.normalText, { fontFamily: 'sf-semibold' }]}>Description</Text>
-                <Text style={[styles.normalText]}>{this.state.group.Description}</Text>
-              </View>
-            )}
-            {this.renderPeople()}
-            {this.renderPeople(true)}
           </View>
+          {!_.isEmpty(this.props.group.Description) && (
+            <View style={{ borderTopColor: LINEGREY, borderTopWidth: 1, paddingTop: 8, paddingBottom: 16 }}>
+              <Text style={[styles.normalText, { fontFamily: 'sf-semibold' }]}>Description</Text>
+              <Text style={[styles.normalText]}>{this.props.group.Description}</Text>
+            </View>
+          )}
+          {this.renderPeople()}
+          {this.renderPeople(true)}
+          {this.renderImages()}
+          {this.renderFiles()}
         </ScrollView>
       </View>
     );
@@ -170,63 +268,13 @@ class GroupDetails extends Component {
 }
 
 const styles = {
-  secondHeader: {
-    position: 'absolute',
-    height: CARD_IMAGE_HEIGHT,
-    width: SCREEN_WIDTH,
-    top: -CARD_TO_FIX,
-    backgroundColor: 'green',
-    elevation: 0,
-    zIndex: 2,
-    opacity: 0,
-  },
-  backButton: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    zIndex: 10,
-    elevation: 10,
-    height: StatusBarHeight(70),
-  },
-  headerContent: {
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    flex: 1,
-    paddingTop: StatusBarHeight(12),
-  },
-  popupContainer: {
-    borderRadius: 0,
-    backgroundColor: '#fff',
-    width: SCREEN_WIDTH,
-    flex: 1,
-  },
   scroll: {
     flex: 1,
     backgroundColor: '#fff',
   },
-  buttonContainer: {
-    paddingBottom: 16,
-    paddingHorizontal: 16,
-  },
-  mainHeader: {
-    position: 'relative',
-    height: CARD_IMAGE_HEIGHT,
-    width: SCREEN_WIDTH,
-  },
-  gradientOverlay: {
-    flex: 1,
-  },
-  image: {
-    backgroundColor: '#fff',
-    position: 'relative',
-    width: undefined,
-    height: undefined,
-    flex: 1,
-  },
   titleContainer: {
-    /* flex: 1,
-        flexDirection: 'row-reverse', */
     paddingTop: 20,
+    paddingHorizontal: 16,
   },
   eventTitle: {
     fontFamily: 'sf-bold',
@@ -243,6 +291,37 @@ const styles = {
     marginTop: 6,
     backgroundColor: 'transparent',
   },
+  section: {
+    paddingTop: 16,
+    paddingBottom: 8,
+    borderTopColor: LINEGREY,
+    borderTopWidth: 1,
+  },
+  sectionHeadingContainer: {
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  sectionCaret: {
+    color: COLOUR_DUSK,
+    fontSize: 16,
+  },
+  fileContainer: {
+    paddingHorizontal: 16,
+  },
+  imageContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingLeft: 16,
+    paddingRight: 8,
+  },
+  image: {
+    marginRight: 8,
+    marginBottom: 8,
+    height: 80,
+    width: 80,
+  },
 };
 
 const mapStateToProps = state => {

package/src/feature.config.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-// import * as PlussCore from '../../pluss-core/src';
-import * as PlussCore from '@plusscommunities/pluss-core-app';
+import * as PlussCore from '../../pluss-core/src';
+// import * as PlussCore from '@plusscommunities/pluss-core-app';
 import { CIRCLE_INVITES_LOADED, CIRCLES_LOAD_INITIALISE, UPDATE_CIRCLE_UNREAD } from './actions/types';
 import { getSessionTokenAWS } from './js';
 import { circleActions } from './webapi';

package/src/js/Colors.js

@@ -16,3 +16,4 @@ export const COLOUR_TRANSPARENT = Colours.COLOUR_TRANSPARENT;
 export const COLOUR_TEAL = Colours.COLOUR_TEAL;
 export const COLOUR_PURPLE = Colours.COLOUR_PURPLE;
 export const COLOUR_TANGERINE = Colours.COLOUR_TANGERINE;
+export const COLOUR_DUSK = Colours.COLOUR_DUSK;

package/src/js/index.js

@@ -9,6 +9,7 @@ export const getSessionUidAWS = Session.getSessionUidAWS;
 
 // Helper
 export const getFirstName = Helper.getFirstName;
+export const getFileName = Helper.getFileName;
 export const getImageSource = Helper.getImageSource;
 export const StatusBarHeight = Helper.StatusBarHeight;
 export const getPluralS = Helper.getPluralS;

package/src/reducers/GroupsReducer.js

@@ -35,14 +35,13 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, unreadCount: action.payload };
     }
     case CLEAR_SINGLE_CIRCLE_UNREAD: {
-      let growps = [...state.list];
+      const growps = [...state.list];
       let newCount = state.unreadCount;
-      if (action.payload.isPrivate) {
-        growps = [...state.privateList];
-        newCount = state.privateCount;
-      }
       if (!_.isEmpty(growps)) {
         growps.forEach(g => {
+          if (!g.Unread) {
+            g.Unread = {};
+          }
           if (g.Id === action.payload.groupId) {
             g.Unread[action.payload.userId] = 0;
           }
@@ -55,9 +54,6 @@ export default (state = INITIAL_STATE, action) => {
         });
         newCount = counter;
       }
-      if (action.payload.isPrivate) {
-        return { ...state, privateList: growps, privateCount: newCount };
-      }
       return { ...state, list: growps, unreadCount: newCount };
     }
     case CIRCLE_INVITES_LOADED:
@@ -94,10 +90,7 @@ export default (state = INITIAL_STATE, action) => {
       return {
         ...state,
         list: _.filter(action.payload, group => {
-          return group != null && !group.Deleted && !group.IsPrivate;
-        }),
-        privateList: _.filter(action.payload, group => {
-          return group != null && !group.Deleted && group.IsPrivate;
+          return group != null && !group.Deleted;
         }),
       };
     case CIRCLES_LOADED:
@@ -117,38 +110,26 @@ export default (state = INITIAL_STATE, action) => {
       return {
         ...state,
         list: _.filter(pResult, group => {
-          return group != null && !group.Deleted && !group.IsPrivate;
-        }),
-        privateList: _.filter(pResult, group => {
-          return group != null && !group.Deleted && group.IsPrivate;
+          return group != null && !group.Deleted;
         }),
       };
     case CREATED_CIRCLE:
-      const zzzz = action.payload && action.payload.IsPrivate ? [...state.privateList] : [...state.list];
+      const zzzz = [...state.list];
       zzzz.push(action.payload);
-      if (action.payload.IsPrivate) {
-        return { ...state, privateList: zzzz };
-      }
       return { ...state, list: zzzz };
     case CLEAR_CIRCLES:
-      return { list: [], privateList: [], invites: [] };
+      return { list: [], invites: [] };
     case REHYDRATE:
       if (action.payload[GROUPS_REDUCER_KEY]) {
         if (action.payload[GROUPS_REDUCER_KEY].list == null) {
           action.payload[GROUPS_REDUCER_KEY].list = [];
         }
-        if (action.payload[GROUPS_REDUCER_KEY].privateList == null) {
-          action.payload[GROUPS_REDUCER_KEY].privateList = [];
-        }
         if (action.payload[GROUPS_REDUCER_KEY].invites == null) {
           action.payload[GROUPS_REDUCER_KEY].invites = [];
         }
         if (action.payload[GROUPS_REDUCER_KEY].unreadCount == null) {
           action.payload[GROUPS_REDUCER_KEY].unreadCount = 0;
         }
-        if (action.payload[GROUPS_REDUCER_KEY].privateCount == null) {
-          action.payload[GROUPS_REDUCER_KEY].privateCount = 0;
-        }
         /* fixSelectedTimes(action.payload[GROUPS_REDUCER_KEY].list);
                 fixRepeatedTimes(action.payload[GROUPS_REDUCER_KEY].list); */
         return action.payload[GROUPS_REDUCER_KEY];

package/src/webapi/circleActions.js

@@ -14,6 +14,24 @@ export default {
       },
     });
   },
+  getDirect: (site, userId) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('circles', 'get/direct', { site, userId }),
+    });
+  },
+  getFiles: circleId => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('circles', 'get/files', { circleId }),
+    });
+  },
+  getImages: circleId => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('circles', 'get/images', { circleId }),
+    });
+  },
   clearGroupUnread: async (groupID, userID) => {
     return authedFunction({
       method: 'POST',