(demo) add lastUpdated index

Author: antoine92190

README.md

@@ -727,6 +727,11 @@ messages: {
 }
 ```
 
+#### Notes
+
+- You need to create a composite index to order rooms by last message received.
+  The easiest way to do it is to create a room, then click the error message url in the browser debugging console.
+
 ## Use as a Web Component
 
 ### Clone vue-advance-chat project

demo/src/App.vue

@@ -106,10 +106,22 @@ export default {
 			const user3 = this.users[2]
 			await usersRef.doc(user3._id).set(user3)
 
-			await roomsRef.add({ users: [user1._id, user2._id] })
-			await roomsRef.add({ users: [user1._id, user3._id] })
-			await roomsRef.add({ users: [user2._id, user3._id] })
-			await roomsRef.add({ users: [user1._id, user2._id, user3._id] })
+			await roomsRef.add({
+				users: [user1._id, user2._id],
+				lastUpdated: new Date()
+			})
+			await roomsRef.add({
+				users: [user1._id, user3._id],
+				lastUpdated: new Date()
+			})
+			await roomsRef.add({
+				users: [user2._id, user3._id],
+				lastUpdated: new Date()
+			})
+			await roomsRef.add({
+				users: [user1._id, user2._id, user3._id],
+				lastUpdated: new Date()
+			})
 
 			this.updatingData = false
 		}

demo/src/ChatContainer.vue

@@ -173,6 +173,7 @@ export default {
 
 			let query = roomsRef
 				.where('users', 'array-contains', this.currentUserId)
+				.orderBy('lastUpdated', 'desc')
 				.limit(this.roomsPerPage)
 
 			if (this.startRooms) query = query.startAfter(this.startRooms)
@@ -430,6 +431,8 @@ export default {
 			const { id } = await messagesRef(roomId).add(message)
 
 			if (file) this.uploadFile({ file, messageId: id, roomId })
+
+			roomsRef.doc(roomId).update({ lastUpdated: new Date() })
 		},
 
 		openFile({ message, action }) {
@@ -623,7 +626,10 @@ export default {
 
 			const { id } = await usersRef.add({ username: this.addRoomUsername })
 			await usersRef.doc(id).update({ _id: id })
-			await roomsRef.add({ users: [id, this.currentUserId] })
+			await roomsRef.add({
+				users: [id, this.currentUserId],
+				lastUpdated: new Date()
+			})
 
 			this.addNewRoom = false
 			this.addRoomUsername = ''