More Updates

This commit is contained in:
2025-04-13 07:59:57 -04:00
parent 73cd3bbb70
commit e933731c58
2 changed files with 125 additions and 102 deletions

View File

@@ -5,111 +5,134 @@ import React, { useEffect, useState } from "react";
import Post from "../../lib/components/Post"; import Post from "../../lib/components/Post";
function Mobile() { function Mobile() {
const { isAuthenticated, session } = useDevice(); const { isAuthenticated, session } = useDevice();
const [friendsPostsData, setFriendsPosts] = useState<any[]>([]); const [friendsPostsData, setFriendsPosts] = useState<any[]>([]);
function getFriendsPosts(friendId: any) { // Fetch friends' posts
fetch(`/api/user/${friendId}/posts`) function getFriendsPosts(friendId: any) {
.then((res) => res.json()) fetch(`/api/user/${friendId}/posts`)
.then((data) => { .then((res) => res.json())
if (data.posts) { .then((data) => {
setFriendsPosts([...friendsPostsData, ...data.posts]); if (data.posts) {
} else { setFriendsPosts((prevPosts) => [...prevPosts, ...data.posts]);
console.error("No posts found for friend ID:", friendId); } else {
} console.error("No posts found for friend ID:", friendId);
}) }
.catch((err) => { })
console.error("Error fetching friend's posts:", err); .catch((err) => {
}); console.error("Error fetching friend's posts:", err);
} });
}
// Fetch friends' posts useEffect(() => {
useEffect(() => { if (isAuthenticated && session) {
if (isAuthenticated && session) { const friendsIds = session.friends.map((friend: any) => friend);
let friendsIds = session.friends.map((friend: any) => friend);
console.log("Friends IDs:", friendsIds); friendsIds.forEach((friendId: any) => {
getFriendsPosts(friendId);
});
}
}, [isAuthenticated, session]);
// use /api/users/:id to get friend data // Handler for liking a post
friendsIds.forEach((friendId: any) => { const handleLike = async (postId: string) => {
fetch(`/api/user/${friendId}`) try {
.then((res) => res.json()) const response = await fetch(`/api/post/${postId}`, {
.then((data) => { method: "POST",
if (data.user) { body: new URLSearchParams({ like: "true" }),
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 ( if (response.ok) {
<main className="flex flex-col gap-[32px] my-20 row-start-2 items-center mt-10 text-white"> setFriendsPosts((prevPosts) =>
<img prevPosts.map((post) =>
src="/drinkhappylogo.png" post.id === postId
alt="Drink Happy Logo Image" ? {
className="h-auto mx-auto my-auto w-3/4 lg:w-1/3" ...post,
/> reactions: [...post.reactions, { liked: true, warned: false }],
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left"> }
{isAuthenticated ? `Welcome, ${session.username} !!` : ""} : post
</h1> )
{!isAuthenticated ? ( );
<div className="flex gap-4"> } else {
<button type="button" className="btn bg-surface-500"> const data = await response.json();
<a href="/auth/login?screen_hint=signup">Sign up</a> console.error(data.message || "Failed to like the post.");
</button> }
<button type="button" className="btn bg-surface-500"> } catch (error) {
<a href="/auth/login?screen_hint=login">Log in</a> console.error("Error liking post:", error);
</button> }
</div> };
) : (
<div className="w-full px-6"> // Handler for warning a post
<h2 className="text-2xl font-bold text-[color:var(--color-warning-300)] mb-4"> const handleWarning = async (postId: string) => {
Activity Feed try {
</h2> const response = await fetch(`/api/post/${postId}`, {
<div className="space-y-6"> method: "POST",
{friendsPostsData.map((post, index) => ( body: new URLSearchParams({ warn: "true" }),
<Post });
showDeleteButton={false} // No delete option for friends' posts
key={index} if (response.ok) {
post={post} setFriendsPosts((prevPosts) =>
allowReactions={true} // Allow reactions for friends' posts prevPosts.map((post) =>
onLike={() => console.log("Liked post:", post.id)} post.id === postId
onWarning={() => console.log("Warned post:", post.id)} ? {
onDelete={() => {}} // No delete option for friends' posts ...post,
/> reactions: [...post.reactions, { liked: false, warned: true }],
))} }
</div> : post
</div> )
)} );
</main> } else {
); const data = await response.json();
console.error(data.message || "Failed to warn the post.");
}
} catch (error) {
console.error("Error warning post:", error);
}
};
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">
<div className="bg-[color:var(--color-surface-800)] rounded-xl px-6 py-5 shadow-md">
<h2 className="text-2xl font-bold text-center 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={() => handleLike(post.id)} // Pass the like handler
onWarning={() => handleWarning(post.id)} // Pass the warning handler
onDelete={() => {}} // No delete option for friends' posts
/>
))}
</div>
</div>
</div>
)}
</main>
);
} }
function Web() { export default Mobile;
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();
}

View File

@@ -81,7 +81,7 @@ export default function Post({
<img <img
src={"data:image/png;base64," + post.image} src={"data:image/png;base64," + post.image}
alt="Post related" alt="Post related"
className="w-full max-h-64 object-cover rounded mb-4" className="w-full max-h-64 object-contain rounded mb-4"
/> />
)} )}