add admin link to navbar, update component model with previewUrl, and integrate Cloudinary for image uploads

Author: itzamanjain

app/api/get-all-pending-components/route.ts

@@ -22,7 +22,7 @@ export async function GET(req: NextRequest, res: NextResponse) {
     // Show all pending components
     await connectDb();
     const pendingComponents = await Component.find({ status: "pending" })
-      .select("_id code title tags description author status installationGuide usageGuide props");
+      console.log(pendingComponents);
 
     const count = pendingComponents.length;
 

app/api/gift-component/route.ts

@@ -1,59 +1,116 @@
 import { NextRequest, NextResponse } from "next/server";
-import Component  from "@/models/components.model";
+import Component from "@/models/components.model";
 import { connectDb } from "@/config/dbConfig/dbConfig";
 import rateLimit from "@/config/ratelimit/ratelimit";
+import { v2 as cloudinary } from 'cloudinary';
+import { uploadImage } from "@/config/uploadImage/upload";
 
-type component = {
+type Component = {
     code: string;
     title: string;
     tags: string[];
     description: string;
     author: string;
+    previewUrl: string;
     status: string;
     installationGuide: string | null;
     usageGuide: string | null;
     props: string | null;
 }
 
+cloudinary.config({
+    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+    api_key: process.env.CLOUDINARY_API_KEY,
+    api_secret: process.env.CLOUDINARY_API_SECRET,
+    secure: true,
+});
 
-export  async function POST(req:NextRequest,res:NextResponse){
+export async function POST(req: NextRequest) {
     try {
-
-        if(rateLimit(req) === false){
-            return NextResponse.json({message:"Too many request try after some time"},{status:429});
+        if (rateLimit(req) === false) {
+            return NextResponse.json({ message: "Too many requests, try after some time" }, { status: 429 });
         }
 
-        const reqBody = await req.json();
-        if(!reqBody.code || !reqBody.title || !reqBody.tags || !reqBody.description || !reqBody.author){
-            return NextResponse.json({message:"all fields are required"},{status:400});
+        // Parse FormData instead of JSON
+        const formData = await req.formData();
+        
+        // Extract fields from FormData
+        const code = formData.get('code') as string;
+        const title = formData.get('title') as string;
+        const tags = formData.get('tags') as string;
+        const description = formData.get('description') as string;
+        const author = formData.get('author') as string;
+        const installationGuide = formData.get('installationGuide') as string;
+        const usageGuide = formData.get('usageGuide') as string;
+        const props = formData.get('props') as string;
+        const previewImage = formData.get('previewImage') as File | null;
+
+        // Validation
+        if (!code || !title || !tags || !description || !author) {
+            return NextResponse.json({ message: "All fields are required" }, { status: 400 });
         }
 
-        //check if code is not malicous
-        if(reqBody.code.length > 60 && reqBody.installationGuide.length <= 0 && reqBody.usageGuide.length <= 0){
-            return NextResponse.json({message:"code is long so installion guide and usage guide is required"},{status:400});
+        // Check if code is not malicious
+        if (code.length > 60 && (!installationGuide || !usageGuide)) {
+            return NextResponse.json({
+                message: "Code is long so installation guide and usage guide are required"
+            }, { status: 400 });
         }
 
-        const newComponent:component = {
-            code:reqBody.code,
-            title:reqBody.title,
-            tags:reqBody.tags,
-            description:reqBody.description,
-            author:reqBody.author,
-            status:"pending",
-            installationGuide:reqBody.installationGuide || null,
-            usageGuide:reqBody.usageGuide || null,
-            props:reqBody.props || null
+        let avatarUrl = '';
+        
+        // Handle image upload if present
+        if (previewImage) {
+            // Validate file type
+            if (!previewImage.type.startsWith('image/')) {
+                return NextResponse.json({ 
+                    message: "Invalid file type. Only images are allowed" 
+                }, { status: 400 });
+            }
+
+            // Convert File to Buffer
+            const bytes = await previewImage.arrayBuffer();
+            const buffer = Buffer.from(bytes);
+
+            // Upload to Cloudinary
+            try {
+                avatarUrl = await uploadImage(buffer) as string;
+                console.log("Uploaded avatar URL:", avatarUrl);
+            } catch (error) {
+                console.error("Image upload failed:", error);
+                return NextResponse.json({ 
+                    message: "Failed to upload image" 
+                }, { status: 500 });
+            }
         }
+
+        const newComponent: Component = {
+            code,
+            title,
+            tags: tags.split(',').map(tag => tag.trim()), // Convert comma-separated string to array
+            description,
+            author,
+            previewUrl: avatarUrl,
+            status: "pending",
+            installationGuide: installationGuide || null,
+            usageGuide: usageGuide || null,
+            props: props || null
+        };
+
+        console.log("New component:", newComponent.previewUrl);
 
         await connectDb();
-        //save to db
         const savedComponent = await Component.create(newComponent);
 
-        return NextResponse.json({message:"code is under review . it will take less than 24hr to review ",savedComponent},{status:201});
+        return NextResponse.json({
+            message: "Code is under review. It will take less than 24hr to review",
+            savedComponent
+        }, { status: 201 });
 
-
-    } catch (error:any) {
-        return NextResponse.json({message:error.message},{status:500});
-        
+    } catch (error: any) {
+        console.error("Error in POST handler:", error);
+        return NextResponse.json({ 
+            message: "Internal server error" 
+        }, { status: 500 });
     }
 }