From 9681eb42c37ae036d6bc47988f1f0af478568305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karol=C3=ADna=20T=C3=B3thov=C3=A1?=
 <karolinka.tothova@gmail.com>
Date: Mon, 29 Apr 2024 20:16:25 +0200
Subject: [PATCH 1/3] :sparkles: display user followers

---
 pages/profile/[address].vue | 158 +++++++++++++++++++++++++++++++++--
 pages/profile/index.vue     | 162 +++++++++++++++++++++++++++++++++++-
 types/dtos/user.ts          |   6 +-
 3 files changed, 315 insertions(+), 11 deletions(-)

diff --git a/pages/profile/[address].vue b/pages/profile/[address].vue
index 1d1bd7d..1174385 100644
--- a/pages/profile/[address].vue
+++ b/pages/profile/[address].vue
@@ -12,8 +12,8 @@
       <div class="info ml-6">
         <h2 class="text-xl font-mono">{{ userProfile.address }}</h2>
         <div class="follow-info mt-4">
-          <h3>Followers: {{ userProfile.followerCount }}</h3>
-          <h3>Following: {{ userProfile.followingCount }}</h3>
+          <h3 @click="toggleFollowersModal">Followers: {{ userProfile.followerCount }}</h3>
+          <h3 @click="toggleFollowingModal">Following: {{ userProfile.followingCount }}</h3>
         </div>
         <button v-if="!myProfile" class="follow-button" @click="toggleFollow">
           {{ userProfile.isFollowed ? 'Unfollow' : 'Follow' }}
@@ -31,6 +31,78 @@
       />
       <button v-if="hasMore" class="text-white bg-pink-500 rounded p-2 w-full" @click="loadMore">Load more</button>
     </div>
+    <div v-if="showFollowersModal" class="modal">
+      <div v-if="showFollowersModal && userProfile.followerCount > 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowersModal = false">&times;</span>
+          <h1 class="p-2">Followers</h1>
+          <ul>
+            <li v-for="follower in userFollowers" :key="follower.follower.address">
+              <hr />
+              <div class="flex">
+                <div class="follower-avatar-container p-2">
+                  <img
+                    v-if="follower.follower.profilePicture"
+                    :src="follower.follower.profilePicture"
+                    alt="Profile Picture"
+                    class="follower-avatar"
+                  />
+                  <span v-else class="follower-avatar placeholder"></span>
+                </div>
+                <div class="follower-info">
+                  <a :href="`/profile/${follower.follower.address}`" class="follower-link">
+                    <p>{{ follower.follower.address }}</p>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div v-else-if="showFollowersModal && userProfile.followerCount === 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowersModal = false">&times;</span>
+          <h1 class="p-2">Followers</h1>
+          <p class="p-2">No followers found.</p>
+        </div>
+      </div>
+    </div>
+    <div v-if="showFollowingModal" class="modal">
+      <div v-if="showFollowingModal && userProfile.followingCount > 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowingModal = false">&times;</span>
+          <h1 class="p-2">Following</h1>
+          <ul>
+            <li v-for="following in userFollowing" :key="following.followedUser.address">
+              <hr />
+              <div class="flex">
+                <div class="follower-avatar-container p-2">
+                  <img
+                    v-if="following.followedUser.profilePicture"
+                    :src="following.followedUser.profilePicture"
+                    alt="Profile Picture"
+                    class="follower-avatar"
+                  />
+                  <span v-else class="follower-avatar placeholder"></span>
+                </div>
+                <div class="follower-info">
+                  <a :href="`/profile/${following.followedUser.address}`" class="follower-link">
+                    <p>{{ following.followedUser.address }}</p>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div v-else-if="showFollowingModal && userProfile.followingCount === 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowingModal = false">&times;</span>
+          <h1 class="p-2">Following</h1>
+          <p class="p-2">No profiles followed.</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -38,7 +110,7 @@
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useAccountStore } from '~/store';
-import type { UserPostResponseDTO, UserProfileDTO } from '~/types/dtos';
+import type { UserFollowersDTO, UserFollowingDTO, UserPostResponseDTO, UserProfileDTO } from '~/types/dtos';
 import NftPost from '~/components/posts/NftPost.vue';
 
 const error = ref<Error | null>(null);
@@ -46,6 +118,8 @@ const error = ref<Error | null>(null);
 const route = useRoute();
 const accountStore = useAccountStore();
 const userProfile = ref<UserProfileDTO | null>(null);
+const userFollowers = ref<UserFollowersDTO | null>(null);
+const userFollowing = ref<UserFollowingDTO | null>(null);
 
 const fetchUserProfile = async () => {
   const address = route.params.address; // Get the address from the URL parameter
@@ -72,6 +146,23 @@ const toggleFollow = async () => {
   }
 };
 
+const showFollowersModal = ref(false);
+const showFollowingModal = ref(false);
+
+const toggleFollowersModal = async () => {
+  showFollowersModal.value = !showFollowersModal.value;
+  if (showFollowersModal.value) {
+    await getFollowers();
+  }
+};
+
+const toggleFollowingModal = async () => {
+  showFollowingModal.value = !showFollowingModal.value;
+  if (showFollowingModal.value) {
+    await getFollowing();
+  }
+};
+
 const unfollowUser = async () => {
   await $fetch(`/api/user/${route.params.address}/following`, {
     method: 'DELETE',
@@ -92,6 +183,26 @@ const followUser = async () => {
   fetchUserProfile(); // Re-fetch or adjust local state to show updated follower count
 };
 
+const getFollowers = async () => {
+  const data = await $fetch(`/api/user/${route.params.address}/followers`, {
+    headers: {
+      Authorization: `Bearer ${accountStore.accessToken}`,
+    },
+  });
+  userFollowers.value = data;
+  fetchUserProfile();
+};
+
+const getFollowing = async () => {
+  const data = await $fetch(`/api/user/${route.params.address}/following`, {
+    headers: {
+      Authorization: `Bearer ${accountStore.accessToken}`,
+    },
+  });
+  userFollowing.value = data;
+  fetchUserProfile();
+};
+
 const posts = ref<UserPostResponseDTO[]>([]);
 const pageSize = 20;
 const pageNumber = ref(1);
@@ -185,7 +296,7 @@ h2 {
 
 .follow-button {
   @apply mt-5 py-2.5 px-5 bg-[#f472b6] text-white border-none rounded cursor-pointer transition-colors;
-  width: 100%; /* Ensures the button stretches to fill its container */
+  width: 100%;
 }
 
 .follow-button:hover {
@@ -194,7 +305,7 @@ h2 {
 
 .follow-info {
   @apply flex gap-5 mt-2.5 justify-end items-center;
-  width: 100%; /* This ensures the flex container takes full width */
+  width: 100%;
 }
 
 .follow-info h3 {
@@ -218,4 +329,41 @@ hr {
     @apply justify-center;
   }
 }
+.modal {
+  @apply fixed top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.5)] flex items-start p-48 justify-center;
+}
+
+.modal-content {
+  @apply bg-[#1e293b] p-5 rounded w-11/12 max-w-5xl relative;
+}
+
+.close {
+  @apply absolute top-2 right-2 text-xl cursor-pointer;
+}
+
+.follower-item {
+  @apply flex items-center mt-2;
+}
+
+.follower-info {
+  @apply flex flex-col;
+}
+
+.follower-avatar-container {
+  @apply flex-shrink-0; /* Prevents the avatar container from shrinking */
+}
+
+.follower-avatar,
+.follower-avatar.placeholder {
+  @apply w-8 h-8 rounded-full bg-gray-300; /* Sets the width and height, and background color for placeholder */
+  display: inline-block; /* Ensures that the img element behaves like a block element filling the container */
+}
+
+.follower-avatar img {
+  @apply w-full h-full object-cover; /* Ensures the image covers the entire area of the avatar */
+}
+
+.follower-link {
+  @apply text-white no-underline hover:underline py-3;
+}
 </style>
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index f92a2af..2f21124 100644
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@@ -12,8 +12,8 @@
       <div class="info ml-6">
         <h2 class="text-xl font-mono">{{ userProfile.address }}</h2>
         <div class="follow-info mt-4">
-          <h3>Followers: {{ userProfile.followerCount }}</h3>
-          <h3>Following: {{ userProfile.followingCount }}</h3>
+          <h3 @click="toggleFollowersModal">Followers: {{ userProfile.followerCount }}</h3>
+          <h3 @click="toggleFollowingModal">Following: {{ userProfile.followingCount }}</h3>
         </div>
       </div>
     </div>
@@ -30,13 +30,92 @@
       />
       <button v-if="hasMore" class="text-white bg-pink-500 rounded p-2 w-full" @click="loadMore">Load more</button>
     </div>
+    <div v-if="showFollowersModal" class="modal">
+      <div v-if="showFollowersModal && userProfile.followerCount > 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowersModal = false">&times;</span>
+          <h1 class="p-2">Followers</h1>
+          <h1>test</h1>
+          <ul>
+            <li v-for="follower in userFollowers" :key="follower.follower.address">
+              <hr />
+              <div class="flex">
+                <div class="follower-avatar-container p-2">
+                  <img
+                    v-if="follower.follower.profilePicture"
+                    :src="follower.follower.profilePicture"
+                    alt="Profile Picture"
+                    class="follower-avatar"
+                  />
+                  <span v-else class="follower-avatar placeholder"></span>
+                </div>
+                <div class="follower-info">
+                  <a :href="`/profile/${follower.follower.address}`" class="follower-link">
+                    <p>{{ follower.follower.address }}</p>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div v-else-if="showFollowersModal && userProfile.followerCount === 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowersModal = false">&times;</span>
+          <h1 class="p-2">Followers</h1>
+          <p class="p-2">No followers found.</p>
+        </div>
+      </div>
+    </div>
+    <div v-if="showFollowingModal" class="modal">
+      <div v-if="showFollowingModal && userProfile.followingCount > 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowingModal = false">&times;</span>
+          <h1 class="p-2">Following</h1>
+          <ul>
+            <li v-for="following in userFollowing" :key="following.followedUser.address">
+              <hr />
+              <div class="flex">
+                <div class="follower-avatar-container p-2">
+                  <img
+                    v-if="following.followedUser.profilePicture"
+                    :src="following.followedUser.profilePicture"
+                    alt="Profile Picture"
+                    class="follower-avatar"
+                  />
+                  <span v-else class="follower-avatar placeholder"></span>
+                </div>
+                <div class="follower-info">
+                  <a :href="`/profile/${following.followedUser.address}`" class="follower-link">
+                    <p>{{ following.followedUser.address }}</p>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div v-else-if="showFollowingModal && userProfile.followingCount === 0" class="modal">
+        <div class="modal-content">
+          <span class="close" @click="showFollowingModal = false">&times;</span>
+          <h1 class="p-2">Following</h1>
+          <p class="p-2">No profiles followed.</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import NftPost from '~/components/posts/NftPost.vue';
 import { useAccountStore, useNotificationStore } from '~/store';
-import type { PostUserSettingsRequestDTO, UserPostResponseDTO, UserProfileDTO } from '~/types/dtos';
+import type {
+  UserFollowersDTO,
+  UserFollowingDTO,
+  PostUserSettingsRequestDTO,
+  UserPostResponseDTO,
+  UserProfileDTO,
+} from '~/types/dtos';
 
 const posts = ref<UserPostResponseDTO[]>([]);
 const accountStore = useAccountStore();
@@ -44,6 +123,46 @@ const notificationStore = useNotificationStore();
 const pageSize = 20;
 const pageNumber = ref(1);
 const hasMore = ref(false);
+const userFollowers = ref<UserFollowersDTO | null>(null);
+const userFollowing = ref<UserFollowingDTO | null>(null);
+
+const showFollowersModal = ref(false);
+const showFollowingModal = ref(false);
+
+const toggleFollowersModal = async () => {
+  showFollowersModal.value = !showFollowersModal.value;
+  if (showFollowersModal.value) {
+    await getFollowers();
+  }
+};
+
+const toggleFollowingModal = async () => {
+  showFollowingModal.value = !showFollowingModal.value;
+  if (showFollowingModal.value) {
+    await getFollowing();
+  }
+};
+
+const getFollowers = async () => {
+  const data = await $fetch(`/api/user/${accountStore.address}/followers`, {
+    headers: {
+      Authorization: `Bearer ${accountStore.accessToken}`,
+    },
+  });
+  userFollowers.value = data;
+  fetchUserProfile();
+};
+
+const getFollowing = async () => {
+  const data = await $fetch(`/api/user/${accountStore.address}/following`, {
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${accountStore.accessToken}`,
+    },
+  });
+  userFollowing.value = data;
+  fetchUserProfile();
+};
 
 onMounted(async () => {
   if (!accountStore.accessToken) {
@@ -202,4 +321,41 @@ hr {
     @apply ml-0 mt-5;
   }
 }
+.modal {
+  @apply fixed top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.5)] flex items-start p-48 justify-center;
+}
+
+.modal-content {
+  @apply bg-[#1e293b] p-5 rounded w-11/12 max-w-5xl relative;
+}
+
+.close {
+  @apply absolute top-2 right-2 text-xl cursor-pointer;
+}
+
+.follower-item {
+  @apply flex items-center mt-2;
+}
+
+.follower-info {
+  @apply flex flex-col;
+}
+
+.follower-avatar-container {
+  @apply flex-shrink-0; /* Prevents the avatar container from shrinking */
+}
+
+.follower-avatar,
+.follower-avatar.placeholder {
+  @apply w-8 h-8 rounded-full bg-gray-300; /* Sets the width and height, and background color for placeholder */
+  display: inline-block; /* Ensures that the img element behaves like a block element filling the container */
+}
+
+.follower-avatar img {
+  @apply w-full h-full object-cover; /* Ensures the image covers the entire area of the avatar */
+}
+
+.follower-link {
+  @apply text-white no-underline hover:underline py-3;
+}
 </style>
diff --git a/types/dtos/user.ts b/types/dtos/user.ts
index 6e5517b..23faf37 100644
--- a/types/dtos/user.ts
+++ b/types/dtos/user.ts
@@ -21,13 +21,13 @@ export interface UserProfileDTO {
 }
 
 export interface UserFollowersDTO {
-  followerUserAddresss: string;
+  followerUserAddress: string;
   follower: {
     address: string;
     username?: string;
     profilePicture?: string;
   };
-  followingSince: Date;
+  followingSince: string;
 }
 
 export interface UserFollowingDTO {
@@ -37,5 +37,5 @@ export interface UserFollowingDTO {
     username?: string;
     profilePicture?: string;
   };
-  followingSince: Date;
+  followingSince: string;
 }

From 8b92fefcb2444a1abb06b843d04bbbaa02970dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karol=C3=ADna=20T=C3=B3thov=C3=A1?=
 <karolinka.tothova@gmail.com>
Date: Mon, 29 Apr 2024 21:04:28 +0200
Subject: [PATCH 2/3] :bug: delete random line

---
 pages/profile/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index 2f21124..005d22a 100644
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@@ -35,7 +35,6 @@
         <div class="modal-content">
           <span class="close" @click="showFollowersModal = false">&times;</span>
           <h1 class="p-2">Followers</h1>
-          <h1>test</h1>
           <ul>
             <li v-for="follower in userFollowers" :key="follower.follower.address">
               <hr />

From 06a3cab4ae29a0b0e69224e3532d25adb4f14243 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karol=C3=ADna=20T=C3=B3thov=C3=A1?=
 <karolinka.tothova@gmail.com>
Date: Mon, 29 Apr 2024 21:37:55 +0200
Subject: [PATCH 3/3] :bug: delete repetitive user profile fetch

---
 pages/profile/[address].vue | 2 --
 pages/profile/index.vue     | 2 --
 2 files changed, 4 deletions(-)

diff --git a/pages/profile/[address].vue b/pages/profile/[address].vue
index 1174385..7557c34 100644
--- a/pages/profile/[address].vue
+++ b/pages/profile/[address].vue
@@ -190,7 +190,6 @@ const getFollowers = async () => {
     },
   });
   userFollowers.value = data;
-  fetchUserProfile();
 };
 
 const getFollowing = async () => {
@@ -200,7 +199,6 @@ const getFollowing = async () => {
     },
   });
   userFollowing.value = data;
-  fetchUserProfile();
 };
 
 const posts = ref<UserPostResponseDTO[]>([]);
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index 005d22a..0e48650 100644
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@@ -149,7 +149,6 @@ const getFollowers = async () => {
     },
   });
   userFollowers.value = data;
-  fetchUserProfile();
 };
 
 const getFollowing = async () => {
@@ -160,7 +159,6 @@ const getFollowing = async () => {
     },
   });
   userFollowing.value = data;
-  fetchUserProfile();
 };
 
 onMounted(async () => {