CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativegoogle-cloud-firestore
XplosiVe06
XplosiVe06

Reputation: 646

Multiple Firebase listeners in useEffect and pushing new event into state

I want to retrieve a list of products in relation to the user's position, for this I use Geofirestore and update my Flatlist

When I have my first 10 closest collections, I loop to have each of the sub-collections.

I manage to update my state well, but every time my collection is modified somewhere else, instead of updating my list, it duplicates me the object that has been modified and adds it (updated) at the end of my list and keep the old object in that list too.

For example:

const listListeningEvents = {
    A: {Albert, Ducon}
    B: {Mickael}
}

Another user modified 'A' and delete 'Ducon', I will get:

const listListeningEvents = {
    A: {Albert, Ducon},
    B: {Mickael},
    A: {Albert}
}

And not:

const listListeningEvents = {
    A: {Albert},
    B: {Mickael},
}

That's my useEffect:

useEffect(() => {
  let geoSubscriber;
  let productsSubscriber;
  // 1. getting user's location
  getUserLocation()
  // 2. then calling geoSubscriber to get the 10 nearest collections
    .then((location) => geoSubscriber(location.coords))
    .catch((e) => {
      throw new Error(e.message);
    });
  //Here
  geoSubscriber = async (coords) => {
    let nearbyGeocollections = await geocollection
      .limit(10)
      .near({
        center: new firestore.GeoPoint(coords.latitude, coords.longitude),
        radius: 50,
      })
      .get();
    // Empty array for loop
    let nearbyUsers = [];
    // 3. Getting Subcollections by looping onto the 10 collections queried by Geofirestore
    productsSubscriber = await nearbyGeocollections.forEach((geo) => {
      if (geo.id !== user.uid) {
        firestore()
          .collection("PRODUCTS")
          .doc(geo.id)
          .collection("USER_PRODUCTS")
          .orderBy("createdDate", "desc")
          .onSnapshot((product) => {
            // 4. Pushing each result (and I guess the issue is here!)
            nearbyUsers.push({
              id: product.docs[0].id.toString(),
              products: product.docs,
            });
          });
      }
    });
    setLoading(false);
    // 4. Setting my state which will be used within my Flatlist
    setListOfProducts(nearbyUsers);
  };

  return () => {
    if (geoSubscriber && productsSubscriber) {
      geoSubscriber.remove();
      productsSubscriber.remove();
    }
  };
}, []);

I've been struggling since ages to make this works properly and I'm going crazy.

So I'm dreaming about 2 things :

  1. Be able to update my state without duplicating modified objects.
  2. (Bonus) Find a way to get the 10 next nearest points when I scroll down onto my Flatlist.

Upvotes: 0

Views: 373

Answers (1)

vitooh
vitooh

Reputation: 4262

In my opinion the problem is with type of nearbyUsers. It is initialized as Array =[] and when you push other object to it just add new item to at the end (array reference).

In this situation Array is not very convenient as to achieve the goal there is a need to check every existing item in the Array and find if you find one with proper id update it.

I think in this situation most convenient will be Map (Map reference). The Map indexes by the key so it is possible to just get particular value without searching it.

I will try to adjust it to presented code (not all lines, just changes):

  1. Change type of object used to map where key is id and value is products:
let nearbyUsersMap =  new Map();
  1. Use set method instead of push to update products with particular key:
 nearbyUsersMap.set(product.docs[0].id.toString(), product.docs);
  1. Finally covert Map to Array to achieve the same object to use in further code (taken from here):
let nearbyUsers = Array.from(nearbyUsersMap,  ([id, products]) => ({ id, products }));
setListOfProducts(nearbyUsers);

This should work, but I do not have any playground to test it. If you get any errors just try to resolve them. I am not very familiar with the geofirestore so I cannot help you more. For sure there are tones of other ways to achieve the goal, however this should work in the presented code and there are just few changes.

Upvotes: 1

Related Questions