Merge pull request #214 from flutter-news-app-full-source-code/feat/in-app-notification-center

Feat/in app notification center

Author: fulleni

README.md

@@ -50,7 +50,7 @@ A robust, backend-driven notification system keeps users informed and brings the
 - **Multi-Provider Architecture:** Built on an abstraction that supports any push notification service. It ships with production-ready providers for Firebase (FCM) and OneSignal.
 - **Remote Provider Switching:** The primary notification provider is selected via remote configuration, allowing you to switch services on the fly without shipping an app update.
 - **Intelligent Deep-Linking:** Tapping a notification opens the app and navigates directly to the relevant content, such as a specific news article, providing a seamless user experience.
-- **Foreground Notification Handling:** Displays a subtle in-app indicator when a notification arrives while the user is active, avoiding intrusive alerts.
+- **Integrated Notification Center:** Includes a full-featured in-app notification center where users can view their history. Foreground notifications are handled gracefully, appearing as an unread indicator that leads the user to this central hub, avoiding intrusive system alerts during active use.
 > **Your Advantage:** You get a highly flexible and scalable notification system that avoids vendor lock-in and is ready to re-engage users from day one.
 
 </details>

lib/account/bloc/in_app_notification_center_bloc.dart

@@ -0,0 +1,283 @@
+import 'dart:async';
+
+import 'package:bloc/bloc.dart';
+import 'package:collection/collection.dart';
+import 'package:core/core.dart';
+import 'package:data_repository/data_repository.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/app/bloc/app_bloc.dart';
+import 'package:logging/logging.dart';
+
+part 'in_app_notification_center_event.dart';
+part 'in_app_notification_center_state.dart';
+
+/// {@template in_app_notification_center_bloc}
+/// Manages the state for the in-app notification center.
+///
+/// This BLoC is responsible for fetching the user's notifications,
+/// handling actions to mark them as read individually or in bulk, and
+/// coordinating with the global [AppBloc] to update the unread status
+/// indicator across the app.
+/// {@endtemplate}
+class InAppNotificationCenterBloc
+    extends Bloc<InAppNotificationCenterEvent, InAppNotificationCenterState> {
+  /// {@macro in_app_notification_center_bloc}
+  InAppNotificationCenterBloc({
+    required DataRepository<InAppNotification> inAppNotificationRepository,
+    required AppBloc appBloc,
+    required Logger logger,
+  }) : _inAppNotificationRepository = inAppNotificationRepository,
+       _appBloc = appBloc,
+       _logger = logger,
+       super(const InAppNotificationCenterState()) {
+    on<InAppNotificationCenterSubscriptionRequested>(_onSubscriptionRequested);
+    on<InAppNotificationCenterMarkedAsRead>(_onMarkedAsRead);
+    on<InAppNotificationCenterMarkAllAsRead>(_onMarkAllAsRead);
+    on<InAppNotificationCenterTabChanged>(_onTabChanged);
+    on<InAppNotificationCenterMarkOneAsRead>(_onMarkOneAsRead);
+  }
+
+  final DataRepository<InAppNotification> _inAppNotificationRepository;
+  final AppBloc _appBloc;
+  final Logger _logger;
+
+  /// Handles the request to load all notifications for the current user.
+  Future<void> _onSubscriptionRequested(
+    InAppNotificationCenterSubscriptionRequested event,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    emit(state.copyWith(status: InAppNotificationCenterStatus.loading));
+
+    final userId = _appBloc.state.user?.id;
+    if (userId == null) {
+      _logger.warning('Cannot fetch notifications: user is not logged in.');
+      emit(state.copyWith(status: InAppNotificationCenterStatus.failure));
+      return;
+    }
+
+    try {
+      final response = await _inAppNotificationRepository.readAll(
+        userId: userId,
+        sort: [const SortOption('createdAt', SortOrder.desc)],
+      );
+
+      final allNotifications = response.items;
+
+      final breakingNews = <InAppNotification>[];
+      final digests = <InAppNotification>[];
+
+      // Filter notifications into their respective categories, prioritizing
+      // 'notificationType' from the backend, then falling back to 'contentType'.
+      for (final n in allNotifications) {
+        final notificationType = n.payload.data['notificationType'] as String?;
+        final contentType = n.payload.data['contentType'] as String?;
+
+        if (notificationType ==
+                PushNotificationSubscriptionDeliveryType.dailyDigest.name ||
+            notificationType ==
+                PushNotificationSubscriptionDeliveryType.weeklyRoundup.name ||
+            contentType == 'digest') {
+          digests.add(n);
+        } else {
+          // All other types (including 'breakingOnly' notificationType,
+          // 'headline' contentType, or any unknown types) go to breaking news.
+          breakingNews.add(n);
+        }
+      }
+
+      emit(
+        state.copyWith(
+          status: InAppNotificationCenterStatus.success,
+          breakingNewsNotifications: breakingNews,
+          digestNotifications: digests,
+        ),
+      );
+    } on HttpException catch (e, s) {
+      _logger.severe('Failed to fetch in-app notifications.', e, s);
+      emit(
+        state.copyWith(status: InAppNotificationCenterStatus.failure, error: e),
+      );
+    } catch (e, s) {
+      _logger.severe(
+        'An unexpected error occurred while fetching in-app notifications.',
+        e,
+        s,
+      );
+      emit(
+        state.copyWith(
+          status: InAppNotificationCenterStatus.failure,
+          error: UnknownException(e.toString()),
+        ),
+      );
+    }
+  }
+
+  /// Handles the event to change the active tab.
+  Future<void> _onTabChanged(
+    InAppNotificationCenterTabChanged event,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    emit(state.copyWith(currentTabIndex: event.tabIndex));
+  }
+
+  /// Handles marking a single notification as read.
+  Future<void> _onMarkedAsRead(
+    InAppNotificationCenterMarkedAsRead event,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    final notification = state.notifications.firstWhereOrNull(
+      (n) => n.id == event.notificationId,
+    );
+
+    await _markOneAsRead(notification, emit);
+  }
+
+  /// Handles marking a single notification as read from a deep-link.
+  Future<void> _onMarkOneAsRead(
+    InAppNotificationCenterMarkOneAsRead event,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    final notification = state.notifications.firstWhereOrNull(
+      (n) => n.id == event.notificationId,
+    );
+
+    if (notification == null) {
+      _logger.warning(
+        'Attempted to mark a notification as read that does not exist in the '
+        'current state: ${event.notificationId}',
+      );
+      return;
+    }
+
+    // If already read, do nothing.
+    if (notification.isRead) return;
+
+    await _markOneAsRead(notification, emit);
+  }
+
+  /// A shared helper method to mark a single notification as read.
+  ///
+  /// This is used by both [_onMarkedAsRead] (from the notification center UI)
+  /// and [_onMarkOneAsRead] (from a deep-link).
+  Future<void> _markOneAsRead(
+    InAppNotification? notification,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    if (notification == null) return;
+    final updatedNotification = notification.copyWith(readAt: DateTime.now());
+
+    try {
+      await _inAppNotificationRepository.update(
+        id: notification.id,
+        item: updatedNotification,
+        userId: _appBloc.state.user?.id,
+      );
+
+      // Update the local state to reflect the change immediately.
+      final updatedBreakingNewsList = state.breakingNewsNotifications
+          .map((n) => n.id == notification.id ? updatedNotification : n)
+          .toList();
+
+      final updatedDigestList = state.digestNotifications
+          .map((n) => n.id == notification.id ? updatedNotification : n)
+          .toList();
+
+      emit(
+        state.copyWith(
+          breakingNewsNotifications: updatedBreakingNewsList,
+          digestNotifications: updatedDigestList,
+        ),
+      );
+
+      // Notify the global AppBloc to re-check the unread count.
+      _appBloc.add(const AppInAppNotificationMarkedAsRead());
+    } on HttpException catch (e, s) {
+      _logger.severe(
+        'Failed to mark notification ${notification.id} as read.',
+        e,
+        s,
+      );
+      emit(
+        state.copyWith(status: InAppNotificationCenterStatus.failure, error: e),
+      );
+      // Do not revert state to avoid UI flicker. The error is logged.
+    } catch (e, s) {
+      _logger.severe(
+        'An unexpected error occurred while marking notification as read.',
+        e,
+        s,
+      );
+      emit(
+        state.copyWith(
+          status: InAppNotificationCenterStatus.failure,
+          error: UnknownException(e.toString()),
+        ),
+      );
+    }
+  }
+
+  /// Handles marking all unread notifications as read.
+  Future<void> _onMarkAllAsRead(
+    InAppNotificationCenterMarkAllAsRead event,
+    Emitter<InAppNotificationCenterState> emit,
+  ) async {
+    final unreadNotifications = state.notifications
+        .where((n) => !n.isRead)
+        .toList();
+
+    if (unreadNotifications.isEmpty) return;
+
+    final now = DateTime.now();
+    final updatedNotifications = unreadNotifications
+        .map((n) => n.copyWith(readAt: now))
+        .toList();
+
+    try {
+      // Perform all updates in parallel.
+      await Future.wait(
+        updatedNotifications.map(
+          (n) => _inAppNotificationRepository.update(
+            id: n.id,
+            item: n,
+            userId: _appBloc.state.user?.id,
+          ),
+        ),
+      );
+
+      // Update local state with all notifications marked as read.
+      final fullyUpdatedBreakingNewsList = state.breakingNewsNotifications
+          .map((n) => n.isRead ? n : n.copyWith(readAt: now))
+          .toList();
+
+      final fullyUpdatedDigestList = state.digestNotifications
+          .map((n) => n.isRead ? n : n.copyWith(readAt: now))
+          .toList();
+      emit(
+        state.copyWith(
+          breakingNewsNotifications: fullyUpdatedBreakingNewsList,
+          digestNotifications: fullyUpdatedDigestList,
+        ),
+      );
+
+      // Notify the global AppBloc to clear the unread indicator.
+      _appBloc.add(const AppAllInAppNotificationsMarkedAsRead());
+    } on HttpException catch (e, s) {
+      _logger.severe('Failed to mark all notifications as read.', e, s);
+      emit(
+        state.copyWith(status: InAppNotificationCenterStatus.failure, error: e),
+      );
+    } catch (e, s) {
+      _logger.severe(
+        'An unexpected error occurred while marking all notifications as read.',
+        e,
+        s,
+      );
+      emit(
+        state.copyWith(
+          status: InAppNotificationCenterStatus.failure,
+          error: UnknownException(e.toString()),
+        ),
+      );
+    }
+  }
+}

lib/account/bloc/in_app_notification_center_event.dart

@@ -0,0 +1,57 @@
+part of 'in_app_notification_center_bloc.dart';
+
+/// Base class for all events in the [InAppNotificationCenterBloc].
+abstract class InAppNotificationCenterEvent extends Equatable {
+  const InAppNotificationCenterEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+/// Dispatched when the notification center is opened and needs to load
+/// the initial list of notifications.
+class InAppNotificationCenterSubscriptionRequested
+    extends InAppNotificationCenterEvent {
+  const InAppNotificationCenterSubscriptionRequested();
+}
+
+/// Dispatched when a single in-app notification is marked as read.
+class InAppNotificationCenterMarkedAsRead extends InAppNotificationCenterEvent {
+  const InAppNotificationCenterMarkedAsRead(this.notificationId);
+
+  /// The ID of the notification to be marked as read.
+  final String notificationId;
+
+  @override
+  List<Object> get props => [notificationId];
+}
+
+/// Dispatched when the user requests to mark all notifications as read.
+class InAppNotificationCenterMarkAllAsRead
+    extends InAppNotificationCenterEvent {
+  const InAppNotificationCenterMarkAllAsRead();
+}
+
+/// Dispatched when the user changes the selected tab in the notification center.
+class InAppNotificationCenterTabChanged extends InAppNotificationCenterEvent {
+  const InAppNotificationCenterTabChanged(this.tabIndex);
+
+  /// The index of the newly selected tab. 0: Breaking News, 1: Digests.
+  final int tabIndex;
+
+  @override
+  List<Object> get props => [tabIndex];
+}
+
+/// Dispatched when a single in-app notification is marked as read by its ID,
+/// typically from a deep-link without navigating from the notification center.
+class InAppNotificationCenterMarkOneAsRead
+    extends InAppNotificationCenterEvent {
+  const InAppNotificationCenterMarkOneAsRead(this.notificationId);
+
+  /// The ID of the notification to be marked as read.
+  final String notificationId;
+
+  @override
+  List<Object> get props => [notificationId];
+}