chore: rename useQuery hook to useURLSearchParams (#1111)

Author: ckbedwell

src/components/CheckForm/useCheckType.tsx

@@ -1,22 +1,23 @@
-import { useLocation, useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router-dom-v5-compat';
 
 import { Check, CheckFormPageParams, CheckType } from 'types';
 import { getCheckType } from 'utils';
 import { CHECK_TYPE_OPTIONS, useCheckTypeOptions } from 'hooks/useCheckTypeOptions';
+import { useURLSearchParams } from 'hooks/useURLSearchParams';
 
 export function useFormCheckType(existingCheck?: Check) {
   const { checkTypeGroup } = useParams<CheckFormPageParams>();
   const options = useCheckTypeOptions();
   const fallback = options.filter((option) => option.group === checkTypeGroup);
-  const { search } = useLocation();
+  const urlSearchParams = useURLSearchParams();
 
   if (existingCheck) {
     return getCheckType(existingCheck.settings);
   }
 
-  const searchParams = new URLSearchParams(search);
+  const checkType = urlSearchParams.get('checkType') as CheckType;
 
-  return (searchParams.get('checkType') as CheckType) || fallback[0]?.value || options[0].value;
+  return checkType || fallback[0]?.value || options[0].value;
 }
 
 export function useFormCheckTypeGroup(check?: Check) {

src/components/SceneRedirecter.tsx

@@ -5,12 +5,12 @@ import { LoadingPlaceholder } from '@grafana/ui';
 import { ROUTES } from 'routing/types';
 import { generateRoutePath } from 'routing/utils';
 import { useChecks } from 'data/useChecks';
-import { useQuery } from 'hooks/useQuery';
+import { useURLSearchParams } from 'hooks/useURLSearchParams';
 
 export function SceneRedirecter() {
-  const queryParams = useQuery();
-  const job = queryParams.get('var-job');
-  const instance = queryParams.get('var-instance');
+  const urlSearchParams = useURLSearchParams();
+  const job = urlSearchParams.get('var-job');
+  const instance = urlSearchParams.get('var-instance');
   const { data, isLoading } = useChecks();
 
   if (isLoading) {

src/hooks/useQueryParametersState.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 
-import { useSearchParams } from './useSearchParams';
+import { useURLSearchParams } from 'hooks/useURLSearchParams';
 
 enum HistoryStrategy {
   Push = 'push',
@@ -25,9 +25,9 @@ export const useQueryParametersState = <ValueType>({
 }: QueryParametersStateProps<ValueType>): [ValueType, (value: ValueType | null) => void] => {
   const navigate = useNavigate();
   const location = useLocation();
-  const queryParams = useSearchParams();
+  const urlSearchParams = useURLSearchParams();
 
-  const existingValue = queryParams.get(key);
+  const existingValue = urlSearchParams.get(key);
 
   const parsedExistingValue = useMemo(() => {
     return existingValue ? decode(existingValue) : null;

src/hooks/useSearchParams.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom-v5-compat';
 
-export function useQuery() {
+export function useURLSearchParams() {
   const { search } = useLocation();
 
   return useMemo(() => new URLSearchParams(search), [search]);

src/hooks/useQuery.ts renamed to src/hooks/useURLSearchParams.ts

@@ -10,7 +10,7 @@ import { getUserPermissions } from 'data/permissions';
 import { useFeatureFlagContext } from 'hooks/useFeatureFlagContext';
 import { useLimits } from 'hooks/useLimits';
 import { QueryParamMap, useNavigation } from 'hooks/useNavigation';
-import { useQuery } from 'hooks/useQuery';
+import { useURLSearchParams } from 'hooks/useURLSearchParams';
 import { SceneRedirecter } from 'components/SceneRedirecter';
 import { AlertingPage } from 'page/AlertingPage';
 import { CheckList } from 'page/CheckList';
@@ -32,23 +32,23 @@ import { SceneHomepage } from 'page/SceneHomepage';
 import { UnauthorizedPage } from 'page/UnauthorizedPage';
 
 export const InitialisedRouter = () => {
-  const queryParams = useQuery();
+  const urlSearchParams = useURLSearchParams();
   const navigate = useNavigation();
   const { isFeatureEnabled } = useFeatureFlagContext();
 
-  const page = queryParams.get('page');
+  const page = urlSearchParams.get('page');
   useLimits();
 
   useEffect(() => {
     if (page) {
-      queryParams.delete('page');
-      const params = queryParams.toString();
+      urlSearchParams.delete('page');
+      const params = urlSearchParams.toString();
       const path = `${page}${params ? '?' : ''}${params}`;
       const translated: QueryParamMap = {};
-      queryParams.forEach((value, name) => (translated[name] = value));
+      urlSearchParams.forEach((value, name) => (translated[name] = value));
       navigate(path, translated);
     }
-  }, [page, navigate, queryParams]);
+  }, [page, navigate, urlSearchParams]);
 
   const { canWriteChecks, canReadChecks, canReadProbes } = getUserPermissions();