import * as React from 'react'
import { IGitHubUser } from '../../lib/dispatcher'

interface IAvatarProps {
  readonly gitHubUser: IGitHubUser | null
  readonly title: string | null
}

const DefaultAvatarURL = 'https://github.com/hubot.png'

export class Avatar extends React.Component<IAvatarProps, void> {
   private getTitle(user: IGitHubUser | null): string {
    if (user === null) {
      return this.props.title || 'Unknown User'
    }

    return this.props.title || user.email
   }

  public render() {
    const gitHubUser = this.props.gitHubUser
    const avatarURL = (gitHubUser ? gitHubUser.avatarURL : null) || DefaultAvatarURL
    const avatarTitle = this.getTitle(gitHubUser)

    return (
      <img className='avatar' title={avatarTitle} src={avatarURL} alt={avatarTitle}/>
    )
  }
}

import * as React from 'react'

const DefaultAvatarURL = 'https://github.com/hubot.png'

/** The minimum properties we need in order to display a user's avatar. */
export interface IAvatarUser {
  /** The user's email. */
  readonly email: string

  /** The user's avatar URL. */
  readonly avatarURL: string
}

interface IAvatarProps {
  /** The user whose avatar should be displayed. */
  readonly user?: IAvatarUser

  /** The title of the avatar. Defaults to `email` if provided. */
  readonly title?: string
}

/** A component for displaying a user avatar. */
export class Avatar extends React.Component<IAvatarProps, void> {
  private getTitle(): string {
    if (this.props.title) {
      return this.props.title
    }

    if (this.props.user) {
      return this.props.user.email
    }

    return 'Unknown user'
  }

  public render() {
    const url = this.props.user ? this.props.user.avatarURL : DefaultAvatarURL
    const title = this.getTitle()

    return (
      <img className='avatar' title={title} src={url} alt={title}/>
    )
  }
}

Generalize Avatar to only require the properties we need
Generalize Avatar to only require the properties we need
