Comment System

Example Code

import React, { useState, useEffect } from 'react';

// --- CommentItem Component ---
const CommentItem = ({ comment }) => {
  return (
    <div style={{ border: '1px solid #eee', padding: '10px', marginBottom: '10px', borderRadius: '5px' }}>
      <p><strong>{comment.author}</strong> - <small>{new Date(comment.timestamp).toLocaleString()}</small></p>
      <p>{comment.text}</p>
    </div>
  );
};

// --- CommentList Component ---
const CommentList = ({ comments }) => {
  return (
    <div style={{ marginTop: '20px' }}>
      <h3>Comments</h3>
      {comments.length === 0 ? (
        <p>No comments yet. Be the first to comment!</p>
      ) : (
        comments.map((comment) => (
          <CommentItem key={comment.id} comment={comment} />
        ))
      )}
    </div>
  );
};

// --- CommentForm Component ---
const CommentForm = ({ onSubmit }) => {
  const [commentText, setCommentText] = useState('');
  const [author, setAuthor] = useState('Anonymous'); // Simple author input

  const handleSubmit = (e) => {
    e.preventDefault();
    if (commentText.trim()) {
      onSubmit({ text: commentText.trim(), author: author.trim() || 'Anonymous' });
      setCommentText(''); // Clear the input after submission
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginTop: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '5px', backgroundColor: '#f9f9f9' }}>
      <h4>Add a Comment</h4>
      <div style={{ marginBottom: '10px' }}>
        <label htmlFor="author">Your Name:</label>
        <input
          type="text"
          id="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          style={{ width: '100%', padding: '8px', boxSizing: 'border-box', marginTop: '5px' }}
          placeholder="Your name (optional)"
        />
      </div>
      <div style={{ marginBottom: '10px' }}>
        <label htmlFor="commentText">Comment:</label>
        <textarea
          id="commentText"
          value={commentText}
          onChange={(e) => setCommentText(e.target.value)}
          rows="4"
          style={{ width: '100%', padding: '8px', boxSizing: 'border-box', marginTop: '5px' }}
          placeholder="Write your comment here..."
          required
        ></textarea>
      </div>
      <button type="submit" style={{ padding: '10px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
        Submit Comment
      </button>
    </form>
  );
};

// --- Main CommentSystem Component ---
const CommentSystem = () => {
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Simulate fetching comments from an API
  useEffect(() => {
    const fetchComments = async () => {
      setLoading(true);
      setError(null);
      try {
        // In a real application, this would be an actual API call (e.g., using fetch or axios)
        const response = await new Promise(resolve => setTimeout(() => {
          resolve([
            { id: 'c1', author: 'Alice', text: 'This is a great article!', timestamp: new Date('2023-10-26T10:00:00Z').toISOString() },
            { id: 'c2', author: 'Bob', text: 'I found this very helpful, thank you!', timestamp: new Date('2023-10-26T10:30:00Z').toISOString() },
            { id: 'c3', author: 'Charlie', text: 'Interesting perspective. What about X?', timestamp: new Date('2023-10-26T11:15:00Z').toISOString() }
          ]);
        }, 1000)); // Simulate 1-second API delay

        setComments(response);
      } catch (err) {
        setError('Failed to load comments.');
        console.error('Error fetching comments:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchComments();
  }, []); // Empty dependency array means this runs once on mount

  // Simulate submitting a new comment to an API
  const handleNewComment = async ({ text, author }) => {
    try {
      // Simulate API call to save comment
      const newComment = await new Promise(resolve => setTimeout(() => {
        const generatedId = `c${Date.now()}`; // Simple unique ID
        const newTimestamp = new Date().toISOString();
        resolve({ id: generatedId, author, text, timestamp: newTimestamp });
      }, 500)); // Simulate 0.5-second API delay

      setComments((prevComments) => [...prevComments, newComment]);
    } catch (err) {
      setError('Failed to submit comment.');
      console.error('Error submitting comment:', err);
    }
  };

  if (loading) return <div style={{ textAlign: 'center', padding: '20px' }}>Loading comments...</div>;
  if (error) return <div style={{ color: 'red', textAlign: 'center', padding: '20px' }}>Error: {error}</div>;

  return (
    <div style={{ maxWidth: '800px', margin: '30px auto', fontFamily: 'Arial, sans-serif' }}>
      <h2>Content Title (e.g., Blog Post)</h2>
      <p>This is the content that users can comment on. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <CommentList comments={comments} />
      <CommentForm onSubmit={handleNewComment} />
    </div>
  );
};

export default CommentSystem;

// To use this in your React app, you would import and render it like:
// import CommentSystem from './CommentSystem';
// function App() {
//   return (
//     <div className="App">
//       <CommentSystem />
//     </div>
//   );
// }
// export default App;