From d617dd77c1efed93b713092f3d5cd7527234ccaf Mon Sep 17 00:00:00 2001 From: Emmy D'Anello Date: Sat, 27 Apr 2024 14:12:08 +0200 Subject: [PATCH] Properly sort messages and add fetch previous messages ability Signed-off-by: Emmy D'Anello --- chat/consumers.py | 12 +++++--- chat/static/chat.js | 48 +++++++++++++++++++++-------- chat/templates/chat/chat.html | 6 ++++ locale/fr/LC_MESSAGES/django.po | 54 ++++++++++++++++++--------------- 4 files changed, 78 insertions(+), 42 deletions(-) diff --git a/chat/consumers.py b/chat/consumers.py index c4e7bb6..1f7441c 100644 --- a/chat/consumers.py +++ b/chat/consumers.py @@ -63,7 +63,7 @@ class ChatConsumer(AsyncJsonWebsocketConsumer): case 'send_message': await self.receive_message(content) case 'fetch_messages': - await self.fetch_messages(content['channel_id']) + await self.fetch_messages(**content) case unknown: print("Unknown message type:", unknown) @@ -109,17 +109,19 @@ class ChatConsumer(AsyncJsonWebsocketConsumer): 'content': message.content, }) - async def fetch_messages(self, channel_id: int, offset: int = 0, limit: int = 50) -> None: + async def fetch_messages(self, channel_id: int, offset: int = 0, limit: int = 50, **_kwargs) -> None: channel = await Channel.objects.aget(id=channel_id) read_channels = await Channel.get_accessible_channels(self.scope['user'], 'read') if not await read_channels.acontains(channel): return - messages = Message.objects.filter(channel=channel).order_by('created_at')[offset:offset + limit].all() + limit = min(limit, 200) # Fetch only maximum 200 messages at the time + + messages = Message.objects.filter(channel=channel).order_by('-created_at')[offset:offset + limit].all() await self.send_json({ 'type': 'fetch_messages', 'channel_id': channel_id, - 'messages': [ + 'messages': list(reversed([ { 'id': message.id, 'timestamp': message.created_at.isoformat(), @@ -127,7 +129,7 @@ class ChatConsumer(AsyncJsonWebsocketConsumer): 'content': message.content, } async for message in messages - ] + ])) }) async def chat_send_message(self, message) -> None: diff --git a/chat/static/chat.js b/chat/static/chat.js index 8557008..68d0c04 100644 --- a/chat/static/chat.js +++ b/chat/static/chat.js @@ -4,6 +4,8 @@ await Notification.requestPermission() })() +const MAX_MESSAGES = 50 + let channels = {} let messages = {} let selected_channel_id = null @@ -61,12 +63,9 @@ function setChannels(new_channels) { for (let channel of new_channels) { channels[channel['id']] = channel if (!messages[channel['id']]) - messages[channel['id']] = [] + messages[channel['id']] = new Map() - socket.send(JSON.stringify({ - 'type': 'fetch_messages', - 'channel_id': channel['id'], - })) + fetchMessages(channel['id']) } if (new_channels && (!selected_channel_id || !channels[selected_channel_id])) @@ -78,16 +77,35 @@ function receiveMessage(message) { redrawMessages() } -function fetchMessages(data) { +function fetchMessages(channel_id, offset = 0, limit = MAX_MESSAGES) { + socket.send(JSON.stringify({ + 'type': 'fetch_messages', + 'channel_id': channel_id, + 'offset': offset, + 'limit': limit, + })) +} + +function fetchPreviousMessages() { + let channel_id = selected_channel_id + let offset = messages[channel_id].size + fetchMessages(channel_id, offset, MAX_MESSAGES) +} + +function receiveFetchedMessages(data) { let channel_id = data['channel_id'] let new_messages = data['messages'] if (!messages[channel_id]) - messages[channel_id] = [] + messages[channel_id] = new Map() - for (let message of new_messages) { - messages[channel_id].push(message) - } + for (let message of new_messages) + messages[channel_id].set(message['id'], message) + + // Sort messages by timestamp + messages[channel_id] = new Map([...messages[channel_id].values()] + .sort((a, b) => new Date(a['timestamp']) - new Date(b['timestamp'])) + .map(message => [message['id'], message])) redrawMessages() } @@ -99,7 +117,7 @@ function redrawMessages() { let lastMessage = null let lastContentDiv = null - for (let message of messages[selected_channel_id]) { + for (let message of messages[selected_channel_id].values()) { if (lastMessage && lastMessage['author'] === message['author']) { let lastTimestamp = new Date(lastMessage['timestamp']) let newTimestamp = new Date(message['timestamp']) @@ -138,6 +156,12 @@ function redrawMessages() { lastMessage = message lastContentDiv = contentDiv } + + let fetchMoreButton = document.getElementById('fetch-previous-messages') + if (!messages[selected_channel_id] || messages[selected_channel_id].size % MAX_MESSAGES !== 0) + fetchMoreButton.classList.add('d-none') + else + fetchMoreButton.classList.remove('d-none') } document.addEventListener('DOMContentLoaded', () => { @@ -154,7 +178,7 @@ document.addEventListener('DOMContentLoaded', () => { receiveMessage(data) break case 'fetch_messages': - fetchMessages(data) + receiveFetchedMessages(data) break default: console.log(data) diff --git a/chat/templates/chat/chat.html b/chat/templates/chat/chat.html index b3d293a..4318f36 100644 --- a/chat/templates/chat/chat.html +++ b/chat/templates/chat/chat.html @@ -35,6 +35,12 @@
+
+ + {% trans "Fetch previous messages…" %} + +
+
    diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po index c70abdc..a854685 100644 --- a/locale/fr/LC_MESSAGES/django.po +++ b/locale/fr/LC_MESSAGES/django.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: TFJM\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2024-04-27 11:02+0200\n" +"POT-Creation-Date: 2024-04-27 14:10+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: Emmy D'Anello \n" "Language-Team: LANGUAGE \n" @@ -21,20 +21,20 @@ msgstr "" msgid "API" msgstr "API" -#: chat/models.py:17 participation/models.py:35 participation/models.py:263 +#: chat/models.py:18 participation/models.py:35 participation/models.py:263 #: participation/tables.py:18 participation/tables.py:34 msgid "name" msgstr "nom" -#: chat/models.py:22 +#: chat/models.py:23 msgid "read permission" msgstr "permission de lecture" -#: chat/models.py:28 +#: chat/models.py:29 msgid "write permission" msgstr "permission d'écriture" -#: chat/models.py:38 draw/admin.py:53 draw/admin.py:71 draw/admin.py:88 +#: chat/models.py:39 draw/admin.py:53 draw/admin.py:71 draw/admin.py:88 #: draw/models.py:26 participation/admin.py:79 participation/admin.py:140 #: participation/admin.py:171 participation/models.py:693 #: participation/models.py:717 participation/models.py:935 @@ -43,7 +43,7 @@ msgstr "permission d'écriture" msgid "tournament" msgstr "tournoi" -#: chat/models.py:40 +#: chat/models.py:41 msgid "" "For a permission that concerns a tournament, indicates what is the concerned " "tournament." @@ -51,21 +51,21 @@ msgstr "" "Pour une permission qui concerne un tournoi, indique quel est le tournoi " "concerné." -#: chat/models.py:49 draw/models.py:429 draw/models.py:456 +#: chat/models.py:50 draw/models.py:429 draw/models.py:456 #: participation/admin.py:136 participation/admin.py:155 #: participation/models.py:1434 participation/models.py:1443 #: participation/tables.py:84 msgid "pool" msgstr "poule" -#: chat/models.py:51 +#: chat/models.py:52 msgid "" "For a permission that concerns a pool, indicates what is the concerned pool." msgstr "" "Pour une permission qui concerne une poule, indique quelle est la poule " "concernée." -#: chat/models.py:60 draw/templates/draw/tournament_content.html:277 +#: chat/models.py:61 draw/templates/draw/tournament_content.html:277 #: participation/admin.py:167 participation/models.py:252 #: participation/models.py:708 #: participation/templates/participation/tournament_harmonize.html:15 @@ -75,18 +75,18 @@ msgstr "" msgid "team" msgstr "équipe" -#: chat/models.py:62 +#: chat/models.py:63 msgid "" "For a permission that concerns a team, indicates what is the concerned team." msgstr "" "Pour une permission qui concerne une équipe, indique quelle est l'équipe " "concernée." -#: chat/models.py:66 +#: chat/models.py:67 msgid "private" msgstr "privé" -#: chat/models.py:68 +#: chat/models.py:69 msgid "" "If checked, only users who have been explicitly added to the channel will be " "able to access it." @@ -94,11 +94,11 @@ msgstr "" "Si sélectionné, seul⋅es les utilisateur⋅rices qui ont été explicitement " "ajouté⋅es au canal pourront y accéder." -#: chat/models.py:73 +#: chat/models.py:74 msgid "invited users" msgstr "Utilisateur⋅rices invité" -#: chat/models.py:76 +#: chat/models.py:77 msgid "" "Extra users who have been invited to the channel, in addition to the " "permitted group of the channel." @@ -106,52 +106,56 @@ msgstr "" "Utilisateur⋅rices supplémentaires qui ont été invité⋅es au canal, en plus du " "groupe autorisé du canal." -#: chat/models.py:81 +#: chat/models.py:82 #, python-brace-format msgid "Channel {name}" msgstr "Canal {name}" -#: chat/models.py:150 chat/models.py:159 +#: chat/models.py:148 chat/models.py:157 msgid "channel" msgstr "canal" -#: chat/models.py:151 +#: chat/models.py:149 msgid "channels" msgstr "canaux" -#: chat/models.py:165 +#: chat/models.py:163 msgid "author" msgstr "auteur⋅rice" -#: chat/models.py:172 +#: chat/models.py:170 msgid "created at" msgstr "créé le" -#: chat/models.py:177 +#: chat/models.py:175 msgid "updated at" msgstr "modifié le" -#: chat/models.py:182 +#: chat/models.py:180 msgid "content" msgstr "contenu" -#: chat/models.py:186 +#: chat/models.py:243 msgid "message" msgstr "message" -#: chat/models.py:187 +#: chat/models.py:244 msgid "messages" msgstr "messages" #: chat/templates/chat/chat.html:8 msgid "JavaScript must be enabled on your browser to access chat." -msgstr "" +msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat." #: chat/templates/chat/chat.html:12 msgid "Chat channels" msgstr "Canaux de chat" -#: chat/templates/chat/chat.html:43 +#: chat/templates/chat/chat.html:40 +msgid "Fetch previous messages…" +msgstr "Récupérer les messages précédents…" + +#: chat/templates/chat/chat.html:52 msgid "Send message…" msgstr "Envoyer un message…"