Implement usernames and profile sections

frontend/src/core/api/profileApi.ts

@@ -4,7 +4,8 @@ import type { UserProfile } from "@/core/types";
 
 export interface ProfileData {
     profile_picture?: string;
-    nickname?: string;
+    username?: string;
+    display_name?: string;
     description?: string;
 }
 
@@ -26,7 +27,8 @@ export async function loadProfile(token: string): Promise<ProfileData | null> {
             // Map backend fields to frontend fields
             return {
                 profile_picture: data.profile_picture,
-                nickname: data.username,
+                username: data.username,
+                display_name: data.display_name,
                 description: data.bio
             };
         }
@@ -69,7 +71,8 @@ export async function updateProfile(token: string, data: Partial<ProfileData>):
     try {
         // Map frontend fields to backend fields
         const backendData = {
-            nickname: data.nickname,
+            username: data.username,
+            display_name: data.display_name,
             description: data.description
         };
 
@@ -126,3 +129,23 @@ export async function fetchUserProfile(token: string, username: string): Promise
         return null;
     }
 }
+
+/**
+ * Fetches user profile data by user ID
+ */
+export async function fetchUserProfileById(token: string, userId: number): Promise<UserProfile | null> {
+    try {
+        const response = await fetch(`${API_BASE_URL}/user/id/${userId}`, {
+            headers: getAuthHeaders(token)
+        });
+
+        if (response.ok) {
+            return await response.json();
+        }
+
+        return null;
+    } catch (error) {
+        console.error('Error fetching user profile by ID:', error);
+        return null;
+    }
+}

frontend/src/core/types.d.ts

@@ -62,6 +62,7 @@ export interface Reaction {
 
 export interface Message {
     id: number;
+    user_id: number;
     username: string;
     content: string;
     is_read: boolean;
@@ -111,6 +112,7 @@ export interface User {
     last_seen: string;
     online: boolean;
     username: string;
+    display_name: string;
     admin?: boolean;
     bio?: string;
     profile_picture: string;
@@ -130,6 +132,7 @@ export interface User {
 export interface UserProfile {
     id: number;
     username: string;
+    display_name: string;
     profile_picture?: string;
     bio?: string;
     online: boolean;
@@ -163,6 +166,7 @@ export interface LoginRequest {
  */
 export interface RegisterRequest {
     username: string;
+    display_name: string;
     password: string;
     confirm_password: string;
 }