ReformedWitness/confessions-of-grace
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
austin
2025-04-08 15:11:57 -05:00
parent 1e9f7ffd97 fd547e7d5b
commit f8a0e58999
5 changed files with 163 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-1
View File
@@ -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
+93 -41
View File
@@ -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;
@@ -25,21 +49,31 @@ 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
setName('');
setEmail('');
setComment('');
setIsSubmitted(true);
setIsSubmitting(false);
if (response.ok) {
setName('');
setEmail('');
setComment('');
setIsSubmitted(true);
setIsSubmitting(false);
// Reset success message after 5 seconds
setTimeout(() => {
setIsSubmitted(false);
}, 5000);
// 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();
setError(data.message || 'Something went wrong. Please try again later.');
setIsSubmitting(false);
}
} catch (err) {
setError('Something went wrong. Please try again later.');
setIsSubmitting(false);
@@ -52,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>
)}
@@ -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,6 +128,12 @@ 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>
@@ -106,16 +152,30 @@ const CommentSection: React.FC<CommentFormProps> = ({ postId }) => {
></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"
@@ -126,34 +186,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">
<div className="flex justify-between items-start mb-4">
<div>
<h4 className="font-bold">John Calvin</h4>
<p className="text-sm text-primary-500">March 10, 2025</p>
{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">{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
+54
View File
@@ -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
-27
View File
@@ -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
+2 -1
View File
@@ -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">