hide the profile photo and name for private users in followers/following page

Author: Resul Avan

src/components/card/ProfileCard.vue

@@ -2,17 +2,17 @@
   <div class="card has-cursor-pointer has-margin-bottom-25"
        @click="gotoProfile(username)">
 
-    <BackgroundImage v-if="!!coverPhoto" :image-url="coverPhoto.src" :height="coverPhotoHeight"/>
+    <BackgroundImage v-if="!!coverPhoto" :image-url="coverImageUrl" :height="coverPhotoHeight"/>
 
     <div class="card-content">
       <div class="media">
         <div class="media-left">
-          <BackgroundSquareImage :image-url="profilePhoto.src" :size="profilePhotoSize" rounded="true"
+          <BackgroundSquareImage :image-url="profileImageUrl" :size="profilePhotoSize" rounded="true"
                                  border-inside="true"
                                  border="3"/>
         </div>
         <div class="media-content">
-          <p class="title is-4">{{name}}</p>
+          <p class="title is-4">{{fullName}}</p>
           <p class="subtitle is-6">@{{username}}</p>
         </div>
       </div>
@@ -22,7 +22,7 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'nuxt-property-decorator';
-  import { Image, Routes } from '../../types';
+  import { DefaultCoverPhoto, DefaultProfilePhoto, Image, PrivacyType, Routes } from '../../types';
   import { getUserRoute } from '~/service/global-service';
   import BackgroundSquareImage from '../image/BackgroundSquareImage.vue';
   import BackgroundImage from '~/components/image/BackgroundImage.vue';
@@ -34,12 +34,32 @@
 
     @Prop({ type: String, required: true }) name !: string
     @Prop({ type: String, required: true }) username !: string
+    @Prop({ type: String, required: true }) privacyType !: PrivacyType
     @Prop({ type: Object, required: true }) profilePhoto !: Image
     @Prop({ type: Object, required: false }) coverPhoto !: Image
     @Prop({ type: Number, required: false, default: 250 }) coverPhotoHeight !: number
     @Prop({ type: Number, required: false, default: 64 }) profilePhotoSize !: number
 
+    get isPrivate() {
+      return this.privacyType === PrivacyType.PRIVATE
+    }
+
+    get coverImageUrl() {
+      return this.isPrivate ? DefaultCoverPhoto.src : this.coverPhoto?.src
+    }
+
+    get profileImageUrl() {
+      return this.isPrivate ? DefaultProfilePhoto.src : this.profilePhoto?.src
+    }
+
+    get fullName() {
+      return this.isPrivate ? 'private account' : this.name
+    }
+
     async gotoProfile(username: string) {
+      if (this.isPrivate) {
+        return
+      }
       await this.$router.push(getUserRoute(Routes.PROFILE_DYNAMIC, username))
     }
 

src/components/profile/module/ProfileFollowers.vue

@@ -8,7 +8,7 @@
       <template slot="searchResult">
 
         <ProfileCard v-for="(user, index) in list" :key="index" :name="user.name" :username="user.username"
-                     :profile-photo="user.profilePhoto"/>
+                     :profile-photo="user.profilePhoto" :privacy-type="user.privacy"/>
 
       </template>
     </Paging>

src/components/profile/module/ProfileFollowings.vue

@@ -6,10 +6,8 @@
     <Paging v-if="hasResult" :total="total" :per-page.sync="perPage" :current.sync="current" :is-fetching="isFetching"
             :on-page-change="onPageChange">
       <template slot="searchResult">
-
         <ProfileCard v-for="(user, index) in list" :key="index" :name="user.name" :username="user.username"
-                     :profile-photo="user.profilePhoto"/>
-
+                     :profile-photo="user.profilePhoto" :privacy-type="user.privacy" />
       </template>
     </Paging>
 
@@ -24,15 +22,15 @@
 
 <script lang="ts">
   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';
-  import SearchField from '~/components/search/SearchField.vue';
-  import Paging from '~/components/ui/paging/Paging.vue';
   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';
+  import BaseModule from '~/mixin/BaseModule';
+  import PageTitle from '~/components/ui/PageTitle.vue';
+  import SearchField from '~/components/search/SearchField.vue';
+  import Paging from '~/components/ui/paging/Paging.vue';
+  import ProfileCard from '~/components/card/ProfileCard.vue';
 
   @Component({
     components: { Paging, SearchField, PageTitle, ProfileCard }
@@ -59,7 +57,6 @@
         console.log('reloadFollowing called')
         this.resetSearch();
       })
-
       this.resetSearch()
     }
 

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

@@ -94,6 +94,7 @@ const toSearchData = (user: User): SearchData => {
     name: user.name as string,
     username: user.username as string,
     profilePhoto: user.profilePhoto as Image,
-    coverPhoto: user.coverPhoto as Image
+    coverPhoto: user.coverPhoto as Image,
+    privacy: user.privacy as PrivacyType,
   }
 }

src/types/firebase-types.ts

@@ -150,7 +150,8 @@ export interface SearchData {
   name: string,
   username: string,
   profilePhoto: Image,
-  coverPhoto: Image
+  coverPhoto: Image,
+  privacy: PrivacyType
 }
 
 export interface PagingResponse<T> {