feat: chat pagination (#378)

* feat: chat pagination

* feat: blabsy reodering by last chat

Author: coodos

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
                     "order": "ASCENDING"
                 }
             ]
+        },
+        {
+            "collectionGroup": "chats",
+            "queryScope": "COLLECTION",
+            "fields": [
+                {
+                    "fieldPath": "participants",
+                    "arrayConfig": "CONTAINS"
+                },
+                {
+                    "fieldPath": "updatedAt",
+                    "order": "DESCENDING"
+                }
+            ]
         }
     ],
     "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
     }
 
     return (
-        <div className='flex h-full flex-col gap-4'>
-            <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+        <div className='flex h-full flex-col'>
+            <div className='flex-1 overflow-y-auto p-4 space-y-2'>
                 {chats.map((chat) => {
                     const otherParticipant = chat.participants.find(
                         (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
                     );
                 })}
             </div>
-            <button
-                type='button'
-                onClick={() => setOpenCreateNewChatModal(true)}
-                className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
-            >
-                New Chat
-            </button>
+            <div className='flex-shrink-0 p-4'>
+                <button
+                    type='button'
+                    onClick={() => setOpenCreateNewChatModal(true)}
+                    className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+                >
+                    New Chat
+                </button>
+            </div>
             <AddMembers
                 open={openCreateNewChatModal}
                 onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
     return (
         <main className='min-h-full w-full max-w-5xl pt-8'>
             <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
-                <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+                <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
                     <ChatList />
                 </div>
                 <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
         const chatsQuery = query(
             chatsCollection,
-            where('participants', 'array-contains', user.id)
+            where('participants', 'array-contains', user.id),
+            orderBy('updatedAt', 'desc')
         );
 
         const unsubscribe = onSnapshot(
             chatsQuery,
             (snapshot) => {
                 const chatsData = snapshot.docs.map((doc) => doc.data());
-                setChats(chatsData);
+                
+                // Sort chats by last message timestamp (most recent first)
+                const sortedChats = chatsData.sort((a, b) => {
+                    // If both have lastMessage, sort by timestamp
+                    if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+                        return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+                    }
+                    // If only one has lastMessage, prioritize it
+                    if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+                    if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+                    // If neither has lastMessage, sort by updatedAt
+                    return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+                });
+                
+                setChats(sortedChats);
                 setLoading(false);
             },
             (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
         });
 
         const savedMessage = await this.messageRepository.save(message);
+        
+        // Update the chat's updatedAt timestamp to reflect the latest message
+        chat.updatedAt = new Date();
+        await this.chatRepository.save(chat);
+        
         console.log("Sent event", `chat:${chatId}`);
         this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
         page: number;
         totalPages: number;
     }> {
-        // First, get the chat IDs that the user is part of
-        const [chatIds, total] = await this.chatRepository
+        // Get chats ordered by the most recent message timestamp
+        const queryBuilder = this.chatRepository
             .createQueryBuilder("chat")
-            .select(["chat.id", "chat.updatedAt"])
+            .leftJoin("chat.messages", "message")
             .innerJoin("chat.participants", "participants")
             .where("participants.id = :userId", { userId })
-            .orderBy("chat.updatedAt", "DESC")
+            .groupBy("chat.id")
+            .addGroupBy("chat.name")
+            .addGroupBy("chat.ename")
+            .addGroupBy("chat.createdAt")
+            .addGroupBy("chat.updatedAt")
+            .orderBy("MAX(message.createdAt)", "DESC")
+            .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+        // Get total count for pagination
+        const total = await queryBuilder.getCount();
+
+        // Apply pagination
+        const chats = await queryBuilder
             .skip((page - 1) * limit)
             .take(limit)
-            .getManyAndCount();
+            .getMany();
 
-        // Then, load the full chat data with all relations
-        const chats = await this.chatRepository.find({
-            where: { id: In(chatIds.map((chat) => chat.id)) },
+        // Load full chat data with all relations for the paginated results
+        const chatsWithRelations = await this.chatRepository.find({
+            where: { id: In(chats.map((chat) => chat.id)) },
             relations: [
                 "participants",
                 "messages",
                 "messages.sender",
                 "messages.readStatuses",
                 "messages.readStatuses.user",
             ],
-            order: { updatedAt: "DESC" },
+        });
+
+        // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+        const sortedChats = chatsWithRelations.sort((a, b) => {
+            const aLatestMessage = a.messages[a.messages.length - 1];
+            const bLatestMessage = b.messages[b.messages.length - 1];
+            
+            if (!aLatestMessage && !bLatestMessage) {
+                return b.createdAt.getTime() - a.createdAt.getTime();
+            }
+            if (!aLatestMessage) return 1;
+            if (!bLatestMessage) return -1;
+            
+            return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
         });
 
         // For each chat, get the latest message and its read status
         const chatsWithLatestMessage = await Promise.all(
-            chats.map(async (chat) => {
+            sortedChats.map(async (chat) => {
                 const latestMessage = chat.messages[chat.messages.length - 1];
                 if (!latestMessage) {
                     return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
     public messageRepository = AppDataSource.getRepository(Message);
+    private chatRepository = AppDataSource.getRepository(Chat);
 
     async findById(id: string): Promise<Message | null> {
         return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
             isArchived: false
         });
 
-        return await this.messageRepository.save(message);
+        const savedMessage = await this.messageRepository.save(message);
+        
+        // Update the chat's updatedAt timestamp to reflect the latest message
+        const chat = await this.chatRepository.findOneBy({ id: chatId });
+        if (chat) {
+            chat.updatedAt = new Date();
+            await this.chatRepository.save(chat);
+        }
+
+        return savedMessage;
     }
 
     async createSystemMessage(chatId: string, text: string): Promise<Message> {