See #190: now store sidebar notifications in vuex store

front/src/components/Sidebar.vue

@@ -58,21 +58,16 @@
         <div class="item" v-if="showAdmin">
           <div class="header">{{ $t('Administration') }}</div>
           <div class="menu">
-            <router-link
-              class="item"
-              v-if="$store.state.auth.availablePermissions['library']"
-              :to="{name: 'library.requests', query: {status: 'pending' }}">
-              <i class="download icon"></i>{{ $t('Import requests') }}
-              <div
-                :class="['ui', {'teal': notifications.importRequests > 0}, 'label']"
-                :title="$t('Pending import requests')">
-                {{ notifications.importRequests }}</div>
-            </router-link>
             <router-link
               class="item"
               v-if="$store.state.auth.availablePermissions['library']"
               :to="{name: 'manage.library.files'}">
               <i class="book icon"></i>{{ $t('Library') }}
+              <div
+                :class="['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
+                :title="$t('Pending import requests')">
+                {{ $store.state.ui.notifications.importRequests }}</div>
+
             </router-link>
             <router-link
               class="item"
@@ -86,9 +81,9 @@
               :to="{path: '/manage/federation/libraries'}">
               <i class="sitemap icon"></i>{{ $t('Federation') }}
               <div
-                :class="['ui', {'teal': notifications.federation > 0}, 'label']"
+                :class="['ui', {'teal': $store.state.ui.notifications.federation > 0}, 'label']"
                 :title="$t('Pending follow requests')">
-                {{ notifications.federation }}</div>
+                {{ $store.state.ui.notifications.federation }}</div>
             </router-link>
             <router-link
               class="item"
@@ -160,7 +155,6 @@
 
 <script>
 import {mapState, mapActions} from 'vuex'
-import axios from 'axios'
 
 import Player from '@/components/audio/Player'
 import Logo from '@/components/Logo'
@@ -183,11 +177,7 @@ export default {
       selectedTab: 'library',
       backend: backend,
       isCollapsed: true,
-      fetchInterval: null,
+      fetchInterval: null
-      notifications: {
-        federation: 0,
-        importRequests: 0
-      }
     }
   },
   mounted () {
@@ -224,26 +214,8 @@ export default {
       cleanTrack: 'queue/cleanTrack'
     }),
     fetchNotificationsCount () {
-      this.fetchFederationNotificationsCount()
+      this.$store.dispatch('ui/fetchFederationNotificationsCount')
-      this.fetchFederationImportRequestsCount()
+      this.$store.dispatch('ui/fetchImportRequestsCount')
-    },
-    fetchFederationNotificationsCount () {
-      if (!this.$store.state.auth.availablePermissions['federation']) {
-        return
-      }
-      let self = this
-      axios.get('federation/libraries/followers/', {params: {pending: true}}).then(response => {
-        self.notifications.federation = response.data.count
-      })
-    },
-    fetchFederationImportRequestsCount () {
-      if (!this.$store.state.auth.availablePermissions['library']) {
-        return
-      }
-      let self = this
-      axios.get('requests/import-requests/', {params: {status: 'pending'}}).then(response => {
-        self.notifications.importRequests = response.data.count
-      })
     },
     reorder: function (event) {
       this.$store.commit('queue/reorder', {

front/src/store/ui.js

@@ -1,3 +1,4 @@
+import axios from 'axios'
 
 export default {
   namespaced: true,
@@ -5,7 +6,11 @@ export default {
     lastDate: new Date(),
     maxMessages: 100,
     messageDisplayDuration: 10000,
-    messages: []
+    messages: [],
+    notifications: {
+      federation: 0,
+      importRequests: 0
+    }
   },
   mutations: {
     computeLastDate: (state) => {
@@ -16,6 +21,27 @@ export default {
       if (state.messages.length > state.maxMessages) {
         state.messages.shift()
       }
+    },
+    notifications (state, {type, count}) {
+      state.notifications[type] = count
+    }
+  },
+  actions: {
+    fetchFederationNotificationsCount ({rootState, commit}) {
+      if (!rootState.auth.availablePermissions['federation']) {
+        return
+      }
+      axios.get('federation/libraries/followers/', {params: {pending: true}}).then(response => {
+        commit('notifications', {type: 'federation', count: response.data.count})
+      })
+    },
+    fetchImportRequestsCount ({rootState, commit}) {
+      if (!rootState.auth.availablePermissions['library']) {
+        return
+      }
+      axios.get('requests/import-requests/', {params: {status: 'pending'}}).then(response => {
+        commit('notifications', {type: 'importRequests', count: response.data.count})
+      })
     }
   }
 }