use query param for alert search

Author: chriscareycode

src/atoms/alertAtom.ts

@@ -17,6 +17,4 @@ export const alertAtom = atom(initialState);
 export const alertHowManyAtom = atom({
 	howManyAlerts: 0,
 	howManyAlertSoft: 0,
-});
-
-export const alertSearchTextAtom = atom('');
+});

src/components/alerts/AlertItems.tsx

@@ -24,8 +24,7 @@ import QuietFor from './QuietFor';
 
 import { Alert } from 'types/hostAndServiceTypes';
 import { ClientSettings } from 'types/settings';
-import { useAtomValue } from 'jotai';
-import { alertSearchTextAtom } from '../../atoms/alertAtom';
+import { useQueryParams } from '../../hooks/useQueryParams';
 // CSS
 import '../animation.css';
 import '../services/ServiceItems.css';
@@ -39,7 +38,8 @@ interface AlertItemsProps {
 
 const AlertItems = ({ items, settings, isDemoMode }: AlertItemsProps) => {
 
-	const alertSearchText = useAtomValue(alertSearchTextAtom);
+	const queryParams = useQueryParams();
+	const alertSearchText = queryParams.get('alertSearch') || '';
 
 	const [howManyToRender, setHowManyToRender] = useState(100);
 	const pageSize = 100;

src/components/alerts/AlertSection.tsx

@@ -22,7 +22,8 @@ import * as motion from "motion/react-client";
 // State Management
 import { useAtom, useAtomValue } from 'jotai';
 import { bigStateAtom, clientSettingsAtom, clientSettingsInitial } from '../../atoms/settingsState';
-import { alertIsFetchingAtom, alertAtom, alertHowManyAtom, alertSearchTextAtom } from '../../atoms/alertAtom';
+import { alertIsFetchingAtom, alertAtom, alertHowManyAtom } from '../../atoms/alertAtom';
+import { useQueryParams } from '../../hooks/useQueryParams';
 
 import { translate } from '../../helpers/language';
 
@@ -44,13 +45,20 @@ const AlertSection = () => {
 
 	//console.log('AlertSection run');
 
-	const [alertSearchText, setAlertSearchText] = useAtom(alertSearchTextAtom);
+	const queryParams = useQueryParams();
+	const alertSearchText = queryParams.get('alertSearch') || '';
 	const [localSearchText, setLocalSearchText] = useState(alertSearchText);
 
-	// Debounce updating the shared atom so filtering doesn't run on every keystroke
+	// Debounce updating the URL query param so it doesn't update on every keystroke
 	const debouncedSetSearchText = useMemo(
-		() => _.debounce((value: string) => setAlertSearchText(value), 300),
-		[setAlertSearchText],
+		() => _.debounce((value: string) => {
+			if (value) {
+				queryParams.set({ alertSearch: value });
+			} else {
+				queryParams.remove('alertSearch');
+			}
+		}, 300),
+		[queryParams],
 	);
 
 	// Cleanup debounce on unmount
@@ -69,7 +77,7 @@ const AlertSection = () => {
 	const handleSearchClear = () => {
 		setLocalSearchText('');
 		debouncedSetSearchText.cancel();
-		setAlertSearchText('');
+		queryParams.remove('alertSearch');
 	};
 
 	// State Management state (this section)