Subscription finally working!

src/components/status/TechTable.tsx

@@ -9,7 +9,7 @@ import {
   updateUserStatus,
   type UserWithStatus,
 } from '@/lib/hooks/status';
-import { Drawer, DrawerTrigger, Progress } from '@/components/ui';
+import { Drawer, DrawerTrigger, Loading } from '@/components/ui';
 import { toast } from 'sonner';
 import { HistoryDrawer } from '@/components/status';
 import type { Profile } from '@/utils/supabase';
@@ -24,7 +24,7 @@ export const TechTable = ({
   initialStatuses = [],
   className = 'w-full max-w-7xl mx-auto px-4',
 }: TechTableProps) => {
-  const { isAuthenticated, profile } = useAuth();
+  const { isAuthenticated } = useAuth();
   const { tvMode } = useTVMode();
   const [loading, setLoading] = useState(true);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
@@ -34,6 +34,7 @@ export const TechTable = ({
     useState<UserWithStatus[]>(initialStatuses);
   const [selectedHistoryUser, setSelectedHistoryUser] =
     useState<Profile | null>(null);
+  const channelRef = useRef<RealtimeChannel | null>(null);
 
   const fetchRecentUsersWithStatuses = useCallback(async () => {
     try {
@@ -112,6 +113,63 @@ export const TechTable = ({
     );
   }, [selectedIds.length, usersWithStatuses.length]);
 
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    const supabase = createClient();
+
+    const channel = supabase
+      .channel('status_updates', {
+        config: { broadcast: { self: true }}
+      })
+      .on('broadcast', { event: 'status_updated' }, (payload) => {
+        const { user_status } = payload.payload as {
+        user_status: UserWithStatus;
+        timestamp: string;
+      };
+      console.log('Received status update:', user_status);
+
+      setUsersWithStatuses((prevUsers) => {
+        const existingUserIndex = prevUsers.findIndex((u) =>
+          u.user.id === user_status.user.id,
+        );
+
+        if (existingUserIndex !== -1) {
+          const updatedUsers = [...prevUsers];
+          updatedUsers[existingUserIndex] = {
+            user: user_status.user, // Use the user from the broadcast
+            status: user_status.status,
+            created_at: user_status.created_at,
+            updated_by: user_status.updated_by,
+          };
+          return updatedUsers;
+        } else {
+          // Add new user to list!
+          return [user_status, ...prevUsers];
+        }
+      });
+    })
+    .subscribe((status) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+      if (status === 'SUBSCRIBED') {
+        console.log('Successfully subscribed to status updates!');
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+      } else if (status === 'CHANNEL_ERROR') {
+        console.error('Error subscribing to status updates.')
+      }
+    });
+
+    channelRef.current = channel;
+
+    return () => {
+      if (channelRef.current) {
+        supabase.removeChannel(channelRef.current).catch((error) => {
+          console.error(`Error unsubscribing from status updates: ${error}`);
+        });
+        channelRef.current = null;
+      }
+    };
+  }, [isAuthenticated]);
+
   const formatTime = (timestamp: string) => {
     const date = new Date(timestamp);
     const time = date.toLocaleTimeString('en-US', {
@@ -126,7 +184,7 @@ export const TechTable = ({
   if (loading) {
     return (
       <div className='flex justify-center items-center min-h-[400px]'>
-        <Progress value={33} className='w-64' />
+        <Loading className='w-full' alpha={0.5} />
       </div>
     );
   }