Make friends page work with data from firestore

[aburd]

• profiles collection in firestore has a property called friendIds, these are the firebaseUserUIDs of other users
• The goal is to add some firebaseUserUIDs to your own user, and then to use that data to be able to see your friends on the friends page
• The type is in types/index.ts, but basically friendIds is an object, where the keys are the firebaseUserUID of the friend and the value is a boolean. It's not an array because it's easier to add metadata about each friend if it is an object

[scootyboots]

@aburd I gave a swing at this just to see how far I could get.

We'll want to use the friendIds to pull the most up to date information about each friend right? So we'll probably want to run getProfile method for each of the friendIds and then store the results as state yeah?

I gave that a swing but I'm not very comfortable with async/await at the moment so I'm kinda just stabbing in the dark. Would you mind taking a look at link-friendslist-firestore and let me know if I'm going in the right direction?

[aburd]

@scootyboots

I gave a swing at this just to see how far I could get.

Make sure to create a PR that says "closes #41" or something so we don't accidentally bump into each other.

We'll want to use the friendIds to pull the most up to date information about each friend right? So we'll probably want to run getProfile method for each of the friendIds and then store the results as state yeah?

This would be one way to do it. But since our getProfile function executes the .get method, it will execute a query to the DB and an HTTP request for each friend. This would be somewhat slow and not be good for our cellphone battery. Instead, what we would want to do is tell firebase all the documents that we want ahead of time and then execute the .get method. This will do one query on the DB and one HTTP request.

myCollection.where(firestore.FieldPath.documentId(), 'in', ["123","456","789"])

- https://stackoverflow.com/questions/46721517/google-firestore-how-to-get-document-by-multiple-ids-in-one-round-trip

Here some official docs on where queries: https://firebase.google.com/docs/firestore/query-data/queries#query_operators

I gave that a swing but I'm not very comfortable with async/await at the moment so I'm kinda just stabbing in the dark. Would you mind taking a look at link-friendslist-firestore and let me know if I'm going in the right direction?

I could discuss this all here, but I think it would be better if there were a PR. That way we can discuss line by line.

I will just say this, breaking up your code into specific steps is going to be key in this since there is a bunch of complexity.

1. Get all UIDs necessary to contact DB (from friendIds)
2. Use those IDs to perform a query for profiles on the DB (see profiles.ts)
3. Take that result and set the friends state of the store

IMO, each one of those should be separate functions.

This is kind of a doozy, but give it a shot. If you get stuck, lemme know!

[aburd]

@scootyboots As for your usage of async/await, remember that anytime you use the await keyword, that function must be prefixed with await.

Missing await keyword:

myIds.forEach(id => {
  const thing = await getThing(id)
})

Here, the function using await is after forEach so we have to put the async keyword there:

myIds.forEach(async (id) => {
  const thing = await getThing(id)
})

[scootyboots]

@aburd Thanks a lot that'll help me get going in the right direction. I'll take another pass at it and make a PR where we can work on it in line by line.