[CHE-3] Create Forums Page

client/src/components/Forums/CreatePost/CreatePost.tsx

@@ -0,0 +1,68 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import axios from "axios";
+
+interface CreatePostProps {
+  threadId: string;
+  forumId: string | null;
+  onClose: () => void;
+}
+
+const CreatePost: React.FC<CreatePostProps> = ({
+  forumId,
+  threadId,
+  onClose,
+}) => {
+  const [content, setContent] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await axios.post(
+        `/api/forums/${forumId}/threads/${threadId}/posts`,
+        {
+          content,
+        },
+        {
+          withCredentials: true,
+        }
+      );
+      setContent("");
+      onClose();
+      setIsLoading(false);
+    } catch (error) {
+      console.error("Failed to create post:", error);
+      setError("Failed to create post");
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <textarea
+        className="w-full rounded border p-2"
+        placeholder="Write your response..."
+        value={content}
+        onChange={handleChange}
+        required
+      />
+      {error && <p className="text-red-500">{error}</p>}
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        {isLoading ? "Posting..." : "Post Reply"}
+      </button>
+    </form>
+  );
+};
+
+export default CreatePost;

client/src/components/Forums/CreateThread/CreateThread.tsx

@@ -0,0 +1,96 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import axios from "axios";
+
+interface CreateThreadProps {
+  forumId: string;
+  onClose: () => void;
+}
+
+const CreateThread: React.FC<CreateThreadProps> = ({ forumId, onClose }) => {
+  const [formData, setFormData] = useState<{ title: string; content: string }>({
+    title: "",
+    content: "",
+  });
+
+  const { title, content } = formData;
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post(
+        `/api/forums/${forumId}/threads`,
+        formData,
+        {
+          withCredentials: true,
+        }
+      );
+      console.log("Thread created:", response.data);
+      onClose();
+    } catch (error) {
+      console.error("Failed to create thread:", error);
+      //TODO userfeedback with errors
+    }
+  };
+
+  return (
+    <div className="w-full max-w-lg">
+      <form
+        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+        onSubmit={handleSubmit}
+      >
+        <div className="mb-4">
+          <label
+            className="block text-gray-700 text-sm font-bold mb-2"
+            htmlFor="title"
+          >
+            Title
+          </label>
+          <input
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="title"
+            name="title"
+            type="text"
+            placeholder="Thread Title"
+            value={title}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-6">
+          <label
+            className="block text-gray-700 text-sm font-bold mb-2"
+            htmlFor="content"
+          >
+            Content
+          </label>
+          <textarea
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="content"
+            name="content"
+            rows={4}
+            placeholder="Write something..."
+            value={content}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            type="submit"
+          >
+            Create Thread
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreateThread;

client/src/components/Forums/ForumsList/ForumsList.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+interface Forum {
+  _id: string;
+  title: string;
+  description?: string;
+}
+
+interface ForumsListProps {
+  onForumSelect: (forumId: string | null) => void;
+  selectedForumId: string | null;
+}
+
+const ForumsList: React.FC<ForumsListProps> = ({
+  onForumSelect,
+  selectedForumId,
+}) => {
+  const [forums, setForums] = useState<Forum[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchForums = async () => {
+      setLoading(true);
+      try {
+        const { data } = await axios.get("/api/forums", {
+          withCredentials: true,
+        });
+        setForums(data);
+        setLoading(false);
+      } catch (err) {
+        const error = err as Error;
+        setError(error.message);
+        setLoading(false);
+      }
+    };
+
+    fetchForums();
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div>
+      <h2 className="text-xl font-bold mb-4">Forums</h2>
+      <ul>
+        <li
+          onClick={() => onForumSelect(null)}
+          className={`cursor-pointer p-2 hover:bg-gray-800 rounded-md ${
+            selectedForumId === null ? "bg-gray-700" : ""
+          }`}
+        >
+          All Forums
+        </li>
+        {forums.map((forum) => (
+          <li
+            key={forum._id}
+            onClick={() => onForumSelect(forum._id)}
+            className={`cursor-pointer p-2 hover:bg-gray-800 rounded-md ${
+              selectedForumId === forum._id ? "bg-gray-700" : ""
+            }`}
+          >
+            {forum.title}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ForumsList;

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import CreatePost from "../CreatePost/CreatePost";
+import { Thread, IPost } from "../../../../types/forums";
+
+interface ThreadDetailProps {
+  forumId: string | null;
+  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);
+  const [creatingPost, setCreatingPost] = useState(false);
+
+  useEffect(() => {
+    const fetchThreadDetails = async () => {
+      setLoading(true);
+      try {
+        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 || []);
+
+        setLoading(false);
+      } catch (err) {
+        const error = err as Error;
+        setError(error.message);
+        setLoading(false);
+      }
+    };
+
+    fetchThreadDetails();
+  }, [forumId, threadId, creatingPost]);
+
+  const toggleCreatePost = () => {
+    setCreatingPost(!creatingPost);
+  };
+
+  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>
+      <button
+        onClick={toggleCreatePost}
+        className="mb-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        {creatingPost ? "Cancel" : "Add Reply"}
+      </button>
+      {creatingPost && (
+        <CreatePost
+          forumId={forumId}
+          threadId={threadId}
+          onClose={toggleCreatePost}
+        />
+      )}
+      <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;