116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
"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/user/${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) {
|
|
let friendsIds = session.friends.map((friend: any) => friend);
|
|
|
|
console.log("Friends IDs:", friendsIds);
|
|
|
|
// use /api/users/:id to get friend data
|
|
friendsIds.forEach((friendId: any) => {
|
|
fetch(`/api/user/${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]);
|
|
|
|
return (
|
|
<main className="flex flex-col gap-[32px] my-20 row-start-2 items-center mt-10 text-white">
|
|
<img
|
|
src="/drinkhappylogo.png"
|
|
alt="Drink Happy Logo Image"
|
|
className="h-auto mx-auto my-auto w-3/4 lg:w-1/3"
|
|
/>
|
|
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
|
|
{isAuthenticated ? `Welcome, ${session.username} !!` : ""}
|
|
</h1>
|
|
{!isAuthenticated ? (
|
|
<div className="flex gap-4">
|
|
<button type="button" className="btn bg-surface-500">
|
|
<a href="/auth/login?screen_hint=signup">Sign up</a>
|
|
</button>
|
|
<button type="button" className="btn bg-surface-500">
|
|
<a href="/auth/login?screen_hint=login">Log in</a>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<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
|
|
showDeleteButton={false} // No delete option for friends' posts
|
|
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>
|
|
);
|
|
}
|
|
|
|
function Web() {
|
|
const { isAuthenticated, session } = useDevice();
|
|
|
|
return (
|
|
<main className="flex flex-col row-start-2 items-center mt-10">
|
|
<img
|
|
src="/drinkhappylogo.png"
|
|
alt="Drink Happy Logo Image"
|
|
className="h-auto mx-auto w-3/4 lg:w-1/3"
|
|
/>
|
|
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left text-white">
|
|
{isAuthenticated ? `Welcome, ${session.username} !!` : ""}
|
|
</h1>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function Home() {
|
|
const { isMobile, isSafari } = useDevice();
|
|
if (isMobile && isSafari) return Mobile();
|
|
else return Mobile();
|
|
}
|