Mobile polish day

mobile/components/Facepile/index.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
 import type { Navigation } from '../../utils/types';
@@ -22,7 +22,13 @@ const messageAvatars = (list, navigation, maxCount) => {
         key={participant.id}
         src={participant.profilePhoto}
         size={30}
-        onPress={() => navigation.navigate(`User`, { id: participant.id })}
+        onPress={() =>
+          navigation.navigate({
+            routeName: `User`,
+            key: participant.id,
+            params: { id: participant.id },
+          })
+        }
       />
     );
   });

mobile/components/Icon/index.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import TouchableOpacity from '../TouchableOpacity';
 import ConditionalWrap from '../ConditionalWrap';
 import { Svg } from 'expo';

mobile/components/Lists/CommunityListItem.js

@@ -1,23 +1,20 @@
 // @flow
-import * as React from 'react';
+import React, { Component } from 'react';
 import Avatar from '../Avatar';
 import { ListItem } from './ListItem';
 import { TextColumnContainer, Title, Subtitle, AvatarWrapper } from './style';
 import type { GetCommunityType } from '../../../shared/graphql/queries/community/getCommunity';
-import type { Navigation } from '../../utils/types';
 
 type CommunityListItemType = {
   community: GetCommunityType,
-  navigation: Navigation,
+  onPress: Function,
 };
 
-export class CommunityListItem extends React.Component<CommunityListItemType> {
+export class CommunityListItem extends Component<CommunityListItemType> {
   render() {
-    const { community, navigation } = this.props;
+    const { community, onPress } = this.props;
     return (
-      <ListItem
-        onPress={() => navigation.navigate(`Community`, { id: community.id })}
-      >
+      <ListItem onPress={onPress}>
         <AvatarWrapper>
           <Avatar src={community.profilePhoto} size={40} variant="square" />
         </AvatarWrapper>

mobile/components/Lists/DirectMessageListItem.js → mobile/components/Lists/DirectMessageListItem/index.js

@@ -1,16 +1,18 @@
 // @flow
-import * as React from 'react';
-import Avatar from '../Avatar';
-import { ListItem } from './ListItem';
+import React, { Component } from 'react';
+import Avatar from '../../Avatar';
+import { ListItem } from '../ListItem';
 import {
   TextColumnContainer,
   TextRowContainer,
   TitleTextContainer,
-  TimestampTextContainer,
   Title,
-  Timestamp,
   Subtitle,
   AvatarWrapper,
+  TimestampTextContainer,
+  Timestamp,
+} from '../style';
+import {
   MultiAvatarWrapper,
   DoubleAvatarFirst,
   DoubleAvatarSecond,
@@ -33,7 +35,7 @@ type DirectMessageListItemType = {
   timestamp: string,
 };
 
-export class DirectMessageListItem extends React.Component<
+export class DirectMessageListItem extends Component<
   DirectMessageListItemType
 > {
   renderParticipantAvatars = () => {

mobile/components/Lists/DirectMessageListItem/style.js

@@ -0,0 +1,151 @@
+// @flow
+import styled from 'styled-components/native';
+
+export const MultiAvatarWrapper = styled.View`
+  display: flex;
+  align-items: center;
+  flex: 0;
+  position: relative;
+  min-width: 44px;
+`;
+
+export const DoubleAvatarFirst = styled.View`
+  position: relative;
+  top: 8px;
+  left: -8px;
+  width: 36px;
+  height: 36px;
+  z-index: 1;
+`;
+
+export const DoubleAvatarSecond = styled.View`
+  position: relative;
+  bottom: 8px;
+  right: -4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const TripleAvatarFirst = styled.View`
+  position: relative;
+  top: 16px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  margin-top: -8px;
+`;
+
+export const TripleAvatarSecond = styled.View`
+  position: relative;
+  top: -10px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const TripleAvatarThird = styled.View`
+  position: relative;
+  bottom: 16px;
+  right: 0px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarFirst = styled.View`
+  position: relative;
+  top: 28px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  margin-top: -8px;
+`;
+
+export const QuadrupleAvatarSecond = styled.View`
+  position: relative;
+  top: 2px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarThird = styled.View`
+  position: relative;
+  bottom: 4px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarFourth = styled.View`
+  position: relative;
+  bottom: 24px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const OverflowAvatar = styled.View`
+  position: relative;
+  bottom: 24px;
+  right: -10px;
+  width: 29px;
+  height: 29px;
+  border-radius: 15px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.wash};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OverflowAvatarLabel = styled.Text`
+  font-size: 10px;
+  font-weight: 700;
+  color: ${props => props.theme.text.alt};
+  line-height: 17;
+  margin-top: -2px;
+`;

mobile/components/Lists/ListItem.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React, { Component } from 'react';
 import { Row } from '../Flex';
 import TouchableOpacity from '../TouchableOpacity';
 import { ListItemView } from './style';
@@ -9,7 +9,7 @@ type ListItemProps = {
   children?: any,
 };
 
-export class ListItem extends React.Component<ListItemProps> {
+export class ListItem extends Component<ListItemProps> {
   render() {
     const { onPress, children } = this.props;
 

mobile/components/Lists/NotificationListItem.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React, { Component, Fragment, type Node } from 'react';
 import { ListItem } from './ListItem';
 import {
   TextColumnContainer,
@@ -20,12 +20,12 @@ import Icon from '../Icon';
 
 type Props = {
   notification: ParsedNotificationType,
-  children?: React.Node,
+  children?: Node,
   currentUserId: string,
   navigation: Navigation,
 };
 
-export class NotificationListItem extends React.Component<Props> {
+export class NotificationListItem extends Component<Props> {
   getActors = () => {
     return this.props.notification.actors.filter(
       actor => actor.id !== this.props.currentUserId
@@ -39,10 +39,10 @@ export class NotificationListItem extends React.Component<Props> {
     const str = isAuthor ? 'in your thread' : 'in';
 
     return (
-      <React.Fragment>
-        <React.Fragment>{str} </React.Fragment>
+      <Fragment>
+        <Fragment>{str} </Fragment>
         <Link>{notification.context.payload.content.title}</Link>
-      </React.Fragment>
+      </Fragment>
     );
   };
 
@@ -84,32 +84,32 @@ export class NotificationListItem extends React.Component<Props> {
   renderEventString = () => {
     switch (this.props.notification.event) {
       case 'MESSAGE_CREATED': {
-        return <React.Fragment> replied in </React.Fragment>;
+        return <Fragment> replied in </Fragment>;
       }
       case 'REACTION_CREATED': {
-        return <React.Fragment> liked </React.Fragment>;
+        return <Fragment> liked </Fragment>;
       }
       case 'CHANNEL_CREATED': {
-        return <React.Fragment> created a channel </React.Fragment>;
+        return <Fragment> created a channel </Fragment>;
       }
       case 'USER_JOINED_COMMUNITY': {
-        return <React.Fragment> joined </React.Fragment>;
+        return <Fragment> joined </Fragment>;
       }
       case 'PRIVATE_CHANNEL_REQUEST_SENT': {
-        return <React.Fragment> requested to join </React.Fragment>;
+        return <Fragment> requested to join </Fragment>;
       }
       case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
-        return <React.Fragment> approved your request to join </React.Fragment>;
+        return <Fragment> approved your request to join </Fragment>;
       }
       case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
-        return <React.Fragment> requested to join </React.Fragment>;
+        return <Fragment> requested to join </Fragment>;
       }
       case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
-        return <React.Fragment> approved your request to join </React.Fragment>;
+        return <Fragment> approved your request to join </Fragment>;
       }
       case 'MENTION_MESSAGE':
       case 'MENTION_THREAD': {
-        return <React.Fragment> mentioned you </React.Fragment>;
+        return <Fragment> mentioned you </Fragment>;
       }
       default: {
         return '';
@@ -248,8 +248,9 @@ export class NotificationListItem extends React.Component<Props> {
     }
 
     if (!type) return () => {};
+    const key = id ? id : notification.context.id;
     return () =>
-      navigation.navigate(type, { id: id ? id : notification.context.id });
+      navigation.navigate({ routeName: type, key, params: { id: key } });
   };
 
   facepileDataFromActors = () => {