Skip to content

[BE/FE]: Add missing member information to trip and activity details #239

@Bartavius

Description

@Bartavius

Caution

this ticket is dependent on the completion of the trip details page (assigned to Bart) to complete the FE part. You are free to make changes to the backend and associated tests, but the FE will require Bart to clear this hold up.

Issue

Currently, the shapes of the API responses do not include anything with avatars and total member count for the trip details and activity. Below is an example of how the displayAvatars and +X others are used. We need this functionality in the trip minimal details page, minimal activity accordions, and comments.

Image

TASK

Your task is to change the shape of the API responses in the backend to display the avatar content as described in the image. Then change the frontend of any existing components to complete the screen.

Screens/components that require this:

Figma link: https://www.figma.com/design/bUT3LAJ8SKxbL29YjFrNqg/Toggo---Main-Design-File?node-id=3391-2409&t=w7egX0NKpws3yI0a-0

Home page and activity accordion

Image

Comments (part of the same page, on the expanded activity accordion)

Image

Note

You may choose to implement this in another way, however, they should always return a set of displayed avatars and then other information. An example shape looks something like this

{ ...existingResponseInfo,
     displayAvatars: [
     # the reason we pass it in as an array here is so that it is easier to change the quantity at any time via
     # editing a constant var. We can just fetch a limit(numberOfAvatarsToDisplay) of sorts from the DB.
          {
                 id: 1,
                 firstName: "Aahil",
                 lastName: "Bummy",
                 profilePictureURL: "some-link-url.com",
          },
          {
                 id: 3,
                 firstName: "Mai",
                 lastName: "Goat",
                 profilePictureURL: "some-link-url-2.com",
          },
    ],
    otherProfileCount: 10,
    lastCommented: "some-timestamp"
}

The components should be readily available in the design-system, but you MIGHT need to make some util functions to format the content display to match the image.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions