Combine two streams based on field within their objects in Flutter

Question

I have two queries for Firebase. One that returns a list of posts ("PostsModel") and one that returns a list of liked posts for a particular user ("LikedPostsModel"). I want to set an attribute called "liked" within "PostsModel" to true if it's also in the liked posts streams.

Pseudo Code:

/* Returns PostsModel, ex. [PostsModel(id: 1, liked: false), PostsModel(id: 2, liked: false), PostsModel(id: 3, liked: false), ...] */
Stream<List<PostsModel>> getListOfPosts(); 

/* Returns LikedPostsModel, ex. [LikedPostsModel(postsmodel_id: 2), ...] */
Stream<List<LikedPostsModel>> getListOfLikedPosts(); 

/* Returns combining PostsModel and LikedPostsModel, ex. [PostsModel(id: 1, liked: false), PostsModel(id: 2, liked: true), PostsModel(id: 3, liked: false), ...] */
Stream<List<LikedPostsModel>> getCombinedPosts() {
  var listOfPosts = getListOfPosts(); 
  var listOfLikedPosts = getListOfLikedPosts(); 

  if PostsModel.id within listOfPosts is matches LikedPostsModel.postsmodel_id within listOfLikedPosts, then set PostsModel.liked = true;

  return Stream<List<PostsModel>> with some fields "liked" set to true;
}

Actual Code:

My query to retrieve all posts:

  Stream<List<PostsModel>> getListOfPostsStream() {
    return _firestore
        .collection("posts")
        .snapshots()
        .map((QuerySnapshot<Map<String, dynamic>> query) {
      List<PostModel> postsModelList = [];
      query.docs.forEach((element) {
        postsModelList.add(PostsModel.fromDocumentSnapshot(element));
      });
      return postsModelList;
    });
  }

My query to retrieve liked posts:

  @override
  Stream<List<LikedPostsModel>> getLikedPostsByUser(User user) {
    return _firestore
        .collection("users")
        .doc(user.id)
        .collection("liked_posts")
        .snapshots()
        .map((QuerySnapshot<Map<String, dynamic>> query) {
      List<LikedPostsModel> likedModelList = [];
      query.docs.forEach((element) {
        likedModelList.add(LikedPostsModel.fromDocumentSnapshot(element));
      });
      return likedModelList;
    });
  }

PostsModel

class PostsModel {
  late String id;
  late String bodyText;
  bool liked = false;

  PostsModel(
    this.id,
    this.bodyText,
  );
  
  ...
}

LikedPostsModel

class LikedPostsModel {
  late String id;
  late String postsmodel_id;
  bool liked;

  LikedPostsModel(
    this.id,
    this.postsmodel_id,
    this.liked
  );
  
  ...
}

Any help is appreciated. Thanks!

Answer 1

To achieve it you should use the combineLatest2 method of the RxDart package.

I used it when developing a chat project. You know, at the conversations page of WhatsApp lists all chats and shows us the talker and the last message, message time, and seen information. My problem was my talker detail values and chat metadatas were in separate collections and I had to show the profile image and name of a talker and the last message, last message time and isSeen of the chat at the same time.

Here is an example from my chat project;

Stream<List<Chats>> getChats() {
  final _userId = FirebaseAuth.instance.currentUser?.uid;
  return _firestore
    .collection('Chats')
    .where('members', arrayContains: _userId)
    .orderBy("lastMessageDate", descending: true)
    .snapshots()
    .map((convert) {
  return convert.docs.map((f) {
    String? talkerId;
    var members = f.data()['members'];

    if (members.length == 2) {
      talkerId = members[0] != _userId ? members[0] : members[1];
    }

    Stream<ChatMetadata> chatStream = Stream.value(f).map<ChatMetadata>(
      (document) => ChatMetadata.fromMap(
        f.reference.path,
        document.data(),
      ),
    );

    Stream<Talker> talkerStream = _firestore
        .collection("Users")
        .where('uid', isEqualTo: talkerId)
        .snapshots()
        .map<Talker>(
          (querySnapshot) => querySnapshot.docs
              .map((e) => Talker.fromMap(
                   e.data(),
               ))
              .first,
        );

    return Rx.combineLatest2(
      chatStream,
      talkerStream,
      (ChatMetadata chatMetadata, Talker talker) =>
          Chats.combine(chatMetadata, talker),
    );
  });
}).switchMap((observables) {
  return observables.isNotEmpty
      ? rx.Rx.combineLatestList(observables)
      : Stream.value([]);
});
}

As you can see the getChats() method returns a Stream<List<Chats>>. The Chats model is a class that combines two other classes like ChatMetadata and Talker. Here is my Chats model;

import '/model/talker.dart';
import '/model/chat_metadata.dart';

class Chats {
  String? docId;
  String? talkerId;
  String? talkerUsername;
  String? talkerUnvan;
  String? talkerProfileImage;
  String? lastMessage;
  DateTime? dateTime;
  String? lastMessageOwner;
  bool? isSeen;
  List? members;

  Chats({
    this.docId,
    this.talkerId,
    this.talkerUsername,
    this.talkerUnvan,
    this.isSeen,
    this.talkerProfileImage,
    this.lastMessage,
    this.dateTime,
    this.lastMessageOwner,
    this.members,
  });

  factory Chats.combine(ChatMetadata chat, Talker talker) {
    return Chats(
      docId: chat.docId,
      talkerId: talker.id,
      talkerUsername: talker.username,
      talkerUnvan: talker.unvan,
      isSeen: chat.isSeen,
      talkerProfileImage: talker.photoUrl,
      lastMessage: chat.lastMessage,
      dateTime: chat.lastMessageDate,
      lastMessageOwner: chat.lastMessageOwner,
      members: chat.members,
    );
  }
}

You have to pay attention to the Rx.combineLatest2 method and switchMap method at the end of the code.

You can research all of them but in summary, the combineLatest2() merges the given Streams into a single Stream sequence by using the [combiner] function whenever any of the stream sequences emits an item. Then switchMap() converts each emitted item into a Stream using the given mapper function. Because the getChats() method has to returns the Stream<List<Chats>>.

Answer 2

You can store your likes in a Map rather than a List.

Stream<Map<String, bool>> getLikedPostsByUser(User user) {
  return _firestore
      .collection("users")
      .doc(user.id)
      .collection("liked_posts")
      .snapshots()
      .map((QuerySnapshot<Map<String, dynamic>> query) {
    final likedPostsMap = HashMap<String, bool>();
    query.docs.forEach((element) {
      final model = LikedPostsModel.fromDocumentSnapshot(element);
      likedPostsMap[model.postmodel_id] = model.liked;
    });
    return likedPostsMap;
  });
}

Then use the resulting Map for a constant time lookup when populating your list of posts.

Stream<List<PostsModel>> getListOfPostsStream(Map<String, bool> likedPosts) {
  return _firestore
      .collection("posts")
      .snapshots()
      .map((QuerySnapshot<Map<String, dynamic>> query) {
    List<PostModel> postsModelList = [];
    query.docs.forEach((element) {
      final model = PostsModel.fromDocumentSnapshot(element);
      model.liked = likedPosts[model.id] ?? false;
      postsModelList.add(model);
    });
    return postsModelList;
  });
}

To improve performance, likes can be persisted locally so they don't have to be fetched each time your app is opened. Add a timestamp to your likes document to limit your query to changes since the last time you fetched.

Answer 3

Treating this as a syntax rather than a design question, here is an ugly but working solution.

However, I would like to encourage you to refactor it or reconsider whether this functional API is necessary.

const convert = (num) => ({
  from: (inputUnit) => {
    switch (inputUnit) {
      case "mm":
        return {
          to: (outputUnit) => {
            switch (outputUnit) {
              case "inches":
                return num / 25.4;
            }
          },
        };
    }
  },
});

console.log(
  convert(1200).from("mm").to("inches")
)

Answer 4

Create an object constructor with the convert, from and to functions, and properties to store the values passed to each corresponding function when called. In both convert and from functions, return the instance via 'return this' and return the answer in the to function.

https://www.w3schools.com/JS/js_object_constructors.asp

function Converter() {
  this.value = 0;
  this.fromUnit = '';
  this.toUnit = '';
  this.convert = function(value) {
   ... 
   return this
  } 
 this.from = function(unit) {... return this} 
 this.to = function(unit) {... return answer} 
}

const converter = new Converter()
converter.convert(...).from(...).to(...)

You can also follow the Class syntax on ES6 JavaScript. https://www.w3schools.com/Js/js_classes.asp