Added Unread Feature to Messaging

zhukaihan · May 31, 2019 · 8b1f655 · 8b1f655
1 parent eff2737
commit 8b1f655
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 99 deletions.
diff --git a/App.js b/App.js
@@ -4,30 +4,30 @@ import AppNavigator from './Controller/Navigation';
 import firebase from 'firebase';
 
 // Main Database. 
- var firebaseConfig = {
- 	apiKey: "AIzaSyAJMmoUDolfe4zKdXkQblpGI75g6YaQt8g",
- 	authDomain: "gary-ssh.firebaseapp.com",
- 	databaseURL: "https://gary-ssh.firebaseio.com",
- 	projectId: "gary-ssh",
-	storageBucket: "gary-ssh.appspot.com",
- 	messagingSenderId: "1005506003002",
-	appId: "1:1005506003002:web:6a5023cf4eb0ec32"
- };
-// // Initialize Firebase
- firebase.initializeApp(firebaseConfig);
+//  var firebaseConfig = {
+//  	apiKey: "AIzaSyAJMmoUDolfe4zKdXkQblpGI75g6YaQt8g",
+//  	authDomain: "gary-ssh.firebaseapp.com",
+//  	databaseURL: "https://gary-ssh.firebaseio.com",
+//  	projectId: "gary-ssh",
+// 	storageBucket: "gary-ssh.appspot.com",
+//  	messagingSenderId: "1005506003002",
+// 	appId: "1:1005506003002:web:6a5023cf4eb0ec32"
+//  };
+// // // Initialize Firebase
+//  firebase.initializeApp(firebaseConfig);
 
 // Backup Database. 
-//var firebaseConfig = {
-//	apiKey: "AIzaSyBhFXFnGYQFC0srAKt8v_RTtplQZWmUXC8",
-//	authDomain: "gary-ssh-2.firebaseapp.com",
-//	databaseURL: "https://gary-ssh-2.firebaseio.com",
-//	projectId: "gary-ssh-2",
-//	storageBucket: "gary-ssh-2.appspot.com",
-//	messagingSenderId: "356347240170",
-//	appId: "1:356347240170:web:65c2050fc61b708e"
-//};
+var firebaseConfig = {
+	apiKey: "AIzaSyBhFXFnGYQFC0srAKt8v_RTtplQZWmUXC8",
+	authDomain: "gary-ssh-2.firebaseapp.com",
+	databaseURL: "https://gary-ssh-2.firebaseio.com",
+	projectId: "gary-ssh-2",
+	storageBucket: "gary-ssh-2.appspot.com",
+	messagingSenderId: "356347240170",
+	appId: "1:356347240170:web:65c2050fc61b708e"
+};
 // Initialize Firebase
-//firebase.initializeApp(firebaseConfig);
+firebase.initializeApp(firebaseConfig);
 
 export default class App extends React.Component {
   render() {

diff --git a/Controller/FavHousingPage.js b/Controller/FavHousingPage.js
@@ -21,7 +21,7 @@ export default class FavHousingPage extends React.Component{
 
 	// Get housing data and set state with the new data. 
 	// Can be used on first launch and on refresh request. 
-	getHousingData = () => {
+	getHousingData = async () => {
 
 		this.setState({
 			isFetchingHouseData: true
@@ -46,7 +46,7 @@ export default class FavHousingPage extends React.Component{
 		});
 	}
 
-	openHouse = (house) => {
+	openHouse = async (house) => {
 		this.props.navigation.push("ViewHousingPage", {
 			houseId: house.id,
 		});

diff --git a/Controller/FavRoommatePage.js b/Controller/FavRoommatePage.js
@@ -20,7 +20,7 @@ export default class FavRoommatePage extends React.Component{
 
 	// Get roommate data and set state with the new data. 
 	// Can be used on first launch and on refresh request. 
-	getRoommateData = () => {
+	getRoommateData = async () => {
 
 		this.setState({
 			isFetchingRoommateData: true
@@ -42,7 +42,7 @@ export default class FavRoommatePage extends React.Component{
 		});
 	}
 
-	openRoommate = (roommate) => {
+	openRoommate = async (roommate) => {
 		this.props.navigation.push("ProfilePage", {
 			userId: roommate.id,
 		});

diff --git a/Controller/HousingListingPage.js b/Controller/HousingListingPage.js
@@ -25,7 +25,7 @@ export default class HousingListingPage extends React.Component{
 
 	// Get housing data and set state with the new data. 
 	// Can be used on first launch and on refresh request. 
-	getHousingData = () => {
+	getHousingData = async () => {
 		this.setState({
 			isFetchingHouseData: true
 		}, () => {

diff --git a/Controller/HousingSearchPage.js b/Controller/HousingSearchPage.js
@@ -41,7 +41,7 @@ export default class HousingSearchPage extends React.Component{
 
 	// Get housing data and set state with the new data. 
 	// Can be used on first launch and on refresh request. 
-	getHousingData = () => {
+	getHousingData = async () => {
 		this.setState({
 			displayList:[],
 			isFetchingHouseData: true
@@ -71,7 +71,7 @@ export default class HousingSearchPage extends React.Component{
 		});
 	}
 
-	onRefresh = () => {
+	onRefresh = async () => {
 		if(this.state.searchQuery == ""){
 			this.getHousingData();
 		}
@@ -92,13 +92,13 @@ export default class HousingSearchPage extends React.Component{
 		}
 	}
 
-	openHouse = (house) => {
+	openHouse = async (house) => {
 		this.props.navigation.push("ViewHousingPage", {
 			houseId: house.id,
 		});
 	}
 
-	loadMore = () => {
+	loadMore = async () => {
 		console.log("load data");
 		if(this.state.housingItems == null)
 		{
@@ -123,15 +123,15 @@ export default class HousingSearchPage extends React.Component{
 		this.getHousingData();
 	}
 
-	updateSearchQuery = searchQuery => {
+	updateSearchQuery = async searchQuery => {
 		this.setState({ searchQuery });
 	};
 
-	advanceSearchFilter = () =>{
+	advanceSearchFilter = async () =>{
 
 	}
 
-	searchAndUpdateWithQuery = () => {
+	searchAndUpdateWithQuery = async () => {
 		this.setState({
 			displayList:[],
 			isFetchingHouseData: true
@@ -197,7 +197,7 @@ export default class HousingSearchPage extends React.Component{
 
 	}
 
-	updateFilter = () =>{
+	updateFilter = async () =>{
 		this.setState({
 			displayList:[],
 		})
@@ -242,7 +242,7 @@ export default class HousingSearchPage extends React.Component{
 		});
 	}
 
-	clearFilter = () =>{  
+	clearFilter = async () =>{  
 		this.setState({
 			minPrice: null,
 			maxPrice: null,
@@ -252,14 +252,14 @@ export default class HousingSearchPage extends React.Component{
 			tenant: null,
 		})
 	}
-	applyFilter = () =>{
+	applyFilter = async () =>{
 		this.setState({
 			advSearchisVisible:false,
 		})
 		this.updateFilter();
 	}
 
-	cancelFilter = () =>{
+	cancelFilter = async () =>{
 		this.setState({
 			advSearchisVisible:false,
 		})

diff --git a/Controller/MessageCenter.js b/Controller/MessageCenter.js
@@ -1,7 +1,7 @@
 
 import React, { Component } from 'react';
 import { StyleSheet, View, Text, StatusBar, Button, Alert, FlatList, TouchableHighlight, TouchableOpacity, TextInput, ScrollView } from 'react-native';
-import { Icon, Card, Badge, SearchBar,Overlay, Image } from 'react-native-elements';
+import { Icon, Card, Badge, SearchBar,Overlay, Image, Avatar } from 'react-native-elements';
 import { SafeAreaView } from 'react-navigation';
 import firebase from 'firebase';
 import { MessageRoom } from '../Model/Messaging';
@@ -14,6 +14,7 @@ export default class MessageCenter extends React.Component{
 	state = {
 		roomsItems: [],
 	}
+	recipientUsersItems = {};
 
 	constructor() {
 		super();
@@ -31,10 +32,14 @@ export default class MessageCenter extends React.Component{
 		this.observer = this.roomsRef.onSnapshot(roomsSnapshot => {
 			let roomsItems = [];
 			roomsSnapshot.forEach(room => {
-				var aRooms = new MessageRoom(room.data(), room.id, () => {
-					this.forceUpdate();
-				});
-				roomsItems.push(aRooms);
+				var aRoom = new MessageRoom(room.data(), room.id);
+				if (!this.recipientUsersItems[room.id]) {
+					User.getUserWithUID(room.id, (user) => {
+						this.recipientUsersItems[user.id] = user
+						this.forceUpdate();
+					})
+				}
+				roomsItems.push(aRoom);
 			});
 			this.setState({
 				roomsItems: roomsItems
@@ -57,58 +62,75 @@ export default class MessageCenter extends React.Component{
 			)
 		} else {
 			this.state.roomsItems.forEach((item, index) => {
-				if (!item.recipient) {
-					content.push((<Text key={index}>Loading...</Text>))
-				} else {
-					content.push((
-						<TouchableOpacity key ={index} onPress={() => {this.openRoom(item)}} style={{
-							padding: '2.5%',
-							width: '95%',
-							elevation: 2,
-							borderBottomColor: '#dddddd',
-							borderBottomWidth: 1,
-							flexDirection: 'row',
-							justifyContent: 'space-between'
+				itemRecipient = this.recipientUsersItems[item.id]
+				content.push((
+					<TouchableOpacity key ={index} onPress={() => {this.openRoom(item)}} style={{
+						padding: '2.5%',
+						width: '95%',
+						elevation: 2,
+						borderBottomColor: '#dddddd',
+						borderBottomWidth: 1,
+						flexDirection: 'row',
+						justifyContent: 'space-between'
+					}}>
+						<View style={{
+							flexDirection: 'row'
 						}}>
 							<View style={{
-								flexDirection: 'row'
+								height: 75,
+								margin: 5,
+								aspectRatio: 1
 							}}>
-								<Image source={{uri: item.recipient.profileimage, cache: 'force-cache'}} style={{
-									height: 75,
-									margin: 5,
-									aspectRatio: 1
-								}}/>
-								<View style={{
-									flexDirection: 'column',
-									height: 75,
-									margin: 5,
-									justifyContent: 'center'
-								}}>
-									<Text style={{
-										color: 'black',
-										fontSize: RF(2.5)
-									}}>{item.recipient.first_name} {item.recipient.last_name}</Text>
-									<Text style={{
-										color: 'grey',
-										fontSize: RF(2)
-									}}>{item.recipient.graduation}</Text>
-									<Text style={{
-										color: 'grey',
-										fontSize: RF(2)
-									}}>{item.recipient.major}</Text>
-								</View>
+								<Avatar
+									rounded
+									source={{
+										uri: itemRecipient ? itemRecipient.profileimage : "uri shouldn't be an empty string so I put sth here",
+										cache: 'force-cache'
+									}}
+									size="large"
+								/>
+								{item.last_contact_date > item.last_read_time ? 
+									(
+										<Badge
+											status="error"
+											containerStyle={{ position: 'absolute', top: 0, right: 0 }}
+										/>
+									) : (
+										<View />
+									)
+								}
+
 							</View>
 							<View style={{
-								flexDirection: 'row',
+								flexDirection: 'column',
 								height: 75,
 								margin: 5,
-								alignItems: 'center'
+								justifyContent: 'center'
 							}}>
-								<Icon name="chevron-right" type="font-awesome"/>
+								<Text style={{
+									color: 'black',
+									fontSize: RF(2.5)
+								}}>{itemRecipient ? itemRecipient.first_name + " " + itemRecipient.last_name : "Loading..."}</Text>
+								<Text style={{
+									color: 'grey',
+									fontSize: RF(2)
+								}}>{itemRecipient ? itemRecipient.graduation : "Loading..."}</Text>
+								<Text style={{
+									color: 'grey',
+									fontSize: RF(2)
+								}}>{itemRecipient ? itemRecipient.major : "Loading..."}</Text>
 							</View>
-						</TouchableOpacity>
-					))
-				}
+						</View>
+						<View style={{
+							flexDirection: 'row',
+							height: 75,
+							margin: 5,
+							alignItems: 'center'
+						}}>
+							<Icon name="chevron-right" type="font-awesome"/>
+						</View>
+					</TouchableOpacity>
+				))
 			})
 		}
 

diff --git a/Controller/MessageRoomView.js b/Controller/MessageRoomView.js
@@ -45,35 +45,41 @@ export default class MessageRoomView extends React.Component{
 
 	componentWillUnmount = async () => {
 		this.observer();
+
+		this.updateLastReadTime();
 	}
 
 	sendMessage = (txt) => {
 		this.roomRef.set({
 			messages: firebase.firestore.FieldValue.arrayUnion({
 				timestamp: firebase.firestore.Timestamp.now(),
 				message: txt,
-				isRead: true,
 				isSentByUser: true
 			}),
-			last_contact_date: firebase.firestore.Timestamp.now()
+			last_contact_date: firebase.firestore.Timestamp.now(),
+			last_read_time: firebase.firestore.Timestamp.now()
 		}, {merge: true})
 		this.oppositeSideRoomRef.set({
 			messages: firebase.firestore.FieldValue.arrayUnion({
 				timestamp: firebase.firestore.Timestamp.now(),
 				message: txt,
-				isRead: false,
 				isSentByUser: false
 			}),
-			last_contact_date: firebase.firestore.Timestamp.now()
+			last_contact_date: firebase.firestore.Timestamp.now(),
 		}, {merge: true})
 		this.newMsgTextInput.clear();
 	}
 
+	updateLastReadTime = async () => {
+		this.roomRef.set({
+			last_read_time: firebase.firestore.Timestamp.now()
+		}, {merge: true})
+	}
+
 	render = () => {
 		if (!this.state.room || !this.state.room.messages) {
 			return (<View></View>)
 		}
-		// this.updateReadMessage();
 
 		return (
 			<SafeAreaView style={{flex: 1}} forceInset={{top: 'never'}}>
@@ -82,7 +88,7 @@ export default class MessageRoomView extends React.Component{
 						keyExtractor={(item, index) => index.toString()}
 						data={this.state.room.messages}
 						renderItem={({item}) => {
-							return (<Text>{item.timestamp.toString()} {item.isSentByUser ? "me: " : "they: "} {item.message}</Text>);
+							return (<Text>{item.timestamp > this.state.room.last_read_time ? "unread" : ""} {item.isSentByUser ? "me: " : "they: "} {item.message}</Text>);
 						}}
 					/>
 					<TextInput