Fix #600: Removed "Activity" page, since all the data is available on the "Browse" page

changes/changelog.d/600.enhancement

+Removed "Activity" page, since all the data is available on the "Browse" page (#600)

front/src/components/Sidebar.vue

@@ -71,9 +71,6 @@
               class="item">
               <i class="list icon"></i><translate>Playlists</translate>
             </a>
-            <router-link
-              v-if="$store.state.auth.authenticated"
-              class="item" :to="{path: '/activity'}"><i class="bell icon"></i><translate>Activity</translate></router-link>
             <router-link
               v-if="$store.state.auth.authenticated"
               class="item" :to="{name: 'content.index'}"><i class="upload icon"></i><translate>Add content</translate></router-link>

front/src/components/activity/Like.vue

-<template>
-  <div class="event">
-   <div class="label">
-     <i class="pink heart icon"></i>
-   </div>
-   <div class="content">
-     <div class="summary">
-       <translate :translate-params="{user: event.actor.local_id}">%{ user } favorited a track</translate>
-       <human-date class="date" :date="event.published" />
-     </div>
-     <div class="extra text">
-        <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
-          {{ event.object.name }}
-        </router-link>
-        <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
-      </div>
-   </div>
- </div>
-
-</template>
-
-<script>
-
-export default {
-  props: ['event']
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-</style>

front/src/components/activity/Listen.vue

-<template>
-  <div class="event">
-   <div class="label">
-     <i class="orange sound icon"></i>
-   </div>
-   <div class="content">
-     <div class="summary">
-      <translate :translate-params="{user: event.actor.local_id}">%{ user } listened to a track</translate>
-      <human-date class="date" :date="event.published" />
-     </div>
-     <div class="extra text">
-        <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
-          {{ event.object.name }}
-        </router-link>
-        <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
-      </div>
-   </div>
- </div>
-
-</template>
-
-<script>
-
-export default {
-  props: ['event']
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-</style>

front/src/router/index.js

@@ -3,7 +3,6 @@ import Router from 'vue-router'
 import PageNotFound from '@/components/PageNotFound'
 import About from '@/components/About'
 import Home from '@/components/Home'
-import InstanceTimeline from '@/views/instance/Timeline'
 import Login from '@/components/auth/Login'
 import Signup from '@/components/auth/Signup'
 import Profile from '@/components/auth/Profile'
@@ -56,11 +55,6 @@ export default new Router({
       name: 'about',
       component: About
     },
-    {
-      path: '/activity',
-      name: 'activity',
-      component: InstanceTimeline
-    },
     {
       path: '/login',
       name: 'login',

front/src/views/instance/Timeline.vue

-<template>
-  <div class="main pusher" v-title="labels.title">
-    <div class="ui vertical center aligned stripe segment">
-      <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
-        <div class="ui text loader"><translate>Loading timeline...</translate></div>
-      </div>
-      <div v-else class="ui text container">
-        <h1 class="ui header"><translate>Recent activity on this instance</translate></h1>
-        <div class="ui feed">
-          <component
-            class="event"
-            v-for="(event, index) in events"
-            :key="event.id + index"
-            v-if="components[event.type]"
-            :is="components[event.type]"
-            :event="event">
-          </component>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<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'
-
-export default {
-  data () {
-    return {
-      isLoading: false,
-      bridge: null,
-      components: {
-        'Like': Like,
-        'Listen': Listen
-      }
-    }
-  },
-  created () {
-    this.openWebsocket()
-    this.fetchEvents()
-  },
-  destroyed () {
-    this.disconnect()
-  },
-  computed: {
-    ...mapState({
-      events: state => state.instance.events
-    }),
-    labels () {
-      return {
-        title: this.$gettext('Instance Timeline')
-      }
-    }
-  },
-  methods: {
-    fetchEvents () {
-      this.isLoading = true
-      let self = this
-      axios.get('/activity/').then((response) => {
-        self.isLoading = false
-        self.$store.commit('instance/events', response.data.results)
-      })
-    },
-    disconnect () {
-      if (!this.bridge) {
-        return
-      }
-      this.bridge.socket.close(1000, 'goodbye', {keepClosed: true})
-    },
-    openWebsocket () {
-      if (!this.$store.state.auth.authenticated) {
-        return
-      }
-      this.disconnect()
-      let self = this
-      let token = this.$store.state.auth.token
-      // let token = 'test'
-      const bridge = new WebSocketBridge()
-      this.bridge = bridge
-      let url = this.$store.getters['instance/absoluteUrl'](`api/v1/instance/activity?token=${token}`)
-      url = url.replace('http://', 'ws://')
-      url = url.replace('https://', 'wss://')
-      bridge.connect(
-        url,
-        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>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>