test

package-lock.json

@@ -5119,7 +5119,6 @@
             "version": "6.15.0",
             "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.15.0.tgz",
             "integrity": "sha512-ifBhQ0rRzHDzqp9jAQP6OwHSH7dbYIQjD3SbJs9YYk9AikKEettW/9s/tbSFDTpXcRbF+u1aLrhHxDFaYtZpFQ==",
-            "license": "Apache-2.0",
             "dependencies": {
                 "@mongodb-js/saslprep": "^1.1.9",
                 "bson": "^6.10.3",

src/components/CommentSection.tsx

@@ -25,11 +25,13 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
     setError(null);
 
     try {
-      // In a real implementation, you would send this data to your API
-      // For now, we'll just simulate a successful submission
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      const response = await fetch('/api/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email, comment, postId }),
+      });
 
-      // Clear form and show success message
+      if (response.ok) {
         setName('');
         setEmail('');
         setComment('');
@@ -37,9 +39,12 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
         setIsSubmitting(false);
 
         // Reset success message after 5 seconds
-      setTimeout(() => {
-        setIsSubmitted(false);
-      }, 5000);
+        setTimeout(() => setIsSubmitted(false), 5000);
+      } else {
+        const data = await response.json();
+        setError(data.message || 'Something went wrong. Please try again later.');
+        setIsSubmitting(false);
+      }
     } catch (err) {
       setError('Something went wrong. Please try again later.');
       setIsSubmitting(false);

src/pages/api/comments.ts

@@ -0,0 +1,32 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { MongoClient } from 'mongodb';
+
+const uri = process.env.MONGODB_URI || 'your-mongodb-uri'; // Replace with your MongoDB URI
+const dbName = 'your-database-name'; // Replace with your database name
+
+const client = new MongoClient(uri);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ message: 'Method not allowed' });
+  }
+
+  const { name, email, comment, postId } = req.body;
+
+  if (!name || !email || !comment || !postId) {
+    return res.status(400).json({ message: 'All fields are required' });
+  }
+
+  try {
+    if (!client.db(dbName)) await client.connect();
+    const db = client.db(dbName);
+    const collection = db.collection('comments');
+
+    await collection.insertOne({ name, email, comment, postId, createdAt: new Date() });
+
+    res.status(201).json({ message: 'Comment submitted successfully' });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ message: 'Internal server error' });
+  }
+}

src/pages/api/mongodb_client_connection.ts

@@ -1,27 +0,0 @@
-import { MongoClient } from 'mongodb';
-
-const uri = process.env.MONGODB_URI || ''; // Load URI from environment variables
-const options = {};
-
-let client: MongoClient;
-let clientPromise: Promise<MongoClient>;
-
-if (!process.env.MONGODB_URI) {
-  throw new Error('Please add your MongoDB URI to .env.local');
-}
-
-// Reuse the client instance for serverless deployments
-if (process.env.NODE_ENV === 'development') {
-  // Create a global instance to preserve the same client during HMR in development
-  if (!(global as typeof globalThis & { _mongoClientPromise?: Promise<MongoClient> })._mongoClientPromise) {
-      client = new MongoClient(uri, options);
-      (global as typeof globalThis & { _mongoClientPromise?: Promise<MongoClient> })._mongoClientPromise = client.connect();
-  }
-  clientPromise = (global as typeof globalThis & { _mongoClientPromise?: Promise<MongoClient> })._mongoClientPromise!;
-} else {
-  // In production, create a new client connection
-  client = new MongoClient(uri, options);
-  clientPromise = client.connect();
-}
-
-export default clientPromise;

src/pages/posts/[id].tsx

@@ -8,6 +8,7 @@ import { GetStaticPaths, GetStaticProps } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
+import CommentSection from "@/components/CommentSection";
 
 interface PostProps {
   post: PostData;
@@ -97,7 +98,7 @@ const Post: React.FC<PostProps> = ({ post, morePosts }) => {
           </div>
         </div>
 
-        {/* <CommentSection postId={post.id} /> */}
+        <CommentSection postId={post.id} />
         
         <div className="mt-12 pt-6 border-t border-primary-200">
           <Link href="/" className="text-accent-dark hover:text-accent inline-flex items-center">