From 3ead5199bd0279e1803eea1f4c3a208374588ad5 Mon Sep 17 00:00:00 2001
From: Brok3Turtl3 <brok3turtl3@gmail.com>
Date: Sat, 20 Apr 2024 12:32:21 -0400
Subject: [PATCH] CHE-64 Added a Post type and created basic ThreadDetail
 component

---
 .../Forums/ThreadDetails/ThreadDetails.tsx    | 63 +++++++++++++++++++
 client/types/forums.ts                        |  7 +++
 2 files changed, 70 insertions(+)
 create mode 100644 client/src/components/Forums/ThreadDetails/ThreadDetails.tsx

diff --git a/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx b/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx
new file mode 100644
index 0000000..04200db
--- /dev/null
+++ b/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Thread, IPost } from "../../../../types/forums";
+
+interface ThreadDetailProps {
+  forumId: string;
+  threadId: string;
+}
+
+const ThreadDetail: React.FC<ThreadDetailProps> = ({ forumId, threadId }) => {
+  const [thread, setThread] = useState<Thread | null>(null);
+  const [posts, setPosts] = useState<IPost[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchThreadDetails = async () => {
+      setLoading(true);
+      try {
+        const response = await axios.get(
+          `/api/forums/${forumId}/threads/${threadId}`,
+          {
+            withCredentials: true,
+          }
+        );
+        setThread(response.data.thread);
+        setPosts(response.data.posts);
+        setLoading(false);
+      } catch (err) {
+        const error = err as Error;
+        setError(error.message);
+        setLoading(false);
+      }
+    };
+
+    fetchThreadDetails();
+  }, [forumId, threadId]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  if (!thread) return <div>Thread not found.</div>;
+
+  return (
+    <div>
+      <h2 className="text-3xl font-bold">{thread.title}</h2>
+      <p className="my-4">{thread.content}</p>
+      <div>
+        <h3 className="text-2xl font-bold">Replies</h3>
+        {posts.map((post) => (
+          <div key={post._id} className="mb-4">
+            <p>{post.content}</p>
+            <small>
+              By {post.user.firstName} {post.user.lastName} on{" "}
+              {new Date(post.createdAt).toLocaleDateString()}
+            </small>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ThreadDetail;
diff --git a/client/types/forums.ts b/client/types/forums.ts
index 32ff520..496cfea 100644
--- a/client/types/forums.ts
+++ b/client/types/forums.ts
@@ -18,3 +18,10 @@ export interface IForum {
   _id: string;
   title: string;
 }
+
+export interface IPost {
+  _id: string;
+  user: IUser;
+  content: string;
+  createdAt: string;
+}