ref(crons): Refactor monitor overview to use useNavigate (#71417)

getsentry · May 22, 2024 · 9738396 · 9738396
1 parent cddad5d
commit 9738396
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/static/app/views/monitors/overview.tsx b/static/app/views/monitors/overview.tsx
@@ -25,8 +25,9 @@ import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
-import useRouter from 'sentry/utils/useRouter';
 
 import {
   CronsLandingPanel,
@@ -45,11 +46,12 @@ const CronsListPageHeader = HookOrDefault({
 
 export default function Monitors() {
   const organization = useOrganization();
-  const router = useRouter();
-  const platform = decodeScalar(router.location.query?.platform) ?? null;
-  const guide = decodeScalar(router.location.query?.guide);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const platform = decodeScalar(location.query?.platform) ?? null;
+  const guide = decodeScalar(location.query?.guide);
 
-  const queryKey = makeMonitorListQueryKey(organization, router.location.query);
+  const queryKey = makeMonitorListQueryKey(organization, location.query);
 
   const {
     data: monitorList,
@@ -66,8 +68,8 @@ export default function Monitors() {
   const monitorListPageLinks = monitorListHeaders?.('Link');
 
   const handleSearch = (query: string) => {
-    const currentQuery = {...(router.location.query ?? {}), cursor: undefined};
-    router.push({
+    const currentQuery = {...(location.query ?? {}), cursor: undefined};
+    navigate({
       pathname: location.pathname,
       query: normalizeDateTimeParams({...currentQuery, query}),
     });
@@ -119,13 +121,16 @@ export default function Monitors() {
           <Layout.Main fullWidth>
             <Filters>
               <OwnerFilter
-                selectedOwners={decodeList(router.location.query.owner)}
-                onChangeFilter={owner =>
-                  router.replace({
-                    ...router.location,
-                    query: {...router.location.query, owner},
-                  })
-                }
+                selectedOwners={decodeList(location.query.owner)}
+                onChangeFilter={owner => {
+                  navigate(
+                    {
+                      ...location,
+                      query: {...location.query, owner},
+                    },
+                    {replace: true}
+                  );
+                }}
               />
               <PageFilterBar>
                 <ProjectPageFilter resetParamsOnChange={['cursor']} />