From 45560e0c72677d480c0a675a5583ee5a264c74ee Mon Sep 17 00:00:00 2001
From: Ayuhito <hello@ayuhito.com>
Date: Tue, 9 Jul 2024 23:22:52 +0100
Subject: [PATCH] style: clean up imports

---
 dashboard/app/components/DropdownSelect.tsx   | 37 +++++++------------
 .../app/components/stats/StatsHeader.tsx      |  2 +-
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/dashboard/app/components/DropdownSelect.tsx b/dashboard/app/components/DropdownSelect.tsx
index 6c544fea..8918b688 100644
--- a/dashboard/app/components/DropdownSelect.tsx
+++ b/dashboard/app/components/DropdownSelect.tsx
@@ -9,10 +9,8 @@ interface DropdownSelectBase {
 	defaultValue: string;
 	defaultLabel: string;
 	selectAriaLabel: string;
-
 	records: Record<string, string>;
 	groupEndValues?: string[];
-
 	leftSection?: React.ReactNode;
 }
 
@@ -42,28 +40,23 @@ export const DropdownSelect = (props: DropdownSelectProps) => {
 		leftSection,
 	} = props;
 
-	const combobox = useCombobox({
-		onDropdownClose: () => {
-			combobox.resetSelectedOption();
-		},
-		onDropdownOpen: (eventSource) => {
-			if (eventSource === 'keyboard') {
-				combobox.selectActiveOption();
-			} else {
-				combobox.updateSelectedOptionIndex('active');
-			}
-		},
-	});
-
 	const [searchParams, setSearchParams] = useSearchParams();
 	const navigate = useNavigate();
-
 	const [option, setOption] = useState<string>(
 		isSearchParams(props)
-			? searchParams.get(props.searchParamKey) || defaultValue
+			? searchParams.get(props.searchParamKey) ?? defaultValue
 			: defaultValue,
 	);
 
+	const combobox = useCombobox({
+		onDropdownClose: () => combobox.resetSelectedOption(),
+		onDropdownOpen: (eventSource) => {
+			eventSource === 'keyboard'
+				? combobox.selectActiveOption()
+				: combobox.updateSelectedOptionIndex('active');
+		},
+	});
+
 	useDidUpdate(() => {
 		if (isSearchParams(props)) {
 			setSearchParams((prevParams) => {
@@ -72,18 +65,16 @@ export const DropdownSelect = (props: DropdownSelectProps) => {
 				return newParams;
 			});
 		} else {
-			navigate(`/${option}`, {
-				relative: 'route',
-			});
+			navigate(`/${option}`, { relative: 'route' });
 		}
-	}, [option]);
+	}, [option, props, navigate, setSearchParams]);
 
 	const handleOptionSubmit = useCallback(
 		(value: string) => {
 			setOption(value);
 			combobox.toggleDropdown();
 		},
-		[combobox.toggleDropdown],
+		[combobox],
 	);
 
 	const options = useMemo(
@@ -124,7 +115,7 @@ export const DropdownSelect = (props: DropdownSelectProps) => {
 					leftSection={leftSection}
 					data-left={Boolean(leftSection)}
 				>
-					{records[option] || defaultLabel}
+					{records[option] ?? defaultLabel}
 				</InputBase>
 			</Combobox.Target>
 			<Combobox.Dropdown>
diff --git a/dashboard/app/components/stats/StatsHeader.tsx b/dashboard/app/components/stats/StatsHeader.tsx
index 7bd9abde..6b7084ab 100644
--- a/dashboard/app/components/stats/StatsHeader.tsx
+++ b/dashboard/app/components/stats/StatsHeader.tsx
@@ -5,6 +5,7 @@ import {
 	Tooltip,
 	UnstyledButton,
 } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { useState } from 'react';
 import { ScrollContainer } from 'react-indiana-drag-scroll';
 
@@ -19,7 +20,6 @@ import { HeaderDataBox } from './HeaderDataBox';
 import type { ChartType, StatHeaderData } from './types';
 
 import classes from './StatsHeader.module.css';
-import { useMediaQuery } from '@mantine/hooks';
 
 interface StatsHeaderProps {
 	stats: StatHeaderData[];