Index: backend/server.js =================================================================== --- backend/server.js (revision 4d0820794bf81c0be7e1dd1a9a1fa0c5156df023) +++ backend/server.js (revision cdddb452dcea23dc778d472452e7d26d0a4aaf5c) @@ -4,5 +4,5 @@ const path = require('path'); const apiRouter = require('./routers/apiRouter'); -const registerRouter = require('./routers/registerRouter'); + const forumRouter = require('./routers/forumRouter'); @@ -15,5 +15,5 @@ ); app.use('/api', apiRouter); -app.use('/register', registerRouter); + app.use('/forum', forumRouter); app.get('/', indexRouter); Index: client/src/CreatePost/CreatePost.jsx =================================================================== --- client/src/CreatePost/CreatePost.jsx (revision 4d0820794bf81c0be7e1dd1a9a1fa0c5156df023) +++ client/src/CreatePost/CreatePost.jsx (revision cdddb452dcea23dc778d472452e7d26d0a4aaf5c) @@ -1,31 +1,26 @@ -import React, { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; const CreatePost = ({ setActivePage }) => { - const [title, setTitle] = useState(""); - const [content, setContent] = useState(""); + const [title, setTitle] = useState(''); + const [content, setContent] = useState(''); const navigate = useNavigate(); - - const backToForum = () => { - setActivePage("forum"); - navigate("/dashboard"); - }; const handleSubmit = async (e) => { e.preventDefault(); - const user = JSON.parse(localStorage.getItem("user")); + const user = JSON.parse(localStorage.getItem('user')); if (!user || !user.id || !user.name) { - alert("You must be logged in to create a post."); - navigate("/login"); + alert('You must be logged in to create a post.'); + navigate('/login'); return; } try { - const response = await fetch("/forum/posts", { - method: "POST", + const response = await fetch('/forum/posts', { + method: 'POST', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, body: JSON.stringify({ @@ -41,7 +36,7 @@ } - navigate("/dashboard"); + navigate('/dashboard/forum'); } catch (error) { - console.error("Error creating post:", error); + console.error('Error creating post:', error); alert(`Failed to create post: ${error.message}`); } @@ -55,5 +50,8 @@ Create a Post - + )} + +
+

{ + console.log('Post clicked:', post); + navigate(`/dashboard/forum-detail/${post.id}`, { + state: { post }, + }); + }} + > + {post.title} +

+
+ +

+ By {post.authorName},{' '} + {post.dateCreated.split('T')[0]} +

+

+ {post.content && post.content.length > 300 + ? post.content.slice(0, 300) + '...' + : post.content} +

+
{ - e.stopPropagation(); + // Prevent clicking the post if the delete button was clicked if ( - window.confirm( - 'Are you sure you want to delete this post?' - ) + e.target.closest('.delete-btn') || + e.target.classList.contains('delete-btn') ) { - handleDeletePost(post.id); + e.stopPropagation(); + return; } + onPostClick && onPostClick(post); }} > - Delete - - )} +

{post.comment_count}

+ Comment +
+ + ))} + + {hasMore && ( +
+ +
+ )} + -
-

onPostClick(post)} - > - {post.title} -

-
- -

- By {post.authorName},{' '} - {post.dateCreated.split('T')[0]} -

-

- {post.content && post.content.length > 300 - ? post.content.slice(0, 300) + '...' - : post.content} -

-
{ - // Prevent clicking the post if the delete button was clicked - if ( - e.target.closest('.delete-btn') || - e.target.classList.contains('delete-btn') - ) { - e.stopPropagation(); - return; - } - onPostClick && onPostClick(post); - }} - > -

{post.comment_count}

- Comment -
- - ))} - - {hasMore && ( -
-
- )} - - - {/* Create a Post Button */} -
-
-
Index: client/src/Dashboard/components/ForumPostDetail.jsx =================================================================== --- client/src/Dashboard/components/ForumPostDetail.jsx (revision 4d0820794bf81c0be7e1dd1a9a1fa0c5156df023) +++ client/src/Dashboard/components/ForumPostDetail.jsx (revision cdddb452dcea23dc778d472452e7d26d0a4aaf5c) @@ -1,17 +1,25 @@ import React, { useEffect, useState } from 'react'; import trashIcon from '../../assets/images/delete.svg'; -const ForumPostDetail = ({ post, onBack }) => { +import Navbar from './Navbar'; +import { useParams, useNavigate, useLocation } from 'react-router-dom'; + +const ForumPostDetail = () => { const [comments, setComments] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [commentText, setCommentText] = useState(''); + const location = useLocation(); + const statePost = useState(location.state?.post || {}); + const post = statePost[0]; const [posting, setPosting] = useState(false); const user = JSON.parse(localStorage.getItem('user')); + const navigate = useNavigate(); + const { postId } = useParams(); useEffect(() => { - if (!post) return; + if (!postId) return; setLoading(true); setError(null); - fetch(`/forum/comments?post_id=${post.id}`) + fetch(`/forum/comments?post_id=${postId}`) .then((res) => { if (!res.ok) throw new Error('Failed to fetch comments'); @@ -26,5 +34,5 @@ setLoading(false); }); - }, [post]); + }, [postId]); const handleDeleteComment = async (commentId) => { try { @@ -59,5 +67,5 @@ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - post_id: post.id, + post_id: postId, content: commentText, authorId: user.id, @@ -81,111 +89,120 @@ }; - if (!post) return null; + if (!postId) return null; return ( -
-
- -
-
-

{post.title}

- -
- - By {post.authorName} - +
+ +
+
+ +
+
+

{post.title}

+ +
+ + By {post.authorName} + +
+
+
+ {post.content}
-
- {post.content} -
-
- -
-
-

- Comments ({comments.length}) -

-