"use client"; 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(); const [bio, setBio] = useState(session?.bio || ""); const [username, setUsername] = useState(session?.username || ""); const [points, setPoints] = useState(session?.points || 0); const [friends, setFriends] = useState(session?.friends || []); const [requests, setRequests] = useState(session?.requests || []); const [friendCode, setFriendCode] = useState(""); // Input for sending friend requests const [leaderboard, setLeaderboard] = useState([]); // Leaderboard data useEffect(() => { if (isAuthenticated && session) { setBio(session.bio || ""); setUsername(session.username || ""); setPoints(session.points || 0); setFriends(session.friends || []); setRequests(session.requests || []); // Fetch leaderboard data const fetchLeaderboard = async () => { try { const friendsData = await Promise.all( (session.friends || []).map((friendId: string) => fetch(`/api/user/${friendId}`) .then((res) => { if (!res.ok) { throw new Error(`Failed to fetch data for friend ${friendId}`); } return res.json(); }) .then((data) => { if (data.user) { return { id: data.user.id, username: data.user.username || "Unknown User", points: data.user.points || 0, }; } else { console.error(`No user found for friend ID: ${friendId}`); return null; } }) .catch((err) => { console.error(`Error fetching data for friend ${friendId}:`, err); return null; }) ) ); // Include the current user in the leaderboard const userData = { id: session.id, username: session.username || "You", points: session.points || 0, }; // Combine and sort by points in descending order const sortedLeaderboard = [userData, ...friendsData.filter(Boolean)].sort( (a, b) => b.points - a.points ); setLeaderboard(sortedLeaderboard); } catch (error) { console.error("Error fetching leaderboard data:", error); } }; fetchLeaderboard(); } }, [isAuthenticated, session]); function handleSubmit(e: React.FormEvent) { e.preventDefault(); if (bio.length > 0 || username.length > 0) { const formData = new FormData(); if (bio.length > 0) formData.append("bio", bio); if (username.length > 0) formData.append("username", username); fetch("/api/me", { method: "POST", body: formData, }) .then((res) => res.json()) .then((data) => { if (data.message === "User updated successfully") { alert("Profile updated successfully!"); setPoints(data.updatedPoints || points); } else { alert("Failed to update profile."); } }) .catch((err) => { console.error("Error updating profile:", err); alert("An error occurred while updating your profile."); }); } else { alert("Please enter a bio or username."); } } function handleSendFriendRequest(e: React.FormEvent) { e.preventDefault(); if (friendCode.length !== 5) { alert("Friend code must be exactly 5 characters."); return; } const formData = new FormData(); formData.append("friendCode", session?.id); fetch(`/api/user/${friendCode}`, { method: "POST", body: formData, }) .then((res) => res.json()) .then((data) => { if (data.message === "Friend request sent successfully") { alert("Friend request sent!"); setFriendCode(""); // Clear the input field } else { alert(data.message || "Failed to send friend request."); } }) .catch((err) => { console.error("Error sending friend request:", err); alert("An error occurred while sending the friend request."); }); } 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/me`, { 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}`); } 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) => { if (res.ok) { 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 (

Hi, {username || ""}!!

{isAuthenticated && ( Profile Preview )}
{/* Username Input */} setUsername(e.target.value)} value={username || ""} placeholder="Update your username..." /> {/* Bio Input */}