add search button for author filter and capitalise first letter of to…

…pics

src/App.css

@@ -114,7 +114,7 @@ select {
 }
 
 #authorSearchField {
-  width: 180px;
+  width: 150px;
   margin: auto;
   text-align: center;
   background-color: #fdf1e6;
@@ -131,8 +131,27 @@ select {
   outline-color: #414d52;
 }
 
+#authorFilterButton {
+  font-weight: normal;
+  margin-left: 10px;
+  padding: 2px;
+  border-radius: 4px;
+  width: 50px;
+}
+
+#authorFilterButton:disabled {
+  background-color: #f9f2ec;
+  color: lightgray;
+  border: 1px solid lightgray;
+  box-shadow: none;
+  font-weight: normal;
+  cursor: auto;
+}
+
 #loginAvatarContainer {
-  display: flex;
+  justify-self: right;
+  align-self: center;
+  width: fit-content;
 }
 
 #loginButton,

src/App.js

@@ -29,6 +29,7 @@ function App() {
         setAuthorFilter={setAuthorFilter}
         authorValue={authorValue}
         setAuthorValue={setAuthorValue}
+        authorFilter={authorFilter}
       />
       <Routes>
         <Route

src/ArticleItem.jsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { formatDate } from "./utils";
+import { formatDate, capitaliseFirstLetter } from "./utils";
 
 const ArticleItem = ({
 	article,
@@ -25,7 +25,9 @@ const ArticleItem = ({
 			</div>
 			<div className="articleTopicContainer">
 				{topicFilter ? (
-					<p className="articleTopic">{article.topic}</p>
+					<p className="articleTopic">
+						{capitaliseFirstLetter(article.topic)}
+					</p>
 				) : (
 					<button
 						onClick={(event) => {
@@ -34,7 +36,7 @@ const ArticleItem = ({
 						}}
 						className="topicButton"
 					>
-						{article.topic}
+						{capitaliseFirstLetter(article.topic)}
 					</button>
 				)}
 			</div>

src/Header.jsx

@@ -2,13 +2,15 @@ import { useLocation, useNavigate, Link } from "react-router-dom";
 import { useContext, useState, useEffect } from "react";
 import { UserContext } from "./contexts/UserContext";
 import { getTopicList } from "./apiFunctions";
+import { capitaliseFirstLetter } from "./utils";
 
 const Header = ({
 	topicFilter,
 	setTopicFilter,
 	setAuthorFilter,
 	authorValue,
 	setAuthorValue,
+	authorFilter,
 }) => {
 	const { pathname: path } = useLocation();
 	const navigate = useNavigate();
@@ -17,6 +19,8 @@ const Header = ({
 	const { user, setUser } = useContext(UserContext);
 	const [isLoading, setIsLoading] = useState(true);
 	const [topicList, setTopicList] = useState([]);
+	const [buttonDisable, setButtonDisable] = useState(true);
+	const [buttonClear, setButtonClear] = useState(false);
 
 	useEffect(() => {
 		setIsLoading(true);
@@ -26,11 +30,49 @@ const Header = ({
 		});
 	}, []);
 
+	useEffect(() => {
+		if (authorFilter !== "") {
+			setClearButton();
+		}
+	}, [authorFilter]);
+
 	const authorChanged = (event) => {
-		if (event.target.value === "") {
+		const currentValue = event.target.value;
+		if (currentValue !== "") {
+			currentValue === authorFilter
+				? setClearButton()
+				: setSearchButton(false);
+		} else {
+			setButtonDisable(true);
+		}
+		setAuthorValue(currentValue);
+	};
+
+	const searchAuthor = (event) => {
+		event.preventDefault();
+		if (authorValue !== "") {
+			setAuthorFilter(authorValue);
+			setClearButton();
+		}
+	};
+
+	const actionSearchClear = (event) => {
+		if (buttonClear) {
+			event.preventDefault();
 			setAuthorFilter("");
+			setAuthorValue("");
+			setSearchButton();
 		}
-		setAuthorValue(event.target.value);
+	};
+
+	const setSearchButton = (disabled = true) => {
+		setButtonDisable(disabled);
+		setButtonClear(false);
+	};
+
+	const setClearButton = () => {
+		setButtonClear(true);
+		setButtonDisable(false);
 	};
 
 	return (
@@ -78,27 +120,29 @@ const Header = ({
 							{topicList.map((topic) => {
 								return (
 									<option key={topic.slug} value={topic.slug}>
-										{topic.slug}
+										{capitaliseFirstLetter(topic.slug)}
 									</option>
 								);
 							})}
 						</select>
 					)}
 					{!articleView && !loginView && (
-						<form
-							id="authorSearchForm"
-							onSubmit={(event) => {
-								event.preventDefault();
-								setAuthorFilter(authorValue);
-							}}
-						>
+						<form id="authorSearchForm" onSubmit={searchAuthor}>
 							<input
 								type="text"
 								id="authorSearchField"
 								placeholder="All authors"
 								value={authorValue}
 								onChange={authorChanged}
 							/>
+							<button
+								id="authorFilterButton"
+								className="brandedButton"
+								disabled={buttonDisable}
+								onClick={actionSearchClear}
+							>
+								{buttonClear ? "Clear" : "Search"}
+							</button>
 						</form>
 					)}
 					{loginView && user ? (

src/utils.js

@@ -6,3 +6,7 @@ export function formatDate(string) {
 export function wordCount(string) {
 	return string.split(/\s+/).length;
 }
+
+export function capitaliseFirstLetter(str) {
+	return str.charAt(0).toUpperCase() + str.substring(1);
+}