Add loading banners

app/components/RoomItem.js

@@ -9,10 +9,11 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	number: {
-		width: 20,
-		lineHeight: 20,
+		minWidth: 20,
+		fontSize: 14,
+		padding: 2,
 		borderRadius: 5,
-		backgroundColor: 'green',
+		backgroundColor: '#aaa',
 		color: '#fff',
 		textAlign: 'center',
 		overflow: 'hidden',
@@ -47,9 +48,15 @@ export default class RoomItem extends React.PureComponent {
 	}
 
 	render() {
+		let name = this.props.item.name;
+		if (this.props.item.t === 'd') {
+			name = `@ ${ name }`;
+		} else {
+			name = `# ${ name }`;
+		}
 		return (
 			<View style={styles.container}>
-				<Text onPress={this._onPress} style={styles.roomItem}>{ this.props.item.name }</Text>
+				<Text onPress={this._onPress} style={styles.roomItem}>{ name }</Text>
 				{this.renderNumber(this.props.item)}
 			</View>
 		);

app/lib/meteor.js

@@ -120,7 +120,7 @@ export function loadSubscriptions(cb) {
 	});
 }
 
-export function loadMessagesForRoom(rid) {
+export function loadMessagesForRoom(rid, cb) {
 	Meteor.call('loadHistory', rid, null, 50, (err, data) => {
 		if (err) {
 			console.error(err);
@@ -133,6 +133,10 @@ export function loadMessagesForRoom(rid) {
 				realm.create('messages', message, true);
 			});
 		});
+
+		if (cb) {
+			cb();
+		}
 	});
 
 	Meteor.subscribe('stream-room-messages', rid, false);

app/lib/realm.js

@@ -65,7 +65,7 @@ const messagesSchema = {
 		u: 'users',
 		// mentions: [],
 		// channels: [],
-		_updatedAt: 'date',
+		_updatedAt: { type: 'date', optional: true },
 		temp: { type: 'bool', optional: true }
 	}
 };

app/views/room.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { Text, View, FlatList, StyleSheet } from 'react-native';
 // import Markdown from 'react-native-simple-markdown';
 import realm from '../lib/realm';
 import RocketChat, { loadMessagesForRoom, sendMessage } from '../lib/meteor';
@@ -19,9 +19,15 @@ const styles = StyleSheet.create({
 	},
 	separator: {
 		height: 1,
-		// width: "86%",
 		backgroundColor: '#CED0CE'
-		// marginLeft: "14%"
+	},
+	bannerContainer: {
+		backgroundColor: 'orange'
+	},
+	bannerText: {
+		margin: 5,
+		textAlign: 'center',
+		color: '#a00'
 	}
 });
 
@@ -40,14 +46,20 @@ export default class RoomView extends React.Component {
 		// this.rid = 'GENERAL';
 
 		this.state = {
-			dataSource: this.getMessages()
+			dataSource: this.getMessages(),
+			loaded: false
 		};
 
 		this.url = realm.objectForPrimaryKey('settings', 'Site_Url').value;
 	}
 
 	componentWillMount() {
-		loadMessagesForRoom(this.rid);
+		loadMessagesForRoom(this.rid, () => {
+			this.setState({
+				...this.state,
+				loaded: true
+			});
+		});
 		realm.addListener('change', this.updateState);
 	}
 
@@ -59,6 +71,7 @@ export default class RoomView extends React.Component {
 
 	updateState = () => {
 		this.setState({
+			...this.state,
 			dataSource: this.getMessages()
 		});
 	};
@@ -77,9 +90,20 @@ export default class RoomView extends React.Component {
 		/>
 	);
 
+	renderBanner = () => {
+		if (this.state.loaded === false) {
+			return (
+				<View style={styles.bannerContainer}>
+					<Text style={styles.bannerText}>Loading new messages...</Text>
+				</View>
+			);
+		}
+	}
+
 	render() {
 		return (
 			<KeyboardView style={styles.container} keyboardVerticalOffset={64}>
+				{this.renderBanner()}
 				<FlatList
 					ref={ref => this.listView = ref}
 					style={styles.list}

app/views/roomsList.js

@@ -20,6 +20,11 @@ const styles = StyleSheet.create({
 	list: {
 		width: '100%'
 	},
+	emptyView: {
+		flexGrow: 1,
+		alignItems: 'stretch',
+		justifyContent: 'center'
+	},
 	emptyText: {
 		textAlign: 'center',
 		fontSize: 18,
@@ -29,8 +34,8 @@ const styles = StyleSheet.create({
 		backgroundColor: '#ddd'
 	},
 	bannerText: {
-		lineHeight: 28,
-		textAlign: 'center'
+		textAlign: 'center',
+		margin: 5
 	}
 });
 
@@ -107,18 +112,20 @@ export default class RoomsListView extends React.Component {
 	}
 
 	renderBanner = () => {
-		if (Meteor.getData().ddp.status !== 'connected') {
+		const status = Meteor.getData() && Meteor.getData().ddp && Meteor.getData().ddp.status;
+
+		if (status === 'disconnected') {
 			return (
-				<View style={styles.bannerContainer}>
-					<Text style={styles.bannerText}>Connecting...</Text>
+				<View style={[styles.bannerContainer, { backgroundColor: '#0d0' }]}>
+					<Text style={[styles.bannerText, { color: '#fff' }]}>Connecting...</Text>
 				</View>
 			);
 		}
 
-		if (Meteor._isLoggingIn) {
+		if (status === 'connected' && Meteor._isLoggingIn) {
 			return (
-				<View style={styles.bannerContainer}>
-					<Text style={styles.bannerText}>Loggining...</Text>
+				<View style={[styles.bannerContainer, { backgroundColor: 'orange' }]}>
+					<Text style={[styles.bannerText, { color: '#a00' }]}>Authenticating...</Text>
 				</View>
 			)
 		}
@@ -150,7 +157,9 @@ export default class RoomsListView extends React.Component {
 		}
 
 		return (
-			<Text style={styles.emptyText}>No rooms</Text>
+			<View style={styles.emptyView}>
+				<Text style={styles.emptyText}>No rooms</Text>
+			</View>
 		);
 	}