Tourify Push Notifications and In-App Notification Center

import * as Notifications from "expo-notifications";
import { useCallback, useEffect, useState } from "react";
import { Platform } from "react-native";
import { post } from "../services/post";

// Configure how incoming pushes are handled while the app is foregrounded
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

export function usePushNotifications() {
  const [expoPushToken, setExpoPushToken] = useState(null);
  const [notification, setNotification] = useState(null);

  const registerForPushNotifications = useCallback(async () => {
    // Android requires a notification channel to be configured
    if (Platform.OS === "android") {
      await Notifications.setNotificationChannelAsync("default", {
        name: "default",
        importance: Notifications.AndroidImportance.MAX,
      });
    }

    // Check existing permission status
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;

    // Request permission if not yet granted
    if (existingStatus !== "granted") {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }

    if (finalStatus !== "granted") return; // user denied — skip registration

    // Retrieve the Expo push token for this device
    const tokenData = await Notifications.getExpoPushTokenAsync();
    const token = tokenData.data;
    setExpoPushToken(token);

    try {
      // Register the token with the Tourify backend
      await post("/push-token", { token });
    } catch {
      // Silently fail — push token registration is not critical
    }
  }, []);

  useEffect(() => {
    registerForPushNotifications();

    // Listen for notifications received while the app is open
    const notifSubscription = Notifications.addNotificationReceivedListener(
      (notif) => setNotification(notif),
    );

    return () => notifSubscription.remove();
  }, [registerForPushNotifications]);

  return { expoPushToken, notification };
}

import { useCallback, useEffect, useState } from "react";
import { get, patch } from "../services/post";

export function useNotifications() {
  const [notifications, setNotifications] = useState([]);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setNotifications(await get("/notifications"));
    } catch {
      setNotifications([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { load(); }, [load]);

  // Optimistically marks a single notification as read in local state
  const markAsRead = useCallback(async (id) => {
    await patch(`/notifications/${id}/read`);
    setNotifications((prev) =>
      prev.map((n) => (n.id === id ? { ...n, is_read: true } : n)),
    );
  }, []);

  // Marks all notifications as read in one request
  const markAllAsRead = useCallback(async () => {
    await patch("/notifications/read-all");
    setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })));
  }, []);

  // Derived count — used to display a badge on the notifications tab icon
  const unreadCount = notifications.filter((n) => !n.is_read).length;

  return {
    notifications,
    loading,
    refresh: load,
    markAsRead,
    markAllAsRead,
    unreadCount,
  };
}

const {
  notifications,
  loading,
  markAsRead,
  markAllAsRead,
  unreadCount,
} = useNotifications();

// Display badge count on the tab bar icon
<Tab.Screen
  name="Notifications"
  options={{
    tabBarBadge: unreadCount > 0 ? unreadCount : undefined,
  }}
/>