Display every user's current active status

[jeffminsungkim]

Objective Create a component to display every user's current active status, on the right side corner its list.

Requirements stack

• [x] Smile icon with green color represents user is online.

• [x] Meh icon with yellow color represents user is offline. (Assume that user isn't using the application at the moment.)

• [x] Frown icon with red color represents user is signed out from the application.

[jeffminsungkim]

The structure of friends node has changed like below.

friends.json

{
  "5NnRVze6TVUeunLV0KXVmLby03J2": {
    "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2": true,
    "dm8o0podI3gou0ob3wirkiyOGOu1": true
  },
  "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2": {
    "5NnRVze6TVUeunLV0KXVmLby03J2": true
  },
  "dm8o0podI3gou0ob3wirkiyOGOu1": {
    "5NnRVze6TVUeunLV0KXVmLby03J2": true
  }
}

First, reference the friends node to retrieve a user's friend keys. Then, use the keys to pull a single or multiple object observables from firebase and then combine friends object observables to a new observable. As a result, an observable with an array that can be iterated over in the template.