import React from 'react';
import md5 from 'md5';
import { AuthorPlaceholderImage } from 'app/components/AuthorPlaceholderImage';
import { style } from 'app/styles';
export interface AuthorGravatarImageProps {
width?: number;
height?: number;
emails?: string[];
style?: object | string;
}
interface AuthorGravatarImageState {
emailsIndex: number;
}
export class AuthorGravatarImage extends React.Component<
AuthorGravatarImageProps,
AuthorGravatarImageState
> {
readonly state: AuthorGravatarImageState = {
emailsIndex: 0,
};
componentDidUpdate(newProps) {
newProps.emails.forEach((email, index) => {
if (email !== this.props.emails[index]) {
this.setState({ emailsIndex: 0 });
}
});
}
constructor(props) {
super(props);
this.onImageNotFound = this.onImageNotFound.bind(this);
}
render() {
const { width = 75, height = 75, emails } = this.props;
const { emailsIndex } = this.state;
const notFound = emailsIndex >= emails.length;
const outerStyle = style(this.props.style, {
width,
height,
display: 'inline-block',
});
const gravatarEmail = (emails[emailsIndex] || '')
.toLocaleLowerCase()
.replace(/\s/g, '');
const gravatarUrl = `https://www.gravatar.com/avatar/${md5(
gravatarEmail
)}?s=${width}&d=404`;
const imageStyle = style({ width, maxHeight: height });
return (
<div style={outerStyle}>
{notFound ? (
<AuthorPlaceholderImage
holderForEmails={emails}
width={width}
height={height}
/>
) : (
<img
data-for={emails[emailsIndex]}
style={imageStyle}
src={gravatarUrl}
onError={this.onImageNotFound}
/>
)}
</div>
);
}
onImageNotFound() {
this.setState({ emailsIndex: this.state.emailsIndex + 1 });
}
}
|