ref(tsc): user-reports endpoint to apiOptions (#112572)

Author: TkDodo

static/app/utils/useLocation.tsx

@@ -4,7 +4,8 @@ import type {Location, Query} from 'history';
 
 import {location6ToLocation3} from './reactRouter6Compat/location';
 
-type DefaultQuery<T = string> = Record<string, T | T[] | null | undefined>;
+export type QueryParamValue<T = string> = T | T[] | null | undefined;
+type DefaultQuery<T = string> = Record<string, QueryParamValue<T>>;
 
 export function useLocation<Q extends Query = DefaultQuery>(): Location<Q> {
   const router6Location = useReactRouter6Location();

static/app/views/issueDetails/groupUserFeedback.tsx

@@ -1,18 +1,20 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {EventUserFeedback} from 'sentry/components/events/userFeedback';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Pagination} from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {FeedbackEmptyState} from 'sentry/views/feedback/feedbackEmptyState';
+import {groupUserFeedbackApiOptions} from 'sentry/views/issueDetails/groupUserFeedbackApiOptions';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
-import {useGroupUserFeedback} from 'sentry/views/issueDetails/useGroupUserFeedback';
 
 function GroupUserFeedback() {
   const organization = useOrganization();
@@ -28,17 +30,14 @@ function GroupUserFeedback() {
     groupId: params.groupId,
   });
 
-  const {
-    data: reportList,
-    isPending,
-    isError,
-    refetch,
-    getResponseHeader,
-  } = useGroupUserFeedback({
-    groupId: params.groupId,
-    query: {
-      cursor: location.query.cursor as string | undefined,
-    },
+  const {data, isPending, isError, refetch} = useQuery({
+    ...groupUserFeedbackApiOptions(organization, {
+      groupId: params.groupId,
+      query: {
+        cursor: location.query.cursor,
+      },
+    }),
+    select: selectJsonWithHeaders,
   });
 
   if (isError || isErrorGroup) {
@@ -62,7 +61,8 @@ function GroupUserFeedback() {
     );
   }
 
-  const pageLinks = getResponseHeader?.('Link');
+  const reportList = data?.json ?? [];
+  const pageLinks = data?.headers.Link;
   const hasUserFeedback = group.project.hasUserReports;
 
   return (

static/app/views/issueDetails/groupUserFeedbackApiOptions.tsx

@@ -0,0 +1,25 @@
+import type {UserReport} from 'sentry/types/group';
+import type {Organization} from 'sentry/types/organization';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+import type {QueryParamValue} from 'sentry/utils/useLocation';
+
+interface GroupUserFeedbackProps {
+  groupId: string;
+  query: {
+    cursor?: QueryParamValue;
+  };
+}
+
+export function groupUserFeedbackApiOptions(
+  organization: Organization,
+  {groupId, query}: GroupUserFeedbackProps
+) {
+  return apiOptions.as<UserReport[]>()(
+    '/organizations/$organizationIdOrSlug/issues/$issueId/user-reports/',
+    {
+      path: {organizationIdOrSlug: organization.slug, issueId: groupId},
+      query,
+      staleTime: 0,
+    }
+  );
+}