Mailspring/internal_packages/link-tracking/lib/link-tracking-icon.jsx

60 lines
1.6 KiB
React
Raw Normal View History

import {React} from 'nylas-exports'
import {RetinaImg} from 'nylas-component-kit'
import {PLUGIN_ID} from './link-tracking-constants'
const sum = (array, extractFn) => array.reduce( (a, b) => a + extractFn(b), 0 );
export default class LinkTrackingIcon extends React.Component {
static displayName = 'LinkTrackingIcon';
static propTypes = {
thread: React.PropTypes.object.isRequired,
};
constructor(props) {
super(props);
this.state = this._getStateFromThread(props.thread);
}
componentWillReceiveProps(newProps) {
this.setState(this._getStateFromThread(newProps.thread));
}
_getStateFromThread(thread) {
const messages = thread.metadata;
// Pull a list of metadata for all messages
const metadataObjs = messages.map(msg => msg.metadataForPluginId(PLUGIN_ID)).filter(meta => meta);
if (metadataObjs.length) {
// If there's metadata, return the total number of link clicks in the most recent metadata
const mostRecentMetadata = metadataObjs.pop();
return {
clicks: sum(mostRecentMetadata.links || [], link => link.click_count || 0),
};
}
return {clicks: null};
}
_renderIcon = () => {
return this.state.clicks == null ? "" : this._getIcon(this.state.clicks);
};
_getIcon(clicks) {
return (<span>
<RetinaImg
className={clicks > 0 ? "clicked" : ""}
name="icon-composer-linktracking.png"
mode={RetinaImg.Mode.ContentIsMask} />
<span className="link-click-count">{clicks > 0 ? clicks : ""}</span>
</span>)
}
render() {
return (<div className="link-tracking-icon">
{this._renderIcon()}
</div>)
}
}