fix: unnecessary v-models and extra requests

client/components/app/SideRail.vue

@@ -63,7 +63,7 @@
       <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link v-if="socialTrue && isGlobalSharing" :to="`/social`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="isSocialPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <nuxt-link v-if="isGlobalSharing" :to="`/social`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="isSocialPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons-outlined">connect_without_contact</span>
 
       <p class="font-book pt-1.5" style="font-size: 0.9rem">Social</p>
@@ -155,13 +155,6 @@ export default {
     isGlobalSharing() {
       return this.$store.getters['getServerSetting']('sharedListeningStats')
     },
-    async socialTrue() {
-      let listeningStats = await this.$axios.$get(`/api/social`).catch((err) => {
-        console.error('Failed to load shared user listening sesions', err)
-        return false
-      })
-      return listeningStats != null ? true : false
-    },
     showingIssues() {
       if (!this.$route.query) return false
       return this.libraryBookshelfPage && this.$route.query.filter === 'issues'
@@ -192,4 +185,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/pages/account.vue

@@ -16,7 +16,7 @@
         <div class="w-full h-px bg-primary my-4" />
 
         <div v-if="isGlobalSharing" class="flex items-center py-1">
-          <ui-toggle-switch v-model="isSharingActivity" @input="changeSharingSetting" />
+          <ui-toggle-switch v-model="isUserSharing" @input="changeSharingSetting" />
           <ui-tooltip text="Share your latest listening activity with other users in the social tab">
             <p class="pl-4">
               Share Listening Activity
@@ -54,7 +54,8 @@ export default {
       password: null,
       newPassword: null,
       confirmPassword: null,
-      changingPassword: false
+      changingPassword: false,
+      isUserSharing: null 
     }
   },
   computed: {
@@ -76,14 +77,14 @@ export default {
     isGuest() {
       return this.usertype === 'guest'
     },
-    isSharingActivity() {
-      return this.$store.getters['user/getUserSetting']('shareListeningActivity')
-    },
     isGlobalSharing() {
       return this.$store.getters['getServerSetting']('sharedListeningStats')
     }
   },
   methods: {
+    init() {
+      this.isUserSharing = this.$store.getters['user/getUserSetting']('shareListeningActivity')
+    },
     logout() {
       var rootSocket = this.$root.socket || {}
       const logoutPayload = {
@@ -131,9 +132,11 @@ export default {
         })
     },
     changeSharingSetting() {
-      this.$store.dispatch('user/updateUserSettings', { shareListeningActivity: !this.isSharingActivity })
+      this.$store.dispatch('user/updateUserSettings', { shareListeningActivity: this.isUserSharing})
     }
   },
-  mounted() {}
+  mounted() {
+    this.init()
+  }
 }
-</script>
+</script>

client/pages/social.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full overflow-y-auto px-2 py-18 md:p-8">
-    <div class="flex flex-col md:flex-row">
+    <div v-if="this.listeningStats" class="flex flex-col md:flex-row">
       <div class="w-200 my-6 mx-auto">
         <div class="grid grid-cols-2 content-between">
           <h1 class="text-2xl mb-4 font-book">Social</h1>
@@ -11,12 +11,12 @@
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
-            <ui-toggle-switch v-model="isSharingActivity" @input="changeSharingSetting" />
+            <ui-toggle-switch v-model="isUserSharing" @input="changeSharingSetting" />
           </div>
         </div>
         <p v-if="!users.length">No Other User Sessions</p>
         <template v-for="(user, num) in users">
-          <div :key="user.username" class="w-full py-0.5">
+          <div :key="user.username" class="w-full">
             <div class="flex items-center mb-1">
               <nuxt-link :to="`/item/${user.latest.libraryItemId}`">
                 <ui-tooltip direction="left" :text="Math.round(user.latest.progress * 100) + '%'">
@@ -36,18 +36,20 @@
         </template>
       </div>
     </div>
-    <div class="h-16" />
+    <div v-else>
+      <p class="text-xl text-center">There is no listening activity to display</p>
+    </div>
   </div>
 </template>
 
 <script>
-import BookCover from '../components/covers/BookCover.vue'
 import Cover from '../components/modals/item/tabs/Cover.vue'
 export default {
   components: { Cover },
   data() {
     return {
-      listeningStats: null
+      listeningStats: null,
+      isUserSharing: null
     }
   },
   computed: {
@@ -66,12 +68,16 @@ export default {
       this.$store.state.users.users.forEach((u) => (usermap[u.id] = { online: true, session: u.session }))
       return usermap
     },
-    isSharingActivity() {
-      return this.$store.getters['user/getUserSetting']('shareListeningActivity')
-    }
   },
   methods: {
-    async init() {
+    init() {
+      this.getUserSharing()
+      this.loadStats()
+    },
+    getUserSharing() {
+      this.isUserSharing = this.$store.getters['user/getUserSetting']('shareListeningActivity')
+    },
+    async loadStats() {
       let listeningStats = await this.$axios.$get(`/api/social`).catch((err) => {
         console.error('Failed to load shared user listening sesions', err)
         return []
@@ -88,8 +94,8 @@ export default {
       this.listeningStats = listeningStats
     },
     changeSharingSetting() {
-      this.$store.dispatch('user/updateUserSettings', { shareListeningActivity: !this.isSharingActivity })
-      this.init()
+      this.$store.dispatch('user/updateUserSettings', { shareListeningActivity: this.isUserSharing})
+      this.loadStats()
     }
   },
   mounted() {