Avatar.js

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { baseTheme } from '../../../themes/src';
import { sizes, userRoles } from '../constants';
import Image from '../Image';
import Icon from '../Icon';

const getSize = ({ size }) => sizes.values[size];

const getUserRoleColour = ({ user, theme }) => {
  if (user.role === 'staff') {
    return theme.palette.role.staff;
  }

  return theme.palette.role.participant;
};

// eslint-disable-next-line react/prop-types
const Wrapper = ({ user, ...props }) => {
  if (!user.avatar) {
    return <Icon bordered circular name="user-circle" {...props} />;
  }

  return (
    <Image
      bordered
      circular
      src={user.avatar}
      {...props}
      data-role="avatar"
      alt="avatar"
    />
  );
};

const Avatar = styled(Wrapper)`
  border-color: ${getUserRoleColour};
  border-width: 2px;
  box-sizing: border-box;
  width: ${getSize};
`;

Avatar.propTypes = {
  /** An avatar may appear at different sizes. */
  size: PropTypes.oneOf(sizes.labels),

  /** Specifies the user. */
  user: PropTypes.shape({
    /** Specifies the URL of the avatar. */
    avatar: PropTypes.string,

    /** Specifies the user role */
    role: PropTypes.oneOf(userRoles),
  }),

  /** Specifies the theme. */
  theme: PropTypes.shape({
    /** Specifies the palette. */
    palette: PropTypes.object.isRequired,
  }).isRequired,
};

Avatar.defaultProps = {
  size: 'tiny',
  theme: baseTheme,
};

export default Avatar;