-
Notifications
You must be signed in to change notification settings - Fork 9
/
UserHeader.js
54 lines (52 loc) · 2.02 KB
/
UserHeader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from 'react';
import { distanceInWordsToNow, parse, compareDesc } from 'date-fns';
import '../styles/Users.css';
import {formatDecimal} from '../utils/format';
import {head} from 'ramda';
import countries, {getName} from 'i18n-iso-countries';
countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
/**
* Given the edit times for a user return the difference between now()
* and the last edit of that user in words (e.g 3 days ago.);
*
* @param {Array[Date]} edit_times
*/
function getLastEdit (edit_times) {
const days = edit_times.map(time => parse(time.day));
const lastEdit = head(days.sort(compareDesc));
return `${distanceInWordsToNow(lastEdit)} ago`
}
export default ({ name, edit_times, num_badges, num_hashtags, num_edits, country }) =>
<header className="header--internal--green header--page">
<div className="row">
<div className="section-sub--left section-width-fifty-plus">
<h1 className="header--xlarge header--with-description-lg">{name}</h1>
<ul className="list--two-column clearfix">
<li>
<span className="list-label">Last Edit:</span>
<span>{getLastEdit(edit_times)}</span>
</li>
<li>
<span className="list-label">Country:</span>
<span>{getName(country, "en")}</span>
</li>
</ul>
</div>
<div className="section-sub--right section-width-fifty-minus stats-user">
<ul>
<li className="list--inline">
<span className="descriptor-chart">Campaigns</span>
<span className="num--large">{num_hashtags}</span>
</li>
<li className="list--inline">
<span className="descriptor-chart">Badges</span>
<span className="num--large">{num_badges}</span>
</li>
<li className="list--inline">
<span className="descriptor-chart">Edits</span>
<span className="num--large">{formatDecimal(num_edits)}</span>
</li>
</ul>
</div>
</div>
</header>