Profile Friend stuff

2025-04-13 05:21:54 -04:00
parent 71daa94988
commit f30ab236c7
4 changed files with 226 additions and 127 deletions
--- a/src/app/(app)/profile/page.tsx
+++ b/src/app/(app)/profile/page.tsx
@@ -7,11 +7,18 @@ 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

    useEffect(() => {
-		if (session) {
+        if (isAuthenticated && session) {
            setBio(session.bio || "");
            setUsername(session.username || "");
+            setPoints(session.points || 0);
+            setFriends(session.friends || []);
+            setRequests(session.requests || []);
        }
    }, [session]);

@@ -24,12 +31,13 @@ function Mobile() {

            fetch("/api/me", {
                method: "POST",
-				body: formData, // Automatically sets Content-Type to multipart/form-data
+                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.");
                    }
@@ -43,9 +51,39 @@ function Mobile() {
        }
    }

+    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", friendCode);
+
+        fetch(`/api/user/${session?.id}`, {
+            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 (
        <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-600)]/70 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
+            <div className="bg-[color:var(--color-surface-800)]/70 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
                <h1 className="text-2xl sm:text-3xl font-bold tracking-[-.01em] text-center">
                    Hi, {username || ""}!!
                </h1>
@@ -89,62 +127,75 @@ function Mobile() {
                </form>
            </div>

-			{/* Friends */}
-			<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-md">
-				<h2 className="text-3xl font-bold tracking-[-.01em] text-[color:var(--color-warning-300)]">
-					Friends
+            {/* Friends, Friend Requests, and Send Friend Request Section */}
+            <div className="bg-[color:var(--color-surface-800)] rounded-xl px-6 py-5 my-6 shadow-md">
+                <h2 className="text-3xl font-bold tracking-[-.01em] text-[color:var(--color-warning-300)] mb-4">
+                    Friends & Requests
                </h2>
-				<p className="text-lg text-neutral-100">[ friendsCount variable ]</p>
-			</div>

-			{/* Total Points */}
-			<div className="bg-[color:var(--color-success-600)] rounded-xl px-6 py-6 my-6 shadow-md">
-				<h2 className="text-3xl font-bold text-[color:var(--color-warning-300)] mb-2">
-					Total Points
-				</h2>
-				<p className="text-lg text-neutral-100">[ totalPoints variable? ]</p>
-			</div>
-
-			{/* Daily Stats */}
-			<div className="bg-[color:var(--color-surface-600)]/70 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
-				<h2 className="text-xl font-semibold text-[color:var(--color-warning-300)] mt-0 mb-2">
-					Daily Stats
-				</h2>
-				<ul className="list-disc pl-5 text-neutral-200 space-y-1">
-					<li>Points Logged: [ dailyPoints variable ]</li>
-					<li>Caffeine Logged (mg): [ daily caffeine variable ]</li>
-					<li>Sugar Logged (g): [ daily sugar variable ]</li>
-				</ul>
-				<p className="font-semibold italic text-[color:var(--color-success-300)] mt-1">
-					Don't forget you have a 400mg caffeine limit and 30.5g sugar limit!
+                {/* Friend Code */}
+                <div className="mb-4">
+                    <p className="text-lg text-neutral-100">
+                        <strong>Friend Code:</strong> <code>{session?.id}</code>
                    </p>
                </div>
+
+                {/* Friends List */}
+                <div className="mb-6">
+                    <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">
+                        {friends.length > 0 ? (
+                            friends.map((friend: any, index: any) => <li key={index}>{friend}</li>)
+                        ) : (
+                            <p className="text-neutral-400">No friends yet.</p>
+                        )}
+                    </ul>
+                </div>
+
+                {/* Friend Requests */}
+                <div className="mb-6">
+                    <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">
+                        {requests.length > 0 ? (
+                            requests.map((request: any, index: any) => <li key={index}>{request}</li>)
+                        ) : (
+                            <p className="text-neutral-400">No friend requests yet.</p>
+                        )}
+                    </ul>
+                </div>
+
+                {/* Send Friend Request */}
                <div>
-				<button type="button" className="btn bg-surface-800 w-full">
-					<a href="/auth/logout">Logout</a>
+                    <h3 className="text-2xl font-semibold text-[color:var(--color-warning-200)] mb-2">
+                        Send Friend Request
+                    </h3>
+                    <form onSubmit={handleSendFriendRequest} className="space-y-4">
+                        <input
+                            type="text"
+                            className="w-full p-2 rounded bg-neutral-800 text-white"
+                            onChange={(e) => setFriendCode(e.target.value)}
+                            value={friendCode}
+                            placeholder="Enter friend's code..."
+                        />
+                        <button
+                            type="submit"
+                            className="w-full px-4 py-2 bg-success-600 text-white rounded"
+                        >
+                            Send Request
                        </button>
+                    </form>
+                </div>
            </div>
        </div>
-	);
-}
-
-function Web() {
-	const { isAuthenticated, session } = useDevice();
-
-	return (
-		<main className="flex flex-col row-start-2 items-center mt-10">
-			<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left text-white">
-				{isAuthenticated ? `Welcome, ${session.username} !!` : ""}
-			</h1>
-			<span className="text-white">
-				Use the mobile app for a better experience!
-			</span>
-		</main>
    );
 }

 export default function ProfilePage() {
    const { isMobile, isSafari } = useDevice();
-	if (isMobile && isSafari) return Mobile();
-	else return Mobile();
+    if (isMobile && isSafari) return <Mobile />;
+    else return <Mobile />;
 }
--- a/src/app/api/me/route.ts
+++ b/src/app/api/me/route.ts
@@ -48,6 +48,15 @@ export async function POST(req: Request) {
 			if (!userData) return NextResponse.json({ message: "Failed to update inventory" }, { status: 500 });
 		}

+		let friends = formData.get("friends");
+		if(friends) {
+			let friendsData = userData.friends;
+			if (!friendsData) friendsData = [];
+			friendsData.push(friends.toString());
+			userData = await db.users.update(userData.id, { friends: friendsData });
+			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);
--- a/src/app/api/user/[id]/route.ts
+++ b/src/app/api/user/[id]/route.ts
@@ -34,3 +34,38 @@ export async function GET(req: Request, { params }: any) {
        return NextResponse.json({ message: "Internal server error" }, { status: 500 });
    }
 }
+
+// for making friend requests
+export async function POST(req: Request, { params }: any) {
+    try {
+        if (!(await authenticateUser())) return;
+
+        const { id } = params;
+
+        let user = await db.users.findById(id);
+
+        let formData = await req.formData();
+        if (!formData) return NextResponse.json({ message: "No form data found" }, { status: 400 });
+
+        let friendCode = formData.get("friendCode");
+
+        if (!friendCode) return NextResponse.json({ message: "No friend code found" }, { status: 400 });
+        let friendCodeString = friendCode.toString();
+        if (friendCodeString.length !== 5) return NextResponse.json({ message: "Invalid friend code" }, { status: 400 });
+        
+        let requests = user.requests || [];
+
+        if (requests.includes(friendCodeString)) {
+            return NextResponse.json({ message: "Already sent a friend request" }, { status: 400 });
+        }
+
+        requests.push(friendCodeString);
+        user = await db.users.update(user.id, { requests });
+        if (!user) return NextResponse.json({ message: "Failed to update requests" }, { status: 500 });
+        return NextResponse.json({ message: "Friend request sent successfully" }, { status: 200 });
+    } catch (error) {
+        console.error("Error sending friend request:", error);
+        return NextResponse.json({ message: "Internal server error" }, { status: 500 });
+    }
+
+}
--- a/src/lib/css/globals.css
+++ b/src/lib/css/globals.css
@@ -29,3 +29,7 @@ body {
 	height: 100vh;
 	@apply dark:bg-[url('/darkmodebackground.png')] bg-[url('/lightmodebackground.png')];
 }
+
+code {
+	@apply bg-[#f5f5f5] text-[#333] dark:bg-[#333] dark:text-[#f5f5f5] p-1 rounded-md;
+}