Merge branch 'master' into andrew/fix-inverted-flatlist

.env.example

@@ -9,7 +9,6 @@ RN_MAILCHIMP_API_URL="https://something.api.mailchimp.com"
 RN_MAILCHIMP_API_KEY="a-key"
 RN_MAILCHIMP_LIST_ID="a-list-id"
 RN_MAILCHIMP_WAITLIST_ID="a-list-id"
-RN_PEER_SWAP="https://<peer endpoint>"
 RN_RELEASE_TYPE="dev"
 RN_IOS_STORE_LINK="https://<ios store link>"
 RN_ANDROID_STORE_LINK="https://<android store link>"

App/Components/message.tsx

@@ -53,18 +53,22 @@ export interface Props {
   message?: string
   time: string
   containerStyle?: ViewStyle
+  isSameUser?: boolean
 }
 
 const Message = (props: Props) => {
   const alignItems = props.message ? 'flex-start' : 'center'
   return (
-    <View style={[CONTAINER(alignItems), props.containerStyle]}>
-      <Avatar style={AVATAR} target={props.avatar} />
+    <View style={[CONTAINER(alignItems), props.containerStyle, props.isSameUser && {paddingTop: 0}]}>
+      {props.isSameUser && <View style={AVATAR} />}
+      {!props.isSameUser && <Avatar style={AVATAR} target={props.avatar} />}
       <View style={CONTENT}>
-        <View style={META}>
-          <Text style={USERNAME}>{props.username}</Text>
-          <Text style={TIME}>{props.time.toUpperCase()}</Text>
-        </View>
+        {!props.isSameUser &&
+          <View style={META}>
+            <Text style={USERNAME}>{props.username}</Text>
+            <Text style={TIME}>{props.time.toUpperCase()}</Text>
+          </View>
+        }
         {props.message &&
           <Text style={MESSAGE}>{props.message}</Text>
         }

App/Containers/Groups.tsx

@@ -2,14 +2,15 @@ import React from 'react'
 import {Dispatch} from 'redux'
 import { NavigationScreenProps } from 'react-navigation'
 import { connect } from 'react-redux'
-import { FlatList, View, Text, TouchableOpacity } from 'react-native'
+import { FlatList, View, Text, TouchableOpacity, Alert } from 'react-native'
 
 import {RootAction, RootState} from '../Redux/Types'
 
 import { getThreads } from '../Redux/PhotoViewingSelectors'
 import { contactsSelectors } from '../features/contacts'
 import UIActions from '../Redux/UIRedux'
 import TextileEventsActions from '../Redux/TextileEventsRedux'
+import PreferencesActions from '../Redux/PreferencesRedux'
 
 import { pb } from '@textile/react-native-sdk'
 
@@ -29,11 +30,14 @@ interface GroupAuthors {
 
 interface StateProps {
   threads: ReadonlyArray<GroupAuthors>
+  showNotificationsPrompt: boolean
 }
 
 interface DispatchProps {
   refreshMessages: () => void
   navigateToThread: (id: string, name: string) => void
+  enableNotifications: () => void
+  completeNotifications: () => void
 }
 
 interface NavProps {
@@ -136,6 +140,13 @@ class Groups extends React.Component<Props, State> {
     })
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    // ensure that it only gets called once by using the first update of the state or a new group add
+    if (this.props.threads.length && this.props.threads.length !== prevProps.threads.length && this.props.showNotificationsPrompt) {
+      this.notificationPrompt()
+    }
+  }
+
   render () {
     return (
       <View style={styles.contentContainer} >
@@ -159,11 +170,40 @@ class Groups extends React.Component<Props, State> {
       </View>
     )
   }
+
+  // Simple Alert based prompt to get Notification permissions
+  notificationPrompt () {
+    // never show it again
+    this.props.completeNotifications()
+    // give the user a prompt
+    Alert.alert(
+      'Notifications',
+      'Want to receive notifications when you receive new photos or invites?',
+      [
+        {
+          text: 'Yes please',
+          onPress: () => {
+            this.props.enableNotifications()
+          }
+        },
+        { text: 'Not now', style: 'cancel' },
+        {
+          text: 'Show all options',
+          onPress: () => {
+            this.props.navigation.navigate('Settings')
+          }
+        }
+      ],
+      { cancelable: false }
+    )
+  }
+
 }
 
 const mapStateToProps = (state: RootState): StateProps => {
   const ownAddress = state.account.address.value
   const profile = state.account.profile.value
+  let memberCount = 0
   const threads = getThreads(state, 'date')
   .map((thread) => {
     const selector = contactsSelectors.makeByThreadId(thread.id)
@@ -172,6 +212,8 @@ const mapStateToProps = (state: RootState): StateProps => {
       members.unshift(profile)
     }
     const thumb = thread.photos.length ? thread.photos[0] : undefined
+    // just get a sense of how many group x members there are
+    memberCount += members.length
     return {
       id: thread.id,
       name: thread.name,
@@ -181,8 +223,14 @@ const mapStateToProps = (state: RootState): StateProps => {
       thumb
     }
   })
+
+  const showNotificationsPrompt = state.preferences.tourScreens.notifications &&
+    threads.length > 0 &&
+    memberCount > threads.length
+
   return {
-    threads
+    threads,
+    showNotificationsPrompt
   }
 }
 
@@ -193,6 +241,12 @@ const mapDispatchToProps = (dispatch: Dispatch<RootAction>): DispatchProps => {
     },
     navigateToThread: (id: string, name: string) => {
       dispatch(UIActions.navigateToThreadRequest(id, name))
+    },
+    enableNotifications: () => {
+      dispatch(PreferencesActions.toggleServicesRequest('notifications', true))
+    },
+    completeNotifications: () => {
+      dispatch(PreferencesActions.completeTourSuccess('notifications'))
     }
   }
 }

App/Sagas/NotificationsSagas.ts

@@ -110,6 +110,7 @@ export function * notificationView (action: ActionType<typeof NotificationsActio
         }
         break
       }
+      case pb.Notification.Type.MESSAGE_ADDED:
       case pb.Notification.Type.PEER_JOINED:
       case pb.Notification.Type.PEER_LEFT: {
         const threadData: ThreadData | undefined = yield select(threadDataByThreadId, notification.threadId)

App/screens/group/group.tsx

@@ -24,6 +24,7 @@ import UIActions from '../../Redux/UIRedux'
 import PhotoViewingActions from '../../Redux/PhotoViewingRedux'
 import { CommentData } from '../../Components/comments'
 import { color } from '../../styles'
+import { pb } from '@textile/react-native-sdk'
 
 const momentSpec: moment.CalendarSpec = {
   sameDay: 'LT',
@@ -137,7 +138,21 @@ class Group extends Component<Props, State> {
     )
   }
 
-  renderRow = ({ item }: ListRenderItemInfo<Item>) => {
+  sameUserAgain = (user: pb.IUser, previous: Item): boolean => {
+    if (!previous || !previous.type) {
+      return false
+    }
+    switch (previous.type) {
+      case 'message': {
+        return user.address === previous.data.user.address
+      }
+      default: {
+        return false
+      }
+    }
+  }
+
+  renderRow = ({ item, index }: ListRenderItemInfo<Item>) => {
     switch (item.type) {
       case 'photo': {
         const { user, caption, date, target, files, likes, comments, block } = item.data
@@ -181,13 +196,16 @@ class Group extends Component<Props, State> {
       }
       case 'message': {
         const { user, body, date } = item.data
+        const isSameUser = this.sameUserAgain(user, this.props.items[(index + 1)])
+        const avatar = isSameUser ? undefined : user.avatar
         return (
           <Message
-            avatar={user.avatar}
+            avatar={avatar}
             username={user.name || 'unknown'}
             message={body}
             // TODO: deal with pb Timestamp to JS Date!
             time={moment(util.timestampToDate(date)).calendar(undefined, momentSpec)}
+            isSameUser={isSameUser}
           />
         )
       }