lab6 с неработающей пагинацией

2024-10-07 19:36:49 +04:00 · 2024-10-07 19:36:49 +04:00 · 3a8474593b
commit 3a8474593b
parent 9d5a4fb331
15 changed files with 353 additions and 126 deletions
--- a/lib/components/utils/debounce.dart
+++ b/lib/components/utils/debounce.dart
@ -0,0 +1,16 @@
+import 'dart:async';
+import 'dart:ui';
+
+class Debounce{
+  factory Debounce() => _instance;
+  Debounce._();
+  static final Debounce _instance = Debounce._();
+  static Timer? _timer;
+  static void run(
+      VoidCallback action,{
+        Duration delay = const Duration(milliseconds: 500),
+  }) {
+    _timer?.cancel();
+    _timer = Timer(delay, action);
+  }
+}
--- a/lib/data/dtos/news_dto.dart
+++ b/lib/data/dtos/news_dto.dart
@ -1,21 +1,53 @@
 import 'package:json_annotation/json_annotation.dart';
+
 part 'news_dto.g.dart';
+
@JsonSerializable(createToJson: false)
-class NewsDto{
+class NewsDto {
  @JsonKey(name: 'articles')
  final List<NewAttributesDataDto>? data;
-  const NewsDto({this.data});
-  factory NewsDto.fromJson(Map<String, dynamic> json) => _$NewsDtoFromJson(json);
+  final MetaDto? meta;
+
+  const NewsDto({
+    this.data,
+    this.meta,
+  });
+
+  factory NewsDto.fromJson(Map<String, dynamic> json) =>
+      _$NewsDtoFromJson(json);
 }

-
@JsonSerializable(createToJson: false)
-class NewAttributesDataDto{
+class NewAttributesDataDto {
  final String? title;
  final String? description;
  @JsonKey(name: 'urlToImage')
  final String? imagelink;

-  const NewAttributesDataDto({this.title, this.description, this.imagelink });
-  factory NewAttributesDataDto.fromJson(Map<String, dynamic> json) => _$NewAttributesDataDtoFromJson(json);
+  const NewAttributesDataDto({this.title, this.description, this.imagelink});
+
+  factory NewAttributesDataDto.fromJson(Map<String, dynamic> json) =>
+      _$NewAttributesDataDtoFromJson(json);
+}
+
+@JsonSerializable(createToJson: false)
+class MetaDto {
+  final PaginationDto? pagination;
+
+  const MetaDto({this.pagination});
+
+  factory MetaDto.fromJson(Map<String, dynamic> json) =>
+      _$MetaDtoFromJson(json);
+}
+
+@JsonSerializable(createToJson: false)
+class PaginationDto {
+  final int? current;
+  final int? next;
+  final int? last;
+
+  const PaginationDto({this.current, this.next, this.last});
+
+  factory PaginationDto.fromJson(Map<String, dynamic> json) =>
+      _$PaginationDtoFromJson(json);
 }
--- a/lib/data/dtos/news_dto.g.dart
+++ b/lib/data/dtos/news_dto.g.dart
@ -10,9 +10,11 @@ NewsDto _$NewsDtoFromJson(Map<String, dynamic> json) => NewsDto(
      data: (json['articles'] as List<dynamic>?)
          ?.map((e) => NewAttributesDataDto.fromJson(e as Map<String, dynamic>))
          .toList(),
+      meta: json['meta'] == null
+          ? null
+          : MetaDto.fromJson(json['meta'] as Map<String, dynamic>),
    );

-
 NewAttributesDataDto _$NewAttributesDataDtoFromJson(
        Map<String, dynamic> json) =>
    NewAttributesDataDto(
@ -20,3 +22,16 @@ NewAttributesDataDto _$NewAttributesDataDtoFromJson(
      description: json['description'] as String?,
      imagelink: json['urlToImage'] as String?,
    );
+
+MetaDto _$MetaDtoFromJson(Map<String, dynamic> json) => MetaDto(
+      pagination: json['pagination'] == null
+          ? null
+          : PaginationDto.fromJson(json['pagination'] as Map<String, dynamic>),
+    );
+
+PaginationDto _$PaginationDtoFromJson(Map<String, dynamic> json) =>
+    PaginationDto(
+      current: (json['current'] as num?)?.toInt(),
+      next: (json['next'] as num?)?.toInt(),
+      last: (json['last'] as num?)?.toInt(),
+    );
--- a/lib/data/mappers/news_mapper.dart
+++ b/lib/data/mappers/news_mapper.dart
@ -1,5 +1,6 @@
 import 'package:pmu/data/dtos/news_dto.dart';
 import 'package:pmu/domain/models/card.dart';
+import 'package:pmu/domain/models/home.dart';

 extension NewDataDtoToModel on NewAttributesDataDto{
  CardData toDomain() => CardData(
@ -8,3 +9,10 @@ extension NewDataDtoToModel on NewAttributesDataDto{
    descText: description ?? 'NOTHING',
  );
 }
+
+extension CharactersDtoToModel on NewsDto {
+  HomeData toDomain() => HomeData(
+    data: data?.map((e) => e.toDomain()).toList(),
+    nextPage: meta?.pagination?.next,
+  );
+}
--- a/lib/data/repositories/api_interface.dart
+++ b/lib/data/repositories/api_interface.dart
@ -1,7 +1,8 @@
 import 'package:pmu/domain/models/card.dart';
+import 'package:pmu/domain/models/home.dart';

 typedef OnErrorCallback = void Function(String? error);

 abstract class ApiInterface {
-  Future<List<CardData>?> loadData();
+  Future<HomeData?> loadData();
 }
--- a/lib/data/repositories/bbc_repository.dart
+++ b/lib/data/repositories/bbc_repository.dart
@ -3,6 +3,7 @@ import 'package:pmu/data/dtos/news_dto.dart';
 import 'package:pmu/data/mappers/news_mapper.dart';
 import 'package:pmu/data/repositories/api_interface.dart';
 import 'package:pmu/domain/models/card.dart';
+import 'package:pmu/domain/models/home.dart';
 import 'package:pretty_dio_logger/pretty_dio_logger.dart';

 class BbcRepository extends ApiInterface {
@ -14,19 +15,28 @@ class BbcRepository extends ApiInterface {
  static const String _baseUrl = 'https://newsapi.org/v2';
  static const String _apiKey = '&apiKey=b9848c2aa43e4a0ba12dfe925db8513c';
  @override
-  Future<List<CardData>?> loadData(
-      {String? q, OnErrorCallback? onError}) async {
+  Future<HomeData?> loadData({
+    OnErrorCallback? onError,
+    String? q,
+    int page = 1,
+    int pageSize = 10,
+  }) async {
    try {
-      final String url = '$_baseUrl/everything?q=$q$_apiKey';
+      final String url = '$_baseUrl/everything?q=$q&page=$page&pageSize=$pageSize$_apiKey';
      final Response<dynamic> response = await _dio.get<Map<dynamic, dynamic>>(
        url,
+        queryParameters: {
+          'q': q,
+          'page': page,
+          'pageSize': pageSize,
+        },
      );
      final NewsDto dto =
          NewsDto.fromJson(response.data as Map<String, dynamic>);
-      final List<CardData>? data = dto.data?.map((e) => e.toDomain()).toList();
+      final HomeData data = dto.toDomain();
      return data;
    } on DioException catch (e) {
-      onError?.call(e.response?.statusMessage);
+      onError?.call(e.error?.toString());
    }
  }
 }
--- a/lib/data/repositories/mock_repository.dart
+++ b/lib/data/repositories/mock_repository.dart
@ -1,48 +1,59 @@
 import 'package:flutter/material.dart';
 import 'package:pmu/data/repositories/api_interface.dart';
 import 'package:pmu/domain/models/card.dart';
+import 'package:pmu/domain/models/home.dart';

-class MockRepository extends ApiInterface{
+class MockRepository extends ApiInterface {
  @override
-  Future<List<CardData>?> loadData() async{
-    return[
-      CardData(
-        text: 'Что',
-        descText: 'Как следует из заключения, которое имеется в распоряжении агентства, документ направлен на сохранение и укрепление традиционных семейных ценностей. Он предусматривает установление защиты от распространения в интернете, СМИ, кинофильмах и рекламе информации, пропагандирующей отказ от рождения детей.' * 10,
-        imageUrl:
-        'https://sun9-80.userapi.com/impg/6zgTFCriDQjiAQITCZIMb6jCjViUBgo1fzMLwA/4MJOK5aBZt8.jpg?size=1622x2160&quality=95&sign=57b1751fe201d3728998e96ac3a7ed7a&type=album',),
-      CardData(
-          text: 'Вершит',
-          descText: 'Речь идет о двух нежилых помещениях: одно — площадью почти 650 квадратных метров, второе — свыше 330. Cогласно сервисам проверки недвижимости, оба помещения относятся к особняку в Чистом переулке, одно из них оценивается почти в 73 миллиона рублей (по кадастровой стоимости).',
+  Future<HomeData?> loadData() async {
+    return HomeData(
+      data: [
+        CardData(
+          text: 'Что',
+          descText:
+              'Как следует из заключения, которое имеется в распоряжении агентства, документ направлен на сохранение и укрепление традиционных семейных ценностей. Он предусматривает установление защиты от распространения в интернете, СМИ, кинофильмах и рекламе информации, пропагандирующей отказ от рождения детей.' *
+                  10,
          imageUrl:
-          'https://sun9-32.userapi.com/impg/0GkPBnqsxmWufKQrO7kA8y6JpnVwVPuezGhwvQ/_h1wPKl1-s0.jpg?size=600x600&quality=96&sign=e1f3eb74cf15263de35e82c83aedb894&type=album'),
-      CardData(
-        text: 'Судьбу',
-        descText: 'На контроле ситуация с эвакуацией курян, проживающих в 15-километровой зоне в Рыльском и Хомутовском районах. Всего за прошедшую неделю из приграничья в безопасные районы убыли самостоятельно и организованными колоннами более шести тысяч человек", — говорится в публикации по итогам заседания регионального правительства.',
-        imageUrl:
-        'https://sun9-70.userapi.com/impg/pzUP2M-ekHGD-0hvftyyrAYoMGB91-aCPwcPEA/dEc1PemeQpk.jpg?size=474x600&quality=95&sign=d83d8106137e012bfda2de9e70010f43&type=album',
-      ),
-      CardData(
-        text: 'Человечества',
-        descText: '"Запущена официальная процедура смены фамилии", — прокомментировали РИА Новости в пресс-службе объединенной компании Wildberries и Russ (РВБ).',
-        icon: Icons.add_call,
-        imageUrl:
-        'https://i.pinimg.com/736x/df/91/dc/df91dc3de2580cffc66d01000c0c6d82.jpg',
-      ),
-      CardData(
-        text: 'В этом мире?',
-        descText: '"Мы не располагаем никакой информацией на этот счет. Это скорее вопрос, который относится к компетенции наших военных, поэтому я рекомендую туда обращаться", — сказал пресс-секретарь.',
-        icon: Icons.add_call,
-        imageUrl:
-        'https://sun9-80.userapi.com/impg/EzIhe8VsYrt0Eq-LzYf9DMitSISIDNVUATkz0w/qzIsFaog46s.jpg?size=483x604&quality=96&sign=5bb2247498cc216af4518677af87c9d6&type=album',
-      ),
-      CardData(
-        text: 'Некая незримая сущность?',
-        descText: '"Мы не располагаем никакой информацией на этот счет. Это скорее вопрос, который относится к компетенции наших военных, поэтому я рекомендую туда обращаться", — сказал пресс-секретарь.',
-        icon: Icons.add_call,
-        imageUrl:
-        'https://sun9-30.userapi.com/impg/5CPSfy33XVIKNTZBd5dgONJrPeCMFn6lOE81kg/eL8SLoL530I.jpg?size=1278x1280&quality=95&sign=f809d63142dac3559e7f7c3ddf817614&type=album',
-      ),
-    ];
+              'https://sun9-80.userapi.com/impg/6zgTFCriDQjiAQITCZIMb6jCjViUBgo1fzMLwA/4MJOK5aBZt8.jpg?size=1622x2160&quality=95&sign=57b1751fe201d3728998e96ac3a7ed7a&type=album',
+        ),
+        CardData(
+            text: 'Вершит',
+            descText:
+                'Речь идет о двух нежилых помещениях: одно — площадью почти 650 квадратных метров, второе — свыше 330. Cогласно сервисам проверки недвижимости, оба помещения относятся к особняку в Чистом переулке, одно из них оценивается почти в 73 миллиона рублей (по кадастровой стоимости).',
+            imageUrl:
+                'https://sun9-32.userapi.com/impg/0GkPBnqsxmWufKQrO7kA8y6JpnVwVPuezGhwvQ/_h1wPKl1-s0.jpg?size=600x600&quality=96&sign=e1f3eb74cf15263de35e82c83aedb894&type=album'),
+        CardData(
+          text: 'Судьбу',
+          descText:
+              'На контроле ситуация с эвакуацией курян, проживающих в 15-километровой зоне в Рыльском и Хомутовском районах. Всего за прошедшую неделю из приграничья в безопасные районы убыли самостоятельно и организованными колоннами более шести тысяч человек", — говорится в публикации по итогам заседания регионального правительства.',
+          imageUrl:
+              'https://sun9-70.userapi.com/impg/pzUP2M-ekHGD-0hvftyyrAYoMGB91-aCPwcPEA/dEc1PemeQpk.jpg?size=474x600&quality=95&sign=d83d8106137e012bfda2de9e70010f43&type=album',
+        ),
+        CardData(
+          text: 'Человечества',
+          descText:
+              '"Запущена официальная процедура смены фамилии", — прокомментировали РИА Новости в пресс-службе объединенной компании Wildberries и Russ (РВБ).',
+          icon: Icons.add_call,
+          imageUrl:
+              'https://i.pinimg.com/736x/df/91/dc/df91dc3de2580cffc66d01000c0c6d82.jpg',
+        ),
+        CardData(
+          text: 'В этом мире?',
+          descText:
+              '"Мы не располагаем никакой информацией на этот счет. Это скорее вопрос, который относится к компетенции наших военных, поэтому я рекомендую туда обращаться", — сказал пресс-секретарь.',
+          icon: Icons.add_call,
+          imageUrl:
+              'https://sun9-80.userapi.com/impg/EzIhe8VsYrt0Eq-LzYf9DMitSISIDNVUATkz0w/qzIsFaog46s.jpg?size=483x604&quality=96&sign=5bb2247498cc216af4518677af87c9d6&type=album',
+        ),
+        CardData(
+          text: 'Некая незримая сущность?',
+          descText:
+              '"Мы не располагаем никакой информацией на этот счет. Это скорее вопрос, который относится к компетенции наших военных, поэтому я рекомендую туда обращаться", — сказал пресс-секретарь.',
+          icon: Icons.add_call,
+          imageUrl:
+              'https://sun9-30.userapi.com/impg/5CPSfy33XVIKNTZBd5dgONJrPeCMFn6lOE81kg/eL8SLoL530I.jpg?size=1278x1280&quality=95&sign=f809d63142dac3559e7f7c3ddf817614&type=album',
+        ),
+      ],
+    );
  }
 }
--- a/lib/domain/models/home.dart
+++ b/lib/domain/models/home.dart
@ -0,0 +1,8 @@
+import 'package:pmu/domain/models/card.dart';
+
+class HomeData{
+  final List<CardData>? data;
+  final int? nextPage;
+
+  HomeData({this.data,this.nextPage});
+}
--- a/lib/main.dart
+++ b/lib/main.dart
@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pmu/data/repositories/bbc_repository.dart';
+import 'package:pmu/presentation/home_page/bloc/bloc.dart';
 import 'package:pmu/presentation/home_page/home_page.dart';


@ -17,7 +20,14 @@ class MyApp extends StatelessWidget {
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
        useMaterial3: true,
      ),
-      home: const MyHomePage(title: 'New.sru'),
+      home: RepositoryProvider<BbcRepository>(// чтобы ниже по дереву(в блок провайдере) был доступ к нашему репозиторию
+        lazy: true,
+        create: (_) => BbcRepository(),
+        child: BlocProvider<HomeBloc>(// обернули чтобы сделать блок доступным внутри нашей страницы
+            lazy: false,
+            create: (context) => HomeBloc(context.read<BbcRepository>()),
+            child: const MyHomePage()),
+      ),
    );
  }
 }
--- a/lib/presentation/home_page/bloc/bloc.dart
+++ b/lib/presentation/home_page/bloc/bloc.dart
@ -3,13 +3,35 @@ import 'package:pmu/data/repositories/bbc_repository.dart';
 import 'package:pmu/presentation/home_page/bloc/events.dart';
 import 'package:pmu/presentation/home_page/bloc/state.dart';

-class HomeBloc extends Bloc<HomeEvent,HomeState>{
+class HomeBloc extends Bloc<HomeEvent, HomeState> {
  final BbcRepository repo;
-  HomeBloc(this.repo) : super(const HomeState()){
+
+  HomeBloc(this.repo) : super(const HomeState()) {
    on<HomeLoadDataEvent>(_onLoadData);
  }
+
  // мы должны изменить наше состояние, передаем внутрь новое состояние
-  void _onLoadData(HomeLoadDataEvent event, Emitter<HomeState> emit){
-    emit(state.copyWith(data: repo.loadData()));
+  Future<void> _onLoadData(
+      HomeLoadDataEvent event, Emitter<HomeState> emit) async {
+    if (event.nextPage == null) {
+      emit(state.copyWith(isLoading: true));
+    } else {
+      emit(state.copyWith(isPaginationLoading: true));
+    }
+    String? error;
+    final data = await repo.loadData(
+      q: event.search,
+      page: event.nextPage ?? 1,
+      onError: (e) => error = e,
+    );
+    if (event.nextPage != null) {
+      data?.data?.insertAll(0, state.data?.data ?? []);
+    }
+    emit(state.copyWith(
+      isLoading: false,
+      isPaginationLoading: false,
+      data: data,
+      error: error,
+    ));
  }
 }
--- a/lib/presentation/home_page/bloc/events.dart
+++ b/lib/presentation/home_page/bloc/events.dart
@ -2,5 +2,7 @@ abstract class HomeEvent{
  const HomeEvent();
 }
 class HomeLoadDataEvent extends HomeEvent{
-  const HomeLoadDataEvent();
+  final String? search;
+  final int? nextPage;
+  const HomeLoadDataEvent({this.search, this.nextPage});
 }
--- a/lib/presentation/home_page/bloc/state.dart
+++ b/lib/presentation/home_page/bloc/state.dart
@ -1,10 +1,40 @@
 import 'package:equatable/equatable.dart';
 import 'package:pmu/domain/models/card.dart';
+import 'package:pmu/domain/models/home.dart';
+import 'package:copy_with_extension/copy_with_extension.dart';
+
+part 'state.g.dart';
+
+@CopyWith()
+class HomeState extends Equatable {
+  final HomeData? data;
+  final bool isLoading;
+  final bool isPaginationLoading;
+  final String? error;
+
+  const HomeState({
+    this.data,
+    this.isLoading = false,
+    this.isPaginationLoading = false,
+    this.error,
+  });
+
+  // HomeState copyWith({
+  //   HomeData? data,
+  //   bool? isLoading,
+  //   bool? isPaginationLoading,
+  // }) =>
+  //     HomeState(
+  //       data: data ?? this.data,
+  //       isLoading: isLoading ?? this.isLoading,
+  //       isPaginationLoading: isPaginationLoading ?? this.isPaginationLoading,
+  //     );

-class HomeState extends Equatable{
-  final Future<List<CardData>?>? data;
-  const HomeState({this.data});
-  HomeState copyWith({Future<List<CardData>?>? data}) => HomeState(data: data ?? this.data);
  @override
-  List<Object?> get props => [data];
+  List<Object?> get props => [
+        data,
+        isLoading,
+        isPaginationLoading,
+        error,
+      ];
 }
--- a/lib/presentation/home_page/home_page.dart
+++ b/lib/presentation/home_page/home_page.dart
@ -1,94 +1,135 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pmu/components/utils/debounce.dart';
 import 'package:pmu/data/repositories/bbc_repository.dart';
 import 'package:pmu/data/repositories/mock_repository.dart';
 import 'package:pmu/domain/models/card.dart';
 import 'package:pmu/presentation/details_page/details_page.dart';
 import 'package:pmu/presentation/dialogs/show_dialog.dart';
+import 'package:pmu/presentation/home_page/bloc/bloc.dart';
+import 'package:pmu/presentation/home_page/bloc/events.dart';
+import 'package:pmu/presentation/home_page/bloc/state.dart';

 part 'card.dart';

 class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
+  //const MyHomePage({super.key, required this.title});

-  final String title;
+  //final String title;
+  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
-
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
-      body:  Body(),
+      body: _Body(),
    );
  }
 }

-class Body extends StatefulWidget {
-  const Body({super.key});
+class _Body extends StatefulWidget {
+  const _Body({super.key});

  @override
-  State<Body> createState() => _BodyState();
+  State<_Body> createState() => _BodyState();
 }

-
-class _BodyState extends State<Body> {
+class _BodyState extends State<_Body> {
  final searchController = TextEditingController();
-  late Future<List<CardData>?> data;
-  final repo = BbcRepository();
+  final scrollController = ScrollController();
+
+  // late Future<List<CardData>?> data;
+  // final repo = BbcRepository();
  @override
-  void initState(){
-    data = repo.loadData(onError: (e) => showErrorDialog(context, error: e));
+  void initState() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context.read<HomeBloc>().add(const HomeLoadDataEvent());
+    });
+    //data = repo.loadData(onError: (e) => showErrorDialog(context, error: e));
+    scrollController.addListener(_onNextPageListener);
+    super.initState();
+  }
+
+  void _onNextPageListener() {
+    if (scrollController.offset > scrollController.position.maxScrollExtent) {
+      // preventing multiple pagination request on multiple swipes
+      final bloc = context.read<HomeBloc>();
+      if (!bloc.state.isPaginationLoading) {
+        bloc.add(HomeLoadDataEvent(
+          search: searchController.text,
+          nextPage: bloc.state.data?.nextPage,
+        ));
+      }
+    }
+  }
+
+  void dispose() {
+    searchController.dispose();
+    scrollController.dispose();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //final data = BbcRepository().loadData();
-    return Padding(padding: EdgeInsets.only(top: MediaQuery
-        .of(context)
-        .padding
-        .top),
-      child: Column(
-          children: [
-            Padding(padding: const EdgeInsets.all(12.0),
-              child: CupertinoSearchTextField(
-                controller: searchController,
-                onChanged: (search) {
-                  setState(() {
-                    data = repo.loadData(q: search);
-                  });
-                },
-              ),
-            ),
-            Expanded(child: Center(
-              child: FutureBuilder<List<CardData>?>(
-                future: data,
-                builder: (context, snapshot) =>
-                    SingleChildScrollView(
-                      child: snapshot.hasData
-                          ? Column(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: snapshot.data?.map((data) {
-                          return _Card.fromData(
-                            data,
-                            onLike: (String title, bool isLiked) =>
-                                _showSnackBar(context, title, isLiked),
-                            onTap: () => _navToDetails(context, data),
-                          );
-                        }).toList() ??
-                            [],
-                      )
-                          : const CircularProgressIndicator(),
+    return Padding(
+      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
+      child: Column(children: [
+        Padding(
+          padding: const EdgeInsets.all(12.0),
+          child: CupertinoSearchTextField(
+            controller: searchController,
+            onChanged: (search) {
+              Debounce.run(() => context
+                  .read<HomeBloc>()
+                  .add(HomeLoadDataEvent(search: search)));
+            },
+          ),
+        ),
+        BlocBuilder<HomeBloc, HomeState>(
+          builder: (context, state) => state.error != null
+              ? Text(
+                  state.error ?? '',
+                  style: Theme.of(context)
+                      .textTheme
+                      .headlineSmall
+                      ?.copyWith(color: Colors.red),
+                )
+              : state.isLoading
+                  ? const CircularProgressIndicator()
+                  : Expanded(
+                      child: RefreshIndicator(
+                        onRefresh: _onRefresh,
+                        child: ListView.builder(
+                          controller: scrollController,
+                          padding: EdgeInsets.zero,
+                          itemCount: state.data?.data?.length ?? 0,
+                          itemBuilder: (context, index) {
+                            final data = state.data?.data?[index];
+                            return data != null
+                                ? _Card.fromData(
+                                    data,
+                                    onLike: (title, isLiked) =>
+                                        _showSnackBar(context, title, isLiked),
+                                    onTap: () => _navToDetails(context, data),
+                                  )
+                                : const SizedBox.shrink();
+                          },
+                        ),
+                      ),
                    ),
-              ),
-            ),
-            ),
-          ]
-      ),
+        ),
+        BlocBuilder<HomeBloc, HomeState>(
+          builder: (context, state) => state.isPaginationLoading
+              ? const CircularProgressIndicator()
+              : const SizedBox.shrink(),
+        ),
+      ]),
    );
  }

@ -97,10 +138,7 @@ class _BodyState extends State<Body> {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(
          'The New $title ${isLiked ? 'liked!' : 'disliked'}',
-          style: Theme
-              .of(context)
-              .textTheme
-              .bodyLarge,
+          style: Theme.of(context).textTheme.bodyLarge,
        ),
        backgroundColor: Colors.lightBlue,
        duration: const Duration(seconds: 1),
@ -114,4 +152,11 @@ class _BodyState extends State<Body> {
      CupertinoPageRoute(builder: (context) => DetailsPage(data)),
    );
  }
+
+  Future<void> _onRefresh() {
+    context
+        .read<HomeBloc>()
+        .add(HomeLoadDataEvent(search: searchController.text));
+    return Future.value(null);
+  }
 }
--- a/pubspec.lock
+++ b/pubspec.lock
@ -166,6 +166,22 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "3.1.1"
+  copy_with_extension:
+    dependency: transitive
+    description:
+      name: copy_with_extension
+      sha256: fbcf890b0c34aedf0894f91a11a579994b61b4e04080204656b582708b5b1125
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.4"
+  copy_with_extension_gen:
+    dependency: "direct main"
+    description:
+      name: copy_with_extension_gen
+      sha256: "51cd11094096d40824c8da629ca7f16f3b7cea5fc44132b679617483d43346b0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.4"
  crypto:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -40,6 +40,7 @@ dependencies:
  pretty_dio_logger: ^1.3.1
  equatable: ^2.0.5
  flutter_bloc: ^8.1.5
+  copy_with_extension_gen: ^5.0.4

 dev_dependencies:
  flutter_test: