UX: Fix current channel value on user leave

Author: multimokia

hooks/useRealtimeStore.ts

@@ -27,6 +27,7 @@ import {
   useUpateServerUserProfile,
   useUpdateServerUserProfileByServerUserId,
   useStripServerUserAndRoles,
+  useRemoveProfilesForServerByServerUserId,
 } from '@/lib/store';
 import { useEffect } from 'react';
 import { Database } from '@/types/database.supabase';
@@ -68,6 +69,7 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
   const updateServerUserProfile = useUpateServerUserProfile();
   const updateServerUserProfileByServerUserId = useUpdateServerUserProfileByServerUserId();
   const stripServerUserAndRoles = useStripServerUserAndRoles();
+  const removeProfilesforServerByServerUserId = useRemoveProfilesForServerByServerUserId();
   const allServerProfiles = useAllServerProfiles();
   const user = useUser();
 
@@ -88,36 +90,22 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
             filter: `profile_id=eq.${user?.id}`,
           },
           async (payload) => {
-            console.log('insert');
+            console.log('current user joined a server');
 
             addServer(supabase, (payload.new as ServerUser).id);
             getRolesForServer(supabase, payload.new.server_id);
-            updateServerUserProfileByServerUserId(supabase, payload.new.id);
-          }
-        )
-        .on<ServerUser>(
-          'postgres_changes',
-          {
-            event: 'UPDATE',
-            schema: 'public',
-            table: 'server_users',
-            filter: `profile_id=neq.${user?.id}`,
-          },
-          async (payload) => {
-            console.log('Another user joined server');
-            getAllServerProfilesForServer(supabase, payload.new.server_id);
+            getAllServerProfilesForServer(supabase, payload.new.id);
           }
         )
         .on<ServerUser>(
           'postgres_changes',
           {
             event: 'UPDATE',
             schema: 'public',
-            table: 'server_users',
-            filter: `profile_id=eq.${user?.id}`,
+            table: 'server_users'
           },
           async (payload) => {
-            console.log('This user joined server');
+            console.log('A user updated their server profile');
             updateServerUserProfileByServerUserId(supabase, payload.new.id);
           }
         )
@@ -130,13 +118,15 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
             filter: `profile_id=eq.${user?.id}`,
           },
           async (payload) => {
-            console.log('remove user from server');
+            console.log('This user left a server');
 
-            //we should try to use the removeServer function from the store but the only resource on the payload is payload.old.id which is the server_user id
-            //and not the server id
+            // we should try to use the removeServer function from the store but the only resource
+            // on the payload is payload.old.id which is the server_user id and not the server id
             if (user) {
               getServers(supabase, user.id);
             }
+
+            removeProfilesforServerByServerUserId(payload.old.id!);
           }
         )
         .on<ServerUser>(
@@ -147,7 +137,7 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
             table: 'server_users',
           },
           async (payload) => {
-            console.log('delete server user (user leaves)');
+            console.log('Any user left a server');
             stripServerUserAndRoles(payload.old.id!);
           }
         )

lib/store.ts

@@ -596,6 +596,7 @@ export interface ServerProfilesState {
   updateServerProfileByServerUser: (supabase: SupabaseClient<Database>, server_user_id: number) => void;
   stripServerUserAndRoles: (server_user_id: number) => void;
   removeServerProfile: (profile_id: string, server_id: number) => void;
+  removeProfilesForServerByServerUserId: (server_user_id: number) => void;
 }
 
 const useServerProfilesStore = create<ServerProfilesState>()((set) => ({
@@ -696,6 +697,7 @@ const useServerProfilesStore = create<ServerProfilesState>()((set) => ({
           if (profile.server_user.id === server_user_id) {
             rv.get(server_id)!.get(profile_id)!.server_user = null;
             rv.get(server_id)!.get(profile_id)!.roles = null;
+            break;
           }
         }
       }
@@ -721,6 +723,39 @@ const useServerProfilesStore = create<ServerProfilesState>()((set) => ({
       };
     });
   },
+
+  removeProfilesForServerByServerUserId: async (server_user_id) => {
+    set((state) => {
+      const rv = new Map(state.serverProfiles);
+      let _server_id;
+
+      // Find the server user
+      for (const [server_id, profiles] of rv) {
+        for (const [profile_id, profile] of profiles) {
+          if (!profile.server_user) {
+            continue;
+          }
+
+          if (profile.server_user.id === server_user_id) {
+            _server_id = server_id;
+            const currChannel = useChannelStore.getState().channel;
+
+            if (currChannel && currChannel.server_id === server_id) {
+              useChannelStore.getState().setChannel(null);
+            }
+
+            break;
+          }
+        }
+      }
+
+      if (_server_id) {
+        rv.delete(_server_id);
+      }
+
+      return { serverProfiles: rv };
+    });
+  },
 }));
 
 export const useServers = () => useServerStore((state) => state.servers);
@@ -826,6 +861,7 @@ export const useServerUserProfile = (server_id: number, profile_id: string) => u
 );
 export const useRemoveServerUserProfile = () => useServerProfilesStore((state) => state.removeServerProfile);
 export const useStripServerUserAndRoles = () => useServerProfilesStore((state) => state.stripServerUserAndRoles);
+export const useRemoveProfilesForServerByServerUserId = () => useServerProfilesStore((state) => state.removeProfilesForServerByServerUserId);
 export const useServerUserProfileHighestRolePosition = (server_id: number | null, profile_id: string) => useServerProfilesStore(
   (state) => {
     if (!server_id) {