add ability to make new comments

src/App.css

@@ -336,6 +336,40 @@ header {
   font-family: arial;
 }
 
+#newCommentBox {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto;
+  max-width: 550px;
+  margin: 20px auto 10px auto;
+}
+
+#newCommentLabel {
+  font-family: arial;
+  font-size: small;
+}
+
+#newCommentText {
+  height: 80px;
+  padding: 5px;
+  margin: 15px 0px 15px 0px;
+  border: 1px solid #414d52;
+  border-radius: 10px;
+  font-family: arial;
+  resize: none;
+}
+
+#newCommentText:focus {
+  outline-color: #a2baab;
+}
+
+#postNewCommentButton {
+  margin: 0px auto 0px auto;
+  border-radius: 5px;
+  border: 1px solid #414d52;
+  width: 100px;
+}
+
 .commentCard {
   display: grid;
   grid-template-columns: 40px auto 100px 100px;
@@ -373,7 +407,6 @@ header {
   line-height: 40px;
   text-align: right;
   margin-right: 20px;
-  width: 50px;
 }
 
 .commentVoteControls {

src/Article.jsx

@@ -60,7 +60,7 @@ const Article = ({
 			<p id="articleViewDate">{formatDate(article.created_at)}</p>
 			<div id="articleViewVotes">{articleVotes} likes</div>
 			<div id="articleViewVoteControls">
-				{user ? (
+				{user && (
 					<div>
 						<button
 							className="voteButton"
@@ -79,7 +79,7 @@ const Article = ({
 							ᐯ
 						</button>
 					</div>
-				) : null}
+				)}
 			</div>
 			<p id="articleViewBody">{article.body}</p>
 			<Comment

src/Comment.jsx

@@ -1,7 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useContext } from "react";
+import { UserContext } from "./contexts/UserContext";
 import LoadingSpinner from "./LoadingSpinner";
 import { getComments, getAuthorAvatar } from "./apiFunctions";
 import CommentHistory from "./CommentHistory";
+import NewComment from "./NewComment";
 
 const Comment = ({
 	articleid,
@@ -12,6 +14,7 @@ const Comment = ({
 	const [isLoading, setIsLoading] = useState(true);
 	const [comments, setComments] = useState(null);
 	const [authorAvatars, setAuthorAvatars] = useState({});
+	const { user } = useContext(UserContext);
 
 	useEffect(() => {
 		setIsLoading(true);
@@ -27,10 +30,13 @@ const Comment = ({
 			);
 			Promise.all(promises).then((data) => {
 				setAuthorAvatars(
-					data.reduce((authors, item) => {
-						authors[item[0]] = item[1];
-						return authors;
-					}, {})
+					data.reduce(
+						(authors, item) => {
+							authors[item[0]] = item[1];
+							return authors;
+						},
+						{ [user.username]: user.avatar_url }
+					)
 				);
 				setNumItems(commentCount);
 				setIsLoading(false);
@@ -43,11 +49,16 @@ const Comment = ({
 			<LoadingSpinner id="commentLoadingSpinner" />
 		</div>
 	) : (
-		<CommentHistory
-			comments={comments}
-			commentCount={commentCount}
-			authorAvatars={authorAvatars}
-		/>
+		<div id="commentsBox">
+			{user && (
+				<NewComment setComments={setComments} articleid={articleid} />
+			)}
+			<CommentHistory
+				comments={comments}
+				commentCount={commentCount}
+				authorAvatars={authorAvatars}
+			/>
+		</div>
 	);
 };
 

src/CommentCard.jsx

@@ -25,7 +25,7 @@ const CommentCard = ({ comment, authorAvatars }) => {
 			/>
 			<p className="commentAuthor">{comment.author}</p>
 
-			{user ? (
+			{user && (
 				<div className="commentVoteControls">
 					<button
 						className="voteButton"
@@ -44,7 +44,7 @@ const CommentCard = ({ comment, authorAvatars }) => {
 						ᐯ
 					</button>
 				</div>
-			) : null}
+			)}
 
 			<p className="commentVotes">{likes} likes</p>
 			<p className="commentBody">{comment.body}</p>

src/CommentHistory.jsx

@@ -2,17 +2,15 @@ import CommentCard from "./CommentCard";
 
 const CommentHistory = ({ comments, authorAvatars, commentCount }) => {
 	return comments.length === 0 ? (
-		<div id="commentsBox">
-			<h3 id="commentsTitle">No comments</h3>
-		</div>
+		<h3 id="commentsTitle">No comments</h3>
 	) : (
-		<div id="commentsBox">
+		<div>
 			<h3 id="commentsTitle">Recent comments ({commentCount})</h3>
 			{comments.map((comment) => (
 				<CommentCard
 					comment={comment}
 					authorAvatars={authorAvatars}
-					key={comment.comment_id}
+					key={comment.created_at}
 				/>
 			))}
 			<div id="bottomSpace"></div>

src/Header.jsx

@@ -48,7 +48,7 @@ const Header = () => {
 							id="logoutButton"
 							onClick={() => {
 								setUser(null);
-								navigate("/");
+								navigate(-1);
 							}}
 						>
 							Logout

src/Login.jsx

@@ -6,25 +6,23 @@ import { getUsers } from "./apiFunctions";
 import LoadingSpinner from "./LoadingSpinner";
 
 const Login = ({ setNumItems }) => {
-	const { user, setUser } = useContext(UserContext);
+	const { setUser } = useContext(UserContext);
 	const [users, setUsers] = useState(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const navigate = useNavigate();
 
 	useEffect(() => {
 		setNumItems(null);
 		setIsLoading(true);
-		getUsers()
-			.then((users) => {
-				setUsers(users);
-				setIsLoading(false);
-			})
-			.catch((err) => console.log(err));
+		getUsers().then((users) => {
+			setUsers(users);
+			setIsLoading(false);
+		});
 	}, []);
 
 	const changeUser = (newUser) => {
 		setUser(newUser);
-		navigate("/");
+		navigate(-1);
 	};
 
 	return isLoading ? (

src/NewComment.jsx

@@ -0,0 +1,52 @@
+import { useContext, useState } from "react";
+import { postNewCommentForArticle } from "./apiFunctions";
+import { UserContext } from "./contexts/UserContext";
+
+const NewComment = ({ setComments, articleid }) => {
+	const { user } = useContext(UserContext);
+	const [newCommentText, setNewCommentText] = useState("");
+
+	const postNewComment = (event) => {
+		event.preventDefault();
+		const newComment = {
+			votes: 0,
+			author: user.username,
+			body: newCommentText,
+			created_at: new Date(),
+			article_id: articleid,
+		};
+		setComments((currentComments) => [newComment, ...currentComments]);
+		setNewCommentText("");
+		postNewCommentForArticle(articleid, newComment).catch(() => {
+			setComments((currentComments) => {
+				return currentComments.filter(
+					(comment) => comment !== newComment
+				);
+			});
+		});
+	};
+
+	return (
+		<div>
+			<h3 id="commentsTitle">Post a new comment</h3>
+			<form id="newCommentBox" onSubmit={postNewComment}>
+				<textarea
+					id="newCommentText"
+					placeholder="new comment text..."
+					required={true}
+					value={newCommentText}
+					onChange={(event) => setNewCommentText(event.target.value)}
+				/>
+				<button
+					type="submit"
+					id="postNewCommentButton"
+					className="brandedButton"
+				>
+					Post
+				</button>
+			</form>
+		</div>
+	);
+};
+
+export default NewComment;

src/apiFunctions.js

@@ -50,3 +50,15 @@ export function getUsers() {
 		.get("https://news-app-backend.onrender.com/api/users")
 		.then(({ data: { users } }) => users);
 }
+
+export function postNewCommentForArticle(articleid, comment) {
+	const newComment = {
+		author: comment.author,
+		body: comment.body,
+		votes: comment.votes,
+	};
+	return axios.post(
+		`https://news-app-backend.onrender.com/api/articles/${articleid}/comments`,
+		newComment
+	);
+}