Fixed supabase channel conflicts

app/components/global/user/CTA.vue

@@ -57,9 +57,9 @@ function pushRoute(to: AvailableRoutes) {
 <template>
   <ClientOnly>
     <UiDropdownMenu v-model:open="menuOpened">
-      <UiDropdownMenuTrigger>
+      <UiDropdownMenuTrigger class="aspect-square">
-        <TransitionGroup name="fade-group" class="transition-group" appear>
+        <TransitionGroup name="fade-group" appear>
-          <UiAvatar v-if="user" id="user-avatar" class="aspect-square ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer">
+          <UiAvatar v-if="user" id="user-avatar" class="ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer">
             <UiAvatarImage
               :src="userMeta?.avatar_url"
               :alt="userMeta?.full_name"
@@ -69,7 +69,7 @@ function pushRoute(to: AvailableRoutes) {
               {{ $t('ui.sidebarMenu.avatarFallback') }}
             </UiAvatarFallback>
           </UiAvatar>
-          <UiButton v-else variant="outline" size="icon" class="aspect-square ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
+          <UiButton v-else variant="outline" size="icon" class="ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
             <PhUserCircle size="24" />
           </UiButton>
         </TransitionGroup>

app/pages/my/index.vue

@@ -9,10 +9,10 @@ definePageMeta({
   middleware: ["auth-guard", "reset-menu"]
 })
 
-const { data: worlds, status: worldStatus } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId:  user?.value!.id }, key: "user-worlds", keepalive: true })
+const { data: worlds, status: worldStatus, refresh } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId:  user?.value!.id }, key: "user-worlds", keepalive: true })
-const sortedWorlds = computed(() => worlds.value?.data ? [...worlds.value.data].sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : [])
+const sortedWorlds = computed(() => worlds.value?.data ? worlds.value.data.sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : [])
 
-const isLoading = computed(() => worldStatus.value === "idle")
+const isLoading = computed(() => worldStatus.value === "pending")
 
 // Redirect user back home when they log out on the page
 watch(user, (n) => {
@@ -33,49 +33,13 @@ function hideCreateDialog() {
 /** Active world channel */
 let worldChannel: RealtimeChannel
 
-/** Handles world insertion realtime events */
-function handleInsertedWorld(newWorld: WorldChannelPayload) {
-  if (!worlds.value?.data) return
-
-  newWorld.createdAt = newWorld.created_at;
-  newWorld.gmId = newWorld.gm_id;
-
-  worlds.value?.data.push(newWorld)
-}
-
-/** Handles world deletion realtime events */
-function handleDeletedWorld(id: number) {
-  if (!worlds.value?.data) return
-
-  worlds.value.data.splice(worlds.value.data.findIndex(w => w.id === id), 1)
-}
-
 onMounted(() => {
-  worldChannel = supabase.channel("realtime-world-channel")
+  worldChannel = supabase.channel("realtime-worlds-channel")
     .on(
       "postgres_changes",
       { event: "*", schema: "public", table: "worlds" },
       async (payload) => {
-        switch (payload.eventType) {
+        refresh()
-          case "INSERT":
-            handleInsertedWorld(payload.new as World)
-            break
-
-          case "DELETE":
-            handleDeletedWorld(payload.old.id)
-            break
-
-          case "UPDATE":
-            if (!worlds.value?.data) return
-
-            worlds.value.data = (await $fetch("/api/worlds/query", { query: { gmId: user?.value!.id } })).data as World[]
-            break
-
-          default:
-            console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
-            console.log(payload)
-            break
-        }
       }
     )
     .subscribe()

app/pages/my/worlds/[id].vue

@@ -8,7 +8,7 @@ const supabase = useSupabaseClient()
 const route = useRoute()
 const id = route.params.id
 
-const { data: world, status } = await useFetch<{ data: World }>("/api/worlds/query", { query: { id, full: true } })
+const { data: world, status, refresh } = await useLazyFetch<{ data: World }>("/api/worlds/query", { query: { id, full: true }, key: "user-world", keepalive: true })
 const sortedCalendars = computed(() => world.value?.data.calendars ? [...world.value.data.calendars].sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : [])
 
 definePageMeta({
@@ -24,72 +24,22 @@ watch(user, (n) => {
   }
 })
 
-// Set custom menu
-// This should be reserved for actions, not for breadcrumbs
-//
-// const { setCurrentMenu } = useUiStore()
-
-// setCurrentMenu([
-//   {
-//     tooltip: t("entity.world.backToMy"),
-//     to: "/my",
-//     phIcon: "universe",
-//     highlight: true
-//   },
-// ])
-
 /**
  * === Subscriptions ===
  */
-
 /** Active calendar channel */
 let calendarChannel: RealtimeChannel
 /** Active world channel */
 let worldChannel: RealtimeChannel
 
-/** Handles calendar insertion realtime events */
-function handleInsertedCalendar(newCalendar: CalendarChannelPayload) {
-  if (!world.value) return
-
-  newCalendar.createdAt = newCalendar.created_at
-  newCalendar.eventNb = [{ count: 0 }]
-
-  world.value.data.calendars?.push(newCalendar)
-}
-
-/** Handles calendar deletion realtime events */
-function handleDeletedCalendar(id: number) {
-  if (!world.value) return
-
-  world.value.data.calendars?.splice(world.value.data.calendars.findIndex(c => c.id === id), 1)
-}
-
 onMounted(() => {
   calendarChannel = supabase.channel("realtime-calendar-channel")
     .on(
       "postgres_changes",
       { event: "*", schema: "public", table: "calendars" },
       async (payload) => {
-        switch (payload.eventType) {
+        console.log("refresh")
-          case "INSERT":
+        refresh()
-            handleInsertedCalendar(payload.new as Calendar)
-            break
-
-          case "DELETE":
-            handleDeletedCalendar(payload.old.id)
-            break
-
-          // Maybe this case could be handled better than doing a separate API call
-          case "UPDATE":
-            if (!world.value?.data) return
-
-            world.value.data = (await $fetch<{ data: World }>("/api/worlds/query", { query: { id, full: true } })).data
-            break
-
-          default:
-            console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
-            break
-        }
       }
     )
     .subscribe()
@@ -105,18 +55,7 @@ onMounted(() => {
       "postgres_changes",
       { event: "*", schema: "public", table: "worlds" },
       async (payload) => {
-        switch (payload.eventType) {
+        refresh()
-          case "UPDATE":
-            if (!world.value?.data) return
-
-            world.value.data = (await $fetch<{ data: World }>("/api/worlds/query", { query: { id, full: true } })).data
-            break
-
-          default:
-            console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
-            console.log(payload)
-            break
-        }
       }
     )
     .subscribe()