+
+
+ {renderPostForm()}
+ {renderPosts()}
)
} else {
- navigate('/signin')
+ navigate('/login')
}
}
diff --git a/frontend/src/components/home.js b/frontend/src/components/home.js
new file mode 100644
index 000000000..0191df4a6
--- /dev/null
+++ b/frontend/src/components/home.js
@@ -0,0 +1,5 @@
+import Navbar from "./nav/nav";
+
+export default function Home() {
+ return ();
+};
\ No newline at end of file
diff --git a/frontend/src/components/nav/mainNav.js b/frontend/src/components/nav/mainNav.js
new file mode 100644
index 000000000..5665f6cd3
--- /dev/null
+++ b/frontend/src/components/nav/mainNav.js
@@ -0,0 +1,15 @@
+const Mainnav = () => {
+ return (
+
+ )
+}
+
+export default Mainnav;
\ No newline at end of file
diff --git a/frontend/src/components/nav/nav.css b/frontend/src/components/nav/nav.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/components/nav/nav.js b/frontend/src/components/nav/nav.js
new file mode 100644
index 000000000..940379299
--- /dev/null
+++ b/frontend/src/components/nav/nav.js
@@ -0,0 +1,18 @@
+const Navbar = () => {
+ return (
+
+ )
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/frontend/src/components/post/Post.js b/frontend/src/components/post/Post.js
index 87a77c109..bf33ba2d5 100644
--- a/frontend/src/components/post/Post.js
+++ b/frontend/src/components/post/Post.js
@@ -1,9 +1,131 @@
-import React from 'react';
+
+import React, { useState } from 'react';
const Post = ({post}) => {
return(
{ post.message }
+
+import React, {useState} from 'react';
+
+const Post = ({post}) => {
+
+ const [likeCount, setLikeCount] = useState(post.likes.length)
+ const [token] = useState(window.localStorage.getItem("token"));
+ const [profilePicture] = useState(window.localStorage.getItem("profilePicture"));
+
+ //fetch request to get user model data
+ //access the username property
+ //add it to a JSX HTML element in the post return
+
+ //add
+
+ // Likes
+
+ const handleLike = async (event) => {
+ event.preventDefault();
+ try {
+ const response = await fetch(`/posts/${post._id}/like`, {
+ method: "POST",
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify({token}),
+ });
+
+ console.log(response)
+ const updatedPost = await response.json();
+ if (response.ok) {
+ setLikeCount(updatedPost.likes.length);
+ } else {
+ console.log(`Failed to find post with ID ${post._id}`)
+ }
+ } catch (error) {
+ console.log(error)
+ }}
+
+
+ //Comments
+
+ const [content, setContent] = useState("");
+
+ // we need a function to handle the submitting of a comment
+
+ const handleCommentSubmit = (event) => { // BUG: empty comments still get displayed
+ event.preventDefault();
+ fetch(`/posts/${post._id}/comment`, {
+ method: 'POST',
+ headers: {
+ 'content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify({content})
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ //sets the comments to all comments + the last one added
+ setContent([...post.comments, data.comments])
+ setContent("")
+ // this refreshes the whole window which is not ideal.
+ window.location.reload();
+
+ })
+ .catch((error) => console.error(error));
+ };
+
+ // we need a function to clear the input field for comments
+
+ function handleCommentChange(event) {
+ setContent(event.target.value);
+ }
+
+ // we need a function to represent the comment form
+
+ function renderCommentForm() {
+ return (
+
+
+
+ )
+ }
+
+ // and a function to render the comments on the screen from the database
+
+ const renderComments = () => { // the styling of the div below might be better applied inside Post.css
+ return (
+ <>
+ {post.comments.map( comment => (
+
+ {comment}
+
+ ))}
+
+ )
+ }
+
+
+ return ( // the styling of the div below might be better applied inside Post.css
+ <>
+
+