ref(admin): Replace useRouter usage in CustomerStats & CustomerStatsFilters (#112291)

getsentry/frontend-tsc#78

Replaces `useRouter` usages in `CustomerStats` & `CustomerStatsFilters`.

Author: shashjar

static/gsAdmin/components/customers/customerStats.tsx

@@ -22,7 +22,7 @@ import {defined} from 'sentry/utils';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import {getDynamicText} from 'sentry/utils/getDynamicText';
 import {useApiQuery} from 'sentry/utils/queryClient';
-import {useRouter} from 'sentry/utils/useRouter';
+import {useLocation} from 'sentry/utils/useLocation';
 
 enum SeriesName {
   ACCEPTED = 'Accepted',
@@ -434,15 +434,15 @@ type Props = {
 
 export const CustomerStats = memo(
   ({orgSlug, projectId, dataType, onDemandPeriodStart, onDemandPeriodEnd}: Props) => {
-    const router = useRouter();
+    const location = useLocation();
 
     const dataDatetime = useMemo((): DateTimeObject => {
       const {
         start,
         end,
         utc: utcString,
         statsPeriod,
-      } = normalizeDateTimeParams(router.location.query, {
+      } = normalizeDateTimeParams(location.query, {
         allowEmptyPeriod: true,
         allowAbsoluteDatetime: true,
         allowAbsolutePageDatetime: true,
@@ -474,7 +474,7 @@ export const CustomerStats = memo(
       return {
         period: statsPeriod ?? '90d',
       };
-    }, [router.location.query, onDemandPeriodStart, onDemandPeriodEnd]);
+    }, [location.query, onDemandPeriodStart, onDemandPeriodEnd]);
 
     const statsEndpointUrl = getApiUrl(`/organizations/$organizationIdOrSlug/stats_v2/`, {
       path: {organizationIdOrSlug: orgSlug},

static/gsAdmin/components/customers/customerStatsFilters.tsx

@@ -17,7 +17,8 @@ import {
 import {DATA_CATEGORY_INFO, DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {DataCategoryExact} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
-import {useRouter} from 'sentry/utils/useRouter';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 
 const ON_DEMAND_PERIOD_KEY = 'onDemand';
 
@@ -35,13 +36,12 @@ export function CustomerStatsFilters({
   onDemandPeriodStart,
   onDemandPeriodEnd,
 }: Props) {
-  const router = useRouter();
+  const location = useLocation();
+  const navigate = useNavigate();
   const onDemand = !!onDemandPeriodStart && !!onDemandPeriodEnd;
 
   const pageDateTime = useMemo((): DateTimeObject => {
-    const query = router.location.query;
-
-    const {start, end, statsPeriod} = normalizeDateTimeParams(query, {
+    const {start, end, statsPeriod} = normalizeDateTimeParams(location.query, {
       allowEmptyPeriod: true,
       allowAbsoluteDatetime: true,
       allowAbsolutePageDatetime: true,
@@ -59,7 +59,7 @@ export function CustomerStatsFilters({
     }
 
     return {};
-  }, [router.location.query]);
+  }, [location.query]);
 
   const handleDateChange = useCallback(
     (datetime: ChangeData) => {
@@ -68,10 +68,10 @@ export function CustomerStatsFilters({
       if (start && end) {
         const parser = utc ? moment.utc : moment;
 
-        router.push({
+        navigate({
           ...location,
           query: {
-            ...router.location.query,
+            ...location.query,
             statsPeriod: undefined,
             start: parser(start).format(),
             end: parser(end).format(),
@@ -81,18 +81,18 @@ export function CustomerStatsFilters({
         return;
       }
 
-      router.push({
+      navigate({
         ...location,
         query: {
-          ...router.location.query,
+          ...location.query,
           statsPeriod: relative === ON_DEMAND_PERIOD_KEY ? undefined : relative,
           start: undefined,
           end: undefined,
           utc: undefined,
         },
       });
     },
-    [router]
+    [location, navigate]
   );
 
   const {start, end, period, utc} = pageDateTime;