-
Notifications
You must be signed in to change notification settings - Fork 7
/
leaderboard.js
45 lines (42 loc) · 1.21 KB
/
leaderboard.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
import 'isomorphic-fetch';
import React from 'react';
import { useAsync } from 'react-use';
function fetchLeaderboard() {
return fetch('/api/referrers')
.then(d => d.json())
.catch(e => console.error(e));
}
export default () => {
const { error, loading, value } = useAsync(fetchLeaderboard);
return (
<div className="leaderboard" id="leaderboard">
<h2>Top Referrers</h2>
{/* <p>Get referrals from the biggest names in the community.</p> */}
{value ? (
<table className="leaderboard-list">
<thead>
<tr>
<th />
<th>Impressions</th>
<th>Clicks</th>
</tr>
</thead>
<tbody>
{value.map(ref => (
<tr key={ref.referrer}>
<td className="referrer">
<a href={`https://${ref.referrer}`}>{ref.referrer}</a>
</td>
<td className="impressions">{`${ref.impressions}`}</td>
<td className="clicks">{`${ref.clicks || 0}`}</td>
</tr>
))}
</tbody>
</table>
) : null}
<p>
Check out more stats <a href="/stats">here</a>
</p>
</div>
);
};