Update App

This commit is contained in:
2025-04-13 07:43:11 -04:00
parent 2719927792
commit 814d5c1f1e
6 changed files with 174 additions and 52 deletions

View File

@@ -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 />;
}

View File

@@ -201,7 +201,6 @@ export default function PostsPage() {
allowReactions={false}
key={index}
post={post}
userReactions={userReactions[index] || { liked: false, warned: false }}
onLike={() => handleLike(index)}
onWarning={() => handleWarning(index)}
onDelete={() => handleDelete(index)} // Pass the delete handler

View File

@@ -0,0 +1,42 @@
import { NextResponse } from "next/server";
import { auth0 } from "../../../../../lib/scripts/auth0";
import { db } from "@/lib/scripts/db";
async function authenticateUser() {
const session = await auth0.getSession();
if (!session) {
return NextResponse.json({ message: "No session found" }, { status: 401 });
}
const sessionUser = session.user;
let userData = await db.users.findByEmail(sessionUser.email as string);
if (!userData) return NextResponse.json({ message: "User not found" }, { status: 404 });
return userData != null;
}
export async function GET(req: Request, { params }: any) {
try {
if (!(await authenticateUser())) return;
const { id } = params;
// Find the user by ID
const user = await db.users.findById(id);
if (!user) {
return NextResponse.json({ message: "User not found" }, { status: 404 });
}
// Fetch all posts for the user
const posts = await db.posts.getAllByUserId(id);
if (!posts || posts.length === 0) {
return NextResponse.json({ message: "No posts found for this user" }, { status: 404 });
}
return NextResponse.json({ posts }, { status: 200 });
} catch (error) {
console.error("Error fetching user posts:", error);
return NextResponse.json({ message: "Internal server error" }, { status: 500 });
}
}

View File

@@ -1,23 +1,25 @@
import type { MetadataRoute } from "next";
export default function manifest(): MetadataRoute.Manifest {
return {
name: "Healthify",
short_name: "Healthify",
description:
"Healthy APP",
start_url: "/",
display: "standalone",
background_color: "#000000",
theme_color: "#000000",
icons: [
{
src: "/vercel.svg",
sizes: "192x192",
type: "image/svg",
},
],
};
return {
name: "Drink Happy",
short_name: "Drink Happy",
description: "Track your drinks, earn points, and improve your health with Drink Happy!",
start_url: "/",
display: "standalone",
background_color: "#1E293B", // Matches the app's dark theme
theme_color: "#1E293B", // Matches the app's dark theme
icons: [
{
src: "/cappylogosmall.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/cappylogosmall.png",
sizes: "512x512",
type: "image/png",
},
],
};
}

View File

@@ -1,6 +1,27 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Drinkify",
description: "Drinkify health check app / game",
title: "Drink Happy - Health Check & Game",
description: "Drink Happy is a fun and engaging app to track your drink choices, earn points, and improve your health!",
keywords: ["Drink Happy", "Health", "Game", "Drink Tracker", "Healthy Lifestyle"],
themeColor: "#1E293B", // Matches the app's dark theme
appleWebApp: {
title: "Drink Happy",
statusBarStyle: "black-translucent",
capable: true,
},
manifest: "/manifest.json",
openGraph: {
title: "Drink Happy - Health Check & Game",
description: "Drink Happy is a fun and engaging app to track your drink choices, earn points, and improve your health!",
siteName: "Drink Happy",
images: [
{
url: "/cappylogosmall.png",
width: 512,
height: 512,
alt: "Drink Happy Logo",
},
],
},
};

View File

@@ -14,7 +14,6 @@ interface PostProps {
onLike: () => void;
onWarning: () => void;
onDelete: () => void; // Callback for deleting the post
userReactions: { liked: boolean; warned: boolean };
allowReactions: boolean; // New property to toggle reactions
}
@@ -23,10 +22,12 @@ export default function Post({
onLike,
onWarning,
onDelete,
userReactions,
allowReactions,
}: PostProps) {
const [userData, setUserData] = useState<{ username: string; avatar: number } | null>({username: "Loading...", avatar: 1});
const [userData, setUserData] = useState<{ username: string; avatar: number } | null>({
username: "Loading...",
avatar: 1,
});
useEffect(() => {
// Fetch the username and avatar based on the userId
@@ -89,30 +90,28 @@ export default function Post({
{/* Post Actions */}
<div className="flex gap-4 items-center">
{allowReactions && (
<>
<button
onClick={onLike}
className={`px-3 py-1 rounded text-sm ${
userReactions.liked
? "bg-success-800"
: "bg-success-600 hover:bg-primary-600"
} text-white`}
>
👍 Like ({post.reactions.filter((reaction) => reaction.liked).length})
</button>
<button
onClick={onWarning}
className={`px-3 py-1 rounded text-sm ${
userReactions.warned
? "bg-red-800"
: "bg-primary-500 hover:bg-red-600"
} text-white`}
>
😭 Stop drinking that ({post.reactions.filter((reaction) => reaction.warned).length})
</button>
</>
)}
<button
onClick={onLike}
disabled={!allowReactions} // Disable button if allowReactions is false
className={`px-3 py-1 rounded text-sm ${
allowReactions
? "bg-success-600 hover:bg-primary-600 text-white"
: "bg-gray-500 text-gray-300 cursor-not-allowed"
}`}
>
👍 Like ({post.reactions.filter((reaction) => reaction.liked).length})
</button>
<button
onClick={onWarning}
disabled={!allowReactions} // Disable button if allowReactions is false
className={`px-3 py-1 rounded text-sm ${
allowReactions
? "bg-primary-500 hover:bg-red-600 text-white"
: "bg-gray-500 text-gray-300 cursor-not-allowed"
}`}
>
😭 Stop drinking that ({post.reactions.filter((reaction) => reaction.warned).length})
</button>
<button
onClick={onDelete}
className="px-3 py-1 rounded text-sm bg-red-600 hover:bg-red-700 text-white"