From 1ffb926631d80f5101e0a0a5bf0ad88ed3b020f7 Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Thu, 21 Mar 2024 19:38:02 +0100
Subject: [PATCH] fixed eslint warnings + made search filter explicit

---
 src/app/providers/ContextMenuProvider.tsx |  2 +-
 src/app/results/Filter.tsx                | 12 +++++++++---
 src/app/results/Playlist.tsx              |  6 +++---
 src/app/results/Search.tsx                |  4 ++--
 src/app/trending/Trending.tsx             |  2 +-
 src/components/Search.tsx                 |  4 ++--
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/providers/ContextMenuProvider.tsx b/src/app/providers/ContextMenuProvider.tsx
index add2f8c..f3c1020 100644
--- a/src/app/providers/ContextMenuProvider.tsx
+++ b/src/app/providers/ContextMenuProvider.tsx
@@ -20,7 +20,7 @@ const Menu: Component = () => {
 		return () => {
 			window.removeEventListener("click", handleClick);
 		};
-	}, [hide, shouldShow]);
+	}, [handleClick]);
 
 	return (
 		<div
diff --git a/src/app/results/Filter.tsx b/src/app/results/Filter.tsx
index 330ead1..1367fa7 100644
--- a/src/app/results/Filter.tsx
+++ b/src/app/results/Filter.tsx
@@ -27,15 +27,21 @@ export const Filter: Component<{
 		[]
 	);
 
+	const currentMenuItem = filterMenuItems.find((item) => item.key === filter);
+
 	return (
 		<Dropdown>
 			<DropdownTrigger>
-				<Button className="h-full" variant="bordered" isIconOnly>
-					<FilterIcon className="text-xl" />
+				<Button
+					startContent={<FilterIcon className="text-xl" />}
+					className="h-full"
+					variant="bordered"
+				>
+					{currentMenuItem?.label}
 				</Button>
 			</DropdownTrigger>
 			<DropdownMenu
-				aria-label="Static Actions"
+				aria-label="Filter search results"
 				items={filterMenuItems}
 				selectionMode="single"
 				selectedKeys={[filter]}
diff --git a/src/app/results/Playlist.tsx b/src/app/results/Playlist.tsx
index 726d931..e079bc3 100644
--- a/src/app/results/Playlist.tsx
+++ b/src/app/results/Playlist.tsx
@@ -52,9 +52,9 @@ export const Playlist: Component<{ data: PlaylistProps }> = ({ data }) => {
 
 							{data.videos && (
 								<div className="flex flex-col gap-1">
-									{data.videos.map((video) => {
-										return <h1>{video.title}</h1>;
-									})}
+									{data.videos.map((video) => (
+										<h1 key={video.id}>{video.title}</h1>
+									))}
 								</div>
 							)}
 						</div>
diff --git a/src/app/results/Search.tsx b/src/app/results/Search.tsx
index 0f2ff65..422b421 100644
--- a/src/app/results/Search.tsx
+++ b/src/app/results/Search.tsx
@@ -68,14 +68,14 @@ export const Search: Component = () => {
 		(filter: SearchType) => {
 			searchFor(query, filter);
 		},
-		[query]
+		[query, searchFor]
 	);
 
 	const handleUserReachedPageEnd = useCallback(
 		(visiblity: boolean) => {
 			if (visiblity && !isFetchingNextPage) fetchNextPage();
 		},
-		[hasNextPage, isFetchingNextPage]
+		[hasNextPage, isFetchingNextPage, fetchNextPage]
 	);
 
 	return (
diff --git a/src/app/trending/Trending.tsx b/src/app/trending/Trending.tsx
index 20516b3..c8e901f 100644
--- a/src/app/trending/Trending.tsx
+++ b/src/app/trending/Trending.tsx
@@ -59,7 +59,7 @@ export const Trending: Component = ({}) => {
 			);
 
 		return null;
-	}, [data]);
+	}, [data, region]);
 
 	const error: Error | null = regionError ?? fetchError ?? noDataError ?? null;
 
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 3fa8d99..5bbb0b9 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -30,9 +30,9 @@ export const Search: Component<{
 		}
 	});
 
-	const submit = useCallback((query: string) => {
+	const submit = (query: string) => {
 		searchFor(query);
-	}, []);
+	};
 
 	const suggestions = useMemo(
 		() =>