From 26497ed191ebca4051aa4aa04cbd4c1aab571f38 Mon Sep 17 00:00:00 2001 From: GamerBoss101 Date: Sun, 13 Apr 2025 05:50:34 -0400 Subject: [PATCH] Friend Requests System --- src/app/(app)/profile/Friend.tsx | 36 ++ src/app/(app)/profile/FriendRequest.tsx | 53 +++ src/app/(app)/profile/page.tsx | 417 ++++++++++++++---------- src/app/api/me/route.ts | 22 +- src/app/api/user/[id]/route.ts | 4 +- 5 files changed, 352 insertions(+), 180 deletions(-) create mode 100644 src/app/(app)/profile/Friend.tsx create mode 100644 src/app/(app)/profile/FriendRequest.tsx diff --git a/src/app/(app)/profile/Friend.tsx b/src/app/(app)/profile/Friend.tsx new file mode 100644 index 0000000..07dbcb1 --- /dev/null +++ b/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(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 ( +
  • + + {username ? `${username} (${friendCode})` : "Loading..."} + +
    • + ); +} \ No newline at end of file diff --git a/src/app/(app)/profile/FriendRequest.tsx b/src/app/(app)/profile/FriendRequest.tsx new file mode 100644 index 0000000..b7c323a --- /dev/null +++ b/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(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 ( +
  • + + {username ? `${username} (${request})` : "Loading..."} + +
    + + +
    +
    • + ); +} \ No newline at end of file diff --git a/src/app/(app)/profile/page.tsx b/src/app/(app)/profile/page.tsx index 710854d..4a8c1b8 100644 --- a/src/app/(app)/profile/page.tsx +++ b/src/app/(app)/profile/page.tsx @@ -2,200 +2,267 @@ 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 { 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 - useEffect(() => { - if (isAuthenticated && session) { - setBio(session.bio || ""); - setUsername(session.username || ""); - setPoints(session.points || 0); - setFriends(session.friends || []); - setRequests(session.requests || []); - } - }, [session]); + useEffect(() => { + if (isAuthenticated && session) { + setBio(session.bio || ""); + setUsername(session.username || ""); + setPoints(session.points || 0); + setFriends(session.friends || []); + setRequests(session.requests || []); + } + }, [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); + 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."); - } - } + 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; - } + 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); + 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!"); - setRequests((prev: any) => [...prev, friendCode]); - 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."); - }); - } + 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!"); + setRequests((prev: any) => [...prev, friendCode]); + 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."); + }); + } - return ( -
    -
    -

    - Hi, {username || ""}!! -

    + function handleAcceptRequest(request: string) { + // Remove the request from the requests array and update the state + setRequests((prev: any) => prev.filter((req: string) => req !== request)); -
    - {isAuthenticated && ( - Profile Preview - )} -
    + // Add the request to the friends array and update the state + setFriends((prev: any) => [...prev, request]); -
    - {/* Username Input */} - setUsername(e.target.value)} - value={username || ""} - placeholder="Update your username..." - /> + // update the user's friends in the database + const formData = new FormData(); + formData.append("friend", request); - {/* Bio Input */} -