Added sorting and filtering for the recent table (#46)

static/package.json

@@ -24,6 +24,7 @@
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
     "react-scripts": "1.0.17",
+    "react-table": "^6.7.6",
     "semantic-ui-css": "2.2.12",
     "semantic-ui-react": "0.77.1",
     "toastr": "2.1.4"

static/src/Recent/Recent.js

@@ -1,10 +1,14 @@
 import React, { Component } from 'react'
-import { Container, Table, Button, Icon } from 'semantic-ui-react'
+import { Container, Button, Icon } from 'semantic-ui-react'
 import Moment from 'react-moment';
+import ReactTable from 'react-table'
+import 'react-table/react-table.css'
+
 import util from '../util/util'
+
 export default class RecentComponent extends Component {
     state = {
-        recent: {}
+        recent: []
     }
 
     componentDidMount() {
@@ -12,46 +16,73 @@ export default class RecentComponent extends Component {
     }
 
     loadRecentURLs = () => {
-        util.getRecentURLs(recent => this.setState({ recent }))
+        util.getRecentURLs(recent => {
+            let parsed = [];
+            for (let key in recent) {
+                let shorted = recent[key]
+                shorted.ID = key;
+                parsed.push(shorted);
+            }
+            this.setState({ recent: parsed })
+        })
     }
 
     onRowClick(id) {
         this.props.history.push(`/visitors/${id}`)
     }
 
-    onEntryDeletion(entry) {
-        util.deleteEntry(entry.DeletionURL, this.loadRecentURLs)
+    onEntryDeletion(deletionURL) {
+        util.deleteEntry(deletionURL, this.loadRecentURLs)
     }
 
     render() {
         const { recent } = this.state
+
+        const columns = [{
+            Header: 'Original URL',
+            accessor: "Public.URL"
+        }, {
+            Header: 'Created',
+            accessor: 'Public.CreatedOn',
+            Cell: props => <Moment fromNow>{props.value}</Moment>
+        }, {
+            Header: 'Short URL',
+            accessor: "ID",
+            Cell: props => `${window.location.origin}/${props.value}`
+        }, {
+            Header: 'Visitor count',
+            accessor: "Public.VisitCount"
+
+        }, {
+            Header: 'Delete',
+            accessor: 'DeletionURL',
+            Cell: props => <Button animated='vertical' onClick={this.onEntryDeletion.bind(this, props.value)}>
+                <Button.Content hidden>Delete</Button.Content>
+                <Button.Content visible>
+                    <Icon name='trash' />
+                </Button.Content>
+            </Button>,
+            style: { textAlign: "center" }
+        }]
+
         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.HeaderCell>Delete</Table.HeaderCell>
-                        </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                        {Object.keys(recent).map(key => <Table.Row key={key} title="Click to view visitor statistics">
-                            <Table.Cell onClick={this.onRowClick.bind(this, key)}>{recent[key].Public.URL}</Table.Cell>
-                            <Table.Cell onClick={this.onRowClick.bind(this, key)}><Moment>{recent[key].Public.CreatedOn}</Moment></Table.Cell>
-                            <Table.Cell>{`${window.location.origin}/${key}`}</Table.Cell>
-                            <Table.Cell onClick={this.onRowClick.bind(this, key)}>{recent[key].Public.VisitCount}</Table.Cell>
-                            <Table.Cell><Button animated='vertical' onClick={this.onEntryDeletion.bind(this, recent[key])}>
-                                <Button.Content hidden>Delete</Button.Content>
-                                <Button.Content visible>
-                                    <Icon name='trash' />
-                                </Button.Content>
-                            </Button></Table.Cell>
-                        </Table.Row>)}
-                    </Table.Body>
-                </Table>
+                <ReactTable data={recent} columns={columns} getTdProps={(state, rowInfo, column, instance) => {
+                    return {
+                        onClick: (e, handleOriginal) => {
+                            if (handleOriginal) {
+                                handleOriginal()
+                            }
+                            if (!rowInfo) {
+                                return
+                            }
+                            if (column.id === "DeletionURL") {
+                                return
+                            }
+                            this.onRowClick(rowInfo.row.ID)
+                        }
+                    }
+                }} />
             </Container>
         )
     }