Update Post Page

src/app/(app)/posts/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useDevice } from "@/lib/context/DeviceContext";
-
 import React, { useEffect, useState } from "react";
 
 export default function PostsPage() {
@@ -10,6 +9,7 @@ export default function PostsPage() {
     const [userReactions, setUserReactions] = useState<{
         [index: number]: { liked: boolean; warned: boolean };
     }>({});
+    const [imageFile, setImageFile] = useState<File | null>(null);
     const { isAuthenticated, session } = useDevice();
 
     useEffect(() => {
@@ -18,18 +18,37 @@ export default function PostsPage() {
         }
     }, [isAuthenticated, session?.username]);
 
-	const handlePostSubmit = (e: React.FormEvent) => {
+    const handlePostSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-		const newPost = {
-			text: postText,
-			date: new Date().toLocaleString(),
-			likes: 0,
-			warnings: 0,
-			imageUrl: "", // placeholder for image logick
-			author: session.username, // add username to track authorship
-		};
-		setPosts([newPost, ...posts]);
+
+        if (!imageFile) {
+            alert("Please select an image to upload.");
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append("image", imageFile);
+        formData.append("text", postText);
+
+        try {
+            const response = await fetch("/api/post", {
+                method: "POST",
+                body: formData,
+            });
+
+            const data = await response.json();
+            if (response.ok) {
+                alert("Post uploaded successfully!");
+                setPosts([data.postData, ...posts]);
                 setPostText("");
+                setImageFile(null);
+            } else {
+                alert(data.message || "Failed to upload post.");
+            }
+        } catch (error) {
+            console.error("Error uploading post:", error);
+            alert("An error occurred while uploading the post.");
+        }
     };
 
     const handleLike = (index: number) => {
@@ -83,6 +102,12 @@ export default function PostsPage() {
                         onChange={(e) => setPostText(e.target.value)}
                         rows={4}
                     />
+                    <input
+                        type="file"
+                        accept="image/*"
+                        className="w-full p-2 rounded bg-neutral-800 text-white"
+                        onChange={(e) => setImageFile(e.target.files?.[0] || null)}
+                    />
                     <button
                         type="submit"
                         className="px-4 py-2 bg-success-600 text-white rounded font-semibold"

src/app/api/post/route.ts

@@ -21,7 +21,9 @@ async function authenticateUser() {
 
 export async function POST(req: Request) {
 	try {
-		// if (!(await authenticateUser())) return;
+
+		let userData = await authenticateUser();
+		if (!userData) return NextResponse.json({ message: "User not found" }, { status: 404 });
 
 		const formData = await req.formData();
 		const file = formData.get("image");
@@ -39,7 +41,14 @@ export async function POST(req: Request) {
 		const prompt = `Generate a 1-3 sentence description for this image.`;
 
 		const data = await gemini.generateDescription(prompt, buffer);
-		let postData = await db.posts.create("6gi1f", data?.description);
+		let postData = await db.posts.create(userData.id, data?.description, buffer);
+
+		if (!postData) {
+			return NextResponse.json(
+				{ message: "Failed to create post" },
+				{ status: 500 }
+			);
+		}
 
 		return NextResponse.json(
 			{ message: "Image uploaded successfully", postData },

src/lib/scripts/Post.ts

@@ -11,6 +11,7 @@ const postSchema = new mongoose.Schema({
     timeStamp: Date,
     reactions: Array,
     userId: reqString,
+    image: Buffer
 });
 
 export class Post {
@@ -31,13 +32,14 @@ export class Post {
         return result.join('');
     }
 
-    async create(userId:string, imageDes: string) {
+    async create(userId:string, imageDes: string, image: Buffer) {
         const newEntry = new this.model({
             id: this.makeId(5),
             imageDes: imageDes,
             timeStamp: new Date().toISOString(),
             reactions: [],
-            userId: userId
+            userId: userId, 
+            image
         });
         await newEntry.save();
         return newEntry;