Andrea Flutter Firebase course - 24. Pagination and the FirestoreQueryBuilder widget

home_screen.dart

import 'package:faker/faker.dart' hide Job;
import 'package:faker_app_flutter_firebase/src/data/firestore_repository.dart';
import 'package:faker_app_flutter_firebase/src/data/job.dart';
import 'package:faker_app_flutter_firebase/src/routing/app_router.dart';
import 'package:firebase_ui_firestore/firebase_ui_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Jobs'), actions: [
        IconButton(
          icon: const Icon(Icons.person),
          onPressed: () => context.goNamed(AppRoute.profile.name),
        )
      ]),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          final user = ref.read(firebaseAuthProvider).currentUser;
          final faker = Faker();
          final title = faker.job.title();
          final company = faker.company.name();
          debugPrint('Adding job: $title at $company');
          ref.read(firestoreRepositoryProvider).addJob(
                user!.uid,
                title,
                company,
              );
        },
      ),
      body: const JobsListView(),
    );
  }
}

class JobsListView extends ConsumerWidget {
  const JobsListView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final firestoreRepository = ref.watch(firestoreRepositoryProvider);
    final user = ref.watch(firebaseAuthProvider).currentUser;

    // SOLUTION 1:
    //return FirestoreListView<Job>(
    //  query: firestoreRepository.jobsQuery(user!.uid),
    //  pageSize: 5,
    //  errorBuilder: (context, error, stackTrace) => Center(
    //    child: Text(error.toString()),
    //  ),
    //  emptyBuilder: (context) => const Center(child: Text('No data')),
    //  itemBuilder: (BuildContext context, QueryDocumentSnapshot<Job> doc) {
    //    final job = doc.data();
    //    return ListTile(
    //      title: Text(job.title),
    //      subtitle: Text(job.company),
    //      trailing: job.createdAt != null
    //          ? Text(job.createdAt.toString(),
    //              style: Theme.of(context).textTheme.bodySmall)
    //          : null,
    //    );
    //  },
    //);

    // SOLUTION 2:
    return FirestoreQueryBuilder<Job>(
      query: firestoreRepository.jobsQuery(user!.uid),
      builder: (context, snapshot, _) {
        if (snapshot.isFetching) {
          return const CircularProgressIndicator();
        }

        if (snapshot.hasError) {
          return Text('Something went wrong! ${snapshot.error}');
        }
        return ListView.builder(
          itemCount: snapshot.docs.length,
          itemBuilder: (context, index) {
            // if we reached the end of the currently obtained items, we try to
            // obtain more items
            if (snapshot.hasMore && index + 1 == snapshot.docs.length) {
              // Tell FirestoreQueryBuilder to try to obtain more items.
              // It is safe to call this function from within the build method.
              snapshot.fetchMore();
            }

            final job = snapshot.docs[index].data();

            return ListTile(
              title: Text(job.title),
              subtitle: Text(job.company),
              trailing: job.createdAt != null
                  ? Text(job.createdAt.toString(),
                      style: Theme.of(context).textTheme.bodySmall)
                  : null,
            );
          },
        );
      },
    );
  }
}