Merge pull request #208 from lizardkingLK/lizardkinglk

Lizardkinglk
lizardkingLK · Oct 31, 2023 · deefd80 · deefd80
2 parents 81a3ace + d9eba03
commit deefd80
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 41 deletions.
diff --git a/components/hooks/useRealtime.tsx b/components/hooks/useRealtime.tsx
diff --git a/components/sections/dashboard/index.tsx b/components/sections/dashboard/index.tsx
@@ -4,7 +4,13 @@ import SummaryCard from '@/components/cards/summary';
 import { cardBodyTypes, elementType } from '@/utils/enums';
 import Avatar from '@/components/avatar';
 import { IDashboardProps, IGroupProps, ILatestMessageProps } from '@/types';
-import { formatCompactNumber, getBriefContent, isImage } from '@/utils/helpers';
+import {
+  formatCompactNumber,
+  getBriefContent,
+  getRelativeTime,
+  getTimeConverted,
+  isImage,
+} from '@/utils/helpers';
 import Badge from '@/components/badge';
 import Groups from '@/components/svgs/groups';
 
@@ -132,7 +138,10 @@ const Dashboard = (props: IDashboardProps) => {
                 }
                 cardBodyLongContent={latest.content}
                 cardFooterContent={
-                  <Badge text={latest.createdOn} tooltip={latest.createdOn} />
+                  <Badge
+                    text={getRelativeTime(latest.createdOn)}
+                    tooltip={getTimeConverted(latest.createdOn)}
+                  />
                 }
                 cardClickEvent={() =>
                   props.onSelectGroupHandler(latest.groupId)

diff --git a/lib/supabase.ts b/lib/supabase.ts
@@ -24,29 +24,59 @@ export const registerRealtime = (
     .subscribe();
 };
 
+export const enum presenceEventTypes {
+  sync = 'sync',
+  join = 'join',
+  leave = 'leave',
+}
+
 // presence
-export const registerPresence = (userId: string, roomNames: string[]) => {
+export const registerPresence = (
+  userId: string,
+  roomNames: string[],
+  handlePresence: Function
+) => {
   roomNames?.forEach((name) => {
     const room = supabaseClient.channel(name);
 
     room
-      .on('presence', { event: 'sync' }, () => {
+      .on('presence', { event: presenceEventTypes.sync }, () => {
         const newState = room.presenceState();
-        console.log('sync', newState);
-      })
-      .on('presence', { event: 'join' }, ({ key, newPresences }) => {
-        console.log('join', key, newPresences);
-      })
-      .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
-        console.log('leave', key, leftPresences);
+        handlePresence({
+          event: presenceEventTypes.sync,
+          states: newState,
+          key: null,
+        });
       })
+      .on(
+        'presence',
+        { event: presenceEventTypes.join },
+        ({ key, newPresences }) => {
+          handlePresence({
+            event: presenceEventTypes.join,
+            states: newPresences,
+            key,
+          });
+        }
+      )
+      .on(
+        'presence',
+        { event: presenceEventTypes.leave },
+        ({ key, leftPresences }) => {
+          handlePresence({
+            event: presenceEventTypes.leave,
+            states: leftPresences,
+            key,
+          });
+        }
+      )
       .subscribe(async (status) => {
         if (status !== 'SUBSCRIBED') {
           return;
         }
         const presenceTrackStatus = await room.track({
-          user: userId,
-          online_at: new Date().toISOString(),
+          userId,
+          groupId: name,
         });
         console.log(presenceTrackStatus);
       });
@@ -94,7 +124,7 @@ export const supabaseUtil = {
             { id: ownerId, value: true },
           ],
           content: quickMessages.hi,
-          timestamp: new Date().getTime()
+          timestamp: new Date().getTime(),
         },
       ])
       .select();
@@ -155,7 +185,7 @@ export const supabaseUtil = {
         createdFor: [toId, fromId],
         content: content,
         readBy,
-        timestamp: new Date().getTime()
+        timestamp: new Date().getTime(),
       },
     ]);
   },

diff --git a/pages/cld/index.tsx → pages/cloud/index.tsx b/pages/cld/index.tsx → pages/cloud/index.tsx
@@ -50,6 +50,7 @@ import {
 } from '@/utils/http';
 
 import {
+  presenceEventTypes,
   registerPresence,
   registerRealtime,
   supabaseUtil,
@@ -116,11 +117,11 @@ const Messages = () => {
           setSection(sections.introduction);
         }
       });
-      initializeSocket().then(() => socket?.emit('identity', userId));
+      // initializeSocket().then(() => socket?.emit('identity', userId));
       initializeRealtime();
 
       return () => {
-        socket.close();
+        socket?.close();
         realtime.unsubscribe();
       };
     }
@@ -162,7 +163,7 @@ const Messages = () => {
             type: messageTypes.RECEIVED,
             content: output.content,
             fromId: output.fromId,
-            createdOn: getTimeConverted(output.timestamp),
+            createdOn: output.createdOn,
             groupId: tempGroup.id,
             status: true,
             toId: output.toId,
@@ -350,7 +351,25 @@ const Messages = () => {
   };
 
   const initializePresence = (userId: string, groupIds: Set<string>) => {
-    registerPresence(userId, Array.from(groupIds));
+    const handlePresence = (presence: {
+      event: string;
+      states: [];
+      key: string | null;
+    }) => {
+      const { event, states } = presence;
+      if (event === presenceEventTypes.join) {
+        states?.forEach((state) => {
+          const { userId, groupId } = state;
+          setOnline({ userId, groupId, value: true });
+        });
+      } else if (event === presenceEventTypes.leave) {
+        states?.forEach((state) => {
+          const { userId, groupId } = state;
+          setOnline({ userId, groupId, value: false });
+        });
+      }
+    };
+    registerPresence(userId, Array.from(groupIds), handlePresence);
   };
 
   const initializeSocket = async () => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,14 +5,13 @@ import { useEffect } from 'react';
 
 const AppRouter = () => {
   const router = useRouter();
-
   useEffect(() => {
     const method = getMessagingMethod();
 
     if (method === messagingType.local) {
-      router.push('/lcl');
+      router.push('/local');
     } else if (method === messagingType.cloud) {
-      router.push('/cld');
+      router.push('/cloud');
     }
   }, [router]);
 };

diff --git a/pages/lcl/index.tsx → pages/lcl/local.tsx b/pages/lcl/index.tsx → pages/lcl/local.tsx
@@ -105,7 +105,7 @@ const Messages = () => {
       initializeSocket().then(() => socket?.emit('identity', userId));
 
       return () => {
-        socket.close();
+        socket?.close();
       };
     }
   }, [userId]);
@@ -146,7 +146,7 @@ const Messages = () => {
             type: messageTypes.RECEIVED,
             content: output.content,
             fromId: output.fromId,
-            createdOn: getTimeConverted(output.timestamp),
+            createdOn: output.createdOn,
             groupId: tempGroup.id,
             status: true,
             toId: output.toId,