Fix profile page to correctly load and display user teams

- Add getUserProfile function to fetch user data with teams from /users/{username} endpoint
- Update profile page to use the correct API response structure (profile.parties)
- Fix UserInfo component to receive user object instead of individual props
- Update ProfilePageClient to fetch additional pages from the correct endpoint
- Fix pagination metadata extraction from the API response

The profile page now correctly displays user teams with working infinite scroll pagination.

app/[locale]/[username]/ProfilePageClient.tsx

@@ -122,23 +122,33 @@ const ProfilePageClient: React.FC<Props> = ({
     setFetching(true)
     
     try {
-      // Construct URL for fetching more data
+      // Construct URL for fetching more data - using the users endpoint
-      const url = new URL(`/api/parties`, window.location.origin)
+      const url = new URL(`${process.env.NEXT_PUBLIC_SIERO_API_URL}/users/${initialData.user.username}`, window.location.origin)
-      url.searchParams.set('username', initialData.user.username)
       url.searchParams.set('page', (currentPage + 1).toString())
       
       if (element) url.searchParams.set('element', element.toString())
-      if (raid) url.searchParams.set('raid', raid)
+      if (raid) url.searchParams.set('raid_id', raid)
       if (recency) url.searchParams.set('recency', recency)
       
-      const response = await fetch(url.toString())
+      const response = await fetch(url.toString(), {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
       const data = await response.json()
       
-      if (data.parties && Array.isArray(data.parties)) {
+      // Extract parties from the profile response
-        setParties([...parties, ...data.parties])
+      const newParties = data.profile?.parties || []
-        setCurrentPage(data.pagination?.current_page || currentPage + 1)
+      
-        setTotalPages(data.pagination?.total_pages || totalPages)
+      if (newParties.length > 0) {
-        setRecordCount(data.pagination?.record_count || recordCount)
+        setParties([...parties, ...newParties])
+        
+        // Update pagination from meta
+        if (data.meta) {
+          setCurrentPage(currentPage + 1)
+          setTotalPages(data.meta.total_pages || totalPages)
+          setRecordCount(data.meta.count || recordCount)
+        }
       }
     } catch (error) {
       console.error('Error loading more parties', error)
@@ -222,12 +232,7 @@ const ProfilePageClient: React.FC<Props> = ({
         raidGroups={initialData.raidGroups}
         recency={recency}
       >
-        <UserInfo 
+        <UserInfo user={initialData.user} />
-          name={initialData.user.username}
-          picture={initialData.user.avatar.picture}
-          element={initialData.user.avatar.element}
-          gender={initialData.user.gender}
-        />
       </FilterBar>
       
       <section>{renderInfiniteScroll}</section>

app/[locale]/[username]/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
-import { getUserInfo, getTeams, getRaidGroups } from '~/app/lib/data'
+import { getUserProfile, getRaidGroups } from '~/app/lib/data'
 import ProfilePageClient from './ProfilePageClient'
 
 // Dynamic metadata
@@ -10,10 +10,10 @@ export async function generateMetadata({
   params: { username: string }
 }): Promise<Metadata> {
   try {
-    const userData = await getUserInfo(params.username)
+    const userProfileData = await getUserProfile(params.username, { page: 1 })
     
     // If user doesn't exist, use default metadata
-    if (!userData || !userData.user) {
+    if (!userProfileData || !userProfileData.profile) {
       return {
         title: 'User not found / granblue.team',
         description: 'This user could not be found'
@@ -47,26 +47,33 @@ export default async function ProfilePage({
     const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
     
     // Parallel fetch data with Promise.all for better performance
-    const [userData, teamsData, raidGroupsData] = await Promise.all([
+    const [userProfileData, raidGroupsData] = await Promise.all([
-      getUserInfo(params.username),
+      getUserProfile(params.username, { element, raid, recency, page }),
-      getTeams({ username: params.username, element, raid, recency, page }),
       getRaidGroups()
     ])
     
     // If user doesn't exist, show 404
-    if (!userData || !userData.user) {
+    if (!userProfileData || !userProfileData.profile) {
       notFound()
     }
     
-    // Prepare data for client component
+    // Extract user and teams from the profile response
+    const user = userProfileData.profile
+    const teams = userProfileData.profile.parties || []
+    
     const initialData = {
-      user: userData.user,
+      user: {
-      teams: teamsData.results || [],
+        id: user.id,
+        username: user.username,
+        avatar: user.avatar,
+        gender: user.gender
+      },
+      teams: teams,
       raidGroups: raidGroupsData || [],
       pagination: {
         current_page: page,
-        total_pages: teamsData.meta?.total_pages || 1,
+        total_pages: userProfileData.meta?.total_pages || 1,
-        record_count: teamsData.meta?.count || 0
+        record_count: userProfileData.meta?.count || 0
       }
     }
     

app/lib/data.ts

@@ -62,6 +62,32 @@ export async function getUserInfo(username: string) {
   }
 }
 
+// Get user profile with teams (combines user info and teams)
+export async function getUserProfile(username: string, params?: {
+  element?: number;
+  raid?: string;
+  recency?: string;
+  page?: number;
+}) {
+  try {
+    const queryParams: Record<string, string> = {};
+    if (params?.element) queryParams.element = params.element.toString();
+    if (params?.raid) queryParams.raid_id = params.raid;
+    if (params?.recency) queryParams.recency = params.recency;
+    if (params?.page) queryParams.page = params.page.toString();
+
+    let endpoint = `/users/${username}`;
+    const queryString = new URLSearchParams(queryParams).toString();
+    if (queryString) endpoint += `?${queryString}`;
+
+    const data = await fetchFromApi(endpoint);
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch user profile for ${username}`, error);
+    throw error;
+  }
+}
+
 // Get raid groups
 export async function getRaidGroups() {
   try {