Merge pull request #40 from RocketChat/refactor-containers

Components moved to 'containers' or 'presentation' folders.

.gitignore

@@ -55,3 +55,5 @@ fastlane/Preview.html
 fastlane/screenshots
 
 coverage
+
+.vscode/

__tests__/RoomItem.js

@@ -1,6 +1,6 @@
 import 'react-native';
 import React from 'react';
-import RoomItem from '../app/components/RoomItem';
+import RoomItem from '../app/presentation/RoomItem';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

app/containers/Avatar.js

@@ -15,27 +15,42 @@ const styles = StyleSheet.create({
 	},
 	avatarInitials: {
 		color: '#ffffff'
-	} });
+	}
+});
 
 class Avatar extends React.PureComponent {
 	render() {
-		const { text = '', size = 25, baseUrl = this.props.baseUrl,
+		const { text = '', size = 25, baseUrl, borderRadius = 5, style, avatar } = this.props;
-			borderRadius = 5, style, avatar } = this.props;
 		const { initials, color } = avatarInitialsAndColor(`${ text }`);
+
+		const iconContainerStyle = {
+			backgroundColor: color,
+			width: size,
+			height: size,
+			borderRadius
+		};
+
+		const avatarInitialsStyle = {
+			fontSize: size / 2
+		};
+
+		const avatarStyle = {
+			width: size,
+			height: size
+		};
+
+		const uri = avatar || `${ baseUrl }/avatar/${ text }`;
+		const image = (avatar || baseUrl) && (
+			<CachedImage
+				style={[styles.avatar, avatarStyle]}
+				source={{ uri }}
+			/>
+		);
+
 		return (
-			<View style={[styles.iconContainer, {
+			<View style={[styles.iconContainer, iconContainerStyle, style]}>
-				backgroundColor: color,
+				<Text style={[styles.avatarInitials, avatarInitialsStyle]}>{initials}</Text>
-				width: size,
+				{image}
-				height: size,
-				borderRadius
-			}, style]}
-			>
-				<Text style={[styles.avatarInitials, { fontSize: size / 2 }]}>{initials}</Text>
-				{ (avatar || baseUrl) && <CachedImage
-					style={[styles.avatar, { width: size,
-						height: size }]}
-					source={{ uri: avatar || `${ baseUrl }/avatar/${ text }` }}
-				/>}
 			</View>);
 	}
 }

app/containers/Message.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { emojify } from 'react-emojione';
 import Markdown from 'react-native-easy-markdown';
-import moment from 'moment';
+
-import Avatar from './avatar';
+import Card from './message/Card';
-import Card from './message/card';
+import Avatar from './Avatar';
+import User from './message/User';
 
 const styles = StyleSheet.create({
 	content: {
@@ -17,30 +18,6 @@ const styles = StyleSheet.create({
 		paddingBottom: 6,
 		flexDirection: 'row',
 		transform: [{ scaleY: -1 }]
-	},
-	texts: {
-		flex: 1
-	},
-	msg: {
-		flex: 1
-	},
-	username: {
-		fontWeight: 'bold'
-	},
-	usernameView: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginBottom: 2
-	},
-	alias: {
-		fontSize: 10,
-		color: '#888',
-		paddingLeft: 5
-	},
-	time: {
-		fontSize: 10,
-		color: '#888',
-		paddingLeft: 5
 	}
 });
 
@@ -50,9 +27,11 @@ export default class Message extends React.PureComponent {
 		baseUrl: PropTypes.string.isRequired,
 		Message_TimeFormat: PropTypes.string.isRequired
 	}
+
 	attachments() {
 		return this.props.item.attachments.length ? <Card data={this.props.item.attachments[0]} /> : null;
 	}
+
 	render() {
 		const { item } = this.props;
 
@@ -62,21 +41,23 @@ export default class Message extends React.PureComponent {
 		}
 
 		const msg = emojify(item.msg, { output: 'unicode' });
-
 		const username = item.alias || item.u.username;
 
-		const time = moment(item.ts).format(this.props.Message_TimeFormat);
-
 		return (
 			<View style={[styles.message, extraStyle]}>
-				<Avatar style={{ marginRight: 10 }} text={item.avatar ? '' : username} size={40} baseUrl={this.props.baseUrl} avatar={item.avatar} />
+				<Avatar
+					style={{ marginRight: 10 }}
+					text={item.avatar ? '' : username}
+					size={40}
+					baseUrl={this.props.baseUrl}
+					avatar={item.avatar}
+				/>
 				<View style={[styles.content]}>
-					<View style={styles.usernameView}>
+					<User
-						<Text onPress={this._onPress} style={styles.username}>
+						onPress={this._onPress}
-							{username}
+						item={item}
-						</Text>
+						Message_TimeFormat={this.props.Message_TimeFormat}
-						{item.alias && <Text style={styles.alias}>@{item.u.username}</Text>}<Text style={styles.time}>{time}</Text>
+					/>
-					</View>
 					{this.attachments()}
 					<Markdown>
 						{msg}

app/containers/message/Card.js

@@ -40,6 +40,7 @@ export default class Cards extends React.PureComponent {
 		data: PropTypes.object.isRequired,
 		base: PropTypes.string
 	}
+
 	constructor() {
 		super();
 		const user = Meteor.user();
@@ -48,6 +49,32 @@ export default class Cards extends React.PureComponent {
 			this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` });
 		});
 	}
+
+	getImage() {
+		return (
+			<TouchableOpacity onPress={() => this._onPressButton()}>
+				<Card>
+					<CardImage style={{ width: 256, height: 256 }}>
+						<CachedImage
+							style={{ width: 256, height: 256 }}
+							source={{ uri: encodeURI(this.state.img) }}
+						/>
+					</CardImage>
+					<CardContent>
+						<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
+						<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>
+					</CardContent>
+				</Card>
+			</TouchableOpacity>
+		);
+	}
+
+	getOther() {
+		return (
+			<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
+		);
+	}
+
 	_onPressButton() {
 		Navigation.showModal({
 			screen: 'Photo',
@@ -66,23 +93,8 @@ export default class Cards extends React.PureComponent {
 			animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
 		});
 	}
+
 	render() {
-		return this.state.img ? (
+		return this.state.img ? this.getImage() : this.getOther();
-			<TouchableOpacity onPress={() => this._onPressButton()}>
-				<Card>
-					<CardImage style={{ width: 256, height: 256 }}>
-						<CachedImage
-							style={{ width: 256, height: 256 }}
-							source={{ uri: encodeURI(this.state.img) }}
-						/>
-					</CardImage>
-					<CardContent>
-						<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
-						<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>
-					</CardContent>
-				</Card>
-			</TouchableOpacity>
-		) :
-			<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>;
 	}
 }

app/containers/message/User.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text, StyleSheet } from 'react-native';
+import moment from 'moment';
+
+const styles = StyleSheet.create({
+	username: {
+		fontWeight: 'bold'
+	},
+	usernameView: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginBottom: 2
+	},
+	alias: {
+		fontSize: 10,
+		color: '#888',
+		paddingLeft: 5
+	},
+	time: {
+		fontSize: 10,
+		color: '#888',
+		paddingLeft: 5
+	}
+});
+
+export default class Message extends React.PureComponent {
+	static propTypes = {
+		item: PropTypes.object.isRequired,
+		Message_TimeFormat: PropTypes.string.isRequired,
+		onPress: PropTypes.func
+	}
+
+	render() {
+		const { item } = this.props;
+
+		const extraStyle = {};
+		if (item.temp) {
+			extraStyle.opacity = 0.3;
+		}
+
+		const username = item.alias || item.u.username;
+		const aliasUsername = item.alias ? (<Text style={styles.alias}>@{item.u.username}</Text>) : null;
+		const time = moment(item.ts).format(this.props.Message_TimeFormat);
+
+		return (
+			<View style={styles.usernameView}>
+				<Text onPress={this.props.onPress} style={styles.username}>
+					{username}
+				</Text>
+				{aliasUsername}<Text style={styles.time}>{time}</Text>
+			</View>
+		);
+	}
+}

app/presentation/RoomItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import PropTypes from 'prop-types';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import Avatar from './avatar';
+import Avatar from '../containers/Avatar';
 import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
 
 const styles = StyleSheet.create({
@@ -79,14 +79,14 @@ export default class RoomItem extends React.PureComponent {
 			return null;
 		}
 
+		const { color } = avatarInitialsAndColor(name);
+
 		if (type === 'd') {
 			return (
 				<Avatar text={name} baseUrl={baseUrl} size={40} borderRadius={20} />
 			);
 		}
 
-		const { color } = avatarInitialsAndColor(name);
-
 		return (
 			<View style={[styles.iconContainer, { backgroundColor: color }]}>
 				<MaterialCommunityIcons name={icon} style={styles.icon} />

app/views/CreateChannel.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { TextInput, View, Text, Switch, TouchableOpacity, ScrollView } from 'react-native';
 import { createChannelRequest } from '../actions/createChannel';
 import styles from './Styles';
-import KeyboardView from '../components/KeyboardView';
+import KeyboardView from '../presentation/KeyboardView';
 
 @connect(state => ({
 	result: state.createChannel

app/views/login.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 // import * as actions from '../actions';
 import * as loginActions from '../actions/login';
-import KeyboardView from '../components/KeyboardView';
+import KeyboardView from '../presentation/KeyboardView';
 // import { Keyboard } from 'react-native'
 
 import styles from './Styles';

app/views/room.js

@@ -10,9 +10,9 @@ import { messagesRequest } from '../actions/messages';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 import debounce from '../utils/throttle';
-import Message from '../components/Message';
+import Message from '../containers/Message';
-import MessageBox from '../components/MessageBox';
+import MessageBox from '../containers/MessageBox';
-import KeyboardView from '../components/KeyboardView';
+import KeyboardView from '../presentation/KeyboardView';
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 const styles = StyleSheet.create({

app/views/roomsList.js

@@ -10,8 +10,8 @@ import * as actions from '../actions';
 import * as server from '../actions/connect';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
-import RoomItem from '../components/RoomItem';
+import RoomItem from '../presentation/RoomItem';
-import Banner from '../components/banner';
+import Banner from '../containers/Banner';
 
 const styles = StyleSheet.create({
 	container: {

app/views/serverList.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { setServer } from '../actions/server';
 import realm from '../lib/realm';
 import Fade from '../animations/fade';
-import Banner from '../components/banner';
+import Banner from '../containers/Banner';
 
 const styles = StyleSheet.create({
 	view: {

app/views/serverNew.js

@@ -4,7 +4,7 @@ import { Navigation } from 'react-native-navigation';
 import { Text, TextInput, View, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import { serverRequest, addServer } from '../actions/server';
-import KeyboardView from '../components/KeyboardView';
+import KeyboardView from '../presentation/KeyboardView';
 
 const styles = StyleSheet.create({
 	view: {

storybook/stories/Avatar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 
-import Avatar from '../../app/components/avatar';
+import Avatar from '../../app/containers/Avatar';
 
 export default (
 	<ScrollView>

storybook/stories/Channels/DirectMessage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 
-import RoomItem from '../../../app/components/RoomItem';
+import RoomItem from '../../../app/presentation/RoomItem';
 
 export default (
 	<ScrollView>

yarn.lock

@@ -19,6 +19,15 @@
   dependencies:
     "@storybook/addons" "^3.2.0"
 
+"@storybook/addon-storyshots@^3.2.6":
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-3.2.8.tgz#f6e9aa6c99a9f437042da49123c0dc75fe51b90f"
+  dependencies:
+    babel-runtime "^6.23.0"
+    global "^4.3.2"
+    prop-types "^15.5.10"
+    read-pkg-up "^2.0.0"
+
 "@storybook/addons@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.2.0.tgz#e1446cc5613af179701673276267cee71859bf41"
@@ -278,6 +287,10 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argv@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
+
 aria-query@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
@@ -1072,7 +1085,7 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-polyfill@^6.20.0, babel-polyfill@^6.23.0:
+babel-polyfill@^6.20.0, babel-polyfill@^6.23.0, babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
   dependencies:
@@ -1794,6 +1807,14 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codecov@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/codecov/-/codecov-2.3.0.tgz#ad25a2c6e0442d13740d9d4ddbb9a3e2714330f4"
+  dependencies:
+    argv "0.0.2"
+    request "2.81.0"
+    urlgrey "0.4.4"
+
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
@@ -5635,20 +5656,12 @@ react-native-action-button@^2.7.2:
   dependencies:
     prop-types "^15.5.10"
 
-react-native-auto-grow-textinput@^1.2.0:
+react-native-animatable@^1.2.3:
-  version "1.2.0"
+  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/react-native-auto-grow-textinput/-/react-native-auto-grow-textinput-1.2.0.tgz#575f2e0fc2c49dbd4fa7fd91ba9f82bdf3409b0c"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.2.3.tgz#d0f0bd694833b934f3aaa1275739228b786ecb4b"
-
-react-native-autogrow-input@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-autogrow-input/-/react-native-autogrow-input-0.2.1.tgz#4b0fb440b570efdedfde32666036db666d3ac4ec"
   dependencies:
     prop-types "^15.5.10"
 
-react-native-autogrow-textinput@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-autogrow-textinput/-/react-native-autogrow-textinput-4.1.0.tgz#a7e5b17eb3c16ab08e31bbfb88d92488ed87f276"
-
 react-native-card-view@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/react-native-card-view/-/react-native-card-view-0.0.3.tgz#8db9ac4a3f01d08f8bd9f79343082d87fdf09907"
@@ -5657,10 +5670,6 @@ react-native-compat@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/react-native-compat/-/react-native-compat-0.0.2.tgz#5d7642f3d53ad324a025893be3c66d16a01cda23"
 
-react-native-console-time-polyfill@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/react-native-console-time-polyfill/-/react-native-console-time-polyfill-0.0.6.tgz#7823d86fe83439c74480d1b124a92b1a78571889"
-
 react-native-dismiss-keyboard@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
@@ -5690,11 +5699,7 @@ react-native-fetch-blob@^0.10.8:
     base-64 "0.1.0"
     glob "7.0.6"
 
-react-native-form-generator@^0.9.9:
+react-native-image-picker@^0.26.4:
-  version "0.9.9"
-  resolved "https://registry.yarnpkg.com/react-native-form-generator/-/react-native-form-generator-0.9.9.tgz#68aae26d1e8dc3e30073ccd7bb298fbdfdce1bca"
-
-react-native-image-picker@^0.26.3:
   version "0.26.4"
   resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-0.26.4.tgz#e53b0564bef44cb3c96ff81594e1e874daa1f0b3"
 
@@ -5704,6 +5709,10 @@ react-native-img-cache@^1.4.0:
   dependencies:
     crypto-js "^3.1.9-1"
 
+react-native-loading-spinner-overlay@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-native-loading-spinner-overlay/-/react-native-loading-spinner-overlay-0.5.2.tgz#b7bcd277476d596615fd7feee601789f9bdc7acc"
+
 react-native-meteor@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-native-meteor/-/react-native-meteor-1.1.0.tgz#55a91efe2d466d3a8cceb5b5419799aeedcd6756"
@@ -6064,9 +6073,9 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
-redux-thunk@^2.2.0:
+redux-saga@^0.15.6:
-  version "2.2.0"
+  version "0.15.6"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.15.6.tgz#8638dc522de6c6c0a496fe8b2b5466287ac2dc4d"
 
 redux@^3.6.0, redux@^3.7.2:
   version "3.7.2"
@@ -6156,7 +6165,7 @@ replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
 
-request@^2.78.0, request@^2.79.0, request@^2.81.0:
+request@2.81.0, request@^2.78.0, request@^2.79.0, request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -7001,6 +7010,10 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urlgrey@0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/urlgrey/-/urlgrey-0.4.4.tgz#892fe95960805e85519f1cd4389f2cb4cbb7652f"
+
 util-deprecate@1.0.2, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"