Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions orbit-app/orbit-app/src/pages/BlogsPage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@

useEffect(() => {
// Fetching all blogs
axios.get(`${BASE_URL}/blogs`)
.then((res) => {
setBlogs(res.data);
})
.catch((err) => {
// Avoid leaking server internals in client logs; include safe fallback and null checks
console.error('Error fetching blogs:', err?.response?.data || err?.message);
});
}, []);

const handleCreateBlog = async () => {

Check warning on line 14 in orbit-app/orbit-app/src/pages/BlogsPage.jsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

orbit-app/orbit-app/src/pages/BlogsPage.jsx#L14

Method handleCreateBlog has a cyclomatic complexity of 10 (limit is 8)
// Basic client-side validation to reduce noisy/empty submissions
if (!title || !title.trim() || !content || !content.trim()) {
alert('Title and content are required.');
return;
}

// Do NOT set or trust authorId on the client. Let the server associate the request
// with the authenticated user (server should validate authentication/authorization).
try {
const res = await axios.post(`${BASE_URL}/blogs/create`, {
title,
content
});

alert('Blog created successfully!');
setBlogs([...blogs, res.data]);
} catch (err) {
// Log a safe error message and avoid exposing internals to users
console.error('Error creating blog:', err?.response?.data || err?.message);
alert('Unable to create blog. Please try again later.');
}
};

return (
<div>
<h1>Blogs</h1>

<div>
<h2>Create Blog</h2>
<input
type="text"
placeholder="Blog title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
placeholder="Blog content"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<button onClick={handleCreateBlog}>Create</button>
</div>

<div>
<h2>All Blogs</h2>
{blogs.map((blog) => (
<div key={blog.id}>
<h3>{blog.title}</h3>
<p>{blog.content}</p>
<small>Author: {blog.authorName || 'Unknown'}</small><br />
<small>Created At: {blog.createdAt}</small><br />
<CommentsSection id={blog._id || blog.id} />
</div>
))}
</div>
</div>
);
}

export default BlogsPage;