-
Notifications
You must be signed in to change notification settings - Fork 9
/
AllUsersTable.js
49 lines (47 loc) · 1.45 KB
/
AllUsersTable.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
import React from 'react';
import { Link } from 'react-router-dom';
import { formatDecimal } from '../utils/format';
import {distanceInWordsToNow, parse} from 'date-fns';
import countries from 'i18n-iso-countries';
countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
export default ({ apiStatus, users }) => {
let content = <div></div>;
switch (apiStatus) {
case "SUCCESS":
content = (<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Country</th>
<th>Total Edits</th>
<th>Last Edit</th>
</tr>
</thead>
<tbody>
{
users.map(user => (
<tr key={user.osm_id}>
<td>{((user.edit_count > 0 ) ? user.rank: "N/A")}</td>
<td><Link className="link--normal" to={`/users/${user.osm_id}`}>{user.full_name}</Link></td>
<td>{countries.getName(user.country, "en")}</td>
<td>{formatDecimal(user.edit_count)}</td>
<td>{user.edit_count > 0 ? `${distanceInWordsToNow(parse(user.last_edit))} ago`: "N/A"}</td>
</tr>
))
}
</tbody>
</table>
);
break;
case "LOADING":
content = <div>Loading...</div>;
break;
case "ERROR":
content = <div>Error loading records</div>;
break;
default:
content = <div></div>;
}
return content;
};