Integrated live visitor tracking: fix #5

handlers/public.go

@@ -61,6 +61,7 @@ func (h *Handler) handleAccess(c *gin.Context) {
 		IP:          c.ClientIP(),
 		Timestamp:   time.Now(),
 		Referer:     c.GetHeader("Referer"),
+		UserAgent:   c.GetHeader("User-Agent"),
 		UTMSource:   c.Query("utm_source"),
 		UTMMedium:   c.Query("utm_medium"),
 		UTMCampaign: c.Query("utm_campaign"),

static/src/Visitors/Visitors.js

@@ -5,14 +5,14 @@ import toastr from 'toastr'
 
 export default class VisitorComponent extends Component {
     state = {
-        id: "",
+        visitors: [],
-        visitors: null
+        info: null
     }
 
     componentDidMount() {
         this.setState({ id: this.props.match.params.id })
-        fetch('/api/v1/protected/visitors', {
+        fetch("/api/v1/protected/lookup", {
-            method: 'POST',
+            method: "POST",
             body: JSON.stringify({
                 ID: this.props.match.params.id
             }),
@@ -22,8 +22,29 @@ export default class VisitorComponent extends Component {
             }
         })
             .then(res => res.ok ? res.json() : Promise.reject(res.json()))
-            .then(visitors => this.setState({ visitors }))
+            .then(info => this.setState({ info }))
-            .catch(e => e.done(res => toastr.error(`Could not fetch visitors: ${res}`)))
+            .catch(e => {
+                toastr.error(`Could not fetch lookup: ${e}`)
+            })
+        this.loop = setInterval(() => {
+            fetch('/api/v1/protected/visitors', {
+                method: 'POST',
+                body: JSON.stringify({
+                    ID: this.props.match.params.id
+                }),
+                headers: {
+                    'Authorization': window.localStorage.getItem('token'),
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(res => res.ok ? res.json() : Promise.reject(res.json()))
+                .then(visitors => this.setState({ visitors }))
+                .catch(e => e.done(res => toastr.error(`Could not fetch visitors: ${res}`)))
+        }, 1000)
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.loop)
     }
 
     // getUTMSource is a function which generates the output for the utm[...] table column
@@ -36,14 +57,18 @@ export default class VisitorComponent extends Component {
     }
 
     render() {
-        const { visitors } = this.state
+        const { visitors, id, info } = this.state
         return (
             <Container >
+                {info && <p>
+                    Entry with id {id} was created at {moment(info.CreatedOn).format('LLL')} and redirects to '{info.URL}'. Currently it has {visitors.length} visits.
+                </p>}
                 <Table celled>
                     <Table.Header>
                         <Table.Row>
                             <Table.HeaderCell>Timestamp</Table.HeaderCell>
                             <Table.HeaderCell>IP</Table.HeaderCell>
+                            <Table.HeaderCell>User Agent</Table.HeaderCell>
                             <Table.HeaderCell>Referer</Table.HeaderCell>
                             <Table.HeaderCell>UTM (source, medium, campaign, content, term)</Table.HeaderCell>
                         </Table.Row>
@@ -52,6 +77,7 @@ export default class VisitorComponent extends Component {
                         {visitors && visitors.map((visit, idx) => <Table.Row key={idx}>
                             <Table.Cell>{moment(visit.Timestamp).format('LLL')}</Table.Cell>
                             <Table.Cell>{visit.IP}</Table.Cell>
+                            <Table.Cell>{visit.UserAgent}</Table.Cell>
                             <Table.Cell>{visit.Referer}</Table.Cell>
                             <Table.Cell>{this.getUTMSource(visit)}</Table.Cell>
                         </Table.Row>)}

static/src/index.js

@@ -130,7 +130,7 @@ export default class BaseComponent extends Component {
         }
         return (
             <HashRouter>
-                <Container style={{ paddingTop: "15px" }}>
+                <Container style={{ padding: "15px 0" }}>
                     <Menu stackable>
                         <Menu.Item as={Link} to="/" name='shorten' onClick={this.handleItemClick} >
                             <Image src={userData.Picture} alt='user profile' circular size='mini' />

store/store.go

@@ -34,7 +34,7 @@ type Entry struct {
 
 // Visitor is the entry which is stored in the visitors bucket
 type Visitor struct {
-	IP, Referer                                            string
+	IP, Referer, UserAgent                                 string
 	Timestamp                                              time.Time
 	UTMSource, UTMMedium, UTMCampaign, UTMContent, UTMTerm string `json:",omitempty"`
 }
@@ -202,6 +202,7 @@ func (s *Store) RegisterVisit(id string, visitor Visitor) {
 		"ID":        id,
 		"RequestID": requestID,
 	}).Info("New redirect was registered...")
+
 	err := s.db.Update(func(tx *bolt.Tx) error {
 		bucket, err := tx.CreateBucketIfNotExists([]byte(id))
 		if err != nil {