comment section?

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,11 +17,29 @@ 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;
@@ -38,7 +62,12 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
         setIsSubmitted(true);
         setIsSubmitting(false);
 
-        // Reset success message after 5 seconds
+        // Fetch updated comments
+        const updatedComments = await fetch(`/api/comments?postId=${postId}`).then((res) =>
+          res.json()
+        );
+        setComments(updatedComments);
+
         setTimeout(() => setIsSubmitted(false), 5000);
       } else {
         const data = await response.json();
@@ -54,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>
@@ -96,7 +125,7 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
             />
           </div>
         </div>
-        
+
         <div>
           <label htmlFor="comment" className="block text-primary-700 mb-1">
             Comment <span className="text-red-500">*</span>
@@ -110,7 +139,7 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
             required
           ></textarea>
         </div>
-        
+
         <div className="flex items-center">
           <input
             type="checkbox"
@@ -121,7 +150,7 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
             Save my name and email for the next time I comment
           </label>
         </div>
-        
+
         <button
           type="submit"
           className="button"
@@ -130,35 +159,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>