CHE-64 Functionality for displaying posts on threads in place

client/src/components/Forums/ThreadDetails/ThreadDetails.tsx

@@ -3,7 +3,7 @@ import axios from "axios";
 import { Thread, IPost } from "../../../../types/forums";
 
 interface ThreadDetailProps {
-  forumId: string;
+  forumId: string | null;
   threadId: string;
 }
 
@@ -17,14 +17,13 @@ const ThreadDetail: React.FC<ThreadDetailProps> = ({ forumId, threadId }) => {
     const fetchThreadDetails = async () => {
       setLoading(true);
       try {
-        const response = await axios.get(
-          `/api/forums/${forumId}/threads/${threadId}`,
-          {
-            withCredentials: true,
-          }
-        );
+        const endpoint = forumId
+          ? `/api/forums/${forumId}/threads/${threadId}`
+          : `/api/forums/threads/${threadId}`;
+        const response = await axios.get(endpoint, { withCredentials: true });
         setThread(response.data.thread);
-        setPosts(response.data.posts);
+        setPosts(response.data.posts || []);
+
         setLoading(false);
       } catch (err) {
         const error = err as Error;

client/src/components/Forums/ThreadsDisplay/ThreadsDisplay.tsx

@@ -4,9 +4,13 @@ import { Thread, IForum } from "../../../../types/forums";
 
 interface ThreadsDisplayProps {
   forumId?: string | null;
+  onThreadSelect: (threadId: string) => void;
 }
 
-const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({ forumId }) => {
+const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({
+  forumId,
+  onThreadSelect,
+}) => {
   const [threads, setThreads] = useState<Thread[]>([]);
   const [forum, setForum] = useState<IForum | null>(null);
   const [loading, setLoading] = useState(false);
@@ -50,7 +54,11 @@ const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({ forumId }) => {
       </h3>
       <ul>
         {threads.map((thread) => (
-          <li key={thread._id} className="mb-2 p-2 bg-gray-800 rounded-lg">
+          <li
+            key={thread._id}
+            className="mb-2 p-2 bg-gray-800 rounded-lg cursor-pointer"
+            onClick={() => onThreadSelect(thread._id)}
+          >
             <h4 className="font-bold">{thread.title}</h4>
             <p>{thread.content}</p>
             <small>

client/src/pages/Forums/Forums.tsx

@@ -1,13 +1,21 @@
 import React, { useState } from "react";
 import ForumsList from "../../components/Forums/ForumsList/ForumsList";
 import ThreadsDisplay from "../../components/Forums/ThreadsDisplay/ThreadsDisplay";
+import ThreadDetails from "../../components/Forums/ThreadDetails/ThreadDetails";
 
 const Forums = (): JSX.Element => {
   const [selectedForumId, setSelectedForumId] = useState<string | null>(null);
+  const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
 
   const handleForumSelect = (forumId: string | null) => {
     setSelectedForumId(forumId);
+    setSelectedThreadId(null);
   };
+
+  const handleThreadSelect = (threadId: string) => {
+    setSelectedThreadId(threadId);
+  };
+
   return (
     <div className="min-h-screen bg-gray-900 text-white flex pt-40 px-4">
       <div className="w-64 md:w-1/4 lg:w-1/5 p-4 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 overflow-y-auto">
@@ -18,7 +26,17 @@ const Forums = (): JSX.Element => {
       </div>
 
       <div className="flex-1 p-4 overflow-y-auto">
-        <ThreadsDisplay forumId={selectedForumId} />
+        {selectedThreadId ? (
+          <ThreadDetails
+            forumId={selectedForumId}
+            threadId={selectedThreadId}
+          />
+        ) : (
+          <ThreadsDisplay
+            forumId={selectedForumId}
+            onThreadSelect={handleThreadSelect}
+          />
+        )}
       </div>
     </div>
   );

server/controllers/threadController.ts

@@ -92,10 +92,10 @@ const getThreadById = async (
   res: Response,
   next: NextFunction
 ) => {
-  const { forumId, threadId } = req.params;
+  const { threadId } = req.params;
 
   try {
-    const thread = await Thread.findOne({ _id: threadId, forum: forumId })
+    const thread = await Thread.findOne({ _id: threadId })
       .populate("user", "firstName lastName")
       .exec();
 

server/routes/forumRoutes.ts

@@ -28,6 +28,7 @@ import { protect } from "../middleware/authMiddleware"; //TODO Add admin auth mi
 const router = express.Router();
 
 router.get("/threads", getAllThreads);
+router.get("/threads/:threadId", protect, getThreadById);
 
 //Forum Routes
 router.post("/", protect, addForum); //TODO Protect with admin auth