Quick ThreadDisplay Functionality Update

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

@@ -1,27 +1,34 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import { Thread } from "../../../../types/forums";
+import { Thread, IForum } from "../../../../types/forums";
 
 interface ThreadsDisplayProps {
   forumId?: string | null;
 }
 
 const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({ forumId }) => {
   const [threads, setThreads] = useState<Thread[]>([]);
+  const [forum, setForum] = useState<IForum | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchThreads = async () => {
+    const fetchForumAndThreads = async () => {
       setLoading(true);
       try {
         const endpoint = forumId
-          ? `/api/forums/${forumId}/threads`
+          ? `/api/forums/${forumId}`
           : "/api/forums/threads";
         const { data } = await axios.get(endpoint, {
           withCredentials: true,
         });
-        setThreads(data);
+        if (forumId) {
+          setForum(data.forum);
+          setThreads(data.threads);
+        } else {
+          setForum(null);
+          setThreads(data);
+        }
         setLoading(false);
       } catch (err) {
         const error = err as Error;
@@ -30,7 +37,7 @@ const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({ forumId }) => {
       }
     };
 
-    fetchThreads();
+    fetchForumAndThreads();
   }, [forumId]);
 
   if (loading) return <div>Loading...</div>;
@@ -39,9 +46,7 @@ const ThreadsDisplay: React.FC<ThreadsDisplayProps> = ({ forumId }) => {
   return (
     <div>
       <h3 className="text-xl font-bold mb-4">
-        {forumId
-          ? `Showing threads for forum ${forumId}`
-          : "Showing all threads"}
+        {forum ? `Showing threads for ${forum.title}` : "Showing all threads"}
       </h3>
       <ul>
         {threads.map((thread) => (

client/types/forums.ts

@@ -13,3 +13,8 @@ export interface Thread {
   user: IUser;
   createdAt: string;
 }
+
+export interface IForum {
+  _id: string;
+  title: string;
+}

server/controllers/forumController.ts

@@ -47,7 +47,7 @@ const getAllForums = async (
 };
 
 // ENDPOINT  GET api/forums/:forumId
-// PURPOSE   Retrieve a list of all forums
+// PURPOSE   Retrieve a specific forum and its threads
 // ACCESS    all users
 const getForumById = async (
   req: Request,