Update App

src/app/(app)/page.tsx

@@ -1,9 +1,50 @@
 "use client";
 
 import { useDevice } from "@/lib/context/DeviceContext";
+import React, { useEffect, useState } from "react";
+import Post from "../../lib/components/Post";
 
 function Mobile() {
 	const { isAuthenticated, session } = useDevice();
+	const [friendsPostsData, setFriendsPosts] = useState<any[]>([]);
+
+	function getFriendsPosts(friendId: any) {
+		fetch(`/api/users/${friendId}/posts`)
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.posts) {
+					setFriendsPosts([...friendsPostsData, ...data.posts]);
+				} else {
+					console.error("No posts found for friend ID:", friendId);
+				}
+			})
+			.catch((err) => {
+				console.error("Error fetching friend's posts:", err);
+			});
+	}
+
+	// Fetch friends' posts
+	useEffect(() => {
+		if (isAuthenticated && session?.friends) {
+			let friendsIds = session.friends.map((friend: any) => friend.id);
+
+			// use /api/users/:id to get friend data
+			friendsIds.forEach((friendId: any) => {
+				fetch(`/api/users/${friendId}`)
+					.then((res) => res.json())
+					.then((data) => {
+						if (data.user) {
+							getFriendsPosts(data.user.id);
+						} else {
+							console.error("No user data found for friend ID:", friendId);
+						}
+					})
+					.catch((err) => {
+						console.error("Error fetching friend data:", err);
+					});
+			});
+		}
+	}, [isAuthenticated, session?.friends]);
 
 	return (
 		<main className="flex flex-col gap-[32px] row-start-2 items-center mt-10 text-white">
@@ -24,7 +65,25 @@ function Mobile() {
 						<a href="/auth/login?screen_hint=login">Log in</a>
 					</button>
 				</div>
-			) : null}
+			) : (
+				<div className="w-full px-6">
+					<h2 className="text-2xl font-bold text-[color:var(--color-warning-300)] mb-4">
+						Activity Feed
+					</h2>
+					<div className="space-y-6">
+						{friendsPostsData.map((post, index) => (
+							<Post
+								key={index}
+								post={post}
+								allowReactions={true} // Allow reactions for friends' posts
+								onLike={() => console.log("Liked post:", post.id)}
+								onWarning={() => console.log("Warned post:", post.id)}
+								onDelete={() => {}} // No delete option for friends' posts
+							/>
+						))}
+					</div>
+				</div>
+			)}
 		</main>
 	);
 }
@@ -48,6 +107,6 @@ function Web() {
 
 export default function Home() {
 	const { isMobile, isSafari } = useDevice();
-	if (isMobile && isSafari) return Mobile();
-	else return Web();
+	if (isMobile && isSafari) return <Mobile />;
+	else return <Web />;
 }