diff --git a/App/Components/message.tsx b/App/Components/message.tsx index 95abd7e22..55c04d137 100644 --- a/App/Components/message.tsx +++ b/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 ( - - + + {props.isSameUser && } + {!props.isSameUser && } - - {props.username} - {props.time.toUpperCase()} - + {!props.isSameUser && + + {props.username} + {props.time.toUpperCase()} + + } {props.message && {props.message} } diff --git a/App/screens/group/group.tsx b/App/screens/group/group.tsx index 9237becf6..5dea57480 100644 --- a/App/screens/group/group.tsx +++ b/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 { ) } - renderRow = ({ item }: ListRenderItemInfo) => { + 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) => { switch (item.type) { case 'photo': { const { user, caption, date, target, files, likes, comments, block } = item.data @@ -181,13 +196,16 @@ class Group extends Component { } 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 ( ) }