added read Recipt functionality to the app

fix: RocketChat#542

.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
 		"new-cap":  [2],
 		"use-isnan": 2,
 		"valid-typeof": 2,
-		"linebreak-style": 0,
+		"linebreak-style": [2, "unix"],
 		"prefer-template": 2,
 		"template-curly-spacing": [2, "always"],
 		"quotes": [2, "single"],

app/containers/message/Message.js

@@ -124,6 +124,7 @@ export default class Message extends PureComponent {
 			PropTypes.object
 		]),
 		useRealName: PropTypes.bool,
+		showReadRecipt: PropTypes.bool,
 		// methods
 		closeReactions: PropTypes.func,
 		onErrorPress: PropTypes.func,
@@ -202,7 +203,7 @@ export default class Message extends PureComponent {
 
 	renderUsername = () => {
 		const {
-			header, timeFormat, author, alias, ts, useRealName
+			header, timeFormat, author, alias, ts, useRealName, showReadRecipt
 		} = this.props;
 		if (header) {
 			return (
@@ -212,6 +213,7 @@ export default class Message extends PureComponent {
 					username={(useRealName && author.name) || author.username}
 					alias={alias}
 					ts={ts}
+					showReadRecipt={showReadRecipt}
 					temp={this.isTemp()}
 				/>
 			);

app/containers/message/User.js

@@ -46,12 +46,13 @@ export default class User extends React.PureComponent {
 			PropTypes.instanceOf(Date),
 			PropTypes.string
 		]),
-		temp: PropTypes.bool
+		temp: PropTypes.bool,
+		showReadRecipt: PropTypes.bool
 	}
 
 	render() {
 		const {
-			username, alias, ts, temp, timeFormat
+			username, alias, ts, temp, timeFormat, showReadRecipt
 		} = this.props;
 
 		const extraStyle = {};
@@ -60,7 +61,7 @@ export default class User extends React.PureComponent {
 		}
 
 		const aliasUsername = alias ? (<Text style={styles.alias}>@{username}</Text>) : null;
-		const readRecipt = <CustomIcon name='circle-cross' color='red' size={20} />;
+		const readRecipt = showReadRecipt ? <CustomIcon name='check' color='#0084ff' size={15} /> : null;
 		const time = moment(ts).format(timeFormat);
 
 		return (
@@ -70,7 +71,7 @@ export default class User extends React.PureComponent {
 						{alias || username}
 					</Text>
 					{aliasUsername}
-					<CustomIcon name='check' color='blue' size={10} />
+					{ readRecipt }
 				</View>
 				<Text style={styles.time}>{time}</Text>
 			</View>

app/containers/message/index.js

@@ -93,6 +93,9 @@ export default class MessageContainer extends React.Component {
 		if (broadcast !== nextProps.broadcast) {
 			return true;
 		}
+		if (item.unread !== nextProps.item.unread) {
+			return true;
+		}
 		if (!equal(editingMessage, nextProps.editingMessage)) {
 			if (nextProps.editingMessage && nextProps.editingMessage._id === item._id) {
 				return true;
@@ -170,8 +173,9 @@ export default class MessageContainer extends React.Component {
 			item, editingMessage, user, style, archived, baseUrl, customEmojis, useRealName, broadcast, Message_Read_Receipt_Enabled
 		} = this.props;
 		const {
-			msg, ts, attachments, urls, reactions, t, status, avatar, u, alias, editedBy, role
+			msg, ts, attachments, urls, reactions, t, status, avatar, u, alias, editedBy, role, unread
 		} = item;
+		const showReadRecipt = !unread && Message_Read_Receipt_Enabled;
 		const isEditing = editingMessage._id === item._id;
 		return (
 			<Message
@@ -197,7 +201,7 @@ export default class MessageContainer extends React.Component {
 				customEmojis={customEmojis}
 				reactionsModal={reactionsModal}
 				useRealName={useRealName}
-				showReadRecipt={Message_Read_Receipt_Enabled}
+				showReadRecipt={showReadRecipt}
 				role={role}
 				closeReactions={this.closeReactions}
 				onErrorPress={this.onErrorPress}

app/lib/methods/helpers/normalizeMessage.js

@@ -21,6 +21,7 @@ export default (msg) => {
 	if (!msg) { return; }
 	msg = normalizeAttachments(msg);
 	msg.reactions = msg.reactions || [];
+	msg.unread = msg.unread || false;
 	// TODO: api problems
 	// if (Array.isArray(msg.reactions)) {
 	// 	msg.reactions = msg.reactions.map((value, key) => ({ emoji: key, usernames: value.usernames.map(username => ({ value: username })) }));

app/lib/realm.js

@@ -206,6 +206,7 @@ const messagesSchema = {
 		u: 'users',
 		// mentions: [],
 		// channels: [],
+		unread: { type: 'bool', optional: true },
 		alias: { type: 'string', optional: true },
 		parseUrls: { type: 'bool', optional: true },
 		groupable: { type: 'bool', optional: true },

app/views/ReadReceiptView/index.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { FlatList, View, Text } from 'react-native';
 import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
+import moment from 'moment';
 
 import LoggedView from '../View';
 import styles from './styles';
-import Message from '../../containers/message/Message';
 import RCActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
@@ -58,7 +58,6 @@ export default class ReadReceiptsView extends LoggedView {
 		try {
 			const result = await RocketChat.getReadReceips(this.messageId);
 			if (result.success) {
-				console.warn(result.success)
 				this.setState({ receipts: result.receipts,
 					loading: false
 				});
@@ -76,27 +75,26 @@ export default class ReadReceiptsView extends LoggedView {
 	)
 
 	renderItem = ({ item }) => {
+		const time = moment(item.ts).format('LLL');
 		return (
-			/* <Message
-				style={styles.message}
-				customEmojis={customEmojis}
-				baseUrl={baseUrl}
-				user={user}
-				author={item.u}
-				ts={item.ts}
-				msg={item.msg}
-				attachments={item.attachments || []}
-				timeFormat='MMM Do YYYY, h:mm:ss a'
-				header
-				edited={!!item.editedAt}
-				onLongPress={() => this.onLongPress(item)}
-			/> */
-			<Text>
-				{item.user.username}
-			</Text>
+			<View style={styles.itemContainer}>
+				<View style={styles.item}>
+					<Text style={styles.name}>
+						{item.user.name}
+					</Text>
+					<Text>
+						{time}
+					</Text>
+				</View>
+				<Text>
+					{`@${ item.user.username }`}
+				</Text>
+			</View>
 		);
 	}
 
+	renderSeparator = () => <View style={styles.separator} />;
+
 	render() {
 		const { receipts, loading } = this.state;
 
@@ -113,6 +111,7 @@ export default class ReadReceiptsView extends LoggedView {
 						<FlatList
 							data={receipts}
 							renderItem={this.renderItem}
+							ItemSeparatorComponent={this.renderSeparator}
 							style={styles.list}
 							keyExtractor={item => item._id}
 						/>

app/views/ReadReceiptView/styles.js

@@ -5,13 +5,32 @@ export default StyleSheet.create({
 		flex: 1,
 		backgroundColor: '#ffffff'
 	},
-	message: {
-		transform: [{ scaleY: 1 }]
-	},
 	listEmptyContainer: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
 		backgroundColor: '#ffffff'
+	},
+	item: {
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'space-between'
+	},
+	separator: {
+		height: StyleSheet.hairlineWidth,
+		backgroundColor: '#E1E5E8'
+	},
+	name: {
+		fontSize: 20,
+		color: '#000'
+	},
+	username: {
+		flex: 1,
+		fontSize: 16,
+		color: '#444'
+	},
+	itemContainer: {
+		flex: 1,
+		padding: 8
 	}
 });