Merge branch 'master' into redux-saga

.bettercodehub.yml

@@ -0,0 +1,14 @@
+component_depth: 2
+languages:
+- javascript
+
+- name: javascript
+  production:
+    exclude:
+      - .*\.test\.js
+      - .*\/__test__\/.*\.js
+      - .*\/__mock__\/.*\.js
+  test:
+    include:
+      - .*\.test\.js
+      - .*\/__test__\/.*\.js

.eslintignore

@@ -1,2 +1,3 @@
 __tests__
 node_modules
+coverage

.travis.yml

@@ -0,0 +1,42 @@
+matrix:
+  include:
+  - os: linux
+    dist: trusty
+    sudo: false
+    language: android
+    before_install:
+      - openssl aes-256-cbc -K $encrypted_985c748be78d_key -iv $encrypted_985c748be78d_iv -in key.keystore.enc -out android/app/key.keystore -d
+
+      - mkdir -p ~/.gradle
+      - echo -e "ROCKETCHAT_RN_RELEASE_STORE_FILE=$ROCKETCHAT_RN_RELEASE_STORE_FILE" > ~/.gradle/gradle.properties
+      - echo -e "ROCKETCHAT_RN_RELEASE_STORE_PASSWORD=$ROCKETCHAT_RN_RELEASE_STORE_PASSWORD" >> ~/.gradle/gradle.properties
+      - echo -e "ROCKETCHAT_RN_RELEASE_KEY_ALIAS=$ROCKETCHAT_RN_RELEASE_KEY_ALIAS" >> ~/.gradle/gradle.properties
+      - echo -e "ROCKETCHAT_RN_RELEASE_KEY_PASSWORD=$ROCKETCHAT_RN_RELEASE_KEY_PASSWORD" >> ~/.gradle/gradle.properties
+      - nvm install 8
+      - node --version
+    install:
+      - npm install -g codecov
+      - npm install
+    android:
+      components:
+        - tools
+        - build-tools-23.0.1
+        - build-tools-25.0.1
+        - build-tools-26.0.1
+        - android-23
+        - android-25
+        - android-26
+        - extra-android-m2repository
+        - extra-google-google_play_services
+        - extra-google-m2repository
+        - addon-google_apis-google-16
+    script:
+      - npm run ci
+      - cd android && ./gradlew assembleRelease
+
+  - os: osx
+    osx_image: xcode8.3
+    language: node_js
+    node_js: 8
+    script:
+      - npm run ci

README.md

@@ -0,0 +1,100 @@
+# Rocket.Chat React Native Mobile
+
+[![Build Status](https://img.shields.io/travis/RocketChat/Rocket.Chat.ReactNative/master.svg)](https://travis-ci.org/RocketChat/Rocket.Chat.ReactNative)
+[![Project Dependencies](https://david-dm.org/RocketChat/Rocket.Chat.ReactNative.svg)](https://david-dm.org/RocketChat/Rocket.Chat.ReactNative)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/bb15e2392a71473ea59d3f634f35c54e)](https://www.codacy.com/app/RocketChat/Rocket.Chat.ReactNative?utm_source=github.com&utm_medium=referral&utm_content=RocketChat/Rocket.Chat.ReactNative&utm_campaign=badger)
+[![codecov](https://codecov.io/gh/RocketChat/Rocket.Chat.ReactNative/branch/master/graph/badge.svg)](https://codecov.io/gh/RocketChat/Rocket.Chat.ReactNative)
+[![CodeFactor](https://www.codefactor.io/repository/github/rocketchat/rocket.chat.reactnative/badge)](https://www.codefactor.io/repository/github/rocketchat/rocket.chat.reactnative)
+[![Known Vulnerabilities](https://snyk.io/test/github/rocketchat/rocket.chat.reactnative/badge.svg)](https://snyk.io/test/github/rocketchat/rocket.chat.reactnative)
+[![BCH compliance](https://bettercodehub.com/edge/badge/RocketChat/Rocket.Chat.ReactNative?branch=master)](https://bettercodehub.com/)
+
+**Supported Server Versions:** 0.58.0+ (We are working to support earlier versions)
+
+# Installing Dependencies
+
+Follow the [React Native Getting Started Guide](https://facebook.github.io/react-native/docs/getting-started.html) for detailed instructions on setting up your local machine for development.
+
+# Detailed configuration:
+
+## Mac
+
+- General requirements
+
+    - XCode 8.3
+    - Install required packages using homebrew:
+      ```bash
+      $ brew install watchman
+      $ brew install yarn
+      ```
+
+- Clone repository and configure:
+    ```bash
+    $ git clone git@github.com:RocketChat/Rocket.Chat.ReactNative.git
+    $ cd Rocket.Chat.ReactNative
+    $ npm install
+    $ npm install -g react-native-cli
+    ```
+
+- Run application
+    ```bash
+    $ react-native run-ios
+    ```
+    ```bash
+    $ react-native run-android
+    ```
+
+## Linux:
+
+- General requiriments:
+
+  - JDK 7 or greater
+  - Android SDK
+  - Virtualbox
+  - An Android emulator: Genymotion or Android emulator. If using genymotion ensure that it uses existing adb tools (Settings: "Use custom Android SDK Tools")
+  - Install watchman (do this globally):
+      ```bash
+      $ git clone https://github.com/facebook/watchman.git
+      $ cd watchman
+      $ git checkout master
+      $ ./autogen.sh
+      $ ./configure make
+      $ sudo make install
+      ```
+      Configure your kernel to accept a lot of file watches, using a command like:
+      ```bash
+      $ sudo sysctl -w fs.inotify.max_user_watches=1048576
+      ```
+
+- Clone repository and configure:
+    ```bash
+    $ git clone git@github.com:RocketChat/Rocket.Chat.ReactNative.git
+    $ cd Rocket.Chat.ReactNative
+    $ npm install
+    $ npm install -g react-native-cli
+    ```
+
+- Run application
+  - Start emulator
+  - Start react packager: `$ react-native start`
+  - Run in emulator: `$ react-native run-android`
+
+# Storybook
+- General requirements
+    - Install storybook
+        ```bash
+        $ npm i -g @storybook/cli
+        ```
+
+- Running storybook
+    - Run storybook application
+        ```bash
+        $ npm run storybook
+        ```
+    - Run application in other shell
+        ```bash
+        $ react-native run-ios
+        ```
+    - Running storybook on browser to help stories navigation
+        ```
+        open http://localhost:7007/
+        ```

__tests__/RoomItem.js

@@ -0,0 +1,22 @@
+import 'react-native';
+import React from 'react';
+import RoomItem from '../app/components/RoomItem';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+jest.mock('react-native-img-cache', () => {
+	return {
+		CachedImage: 'View'
+	}
+});
+
+it('renders correctly', () => {
+	const tree = renderer.create(
+		<RoomItem
+			type="d"
+			name="name"
+		/>
+	).toJSON();
+	expect(tree).toMatchSnapshot();
+});

__tests__/__snapshots__/RoomItem.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "height": 56,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 20,
+          "height": 40,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 40,
+        },
+        Object {
+          "backgroundColor": "#3F51B5",
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        }
+      }
+    >
+      NA
+    </Text>
+    <View
+      source={
+        Object {
+          "uri": "undefined/avatar/name",
+        }
+      }
+      style={
+        Object {
+          "borderRadius": 20,
+          "height": 40,
+          "position": "absolute",
+          "width": 40,
+        }
+      }
+    />
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    disabled={false}
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      Object {
+        "color": "#444",
+        "flex": 1,
+        "fontSize": 16,
+        "marginLeft": 16,
+        "marginRight": 4,
+      }
+    }
+  >
+    name
+  </Text>
+</View>
+`;

__tests__/index.android.js

@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.android.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-	const tree = renderer.create(
-		<Index />
-	);
-});

__tests__/index.ios.js

@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.ios.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-	const tree = renderer.create(
-		<Index />
-	);
-});

app/components/RoomItem.js

@@ -8,10 +8,10 @@ import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
 
 const styles = StyleSheet.create({
 	container: {
-		flex: 1,
+		// flex: 1,
 		flexDirection: 'row',
 		paddingLeft: 16,
-		paddingRight: 56,
+		paddingRight: 16,
 		height: 56,
 		alignItems: 'center'
 	},
@@ -23,15 +23,15 @@ const styles = StyleSheet.create({
 		textAlign: 'center',
 		overflow: 'hidden',
 		fontSize: 14,
-		right: 16,
-		marginLeft: 16,
-		position: 'absolute'
+		paddingLeft: 5,
+		paddingRight: 5
 	},
 	roomName: {
-		flexGrow: 1,
+		flex: 1,
 		fontSize: 16,
 		color: '#444',
-		marginLeft: 16
+		marginLeft: 16,
+		marginRight: 4
 	},
 	iconContainer: {
 		height: 40,
@@ -52,36 +52,39 @@ const styles = StyleSheet.create({
 		borderRadius: 20
 	},
 	avatarInitials: {
-		fontSize: 22,
+		fontSize: 20,
 		color: '#ffffff'
 	}
 });
 
 export default class RoomItem extends React.PureComponent {
 	static propTypes = {
-		item: PropTypes.object.isRequired,
+		type: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+		unread: PropTypes.number,
 		baseUrl: PropTypes.string
 	}
+
 	get icon() {
+		const { type, name, baseUrl } = this.props;
+
 		const icon = {
 			d: 'at',
 			c: 'pound',
 			p: 'lock',
 			l: 'account'
-		}[this.props.item.t];
+		}[type];
 
 		if (!icon) {
 			return null;
 		}
 
-		const { name } = this.props.item;
-
-		if (this.props.item.t === 'd') {
+		if (type === 'd') {
 			const { initials, color } = avatarInitialsAndColor(name);
 			return (
 				<View style={[styles.iconContainer, { backgroundColor: color }]}>
 					<Text style={styles.avatarInitials}>{initials}</Text>
-					<CachedImage style={styles.avatar} source={{ uri: `${ this.props.baseUrl }/avatar/${ name }` }} />
+					<CachedImage style={styles.avatar} source={{ uri: `${ baseUrl }/avatar/${ name }` }} />
 				</View>
 			);
 		}
@@ -95,27 +98,29 @@ export default class RoomItem extends React.PureComponent {
 		);
 	}
 
-	renderNumber = (item) => {
-		if (item.unread) {
-			return (
-				<Text style={styles.number}>
-					{ item.unread }
-				</Text>
-			);
+	renderNumber = (unread) => {
+		if (!unread || unread <= 0) {
+			return;
 		}
+
+		if (unread >= 1000) {
+			unread = '999+';
+		}
+
+		return (
+			<Text style={styles.number}>
+				{ unread }
+			</Text>
+		);
 	}
 
 	render() {
-		const { item } = this.props;
-		let extraSpace = {};
-		if (item.unread) {
-			extraSpace = { paddingRight: 92 };
-		}
+		const { unread, name, _id } = this.props;
 		return (
-			<TouchableOpacity key={item._id} onPress={() => this.props.onPress(item._id, item)} style={[styles.container, extraSpace]}>
+			<TouchableOpacity key={_id} onPress={this.props.onPress} style={styles.container}>
 				{this.icon}
-				<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ this.props.item.name }</Text>
-				{this.renderNumber(this.props.item)}
+				<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
+				{this.renderNumber(unread)}
 			</TouchableOpacity>
 		);
 	}

app/components/message/card.js

@@ -24,7 +24,12 @@ const CustomButton = ({ text }) => (
 	</TouchableOpacity>
 );
 
+CustomButton.propTypes = {
+	text: PropTypes.string
+};
+
 Navigation.registerComponent('CustomButton', () => CustomButton);
+
 @connect(state => ({
 	base: state.settings.Site_Url,
 	canShowList: state.login.token.length || state.login.user.token

app/utils/throttle.js

@@ -1,11 +1,12 @@
 export default function throttle(fn, threshhold = 250, scope) {
-	let last,
-		deferTimer;
-	return function() {
+	let last;
+	let deferTimer;
+
+	return (...args) => {
 		const context = scope || this;
 
-		let now = +new Date(),
-			args = arguments;
+		const now = +new Date();
+
 		if (last && now < last + threshhold) {
 			// hold on to it
 			clearTimeout(deferTimer);

app/views/roomsList.js

@@ -54,7 +54,6 @@ const styles = StyleSheet.create({
 });
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
-
 @connect(state => ({
 	server: state.server,
 	login: state.login,
@@ -237,8 +236,9 @@ export default class RoomsListView extends React.Component {
 
 	renderItem = item => (
 		<RoomItem
-			id={item._id}
-			item={item}
+			_id={item._id}
+			name={item.name}
+			type={item.t}
 			baseUrl={this.props.Site_Url}
 			onPress={() => this._onPressItem(item._id, item)}
 		/>

coverage/clover.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1503070854493" clover="3.2.0">
+  <project timestamp="1503070854494" name="All files">
+    <metrics statements="26" coveredstatements="20" conditionals="13" coveredconditionals="5" methods="4" coveredmethods="4" elements="43" coveredelements="29" complexity="0" loc="26" ncloc="26" packages="3" files="3" classes="3">
+      <package name="components">
+        <metrics statements="17" coveredstatements="11" conditionals="10" coveredconditionals="4" methods="3" coveredmethods="3"/>
+        <file name="RoomItem.js" path="/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/components/RoomItem.js">
+          <metrics statements="17" coveredstatements="11" conditionals="10" coveredconditionals="4" methods="3" coveredmethods="3"/>
+          <line num="9" count="1" type="stmt"/>
+          <line num="69" count="1" type="stmt"/>
+          <line num="71" count="1" type="stmt"/>
+          <line num="78" count="1" type="cond" truecount="1" falsecount="1"/>
+          <line num="79" count="0" type="stmt"/>
+          <line num="82" count="1" type="cond" truecount="1" falsecount="1"/>
+          <line num="83" count="1" type="stmt"/>
+          <line num="84" count="1" type="stmt"/>
+          <line num="92" count="0" type="stmt"/>
+          <line num="94" count="0" type="stmt"/>
+          <line num="102" count="1" type="cond" truecount="2" falsecount="2"/>
+          <line num="103" count="1" type="stmt"/>
+          <line num="106" count="0" type="cond" truecount="0" falsecount="2"/>
+          <line num="107" count="0" type="stmt"/>
+          <line num="110" count="0" type="stmt"/>
+          <line num="118" count="1" type="stmt"/>
+          <line num="120" count="1" type="stmt"/>
+        </file>
+      </package>
+      <package name="constants">
+        <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+        <file name="colors.js" path="/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/constants/colors.js">
+          <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+          <line num="1" count="1" type="stmt"/>
+          <line num="2" count="1" type="stmt"/>
+        </file>
+      </package>
+      <package name="utils">
+        <metrics statements="7" coveredstatements="7" conditionals="3" coveredconditionals="1" methods="1" coveredmethods="1"/>
+        <file name="avatarInitialsAndColor.js" path="/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/utils/avatarInitialsAndColor.js">
+          <metrics statements="7" coveredstatements="7" conditionals="3" coveredconditionals="1" methods="1" coveredmethods="1"/>
+          <line num="4" count="1" type="stmt"/>
+          <line num="6" count="1" type="stmt"/>
+          <line num="7" count="1" type="stmt"/>
+          <line num="9" count="1" type="stmt"/>
+          <line num="11" count="1" type="cond" truecount="1" falsecount="1"/>
+          <line num="12" count="1" type="stmt"/>
+          <line num="14" count="1" type="stmt"/>
+        </file>
+      </package>
+    </metrics>
+  </project>
+</coverage>

coverage/coverage-final.json

@@ -0,0 +1,4 @@
+{"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/components/RoomItem.js": {"path":"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/components/RoomItem.js","statementMap":{"0":{"start":{"line":9,"column":15},"end":{"line":58,"column":2}},"1":{"start":{"line":69,"column":34},"end":{"line":69,"column":44}},"2":{"start":{"line":71,"column":15},"end":{"line":76,"column":9}},"3":{"start":{"line":78,"column":2},"end":{"line":80,"column":3}},"4":{"start":{"line":79,"column":3},"end":{"line":79,"column":15}},"5":{"start":{"line":82,"column":2},"end":{"line":90,"column":3}},"6":{"start":{"line":83,"column":31},"end":{"line":83,"column":59}},"7":{"start":{"line":84,"column":3},"end":{"line":89,"column":5}},"8":{"start":{"line":92,"column":20},"end":{"line":92,"column":48}},"9":{"start":{"line":94,"column":2},"end":{"line":98,"column":4}},"10":{"start":{"line":102,"column":2},"end":{"line":104,"column":3}},"11":{"start":{"line":103,"column":3},"end":{"line":103,"column":10}},"12":{"start":{"line":106,"column":2},"end":{"line":108,"column":3}},"13":{"start":{"line":107,"column":3},"end":{"line":107,"column":19}},"14":{"start":{"line":110,"column":2},"end":{"line":114,"column":4}},"15":{"start":{"line":118,"column":27},"end":{"line":118,"column":37}},"16":{"start":{"line":120,"column":2},"end":{"line":126,"column":4}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":68,"column":1},"end":{"line":68,"column":2}},"loc":{"start":{"line":68,"column":12},"end":{"line":99,"column":2}},"line":68},"1":{"name":"(anonymous_1)","decl":{"start":{"line":101,"column":16},"end":{"line":101,"column":17}},"loc":{"start":{"line":101,"column":28},"end":{"line":115,"column":2}},"line":101},"2":{"name":"(anonymous_2)","decl":{"start":{"line":117,"column":1},"end":{"line":117,"column":2}},"loc":{"start":{"line":117,"column":10},"end":{"line":127,"column":2}},"line":117}},"branchMap":{"0":{"loc":{"start":{"line":78,"column":2},"end":{"line":80,"column":3}},"type":"if","locations":[{"start":{"line":78,"column":2},"end":{"line":80,"column":3}},{"start":{"line":78,"column":2},"end":{"line":80,"column":3}}],"line":78},"1":{"loc":{"start":{"line":82,"column":2},"end":{"line":90,"column":3}},"type":"if","locations":[{"start":{"line":82,"column":2},"end":{"line":90,"column":3}},{"start":{"line":82,"column":2},"end":{"line":90,"column":3}}],"line":82},"2":{"loc":{"start":{"line":102,"column":2},"end":{"line":104,"column":3}},"type":"if","locations":[{"start":{"line":102,"column":2},"end":{"line":104,"column":3}},{"start":{"line":102,"column":2},"end":{"line":104,"column":3}}],"line":102},"3":{"loc":{"start":{"line":102,"column":6},"end":{"line":102,"column":28}},"type":"binary-expr","locations":[{"start":{"line":102,"column":6},"end":{"line":102,"column":13}},{"start":{"line":102,"column":17},"end":{"line":102,"column":28}}],"line":102},"4":{"loc":{"start":{"line":106,"column":2},"end":{"line":108,"column":3}},"type":"if","locations":[{"start":{"line":106,"column":2},"end":{"line":108,"column":3}},{"start":{"line":106,"column":2},"end":{"line":108,"column":3}}],"line":106}},"s":{"0":1,"1":1,"2":1,"3":1,"4":0,"5":1,"6":1,"7":1,"8":0,"9":0,"10":1,"11":1,"12":0,"13":0,"14":0,"15":1,"16":1},"f":{"0":1,"1":1,"2":1},"b":{"0":[0,1],"1":[1,0],"2":[1,0],"3":[1,0],"4":[0,0]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"d139f6f5a86c5ec1234d16fff580f00149385d7e"}
+,"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/constants/colors.js": {"path":"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/constants/colors.js","statementMap":{"0":{"start":{"line":1,"column":29},"end":{"line":1,"column":227}},"1":{"start":{"line":2,"column":26},"end":{"line":2,"column":30}}},"fnMap":{},"branchMap":{},"s":{"0":1,"1":1},"f":{},"b":{},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"6284dad0efd0acc061f96680c6e59b465a058731"}
+,"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/utils/avatarInitialsAndColor.js": {"path":"/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/utils/avatarInitialsAndColor.js","statementMap":{"0":{"start":{"line":4,"column":18},"end":{"line":4,"column":56}},"1":{"start":{"line":6,"column":15},"end":{"line":6,"column":38}},"2":{"start":{"line":7,"column":1},"end":{"line":7,"column":100}},"3":{"start":{"line":9,"column":23},"end":{"line":9,"column":42}},"4":{"start":{"line":11,"column":16},"end":{"line":11,"column":160}},"5":{"start":{"line":12,"column":1},"end":{"line":12,"column":35}},"6":{"start":{"line":14,"column":1},"end":{"line":14,"column":28}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":3,"column":15},"end":{"line":3,"column":16}},"loc":{"start":{"line":3,"column":39},"end":{"line":15,"column":1}},"line":3}},"branchMap":{"0":{"loc":{"start":{"line":3,"column":24},"end":{"line":3,"column":37}},"type":"default-arg","locations":[{"start":{"line":3,"column":35},"end":{"line":3,"column":37}}],"line":3},"1":{"loc":{"start":{"line":11,"column":16},"end":{"line":11,"column":160}},"type":"cond-expr","locations":[{"start":{"line":11,"column":43},"end":{"line":11,"column":107}},{"start":{"line":11,"column":110},"end":{"line":11,"column":160}}],"line":11}},"s":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1},"f":{"0":1},"b":{"0":[0],"1":[0,1]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"71f82ed0f6c31295c1916090885bad58fe88ebab"}
+}

coverage/lcov-report/base.css

@@ -0,0 +1,212 @@
+body, html {
+  margin:0; padding: 0;
+  height: 100%;
+}
+body {
+    font-family: Helvetica Neue, Helvetica, Arial;
+    font-size: 14px;
+    color:#333;
+}
+.small { font-size: 12px; }
+*, *:after, *:before {
+  -webkit-box-sizing:border-box;
+     -moz-box-sizing:border-box;
+          box-sizing:border-box;
+  }
+h1 { font-size: 20px; margin: 0;}
+h2 { font-size: 14px; }
+pre {
+    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    margin: 0;
+    padding: 0;
+    -moz-tab-size: 2;
+    -o-tab-size:  2;
+    tab-size: 2;
+}
+a { color:#0074D9; text-decoration:none; }
+a:hover { text-decoration:underline; }
+.strong { font-weight: bold; }
+.space-top1 { padding: 10px 0 0 0; }
+.pad2y { padding: 20px 0; }
+.pad1y { padding: 10px 0; }
+.pad2x { padding: 0 20px; }
+.pad2 { padding: 20px; }
+.pad1 { padding: 10px; }
+.space-left2 { padding-left:55px; }
+.space-right2 { padding-right:20px; }
+.center { text-align:center; }
+.clearfix { display:block; }
+.clearfix:after {
+  content:'';
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+  }
+.fl { float: left; }
+@media only screen and (max-width:640px) {
+  .col3 { width:100%; max-width:100%; }
+  .hide-mobile { display:none!important; }
+}
+
+.quiet {
+  color: #7f7f7f;
+  color: rgba(0,0,0,0.5);
+}
+.quiet a { opacity: 0.7; }
+
+.fraction {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 10px;
+  color: #555;
+  background: #E8E8E8;
+  padding: 4px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+div.path a:link, div.path a:visited { color: #333; }
+table.coverage {
+  border-collapse: collapse;
+  margin: 10px 0 0 0;
+  padding: 0;
+}
+
+table.coverage td {
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+table.coverage td.line-count {
+    text-align: right;
+    padding: 0 5px 0 20px;
+}
+table.coverage td.line-coverage {
+    text-align: right;
+    padding-right: 10px;
+    min-width:20px;
+}
+
+table.coverage td span.cline-any {
+    display: inline-block;
+    padding: 0 5px;
+    width: 100%;
+}
+.missing-if-branch {
+    display: inline-block;
+    margin-right: 5px;
+    border-radius: 3px;
+    position: relative;
+    padding: 0 4px;
+    background: #333;
+    color: yellow;
+}
+
+.skip-if-branch {
+    display: none;
+    margin-right: 10px;
+    position: relative;
+    padding: 0 4px;
+    background: #ccc;
+    color: white;
+}
+.missing-if-branch .typ, .skip-if-branch .typ {
+    color: inherit !important;
+}
+.coverage-summary {
+  border-collapse: collapse;
+  width: 100%;
+}
+.coverage-summary tr { border-bottom: 1px solid #bbb; }
+.keyline-all { border: 1px solid #ddd; }
+.coverage-summary td, .coverage-summary th { padding: 10px; }
+.coverage-summary tbody { border: 1px solid #bbb; }
+.coverage-summary td { border-right: 1px solid #bbb; }
+.coverage-summary td:last-child { border-right: none; }
+.coverage-summary th {
+  text-align: left;
+  font-weight: normal;
+  white-space: nowrap;
+}
+.coverage-summary th.file { border-right: none !important; }
+.coverage-summary th.pct { }
+.coverage-summary th.pic,
+.coverage-summary th.abs,
+.coverage-summary td.pct,
+.coverage-summary td.abs { text-align: right; }
+.coverage-summary td.file { white-space: nowrap;  }
+.coverage-summary td.pic { min-width: 120px !important;  }
+.coverage-summary tfoot td { }
+
+.coverage-summary .sorter {
+    height: 10px;
+    width: 7px;
+    display: inline-block;
+    margin-left: 0.5em;
+    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
+}
+.coverage-summary .sorted .sorter {
+    background-position: 0 -20px;
+}
+.coverage-summary .sorted-desc .sorter {
+    background-position: 0 -10px;
+}
+.status-line {  height: 10px; }
+/* dark red */
+.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
+.low .chart { border:1px solid #C21F39 }
+/* medium red */
+.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
+/* light red */
+.low, .cline-no { background:#FCE1E5 }
+/* light green */
+.high, .cline-yes { background:rgb(230,245,208) }
+/* medium green */
+.cstat-yes { background:rgb(161,215,106) }
+/* dark green */
+.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
+.high .chart { border:1px solid rgb(77,146,33) }
+
+
+.medium .chart { border:1px solid #666; }
+.medium .cover-fill { background: #666; }
+
+.cbranch-no { background:  yellow !important; color: #111; }
+
+.cstat-skip { background: #ddd; color: #111; }
+.fstat-skip { background: #ddd; color: #111 !important; }
+.cbranch-skip { background: #ddd !important; color: #111; }
+
+span.cline-neutral { background: #eaeaea; }
+.medium { background: #eaeaea; }
+
+.cover-fill, .cover-empty {
+  display:inline-block;
+  height: 12px;
+}
+.chart {
+  line-height: 0;
+}
+.cover-empty {
+    background: white;
+}
+.cover-full {
+    border-right: none !important;
+}
+pre.prettyprint {
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.com { color: #999 !important; }
+.ignore-none { color: #999; font-weight: normal; }
+
+.wrapper {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -48px;
+}
+.footer, .push {
+  height: 48px;
+}

coverage/lcov-report/components/RoomItem.js.html

@@ -0,0 +1,449 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for components/RoomItem.js</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> / <a href="index.html">components</a> RoomItem.js
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">64.71% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>11/17</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">40% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>4/10</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>3/3</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">64.71% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>11/17</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line medium'></div>
+<pre><table class="coverage">
+<tr><td class="line-count quiet">1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+63
+64
+65
+66
+67
+68
+69
+70
+71
+72
+73
+74
+75
+76
+77
+78
+79
+80
+81
+82
+83
+84
+85
+86
+87
+88
+89
+90
+91
+92
+93
+94
+95
+96
+97
+98
+99
+100
+101
+102
+103
+104
+105
+106
+107
+108
+109
+110
+111
+112
+113
+114
+115
+116
+117
+118
+119
+120
+121
+122
+123
+124
+125
+126
+127
+128
+129</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
+import { CachedImage } from 'react-native-img-cache';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import PropTypes from 'prop-types';
+import { View, Text, StyleSheet } from 'react-native';
+&nbsp;
+import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
+&nbsp;
+const styles = StyleSheet.create({
+	container: {
+		// flex: 1,
+		flexDirection: 'row',
+		paddingLeft: 16,
+		paddingRight: 16,
+		height: 56,
+		alignItems: 'center'
+	},
+	number: {
+		minWidth: 20,
+		borderRadius: 5,
+		backgroundColor: '#1d74f5',
+		color: '#fff',
+		textAlign: 'center',
+		overflow: 'hidden',
+		fontSize: 14,
+		paddingLeft: 5,
+		paddingRight: 5
+	},
+	roomName: {
+		flex: 1,
+		fontSize: 16,
+		color: '#444',
+		marginLeft: 16,
+		marginRight: 4
+	},
+	iconContainer: {
+		height: 40,
+		width: 40,
+		borderRadius: 20,
+		overflow: 'hidden',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	icon: {
+		fontSize: 20,
+		color: '#fff'
+	},
+	avatar: {
+		width: 40,
+		height: 40,
+		position: 'absolute',
+		borderRadius: 20
+	},
+	avatarInitials: {
+		fontSize: 20,
+		color: '#ffffff'
+	}
+});
+&nbsp;
+export default class RoomItem extends React.PureComponent {
+	static propTypes = {
+		type: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+		unread: PropTypes.number,
+		baseUrl: PropTypes.string
+	}
+&nbsp;
+	get icon() {
+		const { type, name, baseUrl } = this.props;
+&nbsp;
+		const icon = {
+			d: 'at',
+			c: 'pound',
+			p: 'lock',
+			l: 'account'
+		}[type];
+&nbsp;
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (!icon) {
+<span class="cstat-no" title="statement not covered" >			return null;</span>
+		}
+&nbsp;
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (type === 'd') {
+			const { initials, color } = avatarInitialsAndColor(name);
+			return (
+				&lt;View style={[styles.iconContainer, { backgroundColor: color }]}&gt;
+					&lt;Text style={styles.avatarInitials}&gt;{initials}&lt;/Text&gt;
+					&lt;CachedImage style={styles.avatar} source={{ uri: `${ baseUrl }/avatar/${ name }` }} /&gt;
+				&lt;/View&gt;
+			);
+		}
+&nbsp;
+		const { color } = <span class="cstat-no" title="statement not covered" >avatarInitialsAndColor(name);</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		return (</span>
+			&lt;View style={[styles.iconContainer, { backgroundColor: color }]}&gt;
+				&lt;MaterialCommunityIcons name={icon} style={styles.icon} /&gt;
+			&lt;/View&gt;
+		);
+	}
+&nbsp;
+	renderNumber = (unread) =&gt; {
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (!unread || <span class="branch-1 cbranch-no" title="branch not covered" >unread &lt;= 0)</span> {
+			return;
+		}
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		if (unread &gt;= 1000) {</span>
+<span class="cstat-no" title="statement not covered" >			unread = '999+';</span>
+		}
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		return (</span>
+			&lt;Text style={styles.number}&gt;
+				{ unread }
+			&lt;/Text&gt;
+		);
+	}
+&nbsp;
+	render() {
+		const { unread, name } = this.props;
+&nbsp;
+		return (
+			&lt;View style={styles.container}&gt;
+				{this.icon}
+				&lt;Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}&gt;{ name }&lt;/Text&gt;
+				{this.renderNumber(unread)}
+			&lt;/View&gt;
+		);
+	}
+}
+&nbsp;</pre></td></tr>
+</table></pre>
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/components/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for components</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> components
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">64.71% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>11/17</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">40% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>4/10</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>3/3</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">64.71% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>11/17</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line medium'></div>
+<div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file medium" data-value="RoomItem.js"><a href="RoomItem.js.html">RoomItem.js</a></td>
+	<td data-value="64.71" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 64%;"></div><div class="cover-empty" style="width:36%;"></div></div></td>
+	<td data-value="64.71" class="pct medium">64.71%</td>
+	<td data-value="17" class="abs medium">11/17</td>
+	<td data-value="40" class="pct low">40%</td>
+	<td data-value="10" class="abs low">4/10</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="64.71" class="pct medium">64.71%</td>
+	<td data-value="17" class="abs medium">11/17</td>
+	</tr>
+
+</tbody>
+</table>
+</div><div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/constants/colors.js.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for constants/colors.js</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> / <a href="index.html">constants</a> colors.js
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>2/2</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>2/2</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<pre><table class="coverage">
+<tr><td class="line-count quiet">1
+2
+3</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export const AVATAR_COLORS = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
+export const ESLINT_FIX = null;
+&nbsp;</pre></td></tr>
+</table></pre>
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/constants/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for constants</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> constants
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>2/2</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>2/2</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="colors.js"><a href="colors.js.html">colors.js</a></td>
+	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	</tr>
+
+</tbody>
+</table>
+</div><div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/index.html

@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for All files</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="prettify.css" />
+    <link rel="stylesheet" href="base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      All files
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">76.92% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>20/26</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">38.46% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>5/13</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>4/4</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">76.92% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>20/26</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line medium'></div>
+<div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file medium" data-value="components"><a href="components/index.html">components</a></td>
+	<td data-value="64.71" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 64%;"></div><div class="cover-empty" style="width:36%;"></div></div></td>
+	<td data-value="64.71" class="pct medium">64.71%</td>
+	<td data-value="17" class="abs medium">11/17</td>
+	<td data-value="40" class="pct low">40%</td>
+	<td data-value="10" class="abs low">4/10</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="64.71" class="pct medium">64.71%</td>
+	<td data-value="17" class="abs medium">11/17</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="constants"><a href="constants/index.html">constants</a></td>
+	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="utils"><a href="utils/index.html">utils</a></td>
+	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="33.33" class="pct low">33.33%</td>
+	<td data-value="3" class="abs low">1/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	</tr>
+
+</tbody>
+</table>
+</div><div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/prettify.css

@@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

coverage/lcov-report/sorter.js

@@ -0,0 +1,158 @@
+var addSorting = (function () {
+    "use strict";
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() { return document.querySelector('.coverage-summary'); }
+    // returns the thead element of the summary table
+    function getTableHeader() { return getTable().querySelector('thead tr'); }
+    // returns the tbody element of the summary table
+    function getTableBody() { return getTable().querySelector('tbody'); }
+    // returns the th element for nth column
+    function getNthColumn(n) { return getTableHeader().querySelectorAll('th')[n]; }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML = colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function (a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function (a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function () {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i =0 ; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function () {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData(cols);
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

coverage/lcov-report/utils/avatarInitialsAndColor.js.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for utils/avatarInitialsAndColor.js</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> / <a href="index.html">utils</a> avatarInitialsAndColor.js
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>7/7</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">33.33% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>1/3</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>1/1</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>7/7</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<pre><table class="coverage">
+<tr><td class="line-count quiet">1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { AVATAR_COLORS } from '../constants/colors';
+&nbsp;
+export default function(username = <span class="branch-0 cbranch-no" title="branch not covered" >'')</span> {
+	const position = username.length % AVATAR_COLORS.length;
+&nbsp;
+	const color = AVATAR_COLORS[position];
+	username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, '');
+&nbsp;
+	const usernameParts = username.split('.');
+&nbsp;
+	let initials = usernameParts.length &gt; 1 ? <span class="branch-0 cbranch-no" title="branch not covered" >usernameParts[0][0] + usernameParts[usernameParts.length - 1][0] </span>: username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2);
+	initials = initials.toUpperCase();
+&nbsp;
+	return { initials, color };
+}
+&nbsp;</pre></td></tr>
+</table></pre>
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov-report/utils/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for utils</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../index.html">All files</a> utils
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>7/7</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">33.33% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>1/3</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>1/1</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>7/7</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="avatarInitialsAndColor.js"><a href="avatarInitialsAndColor.js.html">avatarInitialsAndColor.js</a></td>
+	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="33.33" class="pct low">33.33%</td>
+	<td data-value="3" class="abs low">1/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	</tr>
+
+</tbody>
+</table>
+</div><div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Aug 18 2017 12:40:54 GMT-0300 (-03)
+</div>
+</div>
+<script src="../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../sorter.js"></script>
+</body>
+</html>

coverage/lcov.info

@@ -0,0 +1,74 @@
+TN:
+SF:/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/components/RoomItem.js
+FN:68,(anonymous_0)
+FN:101,(anonymous_1)
+FN:117,(anonymous_2)
+FNF:3
+FNH:3
+FNDA:1,(anonymous_0)
+FNDA:1,(anonymous_1)
+FNDA:1,(anonymous_2)
+DA:9,1
+DA:69,1
+DA:71,1
+DA:78,1
+DA:79,0
+DA:82,1
+DA:83,1
+DA:84,1
+DA:92,0
+DA:94,0
+DA:102,1
+DA:103,1
+DA:106,0
+DA:107,0
+DA:110,0
+DA:118,1
+DA:120,1
+LF:17
+LH:11
+BRDA:78,0,0,0
+BRDA:78,0,1,1
+BRDA:82,1,0,1
+BRDA:82,1,1,0
+BRDA:102,2,0,1
+BRDA:102,2,1,0
+BRDA:102,3,0,1
+BRDA:102,3,1,0
+BRDA:106,4,0,0
+BRDA:106,4,1,0
+BRF:10
+BRH:4
+end_of_record
+TN:
+SF:/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/constants/colors.js
+FNF:0
+FNH:0
+DA:1,1
+DA:2,1
+LF:2
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/rodrigonascimento/Projects/Rocket.Chat.ReactNative/app/utils/avatarInitialsAndColor.js
+FN:3,(anonymous_0)
+FNF:1
+FNH:1
+FNDA:1,(anonymous_0)
+DA:4,1
+DA:6,1
+DA:7,1
+DA:9,1
+DA:11,1
+DA:12,1
+DA:14,1
+LF:7
+LH:7
+BRDA:3,0,0,0
+BRDA:11,1,0,0
+BRDA:11,1,1,1
+BRF:3
+BRH:1
+end_of_record

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -1461,7 +1461,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.rn;
+				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative;
 				PRODUCT_NAME = RocketChatRN;
 				PROVISIONING_PROFILE = "";
 				PROVISIONING_PROFILE_SPECIFIER = "";
@@ -1494,7 +1494,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.rn;
+				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative;
 				PRODUCT_NAME = RocketChatRN;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				VERSIONING_SYSTEM = "apple-generic";
@@ -1536,7 +1536,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "chat.rocket.rn-tvOS";
+				PRODUCT_BUNDLE_IDENTIFIER = "chat.rocket.reactnative-tvOS";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
@@ -1579,7 +1579,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "chat.rocket.rn-tvOS";
+				PRODUCT_BUNDLE_IDENTIFIER = "chat.rocket.reactnative-tvOS";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;

ios/RocketChatRN/Info.plist

@@ -2,14 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-	<key>NSCameraUsageDescription</key>
-	<string>Upload images from camera</string>
-	<key>NSPhotoLibraryUsageDescription</key>
-	<string>Upload images from library</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-	<string>Rocket.Chat.RN</string>
+	<string>Rocket.Chat.ReactNative</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -39,8 +35,25 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>Upload images from camera</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Upload images from library</string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -55,18 +68,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>UIAppFonts</key>
-	<array>
-		<string>Entypo.ttf</string>
-		<string>EvilIcons.ttf</string>
-		<string>FontAwesome.ttf</string>
-		<string>Foundation.ttf</string>
-		<string>Ionicons.ttf</string>
-		<string>MaterialCommunityIcons.ttf</string>
-		<string>MaterialIcons.ttf</string>
-		<string>Octicons.ttf</string>
-		<string>SimpleLineIcons.ttf</string>
-		<string>Zocial.ttf</string>
-	</array>
 </dict>
 </plist>

package.json

@@ -1,14 +1,16 @@
 {
-  "name": "rocket-chat-rn",
+  "name": "rocket-chat-reactnative",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest",
     "lint": "eslint .",
+    "ci": "eslint . && jest && codecov",
     "ios": "react-native run-ios",
     "log-android": "react-native log-android",
-    "android": "react-native run-android"
+    "android": "react-native run-android",
+    "storybook": "storybook start -p 7007"
   },
   "dependencies": {
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -51,6 +53,7 @@
     "underscore": "^1.8.3"
   },
   "devDependencies": {
+    "@storybook/react-native": "^3.2.4",
     "babel-eslint": "^7.2.3",
     "babel-jest": "20.0.3",
     "babel-preset-react-native": "2.1.0",
@@ -61,9 +64,13 @@
     "eslint-plugin-react": "^7.1.0",
     "eslint-plugin-react-native": "^3.0.1",
     "jest": "20.0.4",
+    "jest-cli": "^20.0.4",
+    "react-dom": "16.0.0-alpha.12",
     "react-test-renderer": "16.0.0-alpha.12"
   },
   "jest": {
-    "preset": "react-native"
+    "preset": "react-native",
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true
   }
 }

storybook/addons.js

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

storybook/index.android.js

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

storybook/index.ios.js

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

storybook/stories/Channels/DirectMessage.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import RoomItem from '../../../app/components/RoomItem';
+
+export default (
+	<ScrollView>
+		<RoomItem
+			type='d'
+			name='rocket.cat'
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={0}
+			name='rocket.cat'
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={1}
+			name='rocket.cat'
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={9}
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={99}
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={100}
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={100000}
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			name='W'
+			unread={-100}
+		/>
+		<RoomItem
+			type='d'
+			name='WW'
+			unread={-100}
+		/>
+		<RoomItem
+			type='d'
+			name=''
+			unread={-100}
+		/>
+	</ScrollView>
+);

storybook/stories/index.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+// import React from 'react';
+
+import { storiesOf } from '@storybook/react-native';
+// import { action } from '@storybook/addon-actions';
+// import { linkTo } from '@storybook/addon-links';
+
+import DirectMessage from './Channels/DirectMessage';
+
+storiesOf('Channel Cell', module).add('Direct Messages', () => DirectMessage);
+
+// storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+// storiesOf('Button', module)
+// 	.addDecorator(getStory => (
+// 		<CenterView>
+// 			{getStory()}
+// 		</CenterView>
+// 	))
+// 	.add('with text', () => (
+// 		<Button onPress={action('clicked-text')}>
+// 			<Text>Hello Button</Text>
+// 		</Button>
+// 	))

storybook/storybook.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, global-require */
+
+import { Navigation } from 'react-native-navigation';
+import { getStorybookUI, configure } from '@storybook/react-native';
+
+// import stories
+configure(() => {
+	require('./stories');
+}, module);
+
+// This assumes that storybook is running on the same host as your RN packager,
+// to set manually use, e.g. host: 'localhost' option
+const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
+Navigation.registerComponent('storybook.UI', () => StorybookUI);
+Navigation.startSingleScreenApp({
+	screen: {
+		screen: 'storybook.UI',
+		title: 'Storybook',
+		navigatorStyle: {
+			navBarHidden: true
+		}
+	}
+});
+
+export default StorybookUI;