Verified Commit 2384f761 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Now fetch activity from API on first timeline display (#141)

parent 18d8baae
...@@ -36,9 +36,6 @@ ...@@ -36,9 +36,6 @@
</template> </template>
<script> <script>
import { WebSocketBridge } from 'django-channels'
import logger from '@/logging'
import Sidebar from '@/components/Sidebar' import Sidebar from '@/components/Sidebar'
import Raven from '@/components/Raven' import Raven from '@/components/Raven'
...@@ -53,34 +50,11 @@ export default { ...@@ -53,34 +50,11 @@ export default {
}, },
created () { created () {
this.$store.dispatch('instance/fetchSettings') this.$store.dispatch('instance/fetchSettings')
this.openWebsocket()
let self = this let self = this
setInterval(() => { setInterval(() => {
// used to redraw ago dates every minute // used to redraw ago dates every minute
self.$store.commit('ui/computeLastDate') self.$store.commit('ui/computeLastDate')
}, 1000 * 60) }, 1000 * 60)
},
methods: {
openWebsocket () {
if (!this.$store.state.auth.authenticated) {
return
}
let self = this
let token = this.$store.state.auth.token
// let token = 'test'
const bridge = new WebSocketBridge()
bridge.connect(
`/api/v1/instance/activity?token=${token}`,
null,
{reconnectInterval: 5000})
bridge.listen(function (event) {
logger.default.info('Received timeline update', event)
self.$store.commit('instance/event', event)
})
bridge.socket.addEventListener('open', function () {
console.log('Connected to WebSocket')
})
}
} }
} }
</script> </script>
......
...@@ -43,6 +43,9 @@ export default { ...@@ -43,6 +43,9 @@ export default {
if (state.events.length > state.maxEvents) { if (state.events.length > state.maxEvents) {
state.events = state.events.slice(0, state.maxEvents) state.events = state.events.slice(0, state.maxEvents)
} }
},
events: (state, value) => {
state.events = value
} }
}, },
actions: { actions: {
......
<template> <template>
<div class="main pusher"> <div class="main pusher">
<div class="ui vertical center aligned stripe segment"> <div class="ui vertical center aligned stripe segment">
<div class="ui text container"> <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
<div class="ui text loader">Loading timeline...</div>
</div>
<div v-else class="ui text container">
<h1 class="ui header">Recent activity on this instance</h1> <h1 class="ui header">Recent activity on this instance</h1>
<div class="ui feed"> <div class="ui feed">
<component <component
...@@ -26,6 +29,9 @@ ...@@ -26,6 +29,9 @@
<script> <script>
import {mapState} from 'vuex' import {mapState} from 'vuex'
import { WebSocketBridge } from 'django-channels'
import axios from 'axios'
import logger from '@/logging'
import Like from '@/components/activity/Like' import Like from '@/components/activity/Like'
import Listen from '@/components/activity/Listen' import Listen from '@/components/activity/Listen'
...@@ -33,16 +39,51 @@ import Listen from '@/components/activity/Listen' ...@@ -33,16 +39,51 @@ import Listen from '@/components/activity/Listen'
export default { export default {
data () { data () {
return { return {
isLoading: false,
components: { components: {
'Like': Like, 'Like': Like,
'Listen': Listen 'Listen': Listen
} }
} }
}, },
created () {
this.openWebsocket()
this.fetchEvents()
},
computed: { computed: {
...mapState({ ...mapState({
events: state => state.instance.events events: state => state.instance.events
}) })
},
methods: {
fetchEvents () {
this.isLoading = true
let self = this
axios.get('/activity/').then((response) => {
self.isLoading = false
self.$store.commit('instance/events', response.data.results)
})
},
openWebsocket () {
if (!this.$store.state.auth.authenticated) {
return
}
let self = this
let token = this.$store.state.auth.token
// let token = 'test'
const bridge = new WebSocketBridge()
bridge.connect(
`/api/v1/instance/activity?token=${token}`,
null,
{reconnectInterval: 5000})
bridge.listen(function (event) {
logger.default.info('Received timeline update', event)
self.$store.commit('instance/event', event)
})
bridge.socket.addEventListener('open', function () {
console.log('Connected to WebSocket')
})
}
} }
} }
</script> </script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment