Added notification for admin user (#106)

components/NotificationBell.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useAtom } from 'jotai'
+import { coinsAtom, habitsAtom, wishlistAtom, usersAtom } from '@/lib/atoms'
+import { Bell } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import NotificationDropdown from './NotificationDropdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { updateLastNotificationReadTimestamp } from '@/app/actions/data';
+import { d2t, getNow, t2d } from '@/lib/utils';
+import { useHelpers } from '@/lib/client-helpers';
+import { User, CoinTransaction } from '@/lib/types';
+
+export default function NotificationBell() {
+  const { currentUser } = useHelpers();
+  const [coinsData] = useAtom(coinsAtom)
+  const [habitsData] = useAtom(habitsAtom)
+  const [wishlistData] = useAtom(wishlistAtom)
+  const [usersData] = useAtom(usersAtom);
+
+  // --- Calculate Unread and Read Notifications ---
+  const { unreadNotifications, displayedReadNotifications } = useMemo(() => {
+    const unread: CoinTransaction[] = [];
+    const read: CoinTransaction[] = [];
+    const MAX_READ_NOTIFICATIONS = 10; // Limit the number of past notifications shown
+
+    if (!currentUser || !currentUser.id) {
+      return { unreadNotifications: [], displayedReadNotifications: [] };
+    }
+
+    const lastReadTimestamp = currentUser.lastNotificationReadTimestamp
+      ? t2d({ timestamp: currentUser.lastNotificationReadTimestamp, timezone: 'UTC' })
+      : null;
+
+    // Iterate through transactions (assuming they are sorted newest first)
+    for (const tx of coinsData.transactions) {
+      // Stop processing if we have enough read notifications
+      if (read.length >= MAX_READ_NOTIFICATIONS && (!lastReadTimestamp || t2d({ timestamp: tx.timestamp, timezone: 'UTC' }) <= lastReadTimestamp)) {
+        break; // Optimization: stop early if we have enough read and are past the unread ones
+      }
+
+      // Basic checks: must have a related item and be triggered by someone else
+      if (!tx.relatedItemId || tx.userId === currentUser.id) {
+        continue;
+      }
+
+      // Check if the transaction type indicates a notification-worthy event
+      const isRelevantType = tx.type === 'HABIT_COMPLETION' || tx.type === 'TASK_COMPLETION' || tx.type === 'WISH_REDEMPTION';
+      if (!isRelevantType) {
+        continue;
+      }
+
+      // Check if the related item is shared with the current user
+      let isShared = false;
+      const isHabitCompletion = tx.type === 'HABIT_COMPLETION' || tx.type === 'TASK_COMPLETION';
+      const isWishRedemption = tx.type === 'WISH_REDEMPTION';
+
+      if (isHabitCompletion) {
+        const habit = habitsData.habits.find(h => h.id === tx.relatedItemId);
+        if (habit?.userIds?.includes(currentUser.id) && tx.userId && habit.userIds.includes(tx.userId)) {
+          isShared = true;
+        }
+      } else if (isWishRedemption) {
+        const wish = wishlistData.items.find(w => w.id === tx.relatedItemId);
+        if (wish?.userIds?.includes(currentUser.id) && tx.userId && wish.userIds.includes(tx.userId)) {
+          isShared = true;
+        }
+      }
+
+      if (!isShared) {
+        continue; // Skip if not shared
+      }
+
+      // Transaction is relevant, determine if read or unread
+      const txTimestamp = t2d({ timestamp: tx.timestamp, timezone: 'UTC' });
+      if (!lastReadTimestamp || txTimestamp > lastReadTimestamp) {
+        unread.push(tx);
+      } else if (read.length < MAX_READ_NOTIFICATIONS) {
+        // Only add to read if we haven't hit the limit
+        read.push(tx);
+      }
+    }
+
+    // Transactions are assumed to be sorted newest first from the source
+    return { unreadNotifications: unread, displayedReadNotifications: read };
+  }, [coinsData.transactions, habitsData.habits, wishlistData.items, currentUser]);
+  // --- End Calculate Notifications ---
+
+  const unreadCount = unreadNotifications.length;
+
+  const handleNotificationClick = async () => {
+    if (!currentUser || !currentUser.id || unreadCount === 0) return; // Only update if there are unread notifications
+    try {
+      const nowTimestamp = d2t({ dateTime: getNow({}) });
+      await updateLastNotificationReadTimestamp(currentUser.id, nowTimestamp);
+    } catch (error) {
+      console.error("Failed to update notification read timestamp:", error);
+    }
+  };
+
+  return (
+    <DropdownMenu onOpenChange={(open) => {
+      // Update timestamp only when opening the dropdown and there are unread notifications
+      if (open && unreadCount > 0) {
+        handleNotificationClick();
+      }
+    }}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Notifications" className="relative">
+          <Bell className="h-5 w-5" />
+          {unreadCount > 0 && (
+            <span className="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-1 ring-white dark:ring-gray-800" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="p-0 w-80 md:w-96">
+        <NotificationDropdown
+          currentUser={currentUser as User | null} // Cast needed as useHelpers can return undefined initially
+          unreadNotifications={unreadNotifications}
+          displayedReadNotifications={displayedReadNotifications}
+          habitsData={habitsData} // Pass necessary data down
+          wishlistData={wishlistData}
+          usersData={usersData}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}