Merge remote-tracking branch 'origin/main'

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

@@ -1,9 +1,15 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface CommentFormProps {
   postId: string;
 }
 
+interface Comment {
+  name: string;
+  comment: string;
+  createdAt: string;
+}
+
 const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
@@ -11,35 +17,63 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [comments, setComments] = useState<Comment[]>([]);
+
+  useEffect(() => {
+    const fetchComments = async () => {
+      try {
+        const response = await fetch(`/api/comments?postId=${postId}`);
+        if (response.ok) {
+          const data = await response.json();
+          setComments(data);
+        } else {
+          console.error('Failed to fetch comments');
+        }
+      } catch (err) {
+        console.error('Error fetching comments:', err);
+      }
+    };
+
+    fetchComments();
+  }, [postId]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
-    // Basic validation
     if (!name.trim() || !email.trim() || !comment.trim()) {
       setError('All fields are required');
       return;
     }
-    
+
     setIsSubmitting(true);
     setError(null);
-    
+
     try {
-      // In a real implementation, you would send this data to your API
+      const response = await fetch('/api/comments', {
-      // For now, we'll just simulate a successful submission
+        method: 'POST',
-      await new Promise(resolve => setTimeout(resolve, 1000));
+        headers: { 'Content-Type': 'application/json' },
-      
+        body: JSON.stringify({ name, email, comment, postId }),
-      // Clear form and show success message
+      });
-      setName('');
+
-      setEmail('');
+      if (response.ok) {
-      setComment('');
+        setName('');
-      setIsSubmitted(true);
+        setEmail('');
-      setIsSubmitting(false);
+        setComment('');
-      
+        setIsSubmitted(true);
-      // Reset success message after 5 seconds
+        setIsSubmitting(false);
-      setTimeout(() => {
+
-        setIsSubmitted(false);
+        // Fetch updated comments
-      }, 5000);
+        const updatedComments = await fetch(`/api/comments?postId=${postId}`).then((res) =>
+          res.json()
+        );
+        setComments(updatedComments);
+
+        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);
@@ -49,19 +83,19 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
   return (
     <div className="mt-12 pt-6 border-t border-primary-200">
       <h3 className="text-2xl font-bold mb-6">Leave a Comment</h3>
-      
+
       {isSubmitted && (
         <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md mb-6">
-          Your comment has been submitted and is awaiting moderation. Thank you!
+          Your comment has been submitted. Thank you!
         </div>
       )}
-      
+
       {error && (
         <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-6">
           {error}
         </div>
       )}
-      
+
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
@@ -75,6 +109,12 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
               onChange={(e) => setName(e.target.value)}
               className="w-full px-4 py-2 border border-primary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
               required
+              onFocus={() => {
+                if (typeof window !== 'undefined') {
+                  const savedName = localStorage.getItem('name');
+                  if (savedName) setName(savedName);
+                }
+              }}
             />
           </div>
           <div>
@@ -88,10 +128,16 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
               onChange={(e) => setEmail(e.target.value)}
               className="w-full px-4 py-2 border border-primary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
               required
+              onFocus={() => {
+                if (typeof window !== 'undefined') {
+                  const savedEmail = localStorage.getItem('email');
+                  if (savedEmail) setEmail(savedEmail);
+                }
+              }}
             />
           </div>
         </div>
-        
+
         <div>
           <label htmlFor="comment" className="block text-primary-700 mb-1">
             Comment <span className="text-red-500">*</span>
@@ -105,18 +151,32 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
             required
           ></textarea>
         </div>
-        
+
-        <div className="flex items-center">
+        {/* <div className="flex items-center">
           <input
             type="checkbox"
             id="save-info"
             className="h-4 w-4 text-accent border-primary-300 rounded focus:ring-accent"
+            checked={typeof window !== 'undefined' && localStorage.getItem('saveInfo') === 'true'}
+            onChange={(e) => {
+              if (typeof window !== 'undefined') {
+                const saveInfo = e.target.checked;
+                localStorage.setItem('saveInfo', saveInfo.toString());
+                if (saveInfo) {
+                  localStorage.setItem('name', name);
+                  localStorage.setItem('email', email);
+                } else {
+                  localStorage.removeItem('name');
+                  localStorage.removeItem('email');
+                }
+              }
+            }}
           />
           <label htmlFor="save-info" className="ml-2 block text-sm text-primary-600">
             Save my name and email for the next time I comment
           </label>
-        </div>
+        </div> */}
-        
+
         <button
           type="submit"
           className="button"
@@ -125,35 +185,27 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
           {isSubmitting ? 'Submitting...' : 'Post Comment'}
         </button>
       </form>
-      
+
-      {/* Sample comments - in a real implementation, these would be fetched from an API */}
       <div className="mt-12">
-        <h3 className="text-xl font-bold mb-6">Comments (2)</h3>
+        <h3 className="text-xl font-bold mb-6">Comments ({comments.length})</h3>
-        
+
         <div className="space-y-6">
-          <div className="bg-white p-6 rounded-md shadow-sm border border-primary-200">
+          {comments.map((comment) => (
-            <div className="flex justify-between items-start mb-4">
+            <div
-              <div>
+              key={comment.createdAt}
-                <h4 className="font-bold">John Calvin</h4>
+              className="bg-white p-6 rounded-md shadow-sm border border-primary-200"
-                <p className="text-sm text-primary-500">March 10, 2025</p>
+            >
+              <div className="flex justify-between items-start mb-4">
+                <div>
+                  <h4 className="font-bold">{comment.name}</h4>
+                  <p className="text-sm text-primary-500">
+                    {new Date(comment.createdAt).toLocaleDateString()}
+                  </p>
+                </div>
               </div>
+              <p className="text-primary-700">{comment.comment}</p>
             </div>
-            <p className="text-primary-700">
+          ))}
-              A profound meditation on the doctrine of grace. I particularly appreciate your emphasis on how this truth transforms our daily lives, not just our theological understanding.
-            </p>
-          </div>
-          
-          <div className="bg-white p-6 rounded-md shadow-sm border border-primary-200">
-            <div className="flex justify-between items-start mb-4">
-              <div>
-                <h4 className="font-bold">Martin Luther</h4>
-                <p className="text-sm text-primary-500">March 5, 2025</p>
-              </div>
-            </div>
-            <p className="text-primary-700">
-              This post eloquently articulates what I've been trying to explain to my congregation. The way you connected Scripture with practical application was masterful. I'll be sharing this widely.
-            </p>
-          </div>
         </div>
       </div>
     </div>

src/pages/api/comments.ts

@@ -0,0 +1,54 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { MongoClient } from 'mongodb';
+
+const uri = process.env.MONGODB_URI || 'your-mongodb-uri';
+const dbName = 'confessions-of-grace';
+
+const client = new MongoClient(uri);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'POST') {
+    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' });
+    }
+  } else if (req.method === 'GET') {
+    const { postId } = req.query;
+
+    if (!postId) {
+      return res.status(400).json({ message: 'Post ID is required' });
+    }
+
+    try {
+      if (!client.db(dbName)) await client.connect();
+      const db = client.db(dbName);
+      const collection = db.collection('comments');
+
+      const comments = await collection
+        .find({ postId })
+        .sort({ createdAt: -1 })
+        .toArray();
+
+      res.status(200).json(comments);
+    } catch (error) {
+      console.error(error);
+      res.status(500).json({ message: 'Internal server error' });
+    }
+  } else {
+    res.status(405).json({ message: 'Method not allowed' });
+  }
+}

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;
@@ -96,8 +97,8 @@ 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">