fix types of UsersView

BeatBuzzer · Dec 9, 2024 · 4a50299 · 4a50299
1 parent e48df28
commit 4a50299
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 90 deletions.
diff --git a/components/UsersView.vue b/components/UsersView.vue
@@ -1,26 +1,26 @@
 <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"
+import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {UserViewType} from "@/types/components/users.view";
+import type {GetUserResponse} from "@/types/api/users";
 
 // Props
 const props = defineProps({
-    viewType: {
-        type: Number,
-        required: true,
-    },
-    users: {
-        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
-        required: true,
-    }
+  viewType: {
+    type: Number,
+    required: true,
+  },
+  users: {
+    type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
+    required: true,
+  }
 });
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-    if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
-    return '';
+  const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+  if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
+  return '';
 });
 
 const userBoxContainerClasses = computed(() =>
@@ -30,83 +30,86 @@ const userBoxContainerClasses = computed(() =>
 );
 
 
-function isGetFriendsResponse(user: any): user is GetFriendsResponse {
-    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): 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;
+function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is GetUserResponse {
+  return 'id' in user && 'username' in user;
 }
 
 // Map users conditionally depending on their type
 const mappedUsers = computed(() => {
-    return props.users.map(user => {
-        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 {};
-    });
+  return props.users.map(user => {
+    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.id,
+        username: user.username,
+        userAvatar: user.avatar_url,
+      };
+    }
+    return {};
+  });
 });
 </script>
 
 <template>
-    <div :class="[
+  <div
+      :class="[
                     containerClasses,
                     ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
-    >
-        <!-- Fixed Conditional Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p v-if="viewType === UserViewType.USERTURN">
-                Your Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
-                Opponent's Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
-                Friends
-            </p>
-        </div>
+  >
+    <!-- Fixed Conditional Header -->
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+      <p v-if="viewType === UserViewType.USERTURN">
+        Your Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+        Opponent's Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+        Friends
+      </p>
+    </div>
 
-        <!-- Scrollable User Boxes -->
-        <div 
-            :class="userBoxContainerClasses"
-        >
-            <HomeUsersUserBox 
-                v-for="user in mappedUsers" 
-                :key="user.userId"
-                :profile-picture="user.userAvatar?.toString()" 
-                :name="user.username"
-                :user-turn="viewType === UserViewType.USERTURN"
-                :class="[
+    <!-- Scrollable User Boxes -->
+    <div
+        :class="userBoxContainerClasses"
+    >
+      <HomeUsersUserBox
+          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-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-                :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
-            />
-            <HomeUsersUserBox v-if="users.length > 3" :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
-        </div>
+      />
+      <HomeUsersUserBox
+          v-if="users.length > 3"
+          :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
     </div>
+  </div>
 </template>
diff --git a/types/api/user.ts b/types/api/user.ts