(feat) add infinite rooms

Author: antoine92190

demo/src/ChatContainer.vue

@@ -54,8 +54,10 @@
 			:loading-rooms="loadingRooms"
 			:messages="messages"
 			:messages-loaded="messagesLoaded"
+			:rooms-loaded="roomsLoaded"
 			:menu-actions="menuActions"
 			:room-message="roomMessage"
+			@fetch-more-rooms="fetchMoreRooms"
 			@fetch-messages="fetchMessages"
 			@send-message="sendMessage"
 			@edit-message="editMessage"
@@ -94,17 +96,21 @@ export default {
 
 	data() {
 		return {
-			perPage: 20,
+			roomsPerPage: 10,
 			rooms: [],
-			allUsers: [],
+			startRooms: null,
+			endRooms: null,
+			roomsLoaded: false,
 			loadingRooms: true,
+			allUsers: [],
 			loadingLastMessageByRoom: 0,
 			selectedRoom: null,
+			messagesPerPage: 20,
 			messages: [],
 			messagesLoaded: false,
 			roomMessage: '',
-			start: null,
-			end: null,
+			startMessages: null,
+			endMessages: null,
 			roomsListeners: [],
 			listeners: [],
 			typingMessageCache: '',
@@ -140,31 +146,45 @@ export default {
 			this.loadingRooms = true
 			this.loadingLastMessageByRoom = 0
 			this.rooms = []
+			this.roomsLoaded = false
+			this.startRooms = null
+			this.endRooms = null
 			this.roomsListeners.forEach(listener => listener())
+			this.roomsListeners = []
 			this.resetMessages()
 		},
 
 		resetMessages() {
 			this.messages = []
 			this.messagesLoaded = false
-			this.start = null
-			this.end = null
+			this.startMessages = null
+			this.endMessages = null
 			this.listeners.forEach(listener => listener())
 			this.listeners = []
 		},
 
-		async fetchRooms() {
+		fetchRooms() {
 			this.resetRooms()
+			this.fetchMoreRooms()
+		},
 
-			const query = roomsRef.where(
-				'users',
-				'array-contains',
-				this.currentUserId
-			)
+		async fetchMoreRooms() {
+			if (this.endRooms && !this.startRooms) return (this.roomsLoaded = true)
+
+			let query = roomsRef
+				.where('users', 'array-contains', this.currentUserId)
+				.limit(this.roomsPerPage)
+
+			if (this.startRooms) query = query.startAfter(this.startRooms)
 
 			const rooms = await query.get()
 			// this.incrementDbCounter('Fetch Rooms', rooms.size)
 
+			if (rooms.empty) this.roomsLoaded = true
+
+			if (this.startRooms) this.endRooms = this.startRooms
+			this.startRooms = rooms.docs[rooms.docs.length - 1]
+
 			const roomUserIds = []
 			rooms.forEach(room => {
 				room.data().users.forEach(userId => {
@@ -285,13 +305,14 @@ export default {
 		fetchMessages({ room, options = {} }) {
 			if (options.reset) this.resetMessages()
 
-			if (this.end && !this.start) return (this.messagesLoaded = true)
+			if (this.endMessages && !this.startMessages)
+				return (this.messagesLoaded = true)
 
 			let ref = messagesRef(room.roomId)
 
-			let query = ref.orderBy('timestamp', 'desc').limit(this.perPage)
+			let query = ref.orderBy('timestamp', 'desc').limit(this.messagesPerPage)
 
-			if (this.start) query = query.startAfter(this.start)
+			if (this.startMessages) query = query.startAfter(this.startMessages)
 
 			this.selectedRoom = room.roomId
 
@@ -301,13 +322,15 @@ export default {
 
 				if (messages.empty) this.messagesLoaded = true
 
-				if (this.start) this.end = this.start
-				this.start = messages.docs[messages.docs.length - 1]
+				if (this.startMessages) this.endMessages = this.startMessages
+				this.startMessages = messages.docs[messages.docs.length - 1]
 
 				let listenerQuery = ref.orderBy('timestamp')
 
-				if (this.start) listenerQuery = listenerQuery.startAfter(this.start)
-				if (this.end) listenerQuery = listenerQuery.endAt(this.end)
+				if (this.startMessages)
+					listenerQuery = listenerQuery.startAfter(this.startMessages)
+				if (this.endMessages)
+					listenerQuery = listenerQuery.endAt(this.endMessages)
 
 				if (options.reset) this.messages = []
 

src/ChatWindow/ChatWindow.vue

@@ -6,13 +6,16 @@
 				:current-user-id="currentUserId"
 				:rooms="orderedRooms"
 				:loading-rooms="loadingRooms"
+				:rooms-loaded="roomsLoaded"
 				:room="room"
 				:text-messages="t"
 				:show-add-room="showAddRoom"
 				:show-rooms-list="showRoomsList"
 				:text-formatting="textFormatting"
 				:is-mobile="isMobile"
 				@fetch-room="fetchRoom"
+				@fetch-more-rooms="fetchMoreRooms"
+				@loading-more-rooms="loadingMoreRooms = $event"
 				@add-room="addRoom"
 			>
 				<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
@@ -92,6 +95,7 @@ export default {
 		currentUserId: { type: [String, Number], default: '' },
 		rooms: { type: Array, default: () => [] },
 		loadingRooms: { type: Boolean, default: false },
+		roomsLoaded: { type: Boolean, default: false },
 		roomId: { type: [String, Number], default: null },
 		loadFirstRoom: { type: Boolean, default: true },
 		messages: { type: Array, default: () => [] },
@@ -122,6 +126,7 @@ export default {
 	data() {
 		return {
 			room: {},
+			loadingMoreRooms: false,
 			showRoomsList: true,
 			isMobile: false
 		}
@@ -139,6 +144,7 @@ export default {
 				}
 
 				if (
+					!this.loadingMoreRooms &&
 					this.loadFirstRoom &&
 					newVal[0] &&
 					(!oldVal || newVal.length !== oldVal.length)
@@ -240,6 +246,9 @@ export default {
 			this.fetchMessages({ reset: true })
 			if (this.isMobile) this.showRoomsList = false
 		},
+		fetchMoreRooms() {
+			this.$emit('fetch-more-rooms')
+		},
 		roomInfo() {
 			this.$emit('room-info', this.room)
 		},
@@ -262,7 +271,10 @@ export default {
 			this.$emit('open-file', { message, action })
 		},
 		menuActionHandler(ev) {
-			this.$emit('menu-action-handler', { action: ev, roomId: this.room.roomId })
+			this.$emit('menu-action-handler', {
+				action: ev,
+				roomId: this.room.roomId
+			})
 		},
 		messageActionHandler(ev) {
 			this.$emit('message-action-handler', {

src/ChatWindow/RoomsList.vue

@@ -126,11 +126,25 @@
 					</div>
 				</slot>
 			</div>
+			<transition name="vac-fade-message">
+				<infinite-loading
+					v-if="rooms.length"
+					spinner="spiral"
+					@infinite="loadMoreRooms"
+				>
+					<div slot="spinner">
+						<loader :show="true" :infinite="true"></loader>
+					</div>
+					<div slot="no-results"></div>
+					<div slot="no-more"></div>
+				</infinite-loading>
+			</transition>
 		</div>
 	</div>
 </template>
 
 <script>
+import InfiniteLoading from 'vue-infinite-loading'
 import Loader from './Loader'
 import SvgIcon from './SvgIcon'
 import FormatMessage from './FormatMessage'
@@ -140,7 +154,7 @@ import typingText from '../utils/typingText'
 
 export default {
 	name: 'rooms-list',
-	components: { Loader, SvgIcon, FormatMessage },
+	components: { InfiniteLoading, Loader, SvgIcon, FormatMessage },
 
 	props: {
 		currentUserId: { type: [String, Number], required: true },
@@ -151,19 +165,39 @@ export default {
 		isMobile: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
+		roomsLoaded: { type: Boolean, required: true },
 		room: { type: Object, required: true }
 	},
 
 	data() {
 		return {
 			filteredRooms: this.rooms || [],
+			infiniteState: null,
+			loadingMoreRooms: false,
 			selectedRoomId: ''
 		}
 	},
 
 	watch: {
 		rooms(val) {
 			this.filteredRooms = val
+
+			if (this.infiniteState) {
+				this.infiniteState.loaded()
+				setTimeout(() => (this.loadingMoreRooms = false), 0)
+			}
+		},
+
+		loadingRooms(val) {
+			if (val) this.infiniteState = null
+		},
+
+		roomsLoaded() {
+			if (this.infiniteState) this.infiniteState.complete()
+		},
+
+		loadingMoreRooms(val) {
+			this.$emit('loading-more-rooms', val)
 		},
 
 		room: {
@@ -187,6 +221,17 @@ export default {
 			if (!this.isMobile) this.selectedRoomId = room.roomId
 			this.$emit('fetch-room', { room })
 		},
+		loadMoreRooms(infiniteState) {
+			if (this.loadingMoreRooms) return
+
+			if (this.roomsLoaded) {
+				return infiniteState.complete()
+			}
+
+			this.infiniteState = infiniteState
+			this.$emit('fetch-more-rooms')
+			this.loadingMoreRooms = true
+		},
 		addRoom() {
 			this.$emit('add-room')
 		},