following privacy implementation

Author: Resul Avan

src/components/profile/header/ProfileFollow.vue

@@ -15,7 +15,18 @@
 
       <div class="control">
         <b-taglist attached>
-          <a class="tag" @click="showFollowers">
+
+          <b-tag v-if="followersLocked">
+            <b-icon
+              class="has-margin-right-5"
+              icon="account-arrow-left"
+              size="is-small">
+            </b-icon>
+
+            {{$t('profile.follow.followers')}}
+          </b-tag>
+
+          <a v-else class="tag" @click="showFollowers">
             <b-icon
               class="has-margin-right-5"
               icon="account-arrow-left"
@@ -24,21 +35,44 @@
 
             {{$t('profile.follow.followers')}}
           </a>
-          <a class="tag is-primary" @click="showFollowers">{{followerCount}}</a>
+          <b-tag v-if="followersLocked" class="tag is-primary">
+            <b-icon
+              icon="lock"
+              size="is-small">
+            </b-icon>
+          </b-tag>
+          <a v-else class="tag is-primary" @click="showFollowers">{{followerCount}}</a>
         </b-taglist>
       </div>
 
       <div class="control">
         <b-taglist attached>
-          <a class="tag" @click="showFollowings">
+          <b-tag v-if="followingLocked">
+            <b-icon
+              class="has-margin-right-5"
+              icon="account-arrow-right"
+              size="is-small">
+            </b-icon>
+            {{$t('profile.follow.following')}}
+          </b-tag>
+
+          <a v-else class="tag" @click="showFollowings">
             <b-icon
               class="has-margin-right-5"
               icon="account-arrow-right"
               size="is-small">
             </b-icon>
             {{$t('profile.follow.following')}}
           </a>
-          <a class="tag is-primary" @click="showFollowings">{{followingCount}}</a>
+          <b-tag v-if="followingLocked" class="tag is-primary">
+            <b-icon
+              icon="lock"
+              size="is-small">
+            </b-icon>
+          </b-tag>
+          <a v-else class="tag is-primary" @click="showFollowings">
+            {{followingCount}}
+          </a>
         </b-taglist>
       </div>
 
@@ -49,7 +83,7 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'nuxt-property-decorator';
-  import { AuthUser, ModuleType, User } from '~/types';
+  import { AuthUser, ModuleType, PrivacyType, User } from '~/types';
   import {
     deleteFollowing,
     getCountOfFollowers,
@@ -58,7 +92,7 @@
     saveFollowing
   } from '~/service/firebase/firestore/following-service';
   import { sendDangerNotification, showErrorToaster, showInfoToaster } from '~/service/notification-service';
-  import { showProfileModule } from '~/service/rx-service';
+  import { reloadFollowing, showProfileModule } from '~/service/rx-service';
 
   @Component({
     components: {}
@@ -89,8 +123,8 @@
             followerCount,
             followingCount
           ]: [number, number] = await Promise.all([
-            getCountOfFollowers(this.user),
-            getCountOfFollowing(this.user)
+            Promise.resolve(this.followersLocked).then((locked) => locked ? 0 : getCountOfFollowers(this.user)),
+            Promise.resolve(this.followingLocked).then((locked) => locked ? 0 : getCountOfFollowing(this.user))
           ])
             .finally(() => this.loading = false) as [number, number]
 
@@ -111,6 +145,14 @@
       this.width = window.innerWidth
     }
 
+    get followersLocked() {
+      return !this.isMyProfile && this.user.followersPrivacy === PrivacyType.PRIVATE
+    }
+
+    get followingLocked() {
+      return !this.isMyProfile && this.user.followingPrivacy === PrivacyType.PRIVATE
+    }
+
     get isMobile() {
       return this.width < 768
     }
@@ -148,6 +190,7 @@
               this.followerCount++
             })
           })
+          .then(() => reloadFollowing.next())
           .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.systemError')))
     }
 
@@ -166,6 +209,7 @@
                 this.followerCount--
               })
           })
+          .then(() => reloadFollowing.next())
           .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.systemError')))
     }
 

src/components/profile/module/ProfileFollowers.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-  import { Component } from 'nuxt-property-decorator';
+  import { Component, Watch } from 'nuxt-property-decorator';
   import ProfileCard from '~/components/card/ProfileCard.vue';
   import { SearchData, User } from '~/types';
   import PageTitle from '~/components/ui/PageTitle.vue';
@@ -32,6 +32,7 @@
   import { searchFollowers } from '~/service/firebase/firestore/following-service';
   import BaseModule from '~/mixin/BaseModule';
   import { showErrorToaster } from '~/service/notification-service';
+  import { reloadFollowing } from '~/service/rx-service';
 
   @Component({
     components: { Paging, SearchField, PageTitle, ProfileCard }
@@ -48,7 +49,15 @@
     isFetching = false
     searched = false
 
+    @Watch('perPage')
+    onPerPageChanged(value: number) {
+      this.resetSearch();
+    }
+
     mounted() {
+      this.$subscribeTo(reloadFollowing.asObservable(), () => {
+        this.resetSearch();
+      })
       this.resetSearch()
     }
 

src/components/profile/module/ProfileFollowings.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-  import { Component } from 'nuxt-property-decorator';
+  import { Component, Watch } from 'nuxt-property-decorator';
   import ProfileCard from '~/components/card/ProfileCard.vue';
   import { SearchData, User } from '~/types';
   import PageTitle from '~/components/ui/PageTitle.vue';
@@ -32,6 +32,7 @@
   import { searchFollowings } from '~/service/firebase/firestore/following-service';
   import BaseModule from '~/mixin/BaseModule';
   import { showErrorToaster } from '~/service/notification-service';
+  import { reloadFollowing } from '~/service/rx-service';
 
   @Component({
     components: { Paging, SearchField, PageTitle, ProfileCard }
@@ -48,7 +49,17 @@
     isFetching = false
     searched = false
 
+    @Watch('perPage')
+    onPerPageChanged(value: number) {
+      this.resetSearch();
+    }
+
     mounted() {
+      this.$subscribeTo(reloadFollowing.asObservable(), () => {
+        console.log('reloadFollowing called')
+        this.resetSearch();
+      })
+
       this.resetSearch()
     }
 

src/components/profile/module/ProfileModule.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
   import { Component } from 'nuxt-property-decorator';
-  import { ModuleTabConfig, ModuleType } from '~/types';
+  import { ModuleTabConfig, ModuleType, PrivacyType } from '~/types';
   import BaseModule from '~/mixin/BaseModule';
   import ProfileAboutMe from '~/components/profile/module/ProfileAboutMe.vue';
   import LinkedAccounts from '~/components/profile/module/LinkedAccounts.vue';
@@ -57,13 +57,13 @@
         type: ModuleType.FOLLOWERS,
         icon: 'account-arrow-left',
         component: ProfileFollowers,
-        private: true
+        private: this.user?.privacy === PrivacyType.PRIVATE || this.user.followersPrivacy === PrivacyType.PRIVATE
       },
       {
         type: ModuleType.FOLLOWINGS,
         icon: 'account-arrow-right',
         component: ProfileFollowings,
-        private: true
+        private: this.user?.privacy === PrivacyType.PRIVATE || this.user.followingPrivacy === PrivacyType.PRIVATE
       },
       {
         type: ModuleType.SETTINGS,

src/pages/search.vue

@@ -51,7 +51,7 @@
     @StateNamespace.auth.Getter authUser !: AuthUser;
 
     @Watch('perPage')
-    onActiveChanged(value: number) {
+    onPerPageChanged(value: number) {
       this.resetSearch();
     }
 

src/service/firebase/firestore/following-service.ts

@@ -4,6 +4,7 @@ import {
   FirebaseQueryOperator,
   Following,
   PagingResponse,
+  PrivacyType,
   SearchData,
   User,
   WhereClause

src/service/rx-service.ts

@@ -7,3 +7,4 @@ export const reauthenticateObservable = new Subject<void>()
 export const reloadUserFromDatabase = new Subject<string>()
 export const loadMoreSearchResult = new Subject<void>()
 export const showProfileModule = new Subject<ModuleType>()
+export const reloadFollowing = new Subject<void>();