bug fixes

components/ActiveStatus.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { useActiveChannel } from "@/composables/useActiveChannel";
+const { pusherClient } = useNuxtApp();
+useActiveChannel(pusherClient);
+</script>
+<template></template>

components/conversations/ConversationList.vue

@@ -87,7 +87,7 @@ onUnmounted(() => {
       )
     "
   >
-    <div class="px-5">
+    <div class="px-5 space-y-1">
       <div class="flex justify-between mb-4 pt-4">
         <div class="text-2xl font-bold text-neutral-800">Messages</div>
         <slot />

components/users/UsersList.vue

@@ -13,7 +13,7 @@ const { items } = defineProps<UserListProps>();
   <aside
     class="fixed inset-y-0 pb-20 lg:pb-0 lg:left-20 lg:w-80 lg:block overflow-y-auto border-r border-gray-200 block w-full left-0"
   >
-    <div class="px-5">
+    <div class="px-5 space-y-1">
       <div class="flex-col">
         <div class="text-2xl font-bold text-neutral-800 py-4">People</div>
       </div>

composables/useActiveChannel.ts

@@ -8,25 +8,26 @@ export const useActiveChannel = (pusherClient) => {
     const activeChannel = ref<Channel | null>(null);
 
     onMounted(() => {
-        let channel = activeChannel;
 
-        if (!channel.value) {
+        let channel = activeChannel.value;
+
+        if (!channel) {
             channel = pusherClient.subscribe('presence-messenger');
             activeChannel.value = channel;
         }
 
-        channel.bind("pusher:subscription_succeeded", (members: Members) => {
+        channel?.bind("pusher:subscription_succeeded", (members: Members) => {
             const initialMembers: string[] = [];
 
             members.each((member: Record<string, any>) => initialMembers.push(member.id));
             set(initialMembers);
         });
 
-        channel.bind("pusher:member_added", (member: Record<string, any>) => {
+        channel?.bind("pusher:member_added", (member: Record<string, any>) => {
             add(member.id)
         });
 
-        channel.bind("pusher:member_removed", (member: Record<string, any>) => {
+        channel?.bind("pusher:member_removed", (member: Record<string, any>) => {
             remove(member.id);
         });
     })

layouts/conversations.vue

@@ -21,6 +21,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 </script>
 
 <template>
+  <ActiveStatus />
   <GroupChatModal
     v-if="users"
     :users="users"
@@ -44,7 +45,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 
     <div
       :class="clsx('lg:pl-80 h-full lg:block', isOpen ? 'block' : 'hidden')"
-      v-show="!pending"
+      v-if="!pending"
     >
       <slot />
     </div>

layouts/users.vue

@@ -10,6 +10,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 </script>
 
 <template>
+  <ActiveStatus />
   <Sidebar>
     <UsersList :items="users" />
     <div :class="clsx('lg:pl-80 h-full lg:block', isOpen ? 'block' : 'hidden')">

pages/conversations/index.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import EmptyState from "@/components/EmptyState.vue";
-import { useActiveChannel } from "@/composables/useActiveChannel";
 
 definePageMeta({ middleware: "auth", layout: "conversations" });
-
 useHead({
   title: "Conversations | Messenger",
 });
-
-const { pusherClient } = useNuxtApp();
-
-useActiveChannel(pusherClient);
 </script>
 
 <template>

pages/users/index.vue

@@ -2,12 +2,6 @@
 import EmptyState from "@/components/EmptyState.vue";
 
 definePageMeta({ middleware: "auth", layout: "users" });
-
-import { useActiveChannel } from "@/composables/useActiveChannel";
-
-const { pusherClient } = useNuxtApp();
-useActiveChannel(pusherClient);
-
 useHead({
   title: "Users | Messenger",
 });