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) {
+    onEntryDeletion(deletionURL) {
-        util.deleteEntry(entry.DeletionURL, this.loadRecentURLs)
+        util.deleteEntry(deletionURL, this.loadRecentURLs)
     }
 
     render() {
         const { recent } = this.state
-        return (
+
-            <Container>
+        const columns = [{
-                <Table celled selectable>
+            Header: 'Original URL',
-                    <Table.Header>
+            accessor: "Public.URL"
-                        <Table.Row>
+        }, {
-                            <Table.HeaderCell>Original URL</Table.HeaderCell>
+            Header: 'Created',
-                            <Table.HeaderCell>Created</Table.HeaderCell>
+            accessor: 'Public.CreatedOn',
-                            <Table.HeaderCell>Short URL</Table.HeaderCell>
+            Cell: props => <Moment fromNow>{props.value}</Moment>
-                            <Table.HeaderCell>All Clicks</Table.HeaderCell>
+        }, {
-                            <Table.HeaderCell>Delete</Table.HeaderCell>
+            Header: 'Short URL',
-                        </Table.Row>
+            accessor: "ID",
-                    </Table.Header>
+            Cell: props => `${window.location.origin}/${props.value}`
-                    <Table.Body>
+        }, {
-                        {Object.keys(recent).map(key => <Table.Row key={key} title="Click to view visitor statistics">
+            Header: 'Visitor count',
-                            <Table.Cell onClick={this.onRowClick.bind(this, key)}>{recent[key].Public.URL}</Table.Cell>
+            accessor: "Public.VisitCount"
-                            <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>
+            Header: 'Delete',
-                            <Table.Cell><Button animated='vertical' onClick={this.onEntryDeletion.bind(this, recent[key])}>
+            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></Table.Cell>
+            </Button>,
-                        </Table.Row>)}
+            style: { textAlign: "center" }
-                    </Table.Body>
+        }]
-                </Table>
+
+        return (
+            <Container>
+                <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>
         )
     }