update filters to use url parameters

Mielie · Mar 17, 2023 · c598803 · c598803
1 parent a7a7c38
commit c598803
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 104 deletions.
diff --git a/src/App.css b/src/App.css
@@ -211,7 +211,7 @@ select {
   height: 35px;
   background-color: #a2baab;
   display: grid;
-  grid-template-columns: 30px 90px 150px 30px auto;
+  grid-template-columns: auto 90px 150px 30px auto;
   text-align: left;
 }
 

diff --git a/src/App.js b/src/App.js
@@ -23,27 +23,12 @@ function App() {
 
   return (
     <div className="App">
-      <Header
-        topicFilter={topicFilter}
-        setTopicFilter={setTopicFilter}
-        setAuthorFilter={setAuthorFilter}
-        authorValue={authorValue}
-        setAuthorValue={setAuthorValue}
-        authorFilter={authorFilter}
-      />
+      <Header />
       <Routes>
         <Route
           path="/"
           element={
-            <ArticleList
-              setNumItems={setNumItems}
-              pageNumber={pageNumber}
-              topicFilter={topicFilter}
-              setTopicFilter={setTopicFilter}
-              authorFilter={authorFilter}
-              setAuthorFilter={setAuthorFilter}
-              setAuthorValue={setAuthorValue}
-            />
+            <ArticleList setNumItems={setNumItems} pageNumber={pageNumber} />
           }
         />
         <Route

diff --git a/src/ArticleItem.jsx b/src/ArticleItem.jsx
@@ -1,15 +1,22 @@
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { formatDate, capitaliseFirstLetter } from "./utils";
 
-const ArticleItem = ({
-	article,
-	className,
-	topicFilter,
-	setTopicFilter,
-	authorFilter,
-	setAuthorFilter,
-	setAuthorValue,
-}) => {
+const ArticleItem = ({ article, className }) => {
+	const [searchParams, setSearchParams] = useSearchParams();
+	const newParams = Object.fromEntries([...searchParams]);
+
+	const filterTopic = (event) => {
+		event.preventDefault();
+		newParams.topic = article.topic;
+		setSearchParams(newParams);
+	};
+
+	const filterAuthor = (event) => {
+		event.preventDefault();
+		newParams.author = article.author;
+		setSearchParams(newParams);
+	};
+
 	return (
 		<Link
 			className={`articleListItem ${className}`}
@@ -24,34 +31,21 @@ const ArticleItem = ({
 				<h2 className="articleTitle">{article.title}</h2>
 			</div>
 			<div className="articleTopicContainer">
-				{topicFilter ? (
+				{newParams.topic ? (
 					<p className="articleTopic">
 						{capitaliseFirstLetter(article.topic)}
 					</p>
 				) : (
-					<button
-						onClick={(event) => {
-							event.preventDefault();
-							setTopicFilter(article.topic);
-						}}
-						className="topicButton"
-					>
+					<button onClick={filterTopic} className="topicButton">
 						{capitaliseFirstLetter(article.topic)}
 					</button>
 				)}
 			</div>
 			<div className="articleAuthorContainer">
-				{authorFilter ? (
+				{newParams.author ? (
 					<p className="articleAuthor">{article.author}</p>
 				) : (
-					<button
-						onClick={(event) => {
-							event.preventDefault();
-							setAuthorValue(article.author);
-							setAuthorFilter(article.author);
-						}}
-						className="topicButton"
-					>
+					<button onClick={filterAuthor} className="topicButton">
 						{article.author}
 					</button>
 				)}

diff --git a/src/ArticleList.jsx b/src/ArticleList.jsx
@@ -4,25 +4,19 @@ import ArticleItem from "./ArticleItem";
 import LoadingSpinner from "./LoadingSpinner";
 import { useSearchParams } from "react-router-dom";
 
-const ArticleList = ({
-	setNumItems,
-	pageNumber,
-	topicFilter,
-	setTopicFilter,
-	authorFilter,
-	setAuthorFilter,
-	setAuthorValue,
-}) => {
+const ArticleList = ({ setNumItems, pageNumber }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [articles, setArticles] = useState([]);
 	const [noArticlesFound, setNoArticlesFound] = useState(false);
 	const [searchParams, setSearchParams] = useSearchParams();
-	const sortBy = searchParams.get("sort_by");
-	const order = searchParams.get("order");
 
 	useEffect(() => {
 		setIsLoading(true);
 		setNumItems(null);
+		const sortBy = searchParams.get("sort_by");
+		const order = searchParams.get("order");
+		const authorFilter = searchParams.get("author");
+		const topicFilter = searchParams.get("topic");
 		getArticles(pageNumber, topicFilter, authorFilter, sortBy, order)
 			.then((articles) => {
 				setNumItems(articles.total_count);
@@ -38,7 +32,7 @@ const ArticleList = ({
 					setIsLoading(false);
 				}
 			});
-	}, [pageNumber, topicFilter, authorFilter, sortBy, order]);
+	}, [pageNumber, searchParams]);
 
 	return (
 		<div id="articleListBox">
@@ -52,11 +46,6 @@ const ArticleList = ({
 					<ArticleItem
 						key={article.article_id}
 						article={article}
-						setTopicFilter={setTopicFilter}
-						topicFilter={topicFilter}
-						authorFilter={authorFilter}
-						setAuthorFilter={setAuthorFilter}
-						setAuthorValue={setAuthorValue}
 						className={
 							index % 2
 								? "articleListDarkBackground"

diff --git a/src/FilterBar.jsx b/src/FilterBar.jsx
@@ -1,28 +1,31 @@
-import { useLocation, useNavigate, Link } from "react-router-dom";
+import {
+	useLocation,
+	useNavigate,
+	useSearchParams,
+	Link,
+} from "react-router-dom";
 import { useState, useEffect, useContext } from "react";
 import { UserContext } from "./contexts/UserContext";
 import { getTopicList } from "./apiFunctions";
 import { capitaliseFirstLetter } from "./utils";
 import SortBar from "./SortBar";
 
-const FilterBar = ({
-	topicFilter,
-	setTopicFilter,
-	authorFilter,
-	setAuthorFilter,
-	authorValue,
-	setAuthorValue,
-}) => {
+const FilterBar = () => {
 	const { pathname: path } = useLocation();
 	const { user, setUser } = useContext(UserContext);
-	const navigate = useNavigate();
-	const articleView = /\/articles\/[0-9]+/i.test(path);
-	const loginView = path === "/login";
 
+	const [searchParams, setSearchParams] = useSearchParams();
 	const [isLoading, setIsLoading] = useState(true);
 	const [topicList, setTopicList] = useState([]);
 	const [buttonDisable, setButtonDisable] = useState(true);
 	const [buttonClear, setButtonClear] = useState(false);
+	const [topicValue, setTopicValue] = useState("");
+	const [authorValue, setAuthorValue] = useState("");
+
+	const navigate = useNavigate();
+	const articleView = /\/articles\/[0-9]+/i.test(path);
+	const loginView = path === "/login";
+	const newParams = Object.fromEntries([...searchParams]);
 
 	useEffect(() => {
 		setIsLoading(true);
@@ -33,17 +36,22 @@ const FilterBar = ({
 	}, []);
 
 	useEffect(() => {
-		if (authorFilter !== "") {
+		const newAuthorValue = searchParams.get("author") || "";
+		setAuthorValue(newAuthorValue);
+		if (newAuthorValue) {
 			setClearButton();
 		}
-	}, [authorFilter]);
+		setTopicValue(searchParams.get("topic") || "");
+	}, [searchParams]);
 
 	const authorChanged = (event) => {
 		const currentValue = event.target.value;
 		if (currentValue !== "") {
-			currentValue === authorFilter
+			currentValue === newParams.author
 				? setClearButton()
 				: setSearchButton(false);
+		} else if (newParams.author) {
+			setClearButton();
 		} else {
 			setButtonDisable(true);
 		}
@@ -52,16 +60,29 @@ const FilterBar = ({
 
 	const searchAuthor = (event) => {
 		event.preventDefault();
-		if (authorValue !== "") {
-			setAuthorFilter(authorValue);
-			setClearButton();
+		if (authorValue) {
+			newParams.author = authorValue;
+		} else {
+			delete newParams.author;
+		}
+		setSearchParams(newParams);
+	};
+
+	const updateTopicFilter = (event) => {
+		const currentValue = event.target.value;
+		if (currentValue) {
+			newParams.topic = event.target.value;
+		} else {
+			delete newParams.topic;
 		}
+		setSearchParams(newParams);
 	};
 
 	const actionSearchClear = (event) => {
 		if (buttonClear) {
 			event.preventDefault();
-			setAuthorFilter("");
+			delete newParams.author;
+			setSearchParams(newParams);
 			setAuthorValue("");
 			setSearchButton();
 		}
@@ -94,8 +115,8 @@ const FilterBar = ({
 						id="topicSelector"
 						name="topicFilter"
 						disabled={isLoading}
-						value={topicFilter}
-						onChange={(event) => setTopicFilter(event.target.value)}
+						value={topicValue}
+						onChange={updateTopicFilter}
 					>
 						<option value="">All topics</option>
 						{topicList.map((topic) => {
@@ -114,6 +135,7 @@ const FilterBar = ({
 						type="text"
 						id="authorSearchField"
 						placeholder="All authors"
+						autocomplete="off"
 						value={authorValue}
 						onChange={authorChanged}
 					/>

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -3,14 +3,7 @@ import { useContext } from "react";
 import { UserContext } from "./contexts/UserContext";
 import FilterBar from "./FilterBar";
 
-const Header = ({
-	topicFilter,
-	setTopicFilter,
-	setAuthorFilter,
-	authorValue,
-	setAuthorValue,
-	authorFilter,
-}) => {
+const Header = () => {
 	const { user, setUser } = useContext(UserContext);
 	const navigate = useNavigate();
 
@@ -40,14 +33,7 @@ const Header = ({
 				)}
 			</div>
 			<div>
-				<FilterBar
-					topicFilter={topicFilter}
-					setTopicFilter={setTopicFilter}
-					authorFilter={authorFilter}
-					setAuthorValue={setAuthorValue}
-					authorValue={authorValue}
-					setAuthorFilter={setAuthorFilter}
-				/>
+				<FilterBar />
 			</div>
 		</header>
 	);

diff --git a/src/SortBar.jsx b/src/SortBar.jsx
@@ -1,20 +1,29 @@
 import { useSearchParams } from "react-router-dom";
+import { useState, useEffect } from "react";
 
 const SortBar = () => {
 	const [searchParams, setSearchParams] = useSearchParams();
-	const sortBy = searchParams.get("sort_by") || "created_at";
-	const order = searchParams.get("order") || "desc";
+	const [sortBy, setSortBy] = useState("created_at");
+	const [order, setOrder] = useState("desc");
+	const newParams = Object.fromEntries([...searchParams]);
+
+	useEffect(() => {
+		setSortBy(searchParams.get("sort_by") || "created_at");
+		setOrder(searchParams.get("order") || "desc");
+	}, [searchParams]);
 
 	const updateSortBy = (event) => {
-		setSearchParams({ sort_by: event.target.value, order });
+		newParams.sort_by = event.target.value;
+		setSearchParams(newParams);
 	};
 
 	const updateSortDirection = (event) => {
 		if (order === "asc") {
-			setSearchParams({ sort_by: sortBy, order: "desc" });
+			newParams.order = "desc";
 		} else {
-			setSearchParams({ sort_by: sortBy, order: "asc" });
+			newParams.order = "asc";
 		}
+		setSearchParams(newParams);
 	};
 
 	return (