Mobile direct messages view

athena/utils/push-notifications/notification-formatting.js

@@ -1,6 +1,6 @@
 import onlyContainsEmoji from 'shared/only-contains-emoji';
 import sentencify from 'shared/sentencify';
-import { short as timeDifferenceShort } from 'shared/time-difference';
+import { timeDifferenceShort } from 'shared/time-difference';
 import sortByDate from 'shared/sort-by-date';
 import { toState, toPlainText } from 'shared/draft-utils';
 

mobile/components/Avatar/index.js

@@ -9,15 +9,14 @@ import { AvatarImage } from './style';
 
 type AvatarProps = {|
   src: string,
-  size: number,
-  radius: number,
+  size?: number,
   onPress?: Function,
   style?: Object,
 |};
 
 class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, radius, onPress, style } = this.props;
+    const { src, size, onPress, style } = this.props;
     let source = src ? { uri: src } : {};
 
     return (
@@ -27,7 +26,7 @@ class Avatar extends Component<AvatarProps> {
           <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>
         )}
       >
-        <AvatarImage source={source} size={size} radius={radius} style={style} />
+        <AvatarImage source={source} size={size} style={style} />
       </ConditionalWrap>
     );
   }

mobile/components/Avatar/style.js

@@ -4,5 +4,5 @@ export const AvatarImage = styled.Image`
   background-color: ${props => props.theme.bg.border};
   width: ${props => (props.size ? `${props.size}px` : '30px')};
   height: ${props => (props.size ? `${props.size}px` : '30px')};
-  border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
+  border-radius: ${props => (props.size ? `${props.size / 2}px` : '15px')};
 `;

mobile/components/Flex/Column.js

@@ -0,0 +1,6 @@
+// @flow
+import styled from 'styled-components/native';
+
+export default styled.View`
+  flex-direction: column;
+`;

mobile/components/Flex/Row.js

@@ -0,0 +1,6 @@
+// @flow
+import styled from 'styled-components/native';
+
+export default styled.View`
+  flex-direction: row;
+`;

mobile/components/Message/index.js

@@ -33,7 +33,12 @@ const Message = ({ message, me }: Props) => {
     case 'draftjs': {
       return (
         <Bubble me={me}>
-          <Text color={me ? '#FFFFFF' : '#000000'}>{body}</Text>
+          <Text
+            style={{ marginTop: 0, marginBottom: 0 }}
+            color={me ? '#FFFFFF' : '#000000'}
+          >
+            {body}
+          </Text>
         </Bubble>
       );
     }

mobile/components/Messages/index.js

@@ -1,25 +1,28 @@
 // @flow
 import React, { Fragment } from 'react';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { Query } from 'react-apollo';
 import { withNavigation } from 'react-navigation';
 import compose from 'recompose/compose';
 import { getCurrentUserQuery } from '../../../shared/graphql/queries/user/getUser';
 import viewNetworkHandler from '../ViewNetworkHandler';
 import Text from '../Text';
 import Message from '../Message';
+import InfiniteList from '../InfiniteList';
 import { ThreadMargin } from '../../views/Thread/style';
 import { sortAndGroupMessages } from '../../../shared/clients/group-messages';
 import { convertTimestampToDate } from '../../../src/helpers/utils';
 
 import RoboText from './RoboText';
 import Author from './Author';
 
+import type { FlatListProps } from 'react-native';
 import type { Navigation } from 'react-navigation';
 import type { ThreadMessageConnectionType } from '../../../shared/graphql/fragments/thread/threadMessageConnection.js';
 import type { ThreadParticipantType } from '../../../shared/graphql/fragments/thread/threadParticipant';
 
 type Props = {
+  ...$Exact<FlatListProps>,
   isLoading: boolean,
   hasError: boolean,
   navigation: Navigation,
@@ -30,7 +33,13 @@ type Props = {
 
 class Messages extends React.Component<Props> {
   render() {
-    const { data, isLoading, hasError, navigation } = this.props;
+    const {
+      data,
+      isLoading,
+      hasError,
+      navigation,
+      ...flatListProps
+    } = this.props;
 
     if (data.messageConnection && data.messageConnection) {
       const messages = sortAndGroupMessages(
@@ -45,8 +54,11 @@ class Messages extends React.Component<Props> {
       return (
         <Query query={getCurrentUserQuery}>
           {({ data: { user: currentUser } }) => (
-            <Fragment>
-              {messages.map((group, i) => {
+            <InfiniteList
+              {...flatListProps}
+              data={messages}
+              keyExtractor={item => item[0].id}
+              renderItem={({ item: group, index: i }) => {
                 if (group.length === 0) return null;
 
                 const initialMessage = group[0];
@@ -122,8 +134,8 @@ class Messages extends React.Component<Props> {
                     </ThreadMargin>
                   </View>
                 );
-              })}
-            </Fragment>
+              }}
+            />
           )}
         </Query>
       );

mobile/components/Text/index.js

@@ -32,9 +32,10 @@ const monospaceFont = Platform.OS === 'android' ? 'monospace' : 'Menlo';
 
 const Text: ComponentType<Props> = styled.Text`
   ${(props: Props) => props.type && human[`${props.type}Object`]}
-  ${(props: Props) =>
-    props.type &&
-    `margin-top: ${human[`${props.type}Object`].lineHeight * 0.35};`}
+  ${(props: Props) => {
+    const type = props.type || 'body';
+    return `margin-top: ${human[`${type}Object`].lineHeight * 0.35};`;
+  }}
   ${(props: Props) => props.bold && 'font-weight: bold;'}
   ${(props: Props) => props.italic && 'font-style: italic;'}
   ${(props: Props) => props.underline && 'text-decoration-line: underline;'}

mobile/views/DirectMessageThread/components/DirectMessageThread.js

@@ -0,0 +1,110 @@
+// @flow
+import React, { Fragment } from 'react';
+import { View } from 'react-native';
+import compose from 'recompose/compose';
+import { Query } from 'react-apollo';
+import Text from '../../../components/Text';
+import ChatInput from '../../../components/ChatInput';
+import Messages from '../../../components/Messages';
+import Avatar from '../../../components/Avatar';
+import Column from '../../../components/Flex/Column';
+import Row from '../../../components/Flex/Row';
+import ViewNetworkHandler, {
+  type ViewNetworkHandlerProps,
+} from '../../../components/ViewNetworkHandler';
+
+import sentencify from '../../../../shared/sentencify';
+import getDirectMessageThread, {
+  type GetDirectMessageThreadType,
+} from '../../../../shared/graphql/queries/directMessageThread/getDirectMessageThread';
+import getDirectMessageThreadMessageConnection from '../../../../shared/graphql/queries/directMessageThread/getDirectMessageThreadMessageConnection';
+import type { GetUserType } from '../../../../shared/graphql/queries/user/getUser';
+import sendDirectMessage from '../../../../shared/graphql/mutations/message/sendDirectMessage';
+
+import type { DirectMessageThreadInfoType } from '../../../../shared/graphql/fragments/directMessageThread/directMessageThreadInfo';
+
+const DirectMessageThreadMessages = getDirectMessageThreadMessageConnection(
+  Messages
+);
+
+type Props = {
+  ...$Exact<ViewNetworkHandlerProps>,
+  id: string,
+  sendDirectMessage: Function,
+  currentUser: GetUserType,
+  data: {
+    directMessageThread?: GetDirectMessageThreadType,
+  },
+};
+
+class DirectMessageThread extends React.Component<Props> {
+  sendMessage = text => {
+    if (!this.props.data.directMessageThread) return;
+    this.props.sendDirectMessage({
+      threadId: this.props.data.directMessageThread.id,
+      threadType: 'directMessageThread',
+      messageType: 'text',
+      content: {
+        body: text,
+      },
+    });
+  };
+
+  render() {
+    const {
+      isLoading,
+      hasError,
+      data: { directMessageThread },
+      currentUser,
+    } = this.props;
+
+    if (directMessageThread) {
+      const participants = directMessageThread.participants.filter(
+        ({ userId }) => userId !== currentUser.id
+      );
+      return (
+        <View style={{ flex: 1 }}>
+          <DirectMessageThreadMessages
+            id={directMessageThread.id}
+            ListHeaderComponent={() => (
+              <Column
+                style={{
+                  alignItems: 'center',
+                  marginTop: 32,
+                  marginBottom: 32,
+                  marginRight: 8,
+                  marginLeft: 8,
+                }}
+              >
+                <Row>
+                  {participants.map(({ profilePhoto, id }) => (
+                    <Avatar
+                      src={profilePhoto}
+                      key={id}
+                      size={60}
+                      style={{ marginRight: 4, marginLeft: 4 }}
+                    />
+                  ))}
+                </Row>
+                <Text type="title3" bold>
+                  {sentencify(participants.map(({ name }) => name))}
+                </Text>
+              </Column>
+            )}
+          />
+          <ChatInput onSubmit={this.sendMessage} />
+        </View>
+      );
+    }
+
+    if (isLoading) return <Text>Loading...</Text>;
+    if (hasError) return <Text>Error :(</Text>;
+    return null;
+  }
+}
+
+export default compose(
+  ViewNetworkHandler,
+  sendDirectMessage,
+  getDirectMessageThread
+)(DirectMessageThread);

mobile/views/DirectMessageThread/index.js

@@ -0,0 +1,48 @@
+// @flow
+import React from 'react';
+import compose from 'recompose/compose';
+import idx from 'idx';
+import Text from '../../components/Text';
+import ViewNetworkHandler, {
+  type ViewNetworkHandlerProps,
+} from '../../components/ViewNetworkHandler';
+
+import {
+  getCurrentUser,
+  type GetUserType,
+} from '../../../shared/graphql/queries/user/getUser';
+
+import DirectMessageThread from './components/DirectMessageThread';
+import { Wrapper } from './style';
+
+type Props = {
+  ...$Exact<ViewNetworkHandlerProps>,
+  data: {
+    user?: GetUserType,
+  },
+  navigation?: {
+    state: {
+      params: {
+        id: string,
+      },
+    },
+  },
+};
+
+class DirectMessageThreadView extends React.Component<Props> {
+  render() {
+    const id = idx(this.props, props => props.navigation.state.params.id);
+    if (!id) return <Text>Non-existant DM thread</Text>;
+    if (!this.props.data.user) return null;
+    return (
+      <Wrapper>
+        {/* TODO(@mxstbr): We have to pass currentUser here because otherwise the sendDirectMessage mutation doesn't work. We should not make that a requirement. */}
+        <DirectMessageThread currentUser={this.props.data.user} id={id} />
+      </Wrapper>
+    );
+  }
+}
+
+export default compose(ViewNetworkHandler, getCurrentUser)(
+  DirectMessageThreadView
+);

mobile/views/DirectMessageThread/style.js

@@ -0,0 +1,7 @@
+// @flow
+import styled from 'styled-components/native';
+
+export const Wrapper = styled.View`
+  background-color: ${props => props.theme.bg.default};
+  flex: 1;
+`;