Remove Friends

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

@@ -4,9 +4,10 @@ import { useState, useEffect } from "react";
 
 interface FriendProps {
     friendCode: string;
+    onRemove: (friendCode: string) => void;
 }
 
-export default function Friend({ friendCode }: FriendProps) {
+export default function Friend({ friendCode, onRemove }: FriendProps) {
     const [username, setUsername] = useState<string | null>(null);
 
     useEffect(() => {
@@ -31,6 +32,12 @@ export default function Friend({ friendCode }: FriendProps) {
             <span className="text-neutral-200">
                 {username ? `${username} (${friendCode})` : "Loading..."}
             </span>
+            <button
+                className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+                onClick={() => onRemove(friendCode)}
+            >
+                Remove
+            </button>
         </li>
     );
 }

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

@@ -138,6 +138,33 @@ function Mobile() {
 		alert(`Denied friend request from ${request}`);
 	}
 
+	function handleRemoveFriend(friendCode: string) {
+		// Remove the friend from the friends array and update the state
+		setFriends((prev: string[]) => prev.filter((friend) => friend !== friendCode));
+
+
+		const formData = new FormData();
+		formData.append("friends", JSON.stringify(friends.filter((friend: string) => friend !== friendCode)));
+
+		// Update the user's friends in the database
+		fetch(`/api/me`, {
+			method: "POST",
+			body: formData,
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.message === "Friend removed successfully") {
+					alert("Friend removed successfully!");
+				} else {
+					alert("Failed to remove friend.");
+				}
+			})
+			.catch((err) => {
+				console.error("Error removing friend:", err);
+				alert("An error occurred while removing the friend.");
+			});
+	}
+
 	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">
@@ -205,7 +232,7 @@ function Mobile() {
 					<ul className="list-none space-y-4">
 						{friends.length > 0 ? (
 							friends.map((friendCode: string, index: number) => (
-								<Friend key={index} friendCode={friendCode} />
+								<Friend key={index} friendCode={friendCode} onRemove={handleRemoveFriend} />
 							))
 						) : (
 							<p className="text-neutral-400">No friends yet.</p>

src/app/api/me/route.ts

@@ -71,10 +71,16 @@ export async function POST(req: Request) {
 			userData = await db.users.update(userData.id, { requests: JSON.parse(requests.toString()) });
 			if (!userData) return NextResponse.json({ message: "Failed to update requests" }, { status: 500 });
 		}
+
+		let friends = formData.get("friends");
+		if(friends) {
+			userData = await db.users.update(userData.id, { friends: JSON.parse(friends.toString()) });
+			if (!userData) return NextResponse.json({ message: "Failed to update friends" }, { status: 500 });
+		}
         
         return NextResponse.json({ message: "User updated successfully", user: userData }, { status: 200 });
 	} catch (error) {
-		console.error("Error updating user bio:", error);
+		console.error("Error handling user update:", error);
 		return NextResponse.json(
 			{ message: "Internal server error" },
 			{ status: 500 }