fix conversations

app/chat/(main)/index.tsx

@@ -1,5 +1,5 @@
 import { router } from 'expo-router'
-import { FlatList } from 'react-native'
+import { FlatList, View } from 'react-native'
 import React, { useCallback, useEffect, useState } from 'react'
 import { databases, functions } from '~/lib/appwrite-client'
 import { ExecutionMethod, Query } from 'react-native-appwrite'
@@ -10,6 +10,7 @@ import { useUser } from '~/components/contexts/UserContext'
 import { useDataCache } from '~/components/contexts/DataCacheContext'
 import { Input } from '~/components/ui/input'
 import { useDebounce } from '~/lib/hooks/useDebounce'
+import { Button } from '~/components/ui/button'
 
 export default function ConversationsView() {
   const [refreshing, setRefreshing] = useState(false)
@@ -128,15 +129,19 @@ export default function ConversationsView() {
     item,
   }: {
     item: Messaging.MessageConversationsDocumentsType
-  }) => <ConversationItem displayData={displayData[item.$id]} />
+  }) => <ConversationItem item={item} displayData={displayData[item.$id]} />
 
   return (
     <>
-      <Input
-        value={searchTerm}
-        onChangeText={setSearchTerm}
-        placeholder="Search users..."
-      />
+      <View className={'flex-row'}>
+        <Input
+          value={searchTerm}
+          onChangeText={setSearchTerm}
+          placeholder="Search users..."
+          className={'flex-grow'}
+        />
+        <Button variant={'outline'} />
+      </View>
       <FlatList
         data={debouncedSearchTerm ? searchResults : conversations}
         keyExtractor={(item) => item.$id}

components/FlatlistItems/ConversationItem.tsx

@@ -10,18 +10,21 @@ import {
 import { Muted } from '../ui/typography'
 import { Text } from '~/components/ui/text'
 import { Card, CardContent } from '~/components/ui/card'
-import { Community, UserData } from '~/lib/types/collections'
-import { timeSince } from '~/components/calculateTimeLeft'
+import { Community, Messaging, UserData } from '~/lib/types/collections'
+import { useTimeSince } from '../calculateTimeLeft'
 
 const ConversationItem = React.memo(
   ({
+    item,
     displayData,
   }: {
+    item: Messaging.MessageConversationsDocumentsType
     displayData:
       | UserData.UserDataDocumentsType
       | Community.CommunityDocumentsType
   }) => {
     const isCommunity = !!displayData?.name
+    const timeSince = useTimeSince(item?.$updatedAt)
 
     return (
       <Link
@@ -78,19 +81,12 @@ const ConversationItem = React.memo(
                           : displayData?.displayName}
                       </Text>
                     </View>
-                    <Muted className="text-sm">
-                      {displayData?.lastMessage}
-                    </Muted>
+                    <Muted className="text-sm">{item?.lastMessage}</Muted>
                   </View>
                   <View className="ml-4 mr-12">
                     <View>
-                      <Text className="font-semibold">
-                        {timeSince(displayData?.$updatedAt)}
-                      </Text>
+                      <Text className="font-semibold">{timeSince}</Text>
                     </View>
-                    <Muted className="text-sm">
-                      {displayData?.lastMessage}
-                    </Muted>
                   </View>
                 </View>
               </View>

components/calculateTimeLeft.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react'
+
 export const calculateTimeLeft = (
   eventDate: string,
   eventEndDate: string,
@@ -77,6 +79,20 @@ export const formatDateLocale = (date: Date) => {
   return `${day}.${month}.${year} @ ${hours}:${minutes} GMT${offsetSign}${offsetHours}:${offsetMinutes}`
 }
 
+export const useTimeSince = (timestamp: string) => {
+  const [timeElapsed, setTimeElapsed] = useState(() => timeSince(timestamp))
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeElapsed(timeSince(timestamp))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [timestamp, timeSince])
+
+  return timeElapsed
+}
+
 export const timeSince = (date: string) => {
   const now = new Date()
   const past = new Date(date)

lib/hooks/useRealtimeChat.ts

@@ -95,12 +95,32 @@ export function useRealtimeChat() {
 
       return updatedMessages
     })
+
+    // Update the lastMessage and sort conversations
+    setConversations((prevConversations) => {
+      const updatedConversations = prevConversations.map((conversation) => {
+        if (conversation.$id === payload.conversationId) {
+          return {
+            ...conversation,
+            lastMessage: payload.body,
+            $updatedAt: payload.$updatedAt, // Ensure $updatedAt is updated
+          }
+        }
+        return conversation
+      })
+
+      // Sort conversations by the latest message timestamp
+      return updatedConversations.sort(
+        (a, b) =>
+          new Date(b.$updatedAt).getTime() - new Date(a.$updatedAt).getTime()
+      )
+    })
   }
 
   const fetchInitialData = async () => {
     const initialConversations: Messaging.MessageConversationsType =
       await databases.listDocuments('hp_db', 'messages-conversations', [
-        Query.orderDesc('$createdAt'),
+        Query.orderDesc('$updatedAt'),
         Query.limit(500),
       ])
     setConversations(initialConversations.documents)