chore: Migrate useOwner to ts (#3601)

Author: suejung-sentry

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.test.tsx

@@ -57,7 +57,7 @@ const mockGetUploadTokenRequired = {
 
 const mockDetailOwner = {
   owner: {
-    ownerid: '1234',
+    ownerid: 1234,
     username: 'codecov',
     avatarUrl: 'https://avatars.githubusercontent.com/u/1234?v=4',
     isCurrentUserPartOfOrg: true,

src/services/user/useOwner.js

@@ -8,13 +8,10 @@ import { useOwner } from './useOwner'
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
-  logger: {
-    error: () => {},
-  },
 })
 
 const wrapper =
-  (initialEntries = '/gh') =>
+  (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={[initialEntries]}>
@@ -37,30 +34,30 @@ afterAll(() => {
   server.close()
 })
 
+const mockCodecovOrg = {
+  username: 'codecov',
+  avatarUrl: 'http://127.0.0.1/avatar-url',
+  isCurrentUserPartOfOrg: true,
+  isAdmin: false,
+}
+
 describe('useOwner', () => {
-  function setup(dataReturned = undefined) {
+  function setup() {
     server.use(
       graphql.query('DetailOwner', () => {
-        return HttpResponse.json({ data: { owner: dataReturned } })
+        return HttpResponse.json({ data: { owner: mockCodecovOrg } })
       })
     )
   }
 
   describe('when called and user is authenticated', () => {
-    const codecovOrg = {
-      username: 'codecov',
-      avatarUrl: 'http://127.0.0.1/avatar-url',
-      isCurrentUserPartOfOrg: true,
-      isAdmin: false,
-    }
-
     it('returns the org', async () => {
-      setup(codecovOrg)
+      setup()
       const { result } = renderHook(() => useOwner({ username: 'codecov' }), {
         wrapper: wrapper(),
       })
 
-      await waitFor(() => expect(result.current.data).toEqual(codecovOrg))
+      await waitFor(() => expect(result.current.data).toEqual(mockCodecovOrg))
     })
   })
 })

src/services/user/useOwner.test.jsx renamed to src/services/user/useOwner.test.tsx

@@ -0,0 +1,80 @@
+import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'react-router-dom'
+import { z } from 'zod'
+
+import Api from 'shared/api'
+import { Provider, rejectNetworkError } from 'shared/api/helpers'
+
+const OwnerSchema = z.object({
+  ownerid: z.number().nullish(),
+  username: z.string().nullish(),
+  avatarUrl: z.string().nullish(),
+  isCurrentUserPartOfOrg: z.boolean().nullish(),
+  isAdmin: z.boolean().nullish(),
+})
+
+export type Owner = z.infer<typeof OwnerSchema>
+
+const RequestSchema = z.object({
+  owner: OwnerSchema.nullish(),
+})
+
+interface URLParams {
+  provider: Provider
+}
+
+interface UseOwnerArgs {
+  username?: string
+  opts?: {
+    suspense?: boolean
+    enabled?: boolean
+  }
+}
+
+const query = `
+    query DetailOwner($username: String!) {
+      owner(username: $username) {
+        ownerid
+        username
+        avatarUrl
+        isCurrentUserPartOfOrg
+        isAdmin
+      }
+    }
+  `
+
+export function useOwner({
+  username,
+  opts = { enabled: username !== undefined },
+}: UseOwnerArgs) {
+  const { provider } = useParams<URLParams>()
+
+  const variables = {
+    username,
+  }
+
+  return useQuery({
+    queryKey: ['owner', variables, provider, query],
+    queryFn: ({ signal }) =>
+      Api.graphql({
+        provider,
+        query,
+        variables,
+        signal,
+      }).then((res) => {
+        const parsedRes = RequestSchema.safeParse(res?.data)
+
+        if (!parsedRes.success) {
+          return rejectNetworkError({
+            status: 404,
+            data: {},
+            dev: 'useOwner - 404 Failed to parse data',
+            error: parsedRes.error,
+          })
+        }
+
+        return res?.data?.owner
+      }),
+    ...opts,
+  })
+}