¿Cómo distribuir por ID utilizando el Patrón de Bloque?

02 Jun, 2023 Programación 0

Como empecé a aprender el patrón bloc, quería crear una pequeña aplicación con este patrón. Ahora estoy tratando de entender qué debo hacer si quiero que cada usuario de la primera lista pueda tener sus propias tareas por ID.

Creé esta función para separar la lógica de la interfaz de usuario:

void findByID(List<Users> users){
    if(users == null) return;
    final _findById = users.where((element) => element.id == element.id).toList();
 }

Ahora no entiendo cómo poner esta función en la interfaz de usuario. Ahora tengo dos listas cargadas desde la API que simplemente muestran la lista de usuarios y la lista de tareas sin distribución por ID de usuario.

Toda la clase con la lógica es así:

class ApisBloc{
  final _repos = Repositary();
  final _usersFetcher = PublishSubject<List<Users>>();
  final _todoUsers = PublishSubject<List<UsersToDos>>();

  Stream<List<Users>> get allUsers => _usersFetcher.stream;
  Stream<List<UsersToDos>> get allTodos => _todoUsers.stream;

  fetchUsers() async{
    List<Users> usersModels = await _repos.fetchUsers();
    _usersFetcher.sink.add(usersModels);
  }

  fetchTodos() async{
    List<UsersToDos> todo = await _repos.fetchTodosUsers();
    _todoUsers.sink.add(todo);
  }

  dispose(){
    _usersFetcher.close();
    _todoUsers.close();
  }

 void findByID(List<Users> users){
    if(users == null) return;
    final _findById = users.where((element) => element.id == element.id).toList();
 }

}
final bloc = ApisBloc();

Creo que debería poner la función findByID en la navegación y hacerla asíncrona.

davy.ai

June 2, 2023 at 12:46 pm

Para usar la función findByID en la interfaz de usuario, es necesario llamarla desde un método en su bloque y exponer los resultados a través de un flujo. Aquí hay un ejemplo de cómo se podría modificar su clase ApisBloc:

class ApisBloc{
  final _repos = Repositary();
  final _usersFetcher = PublishSubject<><users>>();
  final _todoUsers = PublishSubject<><userstodos>>();
  final _userTodos = PublishSubject<><userstodos>>();

  Stream<><users>> get allUsers => _usersFetcher.stream;
  Stream<><userstodos>> get allTodos => _todoUsers.stream;
  Stream<><userstodos>> get userTodos => _userTodos.stream;

  fetchUsers() async{
    List<users> usersModels = await _repos.fetchUsers();
    _usersFetcher.sink.add(usersModels);
  }

  fetchTodos() async{
    List<userstodos> todo = await _repos.fetchTodosUsers();
    _todoUsers.sink.add(todo);
  }

  findByID(int userId) async {
    List<userstodos> todos = await _repos.fetchTodosByUser(userId);
    _userTodos.sink.add(todos);
  }

  dispose(){
    _usersFetcher.close();
    _todoUsers.close();
    _userTodos.close();
  }
}
final bloc = ApisBloc();

La función findByID ahora toma un argumento userId y recupera los TODOs para ese usuario desde el repositorio llamando a un nuevo método llamado fetchTodosByUser. Luego expone los todos a través de un nuevo flujo userTodos.

Para usar esta función en la interfaz de usuario, puede llamarla desde un método en su BlocBuilder:

BlocBuilder<apisbloc, apisstate="">(
  builder: (context, state) {
    if (state is LoadedApisState) {
      final users = state.users;
      final todos = state.todos;
      return ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          final userTodos = todos.where((todo) => todo.userId == user.id).toList();
          return ListTile(
            title: Text(user.name),
            subtitle: Text('Todos: ${userTodos.length}'),
            onTap: () => context.read<apisbloc>().findByID(user.id),
          );
        }
      );
    } else if (state is LoadedUserTodosApisState) {
      final userTodos = state.userTodos;
      return ListView.builder(
        itemCount: userTodos.length,
        itemBuilder: (context, index) {
          final todo = userTodos[index];
          return ListTile(
            title: Text(todo.title),
            subtitle: Text(todo.completed ? 'Completado' : 'No completado'),
          );
        }
      );
    } else {
      return CircularProgressIndicator();
    }
  }
)

En este ejemplo, cada ListTile para un usuario tiene una función onTap que llama a la función findByID con el id del usuario. Esto actualiza el flujo userTodos y desencadena un cambio de estado que muestra los todos para ese usuario en lugar de la lista de usuarios.</apisbloc,>

es.davy.ai

¿Tienes una pregunta?

¿Cómo distribuir por ID utilizando el Patrón de Bloque?

Answer

davy.ai