diff --git a/front/src/App.vue b/front/src/App.vue index bff52e97e399cfe545bb913c9f1ba1cbaf943a6f..e8ab18694ae4c44a5c6995d263b194dffe598dc2 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -36,9 +36,6 @@ </template> <script> -import { WebSocketBridge } from 'django-channels' - -import logger from '@/logging' import Sidebar from '@/components/Sidebar' import Raven from '@/components/Raven' @@ -53,34 +50,11 @@ export default { }, created () { this.$store.dispatch('instance/fetchSettings') - this.openWebsocket() let self = this setInterval(() => { // used to redraw ago dates every minute self.$store.commit('ui/computeLastDate') }, 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> diff --git a/front/src/store/instance.js b/front/src/store/instance.js index 2436eab079cd72f11fe48ecf2f64e857bc4f1e58..245acaf039adb4cc92e5df0760c3b38733e6b241 100644 --- a/front/src/store/instance.js +++ b/front/src/store/instance.js @@ -43,6 +43,9 @@ export default { if (state.events.length > state.maxEvents) { state.events = state.events.slice(0, state.maxEvents) } + }, + events: (state, value) => { + state.events = value } }, actions: { diff --git a/front/src/views/instance/Timeline.vue b/front/src/views/instance/Timeline.vue index b959c25d66d397fc24c3c4b9d2ab62f26cdfb9fb..8ffcd9758f63a6727999a8000659b6a36c99b651 100644 --- a/front/src/views/instance/Timeline.vue +++ b/front/src/views/instance/Timeline.vue @@ -1,7 +1,10 @@ <template> <div class="main pusher"> <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> <div class="ui feed"> <component @@ -26,6 +29,9 @@ <script> import {mapState} from 'vuex' +import { WebSocketBridge } from 'django-channels' +import axios from 'axios' +import logger from '@/logging' import Like from '@/components/activity/Like' import Listen from '@/components/activity/Listen' @@ -33,16 +39,51 @@ import Listen from '@/components/activity/Listen' export default { data () { return { + isLoading: false, components: { 'Like': Like, 'Listen': Listen } } }, + created () { + this.openWebsocket() + this.fetchEvents() + }, computed: { ...mapState({ 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>