+ );
}
-export default App
+export default App;
\ No newline at end of file
diff --git a/src/Components/CommentList.jsx b/src/Components/CommentList.jsx
new file mode 100644
index 000000000..155e14ed8
--- /dev/null
+++ b/src/Components/CommentList.jsx
@@ -0,0 +1,55 @@
+import { useState, useEffect, useContext } from "react";
+import { AppContext } from "../App";
+import "./Styling/CommentList.css";
+import NewCommentForm from "./NewCommentForm";
+
+function getInitials(firstName, lastName) {
+ return `${firstName[0]}${lastName[0]}`.toUpperCase();
+ }
+
+function CommentList({ postId }) {
+ const [comments, setComments] = useState([]);
+ const { friendList } = useContext(AppContext);
+
+ useEffect(() => {
+ const fetchComments = async () => {
+ try {
+ const response = await fetch(`https://boolean-uk-api-server.fly.dev/josteinruen/post/${postId}/comment`);
+ const data = await response.json();
+ setComments(data);
+ } catch (error) {
+ console.error('Error fetching comments:', error);
+ }
+ };
+
+ fetchComments();
+ }, [postId]);
+
+ const getCommenter = (contactId) => {
+ return friendList.find(friend => friend.id === contactId);
+ };
+
+ return (
+
+ );
+}
+
+export default CommentList;
\ No newline at end of file
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 7ce2956e5..e91b7a2be 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -2,7 +2,7 @@ import { useContext } from "react";
import { AppContext } from "../App";
import titleHeaderIcon from "../assets/title-header.svg";
import profileIcon from "../assets/profile-icon.svg";
-import "./Header.css";
+import "./Styling/Header.css";
function getInitials(firstName, lastName) {
return `${firstName[0]}${lastName[0]}`.toUpperCase();
diff --git a/src/Components/NewCommentForm.jsx b/src/Components/NewCommentForm.jsx
new file mode 100644
index 000000000..fd3faab65
--- /dev/null
+++ b/src/Components/NewCommentForm.jsx
@@ -0,0 +1,61 @@
+import { useState, useContext } from "react";
+import { AppContext } from "../App";
+import "./Styling/NewCommentForm.css";
+
+function NewCommentForm({ postId }) {
+ const { user, setPosts } = useContext(AppContext);
+ const [content, setContent] = useState("");
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!content) return;
+
+ const newComment = {
+ content,
+ contactId: user.id,
+ postId,
+ createdAt: new Date().toISOString(),
+ };
+
+ try {
+ const response = await fetch(`https://boolean-uk-api-server.fly.dev/josteinruen/post/${postId}/comment`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(newComment),
+ });
+
+ if (response.ok) {
+ const createdComment = await response.json();
+ setPosts((prevPosts) =>
+ prevPosts.map((post) =>
+ post.id === postId
+ ? { ...post, comments: [createdComment, ...post.comments] }
+ : post
+ )
+ );
+ setContent("");
+ } else {
+ console.error('Error creating comment:', response.statusText);
+ }
+ } catch (error) {
+ console.error('Error creating comment:', error);
+ }
+ };
+
+ return (
+
+