Skip to content

Commit 53155bd

Browse files
antoine92190antoine92190
committed
(demo) refactor firestore data
1 parent 88a5c79 commit 53155bd

File tree

2 files changed

+103
-58
lines changed

2 files changed

+103
-58
lines changed

‎demo/src/ChatContainer.vue

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -299,12 +299,12 @@ export default {
299299
},
300300
301301
listenLastMessage(room) {
302-
const listener = firestoreService.firestoreListener(
303-
firestoreService.lastMessageQuery(room.roomId),
302+
const listener = firestoreService.listenLastMessage(
303+
room.roomId,
304304
messages => {
305-
// this.incrementDbCounter('Listen Last Room Message', messages.size)
305+
// this.incrementDbCounter('Listen Last Room Message', messages.length)
306306
messages.forEach(message => {
307-
const lastMessage = this.formatLastMessage(message.data(), room)
307+
const lastMessage = this.formatLastMessage(message, room)
308308
const roomIndex = this.rooms.findIndex(
309309
r => room.roomId === r.roomId
310310
)
@@ -374,11 +374,11 @@ export default {
374374
375375
firestoreService
376376
.getMessages(room.roomId, this.messagesPerPage, this.lastLoadedMessage)
377-
.then(messages => {
378-
// this.incrementDbCounter('Fetch Room Messages', messages.size)
377+
.then(({ messages, docs }) => {
378+
// this.incrementDbCounter('Fetch Room Messages', messages.length)
379379
if (this.selectedRoom !== room.roomId) return
380380
381-
if (messages.empty || messages.docs.length < this.messagesPerPage) {
381+
if (messages.length === 0 || messages.length < this.messagesPerPage) {
382382
setTimeout(() => (this.messagesLoaded = true), 0)
383383
}
384384
@@ -392,43 +392,42 @@ export default {
392392
if (this.lastLoadedMessage) {
393393
this.previousLastLoadedMessage = this.lastLoadedMessage
394394
}
395-
this.lastLoadedMessage = messages.docs[messages.docs.length - 1]
396-
397-
const listener = firestoreService.firestoreListener(
398-
firestoreService.paginatedMessagesQuery(
399-
room.roomId,
400-
this.lastLoadedMessage,
401-
this.previousLastLoadedMessage
402-
),
403-
snapshots => {
404-
// this.incrementDbCounter('Listen Room Messages', snapshots.size)
405-
this.listenMessages(snapshots, room)
406-
}
407-
)
408-
this.listeners.push(listener)
395+
this.lastLoadedMessage = docs[docs.length - 1]
396+
397+
this.listenMessages(room)
409398
})
410399
},
411400
412-
listenMessages(messages, room) {
413-
messages.forEach(message => {
414-
const formattedMessage = this.formatMessage(room, message)
415-
const messageIndex = this.messages.findIndex(m => m._id === message.id)
401+
listenMessages(room) {
402+
const listener = firestoreService.listenMessages(
403+
room.roomId,
404+
this.lastLoadedMessage,
405+
this.previousLastLoadedMessage,
406+
messages => {
407+
messages.forEach(message => {
408+
const formattedMessage = this.formatMessage(room, message)
409+
const messageIndex = this.messages.findIndex(
410+
m => m._id === message.id
411+
)
416412
417-
if (messageIndex === -1) {
418-
this.messages = this.messages.concat([formattedMessage])
419-
} else {
420-
this.messages[messageIndex] = formattedMessage
421-
this.messages = [...this.messages]
422-
}
413+
if (messageIndex === -1) {
414+
this.messages = this.messages.concat([formattedMessage])
415+
} else {
416+
this.messages[messageIndex] = formattedMessage
417+
this.messages = [...this.messages]
418+
}
423419
424-
this.markMessagesSeen(room, message)
425-
})
420+
this.markMessagesSeen(room, message)
421+
})
422+
}
423+
)
424+
this.listeners.push(listener)
426425
},
427426
428427
markMessagesSeen(room, message) {
429428
if (
430-
message.data().sender_id !== this.currentUserId &&
431-
(!message.data().seen || !message.data().seen[this.currentUserId])
429+
message.sender_id !== this.currentUserId &&
430+
(!message.seen || !message.seen[this.currentUserId])
432431
) {
433432
firestoreService.updateMessage(room.roomId, message.id, {
434433
[`seen.${this.currentUserId}`]: new Date()
@@ -437,29 +436,26 @@ export default {
437436
},
438437
439438
formatMessage(room, message) {
440-
const { timestamp } = message.data()
441-
442439
const formattedMessage = {
443-
...message.data(),
440+
...message,
444441
...{
445-
senderId: message.data().sender_id,
442+
senderId: message.sender_id,
446443
_id: message.id,
447-
seconds: timestamp.seconds,
448-
timestamp: parseTimestamp(timestamp, 'HH:mm'),
449-
date: parseTimestamp(timestamp, 'DD MMMM YYYY'),
450-
username: room.users.find(
451-
user => message.data().sender_id === user._id
452-
)?.username,
444+
seconds: message.timestamp.seconds,
445+
timestamp: parseTimestamp(message.timestamp, 'HH:mm'),
446+
date: parseTimestamp(message.timestamp, 'DD MMMM YYYY'),
447+
username: room.users.find(user => message.sender_id === user._id)
448+
?.username,
453449
// avatar: senderUser ? senderUser.avatar : null,
454450
distributed: true
455451
}
456452
}
457453
458-
if (message.data().replyMessage) {
454+
if (message.replyMessage) {
459455
formattedMessage.replyMessage = {
460-
...message.data().replyMessage,
456+
...message.replyMessage,
461457
...{
462-
senderId: message.data().replyMessage.sender_id
458+
senderId: message.replyMessage.sender_id
463459
}
464460
}
465461
}
@@ -732,13 +728,13 @@ export default {
732728
},
733729
734730
async listenRooms(query) {
735-
const listener = firestoreService.firestoreListener(query, rooms => {
731+
const listener = firestoreService.listenRooms(query, rooms => {
736732
// this.incrementDbCounter('Listen Rooms Typing Users', rooms.size)
737733
rooms.forEach(room => {
738734
const foundRoom = this.rooms.find(r => r.roomId === room.id)
739735
if (foundRoom) {
740-
foundRoom.typingUsers = room.data().typingUsers
741-
foundRoom.index = room.data().lastUpdated.seconds
736+
foundRoom.typingUsers = room.typingUsers
737+
foundRoom.index = room.lastUpdated.seconds
742738
}
743739
})
744740
})
@@ -844,11 +840,11 @@ export default {
844840
return alert('Nope, for demo purposes you cannot delete this room')
845841
}
846842
847-
firestoreService.getMessages(roomId).then(messages => {
843+
firestoreService.getMessages(roomId).then(({ messages }) => {
848844
messages.forEach(message => {
849845
firestoreService.deleteMessage(roomId, message.id)
850-
if (message.data().files) {
851-
message.data().files.forEach(file => {
846+
if (message.files) {
847+
message.files.forEach(file => {
852848
storageService.deleteFile(this.currentUserId, message.id, file)
853849
})
854850
}

‎demo/src/database/firestore.js

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,17 +182,23 @@ export const getMessages = (roomId, messagesPerPage, lastLoadedMessage) => {
182182
limit(messagesPerPage),
183183
startAfter(lastLoadedMessage)
184184
)
185-
)
185+
).then(messages => {
186+
return { messages: formatQueryDataArray(messages), docs: messages.docs }
187+
})
186188
} else if (messagesPerPage) {
187189
return getDocuments(
188190
query(
189191
messagesRef(roomId),
190192
orderBy(TIMESTAMP_FIELD, 'desc'),
191193
limit(messagesPerPage)
192194
)
193-
)
195+
).then(messages => {
196+
return { messages: formatQueryDataArray(messages), docs: messages.docs }
197+
})
194198
} else {
195-
return getDocuments(messagesRef(roomId))
199+
return getDocuments(messagesRef(roomId)).then(messages => {
200+
return { messages: formatQueryDataArray(messages), docs: messages.docs }
201+
})
196202
}
197203
}
198204

@@ -212,6 +218,12 @@ export const deleteMessage = (roomId, messageId) => {
212218
return deleteDocument(MESSAGE_PATH(roomId), messageId)
213219
}
214220

221+
export const listenRooms = (query, callback) => {
222+
return firestoreListener(query, rooms => {
223+
callback(formatQueryDataArray(rooms))
224+
})
225+
}
226+
215227
export const paginatedMessagesQuery = (
216228
roomId,
217229
lastLoadedMessage,
@@ -241,10 +253,47 @@ export const paginatedMessagesQuery = (
241253
}
242254
}
243255

244-
export const lastMessageQuery = roomId => {
256+
export const listenMessages = (
257+
roomId,
258+
lastLoadedMessage,
259+
previousLastLoadedMessage,
260+
callback
261+
) => {
262+
return firestoreListener(
263+
paginatedMessagesQuery(
264+
roomId,
265+
lastLoadedMessage,
266+
previousLastLoadedMessage
267+
),
268+
messages => {
269+
callback(formatQueryDataArray(messages))
270+
}
271+
)
272+
}
273+
274+
const formatQueryDataObject = queryData => {
275+
return { ...queryData.data(), id: queryData.id }
276+
}
277+
278+
const formatQueryDataArray = queryDataArray => {
279+
const formattedData = []
280+
281+
queryDataArray.forEach(data => {
282+
formattedData.push(formatQueryDataObject(data))
283+
})
284+
return formattedData
285+
}
286+
287+
const lastMessageQuery = roomId => {
245288
return query(messagesRef(roomId), orderBy(TIMESTAMP_FIELD, 'desc'), limit(1))
246289
}
247290

291+
export const listenLastMessage = (roomId, callback) => {
292+
return firestoreListener(query(lastMessageQuery(roomId)), messages => {
293+
callback(formatQueryDataArray(messages))
294+
})
295+
}
296+
248297
export const updateMessageReactions = (
249298
roomId,
250299
messageId,

0 commit comments

Comments
 (0)