In this episode, we dive into displaying all of the pending invitations for a team. We start off by talking about permissions—you can either reuse your existing invite-related permission, or create a new one if you want more fine-grained control. For our example, we stick with the existing permission.
Next up, we loop through all the team invites and set up a new component for each invite called TeamInviteItem. We keep it visually consistent with our team member list items by reusing some styling, but since invitees aren’t full members yet, we only show their email (no avatar needed!).
We also copy over the dropdown menu from the team member item so users can easily revoke invites right from this list. A bit of copy-paste and some style tweaks, and we’re good to go—all pending invites show up with a nice “Revoke” option right next to each one.
Once we double check that multiple invites display correctly, that’s it for showing team invites! In the next episode, we’ll add the functionality to actually revoke these invites.