use store for realtime to fix bugs + more use

Author: multimokia

components/home/MessageHeader.tsx

@@ -27,7 +27,6 @@ export function MessageHeader({
   const currentUser = useUser();
   const supabase = useSupabaseClient();
   const relation = useRelations().find((relation) => relation.target_profile.id === profile.id);
-  console.table(relation);
 
   return (
     <ContextMenu.Root>

components/home/PresenceIndicator.tsx

@@ -1,7 +1,7 @@
-import { useOnlinePresenceRef } from '@/context/ChatCtx';
+import { useOnlineUsers } from '@/lib/store';
 
 export function PresenceIndicator({ userId }: { userId: string }) {
-  const channel = useOnlinePresenceRef()!;
+  const onlineUsers = useOnlineUsers();
 
   return (
     <div
@@ -12,7 +12,7 @@ export function PresenceIndicator({ userId }: { userId: string }) {
         h-4
         rounded-full
         z-10
-        ${channel.presenceState()[userId] ? 'bg-green-600' : 'bg-slate-500'}
+        ${onlineUsers[userId] ? 'bg-green-600' : 'bg-slate-500'}
         border-2
         -mt-3
         mr-2

components/home/Server.tsx

@@ -1,7 +1,6 @@
 import VerticalSettingsIcon from '@/components/icons/VerticalSettingsIcon';
 import ChannelMessageIcon from '../icons/ChannelMessageIcon';
 import { SyntheticEvent, useEffect, useState } from 'react';
-import { useOnlinePresenceRef } from '@/context/ChatCtx';
 import { getChannelsInServer } from '@/services/channels.service';
 import ServersIcon from '../icons/ServersIcon';
 import { useSupabaseClient } from '@supabase/auth-helpers-react';

components/home/ServerMemberStats.tsx

@@ -1,4 +1,4 @@
-import { useOnlinePresenceRef } from '@/context/ChatCtx';
+import { useOnlineUsers } from '@/lib/store';
 import { getServerMemberCount, getUsersInServer } from '@/services/server.service';
 import styles from '@/styles/Servers.module.css';
 import { Server } from '@/types/dbtypes';
@@ -8,8 +8,8 @@ import { useEffect, useState } from 'react';
 export function ServerMemberStats({ server, flexStyle }: { server: Server, flexStyle?: string }) {
   const [ memberCount, setMemberCount ] = useState(0);
   const [ onlineCount, setOnlineCount ] = useState(0);
-  const onlinePresenceChannel = useOnlinePresenceRef();
   const supabase = useSupabaseClient();
+  const onlineUsers = useOnlineUsers();
 
   useEffect(() => {
     async function handleAsync() {
@@ -19,19 +19,19 @@ export function ServerMemberStats({ server, flexStyle }: { server: Server, flexS
       // Now we need to get the online count
       const { data: onlineData, error } = await getUsersInServer(supabase, server.id);
 
-      let onlineUsers = 0;
+      let amtOnlineUsers = 0;
       if (!error) {
         for (const profile of onlineData) {
-          if (onlinePresenceChannel.presenceState()[profile.id] !== undefined) {
-            onlineUsers++;
+          if (onlineUsers[profile.id] !== undefined) {
+            amtOnlineUsers++;
           }
         }
-        setOnlineCount(onlineUsers);
+        setOnlineCount(amtOnlineUsers);
       }
     }
 
     handleAsync();
-  }, [supabase, onlinePresenceChannel, server.id]);
+  }, [supabase, onlineUsers, server.id]);
 
   return (
     <div className={`text-xs tracking-wide text-grey-300 ${flexStyle}`}>

context/ChatCtx.tsx

@@ -1,29 +1,18 @@
-import { getServersForUser } from '@/services/server.service';
-import { ServersForUser } from '@/types/dbtypes';
+import { useFlagUserOffline, useFlagUserOnline } from '@/lib/store';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
-import { RealtimeChannel } from '@supabase/supabase-js';
 import {
   createContext,
-  SetStateAction,
-  useContext,
-  useState,
-  Dispatch,
-  useEffect,
 } from 'react';
 
-type ChatCtxValue = {
-  onlinePresenceRef: RealtimeChannel | null;
-};
-
-export const ChatCtxDefaultVal: ChatCtxValue = {
-  onlinePresenceRef: null,
-};
-
+type ChatCtxValue = { };
+export const ChatCtxDefaultVal: ChatCtxValue = { };
 export const ChatCtx = createContext(ChatCtxDefaultVal);
 
 export function ChatCtxProvider({ children }: { children: React.ReactNode }) {
   const supabase = useSupabaseClient();
   const user = useUser();
+  const flagUserOnline = useFlagUserOnline();
+  const flagUserOffline = useFlagUserOffline();
 
   const onlinePresenceRef = supabase.channel('online-users', {
     config: {
@@ -33,6 +22,14 @@ export function ChatCtxProvider({ children }: { children: React.ReactNode }) {
     },
   });
 
+  onlinePresenceRef
+    .on('presence', { event: 'join' }, ({ key, newPresences }) => {
+      flagUserOnline(key, newPresences);
+    })
+    .on('presence', { event: 'leave' }, ({ key }) => {
+      flagUserOffline(key);
+    });
+
   onlinePresenceRef.subscribe(async (status) => {
     if (status === 'SUBSCRIBED') {
       const status = await onlinePresenceRef.track({
@@ -42,17 +39,8 @@ export function ChatCtxProvider({ children }: { children: React.ReactNode }) {
   });
 
   return (
-    <ChatCtx.Provider
-      value={{
-        onlinePresenceRef,
-      }}
-    >
+    <ChatCtx.Provider value={ChatCtxDefaultVal}>
       {children}
     </ChatCtx.Provider>
   );
 }
-
-export function useOnlinePresenceRef() {
-  const { onlinePresenceRef } = useContext(ChatCtx);
-  return onlinePresenceRef!;
-}

lib/store.ts

@@ -241,6 +241,38 @@ const useRelationsStore = create<RelationsState>()((set) => ({
   }
 }));
 
+type OnlineUser = {
+  [key: string]: any;
+}
+export interface OnlineState {
+  onlineUsers: OnlineUser;
+
+  flagUserOnline: (userId: string, presenceInfo: any) => void;
+  flagUserOffline: (userId: string) => void;
+}
+
+const useOnlineStore = create<OnlineState>()((set) => ({
+  onlineUsers: {},
+
+  flagUserOnline: (userId, presenceInfo) => {
+    set((state) => ({
+      onlineUsers: {
+        ...state.onlineUsers,
+        [userId]: presenceInfo
+      }
+    }));
+  },
+
+  flagUserOffline: (userId) => {
+    set((state) => {
+      const { [userId]: _, ...rest } = state.onlineUsers;
+      return {
+        onlineUsers: rest
+      };
+    });
+  },
+}));
+
 export const useServers = () => useServerStore((state) => state.servers);
 export const useAddServer = () => useServerStore((state) => state.addServer);
 export const useRemoveServer = () =>
@@ -269,3 +301,6 @@ export const useRemoveRelation = () =>
   useRelationsStore((state) => state.removeRelation);
 export const useGetRelations = () =>
   useRelationsStore((state) => state.getRelations);
+export const useOnlineUsers = () => useOnlineStore((state) => state.onlineUsers);
+export const useFlagUserOnline = () => useOnlineStore((state) => state.flagUserOnline);
+export const useFlagUserOffline = () => useOnlineStore((state) => state.flagUserOffline);