Create component for Profile Image Display

[mikelax]

Overview

We would like to create a component that will display a profile Image, or a default image/icon if the user or character does not currently have a profile Image established.

Requirements

• A new component should be create to display the round "avatar" profile image.
• It should handle the use case where the User or Character does not have a profile image established.
• Here is a snippet of logic that could be wrapped in this new component.
• The component should take as props: publicId
  • I think this is ok as then the component doesn't need to know if this is a character or user.
  • The only downside to this approach is that the component won't be able to display a custom image based on the name. I suppose this can always be a simple refactor enhancement later on.
• The logic currently used in the GamePlayers.js _characterCell function uses an Icon if there is no profile image set. the problem is that they aren't displayed in a consistent size. This should be fixed. If necessary we can generate actual images to use instead of using Semantic Icons as the fallback.
• The component should be able to handle a null publicId property
• The component should be named: ProfileImage
  • Should it be called instead ProfileImageAvatar instead?

Questions

1. Should it be a single component that can work for either a User or Character, or two different components?
2. Should the component handle "just" the profile image, and not be concerned with other attributes like name, etc? My inclination is to say yes just profile image for now.