Mobile notifications

admin/src/index.js

@@ -5,7 +5,7 @@ import { Router } from 'react-router';
 import { ApolloProvider } from 'react-apollo';
 import { ThemeProvider } from 'styled-components';
 import { Provider } from 'react-redux';
-import { theme } from './components/theme';
+import { theme } from 'shared/theme';
 import { client } from './api';
 import { initStore } from './store';
 import Routes from './routes';

flow-typed/npm/react-native-tab-view_vx.x.x.js

@@ -0,0 +1,116 @@
+// flow-typed signature: d468e37370cd20a4265e71bef5bf0686
+// flow-typed version: <<STUB>>/react-native-tab-view_v0.0.78/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-native-tab-view'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-native-tab-view' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-native-tab-view/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/SceneMap' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabBar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewAnimated' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerAndroid' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.web' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerExperimental' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerPan' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerScroll' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TouchableItem' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/types' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-native-tab-view/src/index.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/index'>;
+}
+declare module 'react-native-tab-view/src/SceneMap.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/SceneMap'>;
+}
+declare module 'react-native-tab-view/src/TabBar.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabBar'>;
+}
+declare module 'react-native-tab-view/src/TabViewAnimated.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewAnimated'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.web.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid.web'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerExperimental.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerExperimental'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerPan.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerPan'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerScroll.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerScroll'>;
+}
+declare module 'react-native-tab-view/src/TabViewPropTypes.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPropTypes'>;
+}
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewTypeDefinitions'>;
+}
+declare module 'react-native-tab-view/src/TouchableItem.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TouchableItem'>;
+}
+declare module 'react-native-tab-view/types.js' {
+  declare module.exports: $Exports<'react-native-tab-view/types'>;
+}

mobile/App.js

@@ -9,7 +9,7 @@ import { ThemeProvider } from 'styled-components';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { type ApolloClient } from 'apollo-client';
 
-import theme from './components/theme';
+import theme from '../shared/theme';
 import { createClient } from '../shared/graphql';
 import Login from './components/Login';
 import TabBar from './views/TabBar';

mobile/components/Avatar/index.js

@@ -2,21 +2,22 @@
 import React, { Component } from 'react';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
-import { TouchableHighlight } from 'react-native';
+import TouchableHighlight from '../TouchableHighlight';
 
 import ConditionalWrap from '../ConditionalWrap';
 import { AvatarImage } from './style';
 
-type AvatarProps = {|
+type AvatarProps = {
   src: string,
-  size?: number,
+  size: number,
+  variant?: 'square' | 'circle',
   onPress?: Function,
   style?: Object,
-|};
+};
 
 class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, onPress, style } = this.props;
+    const { src, size, onPress, style, variant = 'circle' } = this.props;
     let source = src ? { uri: src } : {};
 
     return (
@@ -26,7 +27,12 @@ class Avatar extends Component<AvatarProps> {
           <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>
         )}
       >
-        <AvatarImage source={source} size={size} style={style} />
+        <AvatarImage
+          source={source}
+          size={size}
+          style={style}
+          radius={variant === 'circle' ? size / 2 : size / 4}
+        />
       </ConditionalWrap>
     );
   }

mobile/components/Avatar/style.js

@@ -4,5 +4,6 @@ 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.size ? `${props.size / 2}px` : '15px')};
+  border-radius: ${props =>
+    props.radius ? `${props.radius}px` : `${props.size / 2}px`};
 `;

mobile/components/ChatInput/input.js

@@ -1,12 +1,9 @@
 // @flow
 import React from 'react';
-import { TextInput, View, Button } from 'react-native';
+import { TextInput, View } from 'react-native';
 import KeyboardSpacer from 'react-native-keyboard-spacer';
-import {
-  ChatInputWrapper,
-  ChatInputTextInputWrapper,
-  SendButton,
-} from './style';
+import { ChatInputWrapper, ChatInputTextInputWrapper } from './style';
+import Icon from '../Icon';
 
 import type { Node } from 'react';
 
@@ -49,7 +46,7 @@ class ChatInput extends React.Component<InputProps, State> {
               onSubmitEditing={this.submit}
             />
           </ChatInputTextInputWrapper>
-          <SendButton onPress={this.submit} size={32} />
+          <Icon glyph={'send'} onPress={this.submit} size={32} />
         </ChatInputWrapper>
         {/* NOTE(@mxstbr): Magic number, otherwise the chatinput is way above the keyboard */}
         <KeyboardSpacer topSpacing={-75} />

mobile/components/ChatInput/style.js

@@ -1,10 +1,5 @@
 // @flow
-import { TouchableOpacity } from 'react-native';
-import { Svg } from 'expo';
-import React from 'react';
-import styled, { withTheme } from 'styled-components/native';
-
-const { Path, G } = Svg;
+import styled from 'styled-components/native';
 
 export const ChatInputWrapper = styled.View`
   flex-direction: row;
@@ -27,27 +22,3 @@ export const ChatInputTextInputWrapper = styled.View`
   border-color: ${props => props.theme.bg.border};
   background: ${props => props.theme.bg.default};
 `;
-
-type SendButtonProps = {
-  onPress: Function,
-  size?: number,
-  theme: Object,
-};
-
-export const SendButton = withTheme(
-  ({ onPress, size, theme }: SendButtonProps) => {
-    const actualSize = size ? size : 64;
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <Svg width={actualSize} height={actualSize} viewBox={`0 0 32 32`}>
-          <G>
-            <Path
-              fill={theme.text.alt}
-              d="M9,8l0,5.287l7.054,1.495c0.628,0.133 0.966,0.665 0.989,1.164c0,0.009 0.001,0.022 0.001,0.034c0,0.004 0,0.008 0,0.012c0,0.005 0,0.009 0,0.013c0,0.012 -0.001,0.025 -0.001,0.034c-0.023,0.498 -0.361,1.031 -0.989,1.164l-7.054,1.495l0,5.627c0.02,0.001 0.049,-0.002 0.09,-0.017c4.386,-1.524 15.41,-7.808 15.41,-8.308c0,-0.5 -11.075,-6.473 -15.41,-7.984c-0.041,-0.014 -0.07,-0.017 -0.09,-0.016Zm17.555,7.992l0,-0.011l0,-0.003c-0.011,-0.698 -0.39,-1.289 -0.925,-1.685c-3.631,-2.688 -11.512,-6.642 -15.882,-8.165c-0.624,-0.218 -1.3,-0.158 -1.843,0.185c-0.554,0.349 -0.905,0.958 -0.905,1.667l0,5.712c0,0.708 0.496,1.32 1.189,1.467l3.931,0.833l-3.931,0.834c-0.693,0.146 -1.189,0.758 -1.189,1.467l0,6.052c0,0.709 0.351,1.317 0.905,1.667c0.543,0.343 1.219,0.403 1.843,0.185c4.371,-1.527 12.29,-5.85 15.881,-8.505c0.536,-0.397 0.915,-0.987 0.925,-1.685l0,-0.003l0.001,-0.012Z"
-            />
-          </G>
-        </Svg>
-      </TouchableOpacity>
-    );
-  }
-);

mobile/components/Facepile/index.js

@@ -0,0 +1,56 @@
+// @flow
+import * as React from 'react';
+import compose from 'recompose/compose';
+import { withNavigation } from 'react-navigation';
+import type { Navigation } from '../../utils/types';
+import type { UserInfoType } from '../../../shared/graphql/fragments/user/userInfo';
+import {
+  FacepileContainer,
+  StackedEmptyParticipantHead,
+  StackedAvatar,
+} from './style';
+
+const messageAvatars = (list, navigation, maxCount) => {
+  const avatarList = list.slice(0, maxCount);
+
+  return avatarList.map((participant, i) => {
+    if (!participant) {
+      return null;
+    }
+    return (
+      <StackedAvatar
+        key={participant.id}
+        src={participant.profilePhoto}
+        size={30}
+        onPress={() => navigation.navigate(`User`, { id: participant.id })}
+      />
+    );
+  });
+};
+
+type FacepileProps = {
+  users: Array<?UserInfoType>,
+  maxCount: number,
+  navigation: Navigation,
+};
+
+const Facepile = ({ users, maxCount = 5, navigation }: FacepileProps) => {
+  const participantCount = users.length;
+  const hasOverflow = participantCount > maxCount;
+  const overflowAmount =
+    participantCount - maxCount > 9 ? '···' : `+${participantCount - maxCount}`;
+
+  return (
+    <FacepileContainer>
+      {messageAvatars(users, navigation, maxCount)}
+
+      {hasOverflow && (
+        <StackedEmptyParticipantHead size={30} adjustsFontSizeToFit>
+          {overflowAmount}
+        </StackedEmptyParticipantHead>
+      )}
+    </FacepileContainer>
+  );
+};
+
+export default compose(withNavigation)(Facepile);

mobile/components/Facepile/style.js

@@ -0,0 +1,39 @@
+// @flow
+import styled, { css } from 'styled-components/native';
+import Avatar from '../Avatar';
+
+const stackingStyles = css`
+  margin-right: -10px;
+  border-width: 2px;
+  border-color: #ffffff;
+`;
+
+export const StackedAvatar = styled(Avatar)`
+  ${stackingStyles};
+`;
+
+export const FacepileContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+`;
+
+export const EmptyParticipantHead = styled.Text`
+  color: ${props => props.theme.text.alt};
+  background: ${props => props.theme.bg.wash};
+  border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
+  text-align: center;
+  text-align-vertical: center;
+  font-size: 12px;
+  font-weight: 600;
+  height: ${props => (props.size ? `${props.size}px` : '30px')};
+  width: ${props => (props.size ? `${props.size}px` : '30px')};
+  overflow: hidden;
+`;
+
+export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)`
+  ${stackingStyles};
+`;

mobile/components/Flex/index.js

@@ -0,0 +1,5 @@
+// @flow
+import Row from './Row';
+import Column from './Column';
+
+export { Row, Column };