refactor(countries): use BLoC for country filter

fulleni · fulleni · commit c1f76972b6d9 · 2025-04-14T10:07:10.000+01:00
- Implemented CountriesFilterBloc
- Handles loading, error, and data states
- Enables pagination via BLoC
diff --git a/lib/headlines-feed/view/country_filter_page.dart b/lib/headlines-feed/view/country_filter_page.dart
@@ -1,20 +1,21 @@
-//
 // ignore_for_file: lines_longer_than_80_chars
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:ht_countries_client/ht_countries_client.dart';
-import 'package:ht_countries_repository/ht_countries_repository.dart';
+// Removed repository import: import 'package:ht_countries_repository/ht_countries_repository.dart';
+import 'package:ht_main/headlines-feed/bloc/countries_filter_bloc.dart'; // Import the BLoC
 import 'package:ht_main/l10n/l10n.dart';
 import 'package:ht_main/shared/constants/constants.dart';
 import 'package:ht_main/shared/widgets/widgets.dart'; // For loading/error widgets
 
 /// {@template country_filter_page}
 /// A page dedicated to selecting event countries for filtering headlines.
 ///
-/// Fetches countries paginatively, allows multiple selections, and returns
-/// the selected list via `context.pop` when the user applies the changes.
+/// Uses [CountriesFilterBloc] to fetch countries paginatively, allows multiple
+/// selections, and returns the selected list via `context.pop` when the user
+/// applies the changes.
 /// {@endtemplate}
 class CountryFilterPage extends StatefulWidget {
   /// {@macro country_filter_page}
@@ -26,32 +27,13 @@ class CountryFilterPage extends StatefulWidget {
 
 /// State for the [CountryFilterPage].
 ///
-/// Manages the local selection state ([_pageSelectedCountries]), fetches
-/// countries from the [HtCountriesRepository], handles pagination using a
-/// [ScrollController], and displays loading/error/empty/loaded states.
+/// Manages the local selection state ([_pageSelectedCountries]) and interacts
+/// with [CountriesFilterBloc] for data fetching and pagination.
 class _CountryFilterPageState extends State<CountryFilterPage> {
   /// Stores the countries selected by the user on this page.
   /// Initialized from the `extra` parameter passed during navigation.
   late Set<Country> _pageSelectedCountries;
 
-  /// List of all countries fetched from the repository.
-  List<Country> _allCountries = [];
-
-  /// Flag indicating if the initial country list is being loaded.
-  bool _isLoading = true;
-
-  /// Flag indicating if more countries are being loaded for pagination.
-  bool _isLoadingMore = false;
-
-  /// Flag indicating if more countries are available to fetch.
-  bool _hasMore = true;
-
-  /// Cursor for fetching the next page of countries.
-  String? _cursor;
-
-  /// Stores any error message that occurred during fetching.
-  String? _error;
-
   /// Scroll controller to detect when the user reaches the end of the list
   /// for pagination.
   final _scrollController = ScrollController();
@@ -64,7 +46,8 @@ class _CountryFilterPageState extends State<CountryFilterPage> {
       final initialSelection =
           GoRouterState.of(context).extra as List<Country>?;
       _pageSelectedCountries = Set.from(initialSelection ?? []);
-      _fetchCountries(); // Initial fetch
+      // Request initial countries from the BLoC
+      context.read<CountriesFilterBloc>().add(CountriesFilterRequested());
     });
     _scrollController.addListener(_onScroll);
   }
@@ -77,64 +60,20 @@ class _CountryFilterPageState extends State<CountryFilterPage> {
     super.dispose();
   }
 
-  /// Fetches countries from the [HtCountriesRepository].
-  ///
-  /// Handles both initial fetch and pagination (`loadMore = true`). Updates
-  /// loading states, fetched data ([_allCountries]), pagination info
-  /// ([_cursor], [_hasMore]), and error state ([_error]).
-  Future<void> _fetchCountries({bool loadMore = false}) async {
-    // Prevent unnecessary fetches
-    if (!loadMore && _isLoading) return;
-    if (loadMore && (_isLoadingMore || !_hasMore)) return;
-
-    setState(() {
-      if (loadMore) {
-        _isLoadingMore = true;
-      } else {
-        _isLoading = true;
-        _error = null;
-      }
-    });
-
-    try {
-      // Ensure HtCountriesRepository is provided higher up
-      final repo = context.read<HtCountriesRepository>();
-      // Note: fetchCountries uses 'cursor' which corresponds to 'startAfterId'
-      final response = await repo.fetchCountries(
-        limit: 20, // Adjust limit as needed
-        cursor: loadMore ? _cursor : null,
-      );
-
-      setState(() {
-        if (loadMore) {
-          _allCountries.addAll(response.items);
-        } else {
-          _allCountries = response.items;
-        }
-        _cursor = response.cursor;
-        _hasMore = response.hasMore;
-        _isLoading = false;
-        _isLoadingMore = false;
-      });
-    } catch (e) {
-      setState(() {
-        _isLoading = false;
-        _isLoadingMore = false;
-        _error = e.toString();
-      });
-    }
-  }
-
   /// Callback function for scroll events.
   ///
   /// Checks if the user has scrolled near the bottom of the list and triggers
-  /// fetching more countries if available.
+  /// fetching more countries via the BLoC if available.
   void _onScroll() {
     if (!_scrollController.hasClients) return;
     final maxScroll = _scrollController.position.maxScrollExtent;
     final currentScroll = _scrollController.offset;
-    if (currentScroll >= (maxScroll * 0.9) && _hasMore && !_isLoadingMore) {
-      _fetchCountries(loadMore: true);
+    final bloc = context.read<CountriesFilterBloc>();
+    // Fetch more when nearing the bottom, if BLoC has more and isn't already loading more
+    if (currentScroll >= (maxScroll * 0.9) &&
+        bloc.state.hasMore &&
+        bloc.state.status != CountriesFilterStatus.loadingMore) {
+      bloc.add(CountriesFilterLoadMoreRequested());
     }
   }
 
@@ -155,65 +94,98 @@ class _CountryFilterPageState extends State<CountryFilterPage> {
           ),
         ],
       ),
-      body: _buildBody(context),
+      // Use BlocBuilder to react to state changes from CountriesFilterBloc
+      body: BlocBuilder<CountriesFilterBloc, CountriesFilterState>(
+        builder: (context, state) {
+          return _buildBody(context, state);
+        },
+      ),
     );
   }
 
-  /// Builds the main content body based on the current loading/error/data state.
-  Widget _buildBody(BuildContext context) {
+  /// Builds the main content body based on the current [CountriesFilterState].
+  Widget _buildBody(BuildContext context, CountriesFilterState state) {
     final l10n = context.l10n;
-    if (_isLoading) {
-      // Show initial loading indicator
+
+    // Handle initial loading state
+    if (state.status == CountriesFilterStatus.loading) {
       return LoadingStateWidget(
-        icon: Icons.public_outlined,
-        headline: l10n.countryFilterLoadingHeadline,
-        subheadline: l10n.countryFilterLoadingSubheadline,
+        icon: Icons.public_outlined, // Changed icon
+        headline: l10n.countryFilterLoadingHeadline, // Assumes this exists
+        subheadline: l10n.countryFilterLoadingSubheadline, // Assumes this exists
       );
     }
 
-    if (_error != null) {
-      return FailureStateWidget(message: _error!, onRetry: _fetchCountries);
+    // Handle failure state (show error and retry button)
+    if (state.status == CountriesFilterStatus.failure &&
+        state.countries.isEmpty) {
+      return FailureStateWidget(
+        message: state.error?.toString() ?? l10n.unknownError, // Assumes this exists
+        onRetry: () =>
+            context.read<CountriesFilterBloc>().add(CountriesFilterRequested()),
+      );
     }
 
-    if (_allCountries.isEmpty) {
+    // Handle empty state (after successful load but no countries found)
+    if (state.status == CountriesFilterStatus.success &&
+        state.countries.isEmpty) {
       return InitialStateWidget(
         icon: Icons.search_off,
-        headline: l10n.countryFilterEmptyHeadline,
-        subheadline: l10n.countryFilterEmptySubheadline,
+        headline: l10n.countryFilterEmptyHeadline, // Assumes this exists
+        subheadline: l10n.countryFilterEmptySubheadline, // Assumes this exists
       );
     }
 
+    // Handle loaded state (success or loading more)
     return ListView.builder(
       controller: _scrollController,
       padding: const EdgeInsets.only(bottom: AppSpacing.xxl),
-      itemCount: _allCountries.length + (_hasMore ? 1 : 0),
+      itemCount: state.countries.length +
+          ((state.status == CountriesFilterStatus.loadingMore ||
+                  (state.status == CountriesFilterStatus.failure &&
+                      state.countries.isNotEmpty))
+              ? 1
+              : 0),
       itemBuilder: (context, index) {
-        if (index >= _allCountries.length) {
-          return _isLoadingMore
-              ? const Padding(
-                padding: EdgeInsets.symmetric(vertical: AppSpacing.lg),
-                child: Center(child: CircularProgressIndicator()),
-              )
-              : const SizedBox.shrink();
+        if (index >= state.countries.length) {
+          if (state.status == CountriesFilterStatus.loadingMore) {
+            return const Padding(
+              padding: EdgeInsets.symmetric(vertical: AppSpacing.lg),
+              child: Center(child: CircularProgressIndicator()),
+            );
+          } else if (state.status == CountriesFilterStatus.failure) {
+            return Padding(
+              padding: const EdgeInsets.symmetric(
+                vertical: AppSpacing.md,
+                horizontal: AppSpacing.lg,
+              ),
+              child: Center(
+                child: Text(
+                  l10n.loadMoreError, // Assumes this exists
+                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                        color: Theme.of(context).colorScheme.error,
+                      ),
+                ),
+              ),
+            );
+          } else {
+            return const SizedBox.shrink();
+          }
         }
 
-        final country = _allCountries[index];
+        final country = state.countries[index];
         final isSelected = _pageSelectedCountries.contains(country);
 
-        // Show country flag
         return CheckboxListTile(
           title: Text(country.name),
-          secondary: SizedBox(
-            width: 40, // Consistent size
-            height: 40,
+          secondary: SizedBox( // Use SizedBox for consistent flag size
+            width: 40,
+            height: 30, // Adjust height for flag aspect ratio if needed
             child: Image.network(
               country.flagUrl,
               fit: BoxFit.contain,
-              // Add error builder for network images
-              errorBuilder:
-                  (context, error, stackTrace) => const Icon(
-                    Icons.flag_circle_outlined,
-                  ), // Placeholder icon
+              errorBuilder: (context, error, stackTrace) =>
+                  const Icon(Icons.flag_outlined), // Placeholder icon
             ),
           ),
           value: isSelected,
