"use client"; import { Bell } from "lucide-react"; import { useEffect, useState, useMemo, useCallback } from "react"; import { Button } from "../../ui/button"; import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover"; import { ScrollArea } from "../../ui/scroll-area"; import { Skeleton } from "../../ui/skeleton"; import { debounce } from "lodash"; import { getUnreadNotifications, markAllNotificationsAsRead, } from "@/lib/actions/notifications.actions"; import { NotificationType } from "@/types/notifications"; import React from "react"; import { createSupabaseClient } from "@/lib/supabase"; import { NotificationItem } from "./notificationItem"; import { markNotificationAsReadClient } from "@/lib/actions/notifications.client"; import { useRouter } from "next/navigation"; import { toCamelCase } from "@/lib/helpers"; const supabase = createSupabaseClient() export function Notifications({ userId, data }: { userId: string, data: NotificationType[] }) { const router = useRouter(); const [notifications, setNotifications] = useState < NotificationType[] > (data); const [loading, setLoading] = useState(false); const [isOpen, setIsOpen] = useState(false); //console.log({ notifications }, { data }) const unreadNotifications = useMemo( () => notifications.filter((n) => !n.isRead), [notifications] ); const unreadCount = unreadNotifications.length; const loadNotifications = async () => { const { data } = await getUnreadNotifications(userId, { limit: 50 }); // setNotifications(data); } useEffect(() => { // try { // loadNotifications() // } // catch (error) { // //console.log({ error }) // } // finally { // setLoading(false) // } // getUnreadNotifications(userId, { limit: 40 }).then(setNotifications).catch(console.error); const handleNewNotification = debounce((payload: any) => { //console.log({ payload }) setNotifications(prev => [{ ...payload.new, snippetId: payload.new.snippet_id, collectionId: payload.new.collection_id, metadata: payload.new.metadata, sender: toCamelCase(payload.new.metadata.sender), createdAt: new Date(payload.new.created_at).toISOString(), isRead: !!payload.new.read_at, actor: payload.new.sender, snippet: payload.new.snippet, collection: payload.new.collection, actionType: payload.new.type }, ...prev]); }, 300); const channel = supabase .channel(`realtime-notifications-${userId}`) .on( "postgres_changes", { event: "INSERT", schema: "public", table: "notifications", filter: `user_id=eq.${userId}`, }, handleNewNotification ) .subscribe(); return () => { supabase.removeChannel(channel); handleNewNotification.cancel(); }; }, []); const handleMarkAsRead = async (id: string) => { try { await markNotificationAsReadClient(id); setNotifications(prev => prev.map(n => n.id === id ? { ...n, isRead: true } : n) ); } catch (error) { //console.log({ error }) console.error("Failed to mark notification as read:", error); } }; const handleMarkAllAsRead = async () => { try { await markAllNotificationsAsRead(userId); setNotifications(prev => prev.map(n => ({ ...n, isRead: true })) ); } catch (error) { console.error("Failed to mark all notifications as read:", error); } }; const handleNotificationClick = async (id: string) => { const notification = notifications.find((n) => n.id === id); if (!notification) return; await handleMarkAsRead(id); if (notification.snippetId) { router.push(`/snippets/${notification.snippetId}`); } else if (notification.collectionId) { router.push(`/collections/${notification.collectionId}`); } }; return (

Notifications

{loading ? (

{[...Array(5)].map((_, i) => (

))}

) : notifications.length === 0 ? (

No notifications yet

) : (

{notifications.map((notification) => ( ))}

)} {notifications.length > 0 && (

)} ); }

Shadcn Notification