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();
@@ -57,7 +86,7 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
 
       {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>
       )}
 
@@ -131,34 +160,26 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
         </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
+              key={comment.createdAt}
+              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">John Calvin</h4>
+                  <h4 className="font-bold">{comment.name}</h4>
-                <p className="text-sm text-primary-500">March 10, 2025</p>
+                  <p className="text-sm text-primary-500">
-              </div>
+                    {new Date(comment.createdAt).toLocaleDateString()}
-            </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>
+              <p className="text-primary-700">{comment.comment}</p>
             </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>