SilverGuild · elysableu · Dec 11, 2025 · Dec 9, 2025 · Dec 9, 2025 · Dec 9, 2025
diff --git a/e2e/helper/positioning.ts b/e2e/helper/positioning.ts
@@ -1,6 +1,9 @@
 import { Locator } from '@playwright/test'
 
 export async function isLeftOf(leftElement: Locator, rightElement: Locator) {
+    await leftElement.waitFor({ state: 'visible', timeout: 15000 })
+    await rightElement.waitFor({ state: 'visible', timeout: 15000 })
+
     const leftBox = await leftElement.boundingBox()
     const rightBox = await rightElement.boundingBox()
 

diff --git a/e2e/tests/layout/header.spec.ts b/e2e/tests/layout/header.spec.ts
@@ -12,6 +12,10 @@ test.describe('Homepage', () => {
     test('should navigate to the profile page', async ({ page }) => {
         await page.getByRole('link', { name: /Profile/i }).click()
 
+        await page.waitForURL('/profile')
+
+        await page.waitForLoadState('networkidle')
+
         await playwrightExpect(page).toHaveURL('/profile') 
         await playwrightExpect(page.getByRole('heading', { name: /Profile/i })).toBeVisible()
     })

diff --git a/e2e/tests/profile/profile-viewing.spec.ts b/e2e/tests/profile/profile-viewing.spec.ts
@@ -6,6 +6,7 @@ test.describe('User Profile Navigation', () => {
   test.beforeEach(async ({ page }) => {
     // TODO: Login as test user
     await page.goto('/profile')
+    await page.waitForLoadState('networkidle')
   })
 
   test('profile displays details on left and character roster on right', async ({ page }) => {

diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,16 @@
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ui-avatars.com',
+        port: '',
+        pathname: '/api/**'
+      }
+    ]
+  }
 };
 
 export default nextConfig
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
     "test": "jest",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 import { beau_rivage, geistSans, geistMono } from './fonts'
 import './globals.css'
 import Header from '../components/layout/Header/header'
-import { DataProvider } from './providers/DataProvider'
+import { AppDataProvider } from '@/app/providers'
 
 export const metadata: Metadata = {
     title: 'SilverGuild',
@@ -19,7 +19,7 @@ export default function RootLayout({
             <body
                 className={`${geistSans.variable} ${geistMono.variable} ${beau_rivage.variable} antialiased`}
             >
-                <DataProvider userId={4}>
+                <AppDataProvider userId={7}> {/* Hard set for testing purposes */}
                     <div className="flex flex-col w-full h-screen">
                         <div className="top-0 left-0 w-full ">
                             <Header />
@@ -28,7 +28,7 @@ export default function RootLayout({
                             {children}
                         </main>
                     </div>
-                </DataProvider>
+                </AppDataProvider>
             </body>
         </html>
     )

diff --git a/src/app/profile/components/CharacterRosterCard.tsx b/src/app/profile/components/CharacterRosterCard.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { Character } from '@/types/character'
 
 interface CharacterRosterCardProps {
@@ -8,9 +9,11 @@ export default function CharacterRosterCard({ character }: CharacterRosterCardPr
     return (
         <div className="flex items-center bg-gray-800 m-2 p-4 rounded-lg w-full">
             <div className="w-16 h-16 rounded-full mr-2 mb-4 overflow-hidden shrink-0">
-                <img 
-                src={`https://ui-avatars.com/api/?name=${character.name}&size=64&background=random`}
+                <Image
+                src={`https://ui-avatars.com/api/?name=${character.name}&size=64&background=7B9BB3`}
                 alt={character.name}
+                width={80}
+                height={80}
                 />
             </div>
             <div className="flex-1 w-full text-center">

diff --git a/src/app/profile/components/ProfileDetails.tsx b/src/app/profile/components/ProfileDetails.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { User } from '@/types/user'
 
 interface ProfileDetailsProps {
@@ -6,21 +7,26 @@ interface ProfileDetailsProps {
 
 export default function ProfileDetails({ user }: ProfileDetailsProps) {
     return (
-        <div data-testid="profile-details" className="flex items-center bg-gray-800 m-2 p-5 rounded-lg w-1/3">
+        <div data-testid="profile-details" className="flex-column items-center bg-gray-800 m-2 p-5 rounded-lg w-1/3 h-">
             <div className="w-16 h-16 rounded-full mr-2 mb-4 overflow-hidden shrink-0">
-               <img 
-                data-testid="profile-avatar"
-                src={`https://ui-avatars.com/api/?name=${user.username}&size=64&background=random`}
-                alt={user.username}
+               <Image 
+                    data-testid="profile-avatar"
+                    src={`https://ui-avatars.com/api/?name=${user.username}&size=64&background=7B9BB3`}
+                    alt={user.username}
+                    width={120}
+                    height={120}
+                    priority
                 />
             </div>
-            <dl>
-                <dt>Username:</dt>
-                <dd>{user.username}</dd>
+            <div>
+                <dl>
+                    <dt>Username:</dt>
+                    <dd>{user.username}</dd>
 
-                <dt>Email:</dt>
-                <dd>{user.email}</dd>
-            </dl>
+                    <dt>Email:</dt>
+                    <dd>{user.email}</dd>
+                </dl>
+            </div>
         </div>
     )
 }
diff --git a/src/app/providers/DataProvider.tsx b/src/app/providers/DataProvider.tsx
@@ -1,57 +1,13 @@
 'use client'
 
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
-import { User } from '@/types/user'
-import { Character } from '@/types/character'
-import { mockUser, mockCharacters } from '@/mocks'
-import { fetchUser } from '@/lib/api'
-
-interface DataContextType {
-    user: User | null
-    setUser: (user: User | null) => void
-    characters: Character[]
-    setCharacters: (characters: Character[]) => void
-    loading: boolean
-}
+import { createContext, useContext, ReactNode } from 'react'
+import { DataContextType } from '@/types'
 
 const DataContext = createContext<DataContextType | null>(null)
 
-// Toggle this to switch between mock and real data
-const USE_MOCK_DATA = true
-
-export function DataProvider({ children, userId }: { children: ReactNode; userId: number }) {
-    const [user, setUser] = useState<User | null>(USE_MOCK_DATA ? mockUser : null)
-    const [characters, setCharacters] = useState<Character[]>(USE_MOCK_DATA ? mockCharacters : [])
-    const [loading, setLoading] = useState<boolean>(false)
-
-    useEffect(() => {
-        if (!USE_MOCK_DATA && !userId) {
-            return
-        }
-
-        async function loadData() {
-            try {
-                setLoading(true)
-
-                if (USE_MOCK_DATA) {
-                    setUser(mockUser)
-                    setCharacters(mockCharacters)
-                } else {
-                    const userData = await fetchUser(userId)
-                    setUser(userData)
-                }
-            } catch (error) {
-                console.error('Failed to load data:', error)
-            } finally {
-                setLoading(false)
-            }
-        }
-
-        loadData()
-    }, [userId])
-
+export function DataProvider({ children, value }: { children: ReactNode; value: DataContextType }) {
     return (
-        <DataContext.Provider value={{ user, setUser, characters, setCharacters, loading }}>
+        <DataContext.Provider value={value}>
             {children}
         </DataContext.Provider>
     )

diff --git a/src/app/providers/MockDataProvider.tsx b/src/app/providers/MockDataProvider.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { useState, ReactNode } from 'react'
+import { DataProvider } from '@/app/providers'
+import { User, Character } from '@/types'
+import {mockUser, mockCharacters } from '@/mocks'
+
+export function MockDataProvider({ children }: { children: ReactNode}) {
+    const [ user, setUser ] = useState<User | null>(mockUser)
+    const [ characters, setCharacters ] = useState<Character[]>(mockCharacters)
+
+    return (
+        <DataProvider
+            value={{
+                user, 
+                setUser, 
+                characters, 
+                setCharacters, 
+                loading: false, 
+                isMockData:true
+            }}
+        >
+            {children}
+        </DataProvider>
+    )
+}
diff --git a/src/app/providers/RealDataProvider.tsx b/src/app/providers/RealDataProvider.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { useState, ReactNode, useEffect } from 'react'
+import { DataProvider } from '@/app/providers'
+import { User, Character } from '@/types'
+import { fetchUser, fetchUserCharacters } from '@/lib/api'
+
+export function RealDataProvider({ children, userId }: { children: ReactNode, userId?: number}) {
+    const [ user, setUser ] = useState<User | null>(null)
+    const [ characters, setCharacters ] = useState<Character[]>([])
+    const [ loading, setLoading ] = useState(true)
+
+    useEffect(() =>{
+        if(!userId) {
+            setLoading(false)
+            return
+        }
+
+        async function loadData() {
+            try {
+                setLoading(true)
+
+                const [ userData, characterData ] = await Promise.all([
+                    fetchUser(userId!),
+                    fetchUserCharacters(userId!)
+                ])
+
+                setUser(userData)
+                setCharacters(characterData)
+
+            } catch (error) {
+                console.error('Failed to load data:', error)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        loadData()
+    }, [userId])
+
+    return (
+        <DataProvider
+            value={{
+                user, 
+                setUser, 
+                characters, 
+                setCharacters, 
+                loading, 
+                isMockData:false
+            }}
+        >
+            {children}
+        </DataProvider>
+    )
+}
diff --git a/src/app/providers/helper/AppDataProvider.tsx b/src/app/providers/helper/AppDataProvider.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { MockDataProvider, RealDataProvider } from '@/app/providers'
+
+const USE_MOCK_DATA = true
+
+export function AppDataProvider({ 
+    children, 
+    userId
+}: { 
+    children: ReactNode,
+    userId?: number 
+}) {
+    if(USE_MOCK_DATA) {
+        return <MockDataProvider>{children}</MockDataProvider>
+    }
+
+    return <RealDataProvider userId={userId}>{children}</RealDataProvider>
+}
diff --git a/src/app/providers/index.ts b/src/app/providers/index.ts
@@ -0,0 +1,4 @@
+export { AppDataProvider } from './helper/AppDataProvider'
+export { DataProvider, useData } from './DataProvider'
+export { RealDataProvider } from './RealDataProvider'
+export { MockDataProvider } from './MockDataProvider'
diff --git a/src/components/layout/Header/header.tsx b/src/components/layout/Header/header.tsx
@@ -1,13 +1,13 @@
 import Link from 'next/link'
+import Image from 'next/image'
 
 export default function Header() {
     return (
         <header className="fixed top-0 w-full bg-black shadow-lg z-50">
             <div className="flex justify-between items-center my-4">
                 <div className="basis-2/10 ml-10">
-                    {/*  eslint-disable-next-line @next/next/no-img-element */}
                     <Link href="/">
-                        <img className="size-28" src="/logo.svg" alt="sg_logo" />
+                        <Image className="size-28" src="/logo.svg" alt="sg_logo" width={120} height={120} priority/>
                     </Link>
                 </div>
                 <nav className="basis-3/10 mr-10">

diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -1,6 +1,6 @@
 import { SG_API_BASE_URL, SG_API_ENDPOINTS } from './config'
-import { User } from '@/types/user'
-import { JsonApiResponse, extractSingle } from './jsonApiClient'
+import { User, Character } from '@/types'
+import { JsonApiResponse, extractSingle, extractAll } from './jsonApiClient'
 
 export async function apiRequest<T>(endpoint: string, options?: RequestInit): Promise<T> {
     const response = await fetch(`${SG_API_BASE_URL}${endpoint}`, {
@@ -22,3 +22,8 @@ export async function fetchUser(id: number): Promise<User> {
     const json = await apiRequest<JsonApiResponse<User>>(SG_API_ENDPOINTS.userById(id))
     return extractSingle<User>(json)
 }
+
+export async function fetchUserCharacters(id: number): Promise<Character[]> {
+    const json = await apiRequest<JsonApiResponse<Character>>(SG_API_ENDPOINTS.charactersByUserId(id))
+    return extractAll<Character>(json)
+}
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -6,10 +6,7 @@ export const APP_NAME = 'SilverGuild'
 
 // API Endpoints
 export const SG_API_ENDPOINTS = {
-    users: '/users',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     userById: (id: number) => `/users/${id}`,
-    characters: '/characters',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    characterById: (id: number) => `/characters/$(id)`,
+    charactersByUserId: (userId: number) => `/users/${userId}/characters`,
+    characterById: (id: number) => `/characters/${id}`
 } as const
diff --git a/src/lib/jsonApiClient.ts b/src/lib/jsonApiClient.ts
@@ -14,3 +14,14 @@ export function extractSingle<T>(response: JsonApiResponse<T>): T & { id: number
     const item = response.data[0]
     return { id: item.id, ...item.attributes }
 }
+
+export function extractAll<T>(response: JsonApiResponse<T>): Array<T & {id: number }> {
+    if (!response.data || response.data.length == 0) {
+        return []
+    }
+
+    return response.data.map(item => ({
+        id: item.id,
+        ...item.attributes
+    }))
+}
diff --git a/src/types/dataContext.ts b/src/types/dataContext.ts
@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react'
+import { Character, User } from './index'
+
+
+export interface DataContextType {
+    user: User | null
+    setUser: Dispatch<SetStateAction<User | null>>
+    characters: Character[]
+    setCharacters: Dispatch<SetStateAction<Character[]>>
+    loading: boolean,
+    isMockData: boolean
+}
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -0,0 +1,3 @@
+export type { Character } from './character'
+export type { User } from './user'
+export type { DataContextType } from './dataContext'