Friend Requests System

src/app/(app)/profile/Friend.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface FriendProps {
+    friendCode: string;
+}
+
+export default function Friend({ friendCode }: FriendProps) {
+    const [username, setUsername] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Fetch the username based on the friend code
+        fetch(`/api/user/${friendCode}`)
+            .then((res) => res.json())
+            .then((data) => {
+                if (data.user) {
+                    setUsername(data.user.username);
+                } else {
+                    setUsername("Unknown User");
+                }
+            })
+            .catch((err) => {
+                console.error("Error fetching username:", err);
+                setUsername("Unknown User");
+            });
+    }, [friendCode]);
+
+    return (
+        <li className="flex justify-between items-center bg-neutral-800 p-3 rounded">
+            <span className="text-neutral-200">
+                {username ? `${username} (${friendCode})` : "Loading..."}
+            </span>
+        </li>
+    );
+}

src/app/(app)/profile/FriendRequest.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface FriendRequestProps {
+    request: string;
+    onAccept: (request: string) => void;
+    onDeny: (request: string) => void;
+}
+
+export default function FriendRequest({ request, onAccept, onDeny }: FriendRequestProps) {
+    const [username, setUsername] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Fetch the username based on the friend code
+        fetch(`/api/user/${request}`)
+            .then((res) => res.json())
+            .then((data) => {
+                if (data.user) {
+                    setUsername(data.user.username);
+                } else {
+                    setUsername("Unknown User");
+                }
+            })
+            .catch((err) => {
+                console.error("Error fetching username:", err);
+                setUsername("Unknown User");
+            });
+    }, [request]);
+    
+
+    return (
+        <li className="flex justify-between items-center bg-neutral-800 p-3 rounded">
+            <span className="text-neutral-200">
+                {username ? `${username} (${request})` : "Loading..."}
+            </span>
+            <div className="flex gap-2">
+                <button
+                    className="px-3 py-1 bg-success-600 text-white rounded hover:bg-success-700"
+                    onClick={() => onAccept(request)}
+                >
+                    Accept
+                </button>
+                <button
+                    className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+                    onClick={() => onDeny(request)}
+                >
+                    Deny
+                </button>
+            </div>
+        </li>
+    );
+}

src/app/(app)/profile/page.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from "react";
 import { useDevice } from "@/lib/context/DeviceContext";
+import FriendRequest from "./FriendRequest";
+import Friend from "./Friend";
 
 function Mobile() {
 	const { isAuthenticated, session } = useDevice();
@@ -81,6 +83,62 @@ function Mobile() {
 			});
 	}
 
+	function handleAcceptRequest(request: string) {
+		// Remove the request from the requests array and update the state
+		setRequests((prev: any) => prev.filter((req: string) => req !== request));
+
+		// Add the request to the friends array and update the state
+		setFriends((prev: any) => [...prev, request]);
+
+		// update the user's friends in the database
+		const formData = new FormData();
+		formData.append("friend", request);
+
+		fetch(`/api/me`, {
+			method: "POST",
+			body: formData,
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.message === "Friend request accepted successfully") {
+					alert("Friend request accepted!");
+				}
+			})
+			.catch((err) => {
+				console.error("Error accepting friend request:", err);
+				alert("An error occurred while accepting the friend request.");
+			});
+		alert(`Accepted friend request from ${request}`);
+	}
+
+	function handleDenyRequest(request: string) {
+		// Remove the request from the requests array and update the state
+		setRequests((prev: any) => prev.filter((req: string) => req !== request));
+
+		// update the user's requests in the database
+		const formData = new FormData();
+		formData.append(
+			"requests",
+			JSON.stringify(requests.filter((req: string) => req !== request))
+		);
+		fetch(`/api/user/${session?.id}`, {
+			method: "POST",
+			body: formData,
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.message === "Friend request denied successfully") {
+					alert("Friend request denied!");
+				}
+			})
+			.catch((err) => {
+				console.error("Error denying friend request:", err);
+				alert("An error occurred while denying the friend request.");
+			});
+
+		alert(`Denied friend request from ${request}`);
+	}
+
 	return (
 		<div className="px-6 py-10 my-10 max-w-full lg:max-w-1/2 mx-auto font-sans text-neutral-100">
 			<div className="bg-[color:var(--color-surface-800)]/70 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
@@ -145,9 +203,11 @@ function Mobile() {
 					<h3 className="text-2xl font-semibold text-[color:var(--color-warning-200)] mb-2">
 						Friends
 					</h3>
-                    <ul className="list-disc pl-5 text-neutral-200 space-y-1">
+					<ul className="list-none space-y-4">
 						{friends.length > 0 ? (
-                            friends.map((friend: any, index: any) => <li key={index}>{friend}</li>)
+							friends.map((friendCode: string, index: number) => (
+								<Friend key={index} friendCode={friendCode} />
+							))
 						) : (
 							<p className="text-neutral-400">No friends yet.</p>
 						)}
@@ -159,9 +219,16 @@ function Mobile() {
 					<h3 className="text-2xl font-semibold text-[color:var(--color-warning-200)] mb-2">
 						Friend Requests
 					</h3>
-                    <ul className="list-disc pl-5 text-neutral-200 space-y-1">
+					<ul className="list-none space-y-4">
 						{requests.length > 0 ? (
-                            requests.map((request: any, index: any) => <li key={index}>{request}</li>)
+							requests.map((request: string, index: number) => (
+								<FriendRequest
+									key={index}
+									request={request}
+									onAccept={handleAcceptRequest}
+									onDeny={handleDenyRequest}
+								/>
+							))
 						) : (
 							<p className="text-neutral-400">No friend requests yet.</p>
 						)}

src/app/api/me/route.ts

@@ -48,15 +48,31 @@ export async function POST(req: Request) {
 			if (!userData) return NextResponse.json({ message: "Failed to update inventory" }, { status: 500 });
 		}
 
-		let friends = formData.get("friends");
+		let friend = formData.get("friend");
-		if(friends) {
+		if(friend) {
 			let friendsData = userData.friends;
 			if (!friendsData) friendsData = [];
-			friendsData.push(friends.toString());
+			friendsData.push(friend.toString());
+
+			// Remove the friend from the requests array
+			let requestsData = userData.requests;
+			if (requestsData) {
+				requestsData = requestsData.filter((req: string) => req !== friend);
+				userData = await db.users.update(userData.id, { requests: requestsData });
+				if (!userData) return NextResponse.json({ message: "Failed to update requests" }, { status: 500 });
+			}
+
 			userData = await db.users.update(userData.id, { friends: friendsData });
 			if (!userData) return NextResponse.json({ message: "Failed to update friends" }, { status: 500 });
 		}
 
+		let requests = formData.get("requests");
+		if(requests) {
+			if(!Array.isArray(requests)) return NextResponse.json({ message: "Invalid requests data" }, { status: 400 });
+			userData = await db.users.update(userData.id, { requests });
+			if (!userData) return NextResponse.json({ message: "Failed to update requests" }, { status: 500 });
+		}
+        
         return NextResponse.json({ message: "User updated successfully", user: userData }, { status: 200 });
 	} catch (error) {
 		console.error("Error updating user bio:", error);

src/app/api/user/[id]/route.ts

@@ -20,7 +20,7 @@ export async function GET(req: Request, { params }: any) {
     try {
         if (!(await authenticateUser())) return;
 
-        const { id } = params;
+        const { id } = await params;
 
         const user = await db.users.findById(id);
 
@@ -40,7 +40,7 @@ export async function POST(req: Request, { params }: any) {
     try {
         if (!(await authenticateUser())) return;
 
-        const { id } = params;
+        const { id } = await params;
 
         let user = await db.users.findById(id);