You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.0 KiB
52 lines
2.0 KiB
import React, { Component } from 'react'
|
|
import { Container, Table } from 'semantic-ui-react'
|
|
import toastr from 'toastr'
|
|
import moment from 'moment'
|
|
|
|
export default class RecentComponent extends Component {
|
|
state = {
|
|
recent: null
|
|
}
|
|
|
|
componentWillMount() {
|
|
fetch('/api/v1/protected/recent', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': window.localStorage.getItem('token'),
|
|
}
|
|
})
|
|
.then(res => res.ok ? res.json() : Promise.reject(res.json()))
|
|
.then(recent => this.setState({ recent: recent }))
|
|
.catch(e => e.done(res => toastr.error(`Could not fetch recent shortened URLs: ${res}`)))
|
|
}
|
|
|
|
onRowClick(id) {
|
|
this.props.history.push(`/visitors/${id}`)
|
|
}
|
|
|
|
render() {
|
|
const { recent } = this.state
|
|
return (
|
|
<Container>
|
|
<Table celled selectable>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.HeaderCell>Original URL</Table.HeaderCell>
|
|
<Table.HeaderCell>Created</Table.HeaderCell>
|
|
<Table.HeaderCell>Short URL</Table.HeaderCell>
|
|
<Table.HeaderCell>All Clicks</Table.HeaderCell>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{recent && Object.keys(recent).map(key => <Table.Row key={key} title="Click to view visitor statistics" onClick={this.onRowClick.bind(this, key)}>
|
|
<Table.Cell>{recent[key].Public.URL}</Table.Cell>
|
|
<Table.Cell>{moment(recent[key].Public.CreatedOn).format('LLL')}</Table.Cell>
|
|
<Table.Cell>{`${window.location.origin}/${key}`}</Table.Cell>
|
|
<Table.Cell>{recent[key].Public.VisitCount}</Table.Cell>
|
|
</Table.Row>)}
|
|
</Table.Body>
|
|
</Table>
|
|
</Container>
|
|
)
|
|
}
|
|
};
|
|
|