Feat/profile view

components/UsersView.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
+import { type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
+import { type UserInformation } from "@/types/api/user"
 
 // Props
 const props = defineProps({
     viewType: {
-        type: Number, // Matches UserViewType enum
+        type: Number,
         required: true,
     },
+    users: {
+        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
+        required: true,
+    }
 });
 
 // Computed Classes
 const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto flex-grow-0`;
     if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
     if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
     return '';
@@ -21,16 +27,43 @@
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-3'
-        : 'flex gap-3 overflow-x-auto pb-2'
+        : 'flex gap-3 overflow-x-auto'
 );
 
-// Example Users
-const users = [
-    { name: 'test1' },
-    { name: 'test2' },
-    { name: 'test3' },
-    { name: 'test3' },
-];
+
+function isGetFriendsResponse(user: any): user is GetFriendsResponse {
+    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+}
+
+function isUserInformation(user: any): user is UserInformation {
+    return 'user_id' in user && 'username' in user;
+}
+
+// Map users conditionally depending on their type
+const mappedUsers = computed(() => {
+    return props.users.map(user => {
+        console.log()
+        if (isGetFriendsResponse(user)) {
+            return {
+                userId: user.friend_id,
+                userName: user.friend_username,
+                userAvatar: user.friend_avatar,
+                spotifyId: user.friend_spotify_id,
+                status: user.status,
+                requestType: user.request_type,
+                createdAt: user.created_at,
+                updatedAt: user.updated_at,
+            };
+        } else if (isUserInformation(user)) {
+            return {
+                userId: user.user_id,
+                userName: user.username,
+                userAvatar: user.user_avatar,
+            };
+        }
+        return {};
+    });
+});
 </script>
 
 <template>
@@ -43,11 +76,13 @@
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
-            v-for="user in users" :key="user.name" :name="user.name"
+            v-for="user in mappedUsers" :key="user.userId"
+                :profile-picture="user.userAvatar?.toString()" 
+                :name="user.userName"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length > 3 ? 'w-[calc(33.33%-.99rem)] flex-shrink-0' :
+                                users.length > 3 ? 'w-[calc(33.33%-.98rem)] flex-shrink-0' :
                                 users.length === 3 ? 'w-1/3' :
                                 users.length === 2 ? 'w-1/2' : 'w-full'
                             : ''

components/profile/Friendlist.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
+import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
@@ -27,33 +28,12 @@ function addFriend() {
   }
   friends.value.push(newFriend)
 }
-
-
-// :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']"
 </script>
 
 <template>
-  <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-    <p class="my-1">Friends</p>
-    <div class="relative">
-      <div
-          :class="['flex gap-3 overflow-x-auto pb-2']">
-        <HomeUsersUserBox
-            v-for="item in friends"
-            :key="item.friend_id"
-            :profile-picture="item.friend_avatar?.toString()"
-            :name="item.friend_username"
-            :user-turn="false"
-            :class="[
-                        friends.length > 3 ? 'w-[calc(33.33%-1rem)] flex-shrink-0' :
-                        friends.length === 3 ? 'w-1/3' :
-                        friends.length === 2 ? 'w-1/2' : 'w-full'
-                    ]"
-        />
-      </div>
-    </div>
-    <div class="mt-3">
+  <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
+
+  <div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-    </div>
   </div>
 </template>

pages/index.vue

@@ -20,8 +20,46 @@
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },            
+          ]"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 2,
+              user_avatar: null,
+              username: 'Test2'
+            },
+            { user_id: 3,
+              user_avatar: null,
+              username: 'Test3'
+            },
+            { user_id: 4,
+              user_avatar: null,
+              username: 'Test4'
+            },
+          ]"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>

types/api/user.ts

@@ -12,4 +12,10 @@ export interface GetProfileResponse {
     username: string,
     user_spotify_id: string,
     spotify_visibility: boolean,
+}
+
+export interface UserInformation {
+    user_id: number,
+    user_avatar: string | null,
+    username: string, 
 }