Add genre selection functionality to HomeCubit and update HomePage UI

Author: winechit-dev

lib/app/cubit/home_cubit.dart

@@ -1,10 +1,12 @@
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:tmdb_flutter/app/data/repository/movies_repository.dart';
 import 'package:tmdb_flutter/app/cubit/home_state.dart';
+import 'package:tmdb_flutter/app/data/remote/models/movie_responses.dart';
 
 class HomeCubit extends Cubit<HomeState> {
   HomeCubit(this._repository) : super(HomeInitial());
   final MoviesRepository _repository;
+
   MoviesRepository get repository => _repository;
 
   Future<void> loadHomeData() async {
@@ -22,13 +24,38 @@ class HomeCubit extends Cubit<HomeState> {
           popularMovies: popularMovies,
           upcomingMovies: upcomingMovies,
           genres: genres,
+          selectedGenreId: null,
+          filteredTrending: trendingMovies.results,
+          filteredPopular: popularMovies.results,
+          filteredUpcoming: upcomingMovies.results,
         ),
       );
     } catch (e) {
       emit(HomeError(e.toString()));
     }
   }
 
+  void selectGenre(int? genreId) {
+    if (state is HomeLoaded) {
+      final loaded = state as HomeLoaded;
+      List<Movie> filter(List<Movie> movies) => genreId == null
+          ? movies
+          : movies
+              .where((m) => m.genreIds?.contains(genreId) ?? false)
+              .toList();
+      emit(HomeLoaded(
+        trendingMovies: loaded.trendingMovies,
+        popularMovies: loaded.popularMovies,
+        upcomingMovies: loaded.upcomingMovies,
+        genres: loaded.genres,
+        selectedGenreId: genreId,
+        filteredTrending: filter(loaded.trendingMovies.results),
+        filteredPopular: filter(loaded.popularMovies.results),
+        filteredUpcoming: filter(loaded.upcomingMovies.results),
+      ));
+    }
+  }
+
   Future<void> refreshHomeData() async {
     await loadHomeData();
   }

lib/app/cubit/home_state.dart

@@ -18,16 +18,32 @@ class HomeLoaded extends HomeState {
     required this.popularMovies,
     required this.upcomingMovies,
     required this.genres,
+    required this.filteredTrending,
+    required this.filteredPopular,
+    required this.filteredUpcoming,
+    this.selectedGenreId,
   });
 
   final MoviesResponse trendingMovies;
   final MoviesResponse popularMovies;
   final MoviesResponse upcomingMovies;
   final GenresResponse genres;
+  final int? selectedGenreId;
+  final List<Movie> filteredTrending;
+  final List<Movie> filteredPopular;
+  final List<Movie> filteredUpcoming;
 
   @override
-  List<Object?> get props =>
-      [trendingMovies, popularMovies, upcomingMovies, genres];
+  List<Object?> get props => [
+        trendingMovies,
+        popularMovies,
+        upcomingMovies,
+        genres,
+        selectedGenreId,
+        filteredTrending,
+        filteredPopular,
+        filteredUpcoming
+      ];
 }
 
 class HomeError extends HomeState {

lib/app/view/home_page.dart

@@ -48,6 +48,9 @@ class HomePage extends StatelessWidget {
           }
 
           if (state is HomeLoaded) {
+            final genres = state.genres.genres;
+            final selectedGenreId = state.selectedGenreId;
+
             return RefreshIndicator(
               onRefresh: () => context.read<HomeCubit>().refreshHomeData(),
               child: SingleChildScrollView(
@@ -107,12 +110,19 @@ class HomePage extends StatelessWidget {
                         height: 36,
                         child: ListView.builder(
                           scrollDirection: Axis.horizontal,
-                          itemCount: state.genres.genres.length,
+                          itemCount: genres.length,
                           itemBuilder: (context, index) {
-                            final genre = state.genres.genres[index];
+                            final genre = genres[index];
                             return _CategoryChip(
                               label: genre.name,
-                              selected: index == 0,
+                              selected: genre.id == selectedGenreId,
+                              onSelected: (selected) {
+                                if (selected) {
+                                  context
+                                      .read<HomeCubit>()
+                                      .selectGenre(genre.id);
+                                }
+                              },
                             );
                           },
                         ),
@@ -131,9 +141,9 @@ class HomePage extends StatelessWidget {
                         height: 240,
                         child: ListView.builder(
                           scrollDirection: Axis.horizontal,
-                          itemCount: state.trendingMovies.results.length,
+                          itemCount: state.filteredTrending.length,
                           itemBuilder: (context, index) {
-                            final movie = state.trendingMovies.results[index];
+                            final movie = state.filteredTrending[index];
                             return _MovieCard(
                               movie: movie,
                               borderColor: const Color(0xFFF9D949),
@@ -155,9 +165,9 @@ class HomePage extends StatelessWidget {
                         height: 180,
                         child: ListView.builder(
                           scrollDirection: Axis.horizontal,
-                          itemCount: state.popularMovies.results.length,
+                          itemCount: state.filteredPopular.length,
                           itemBuilder: (context, index) {
-                            final movie = state.popularMovies.results[index];
+                            final movie = state.filteredPopular[index];
                             return _MovieCard(
                               movie: movie,
                               small: true,
@@ -179,9 +189,9 @@ class HomePage extends StatelessWidget {
                         height: 180,
                         child: ListView.builder(
                           scrollDirection: Axis.horizontal,
-                          itemCount: state.upcomingMovies.results.length,
+                          itemCount: state.filteredUpcoming.length,
                           itemBuilder: (context, index) {
-                            final movie = state.upcomingMovies.results[index];
+                            final movie = state.filteredUpcoming[index];
                             return _MovieCard(
                               movie: movie,
                               small: true,
@@ -205,10 +215,12 @@ class HomePage extends StatelessWidget {
 }
 
 class _CategoryChip extends StatelessWidget {
-  const _CategoryChip({required this.label, this.selected = false});
+  const _CategoryChip(
+      {required this.label, this.selected = false, this.onSelected});
 
   final String label;
   final bool selected;
+  final ValueChanged<bool>? onSelected;
 
   @override
   Widget build(BuildContext context) {
@@ -226,7 +238,7 @@ class _CategoryChip extends StatelessWidget {
         side: BorderSide(
           color: selected ? Colors.pinkAccent : Colors.black26,
         ),
-        onSelected: (_) {},
+        onSelected: onSelected,
       ),
     );
   }