add error handling

src/App.css

@@ -52,6 +52,22 @@ header {
   grid-column-gap: 0;
 }
 
+#FNFbox {
+  color: #414d52;
+}
+
+#FNFtitle {
+  margin: 50px auto 20px auto;
+}
+
+#FNFmessage {
+  margin: auto 50px auto 50px;
+}
+
+#homeLink {
+  font-weight: bold;
+}
+
 select {
   background-color: #fdf1e6;
   border: none;
@@ -763,6 +779,7 @@ select {
 #loginLoadingText {
   margin-top: 30vh;
   color: #414d52;
+  font-weight: bold;
 }
 
 .lds-ellipsis {

src/App.js

@@ -6,6 +6,7 @@ import ArticleList from "./ArticleList";
 import Article from "./Article";
 import Login from "./Login";
 import { useState, useEffect } from "react";
+import InvalidPath from "./InvalidPath";
 
 function App() {
   const [numItems, setNumItems] = useState(null);
@@ -43,6 +44,7 @@ function App() {
           }
         />
         <Route path="/login" element={<Login setNumItems={setNumItems} />} />
+        <Route path="*" element={<InvalidPath />} />
       </Routes>
       <Footer
         pageNumber={pageNumber}

src/Article.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { formatDate, wordCount } from "./utils";
+import { formatDate, wordCount, capitaliseFirstLetter } from "./utils";
 import LoadingSpinner from "./LoadingSpinner";
 import { getArticle, updateVoteForArticle } from "./apiFunctions";
 import Comment from "./Comment";
@@ -19,19 +19,26 @@ const Article = ({
 	const [isLoading, setIsLoading] = useState(true);
 	const [commentCount, setCommentCount] = useState(null);
 	const [articleVotes, setArticleVotes] = useState(0);
+	const [articleFetchError, setArticleFetchError] = useState(null);
 
 	useEffect(() => {
 		setIsLoading(true);
 		setNumItems(null);
 		setCommentPageNumber(1);
 		setArticleWordCount(null);
-		getArticle(articleid).then((article) => {
-			setArticle(article);
-			setCommentCount(article.comment_count);
-			setArticleVotes(article.votes);
-			setArticleWordCount(wordCount(article.body));
-			setIsLoading(false);
-		});
+		setArticleFetchError(null);
+		getArticle(articleid)
+			.then((article) => {
+				setArticle(article);
+				setCommentCount(article.comment_count);
+				setArticleVotes(article.votes);
+				setArticleWordCount(wordCount(article.body));
+				setIsLoading(false);
+			})
+			.catch((error) => {
+				setArticleFetchError(error.response.data.msg);
+				setIsLoading(false);
+			});
 	}, [articleid]);
 
 	const adjustVote = (inc) => {
@@ -48,6 +55,12 @@ const Article = ({
 			<p id="articleLoadingText">Loading Article</p>
 			<LoadingSpinner />
 		</div>
+	) : articleFetchError ? (
+		<div>
+			<p id="articleLoadingText">
+				{capitaliseFirstLetter(articleFetchError)}
+			</p>
+		</div>
 	) : (
 		<article id="articleView">
 			<img

src/ArticleList.jsx

@@ -3,11 +3,12 @@ import { getArticles } from "./apiFunctions";
 import ArticleItem from "./ArticleItem";
 import LoadingSpinner from "./LoadingSpinner";
 import { useSearchParams } from "react-router-dom";
+import { capitaliseFirstLetter } from "./utils";
 
 const ArticleList = ({ setNumItems, pageNumber }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [articles, setArticles] = useState([]);
-	const [noArticlesFound, setNoArticlesFound] = useState(false);
+	const [noArticlesFound, setNoArticlesFound] = useState(null);
 	const [searchParams, setSearchParams] = useSearchParams();
 
 	useEffect(() => {
@@ -21,16 +22,14 @@ const ArticleList = ({ setNumItems, pageNumber }) => {
 			.then((articles) => {
 				setNumItems(articles.total_count);
 				setArticles(articles.articles);
-				setNoArticlesFound(false);
+				setNoArticlesFound(null);
 				setIsLoading(false);
 			})
 			.catch((error) => {
-				if (error.response.data.msg === "author not found") {
-					setNumItems(0);
-					setNoArticlesFound(true);
-					setArticles([]);
-					setIsLoading(false);
-				}
+				setNumItems(0);
+				setNoArticlesFound(error.response.data.msg);
+				setArticles([]);
+				setIsLoading(false);
 			});
 	}, [pageNumber, searchParams]);
 
@@ -55,7 +54,9 @@ const ArticleList = ({ setNumItems, pageNumber }) => {
 				))
 			)}
 			{!isLoading && noArticlesFound && (
-				<p id="articleLoadingText">No articles found!</p>
+				<p id="articleLoadingText">
+					{capitaliseFirstLetter(noArticlesFound)}
+				</p>
 			)}
 			<div id="bottomSpace"></div>
 		</div>

src/FilterBar.jsx

@@ -30,18 +30,28 @@ const FilterBar = () => {
 	useEffect(() => {
 		setIsLoading(true);
 		getTopicList().then((topics) => {
-			setTopicList(topics);
+			setTopicList((currentTopics) => {
+				const topicURL = searchParams.get("topic") || "";
+				if (
+					topicURL &&
+					!topics.find((topic) => topic.slug === topicURL)
+				) {
+					return [{ slug: topicURL }, ...topics];
+				}
+				return topics;
+			});
 			setIsLoading(false);
 		});
-	}, []);
+	}, [topicValue]);
 
 	useEffect(() => {
 		const newAuthorValue = searchParams.get("author") || "";
 		setAuthorValue(newAuthorValue);
 		if (newAuthorValue) {
 			setClearButton();
 		}
-		setTopicValue(searchParams.get("topic") || "");
+		const newTopic = searchParams.get("topic") || "";
+		setTopicValue(newTopic);
 	}, [searchParams]);
 
 	const authorChanged = (event) => {

src/InvalidPath.jsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+const InvalidPath = () => {
+	return (
+		<div id="FNFbox">
+			<h2 id="FNFtitle">Page not found!</h2>
+			<p id="FNFmessage">
+				Ooops! I'm not sure how you got here but you've found a dead
+				end! Click{" "}
+				<Link to="/" id="homeLink">
+					here
+				</Link>{" "}
+				to return to the main page or use the back button on your
+				browser.
+			</p>
+		</div>
+	);
+};
+
+export default InvalidPath;

src/NewComment.jsx

@@ -20,15 +20,26 @@ const NewComment = ({ setComments, articleid, setCommentCount }) => {
 		setComments((currentComments) => [newComment, ...currentComments]);
 		setCommentCount((currentCount) => currentCount + 1);
 		setNewCommentText("");
-		postNewCommentForArticle(articleid, newComment).catch(() => {
-			setDisplayError(true);
-			setCommentCount((currentCount) => currentCount - 1);
-			setComments((currentComments) => {
-				return currentComments.filter(
-					(comment) => comment !== newComment
-				);
+		postNewCommentForArticle(articleid, newComment)
+			.then((new_comment) => {
+				setComments((currentComments) => {
+					return currentComments.map((comment) => {
+						if (comment === newComment) {
+							comment.comment_id = new_comment.comment_id;
+						}
+						return comment;
+					});
+				});
+			})
+			.catch(() => {
+				setDisplayError(true);
+				setCommentCount((currentCount) => currentCount - 1);
+				setComments((currentComments) => {
+					return currentComments.filter(
+						(comment) => comment !== newComment
+					);
+				});
 			});
-		});
 	};
 
 	return (

src/apiFunctions.js

@@ -63,10 +63,12 @@ export function postNewCommentForArticle(articleid, comment) {
 		body: comment.body,
 		votes: comment.votes,
 	};
-	return axios.post(
-		`https://news-app-backend.onrender.com/api/articles/${articleid}/comments`,
-		newComment
-	);
+	return axios
+		.post(
+			`https://news-app-backend.onrender.com/api/articles/${articleid}/comments`,
+			newComment
+		)
+		.then(({ data: { comment } }) => comment);
 }
 
 export function getTopicList() {