<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { useNotificationStore } from '@/stores/notificationStore';
import { Notification } from '@/Types/types';

const props = defineProps<{
    userId: number;
}>();

interface NotificationPayload {
    notification: Notification;
}

const store = useNotificationStore();
let channel: ReturnType<typeof window.Echo.private> | null = null;

onMounted(() => {
    channel = window.Echo.private(`App.Models.User.${props.userId}`)
        .listen('.notification.created', (e: NotificationPayload) => {
            store.push(e.notification);
        });
});

onUnmounted(() => {
    channel?.stopListening('.notification.created');
    window.Echo.leave(`App.Models.User.${props.userId}`);
});
</script>

<template></template>
