realtime insert channel

Author: Stan-l-e-y

hooks/useRealtimeStore.ts

@@ -1,4 +1,4 @@
-import { ServerUser, Server } from '@/types/dbtypes';
+import { ServerUser, Server, Channel } from '@/types/dbtypes';
 import {
   useAddMessage,
   useAddServer,
@@ -8,7 +8,9 @@ import {
   useGetUserPerms,
   useMessages,
   useRemoveMessage,
+  useServers,
   useUpdateMessage,
+  useUpdateServer,
 } from '@/lib/store';
 import { useEffect } from 'react';
 import { Database } from '@/types/database.supabase';
@@ -20,6 +22,8 @@ import { ChannelPermissions as ChannelPermissionsTableType } from '@/types/dbtyp
 export function useRealtimeStore(supabase: SupabaseClient<Database>) {
   const addServer = useAddServer();
   const getServers = useGetServers();
+  const servers = useServers();
+  const updateServer = useUpdateServer();
 
   const messages = useMessages();
   const addMessage = useAddMessage();
@@ -36,6 +40,7 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
 
   useEffect(() => {
     //this condition makes sure that the functions in the store are initialized, realistically it can be any function, I just chose addServer
+
     if (addServer) {
       supabase
         .channel('server_users')
@@ -90,23 +95,26 @@ export function useRealtimeStore(supabase: SupabaseClient<Database>) {
 
       supabase
         .channel('channels')
-        .on<Server>(
+        .on<Channel>(
           'postgres_changes',
           { event: 'INSERT', schema: 'public', table: 'channels' },
           async (payload) => {
-            console.log('update');
+            console.log('insert channel');
+            const server = servers.find(
+              (server) => server.server_id == payload.new.server_id
+            );
 
-            if (user) {
-              getServers(supabase, user.id);
+            if (server) {
+              updateServer(supabase, server.server_id);
             }
           }
         )
         .subscribe();
     }
 
     // add return right here!
-    // return serverUsersListener.unsubscribe();
-  }, [addServer, supabase, user, getServers]);
+    // return serverUsersListener.unsubscribe();;
+  }, [addServer, supabase, user, getServers, servers, updateServer]);
 
   useEffect(() => {
     if (addMessage && getUserPerms && channel) {

lib/store.ts

@@ -47,14 +47,9 @@ const useServerStore = create<ServerState>()((set) => ({
     }
   },
   removeServer: async (serverId) => {
-    set(
-      (state) => ({
-        servers: state.servers.filter(
-          (server) => server.server_id !== serverId
-        ),
-      }),
-      true
-    );
+    set((state) => ({
+      servers: state.servers.filter((server) => server.server_id !== serverId),
+    }));
   },
   getServers: async (supabase, userId) => {
     const { data, error } = await getServersForUser(supabase, userId);
@@ -64,7 +59,7 @@ const useServerStore = create<ServerState>()((set) => ({
     }
 
     if (data) {
-      set({ servers: data as ServersForUser[] }, true);
+      set({ servers: data as ServersForUser[] });
     }
   },
   updateServer: async (supabase, serverId) => {
@@ -78,13 +73,12 @@ const useServerStore = create<ServerState>()((set) => ({
     if (data) {
       set((state) => ({
         servers: state.servers.map((server) => {
-          // Once we hit a message that matches the id, we can return the updated message instead of the old one
+          // Once we hit a server that matches the id, we can return the updated server instead of the old one
           if (server.server_id === data[0].id) {
-            return data as MessageWithServerProfile;
+            return { server_id: serverId, servers: data[0] };
           }
-
           // Otherwise fallback to the old one
-          return message;
+          return server;
         }),
       }));
     }
@@ -232,6 +226,8 @@ export const useServers = () => useServerStore((state) => state.servers);
 export const useAddServer = () => useServerStore((state) => state.addServer);
 export const useRemoveServer = () =>
   useServerStore((state) => state.removeServer);
+export const useUpdateServer = () =>
+  useServerStore((state) => state.updateServer);
 export const useGetServers = () => useServerStore((state) => state.getServers);
 export const useMessages = () => useMessagesStore((state) => state.messages);
 export const useGetMessages = () =>