ref: Convert useUploads to TS + performance improvements

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.jsx

@@ -1,17 +1,16 @@
 import { Fragment, useState } from 'react'
 
+import { NONE } from 'shared/utils/extractUploads'
 import A from 'ui/A'
 
 import Upload from './Upload'
 import { useUploads } from './useUploads'
 
 import YamlModal from '../YamlModal'
 
-const NULL = 'null'
-
 function UploadsCard() {
   const [showYAMLModal, setShowYAMLModal] = useState(false)
-  const { uploadsProviderList, uploadsOverview, sortedUploads, hasNoUploads } =
+  const { uploadsProviderList, uploadsOverview, groupedUploads, hasNoUploads } =
     useUploads()
 
   return (
@@ -29,12 +28,12 @@ function UploadsCard() {
         <div className="flex max-h-64 min-w-96 flex-1 flex-col divide-y divide-solid divide-ds-gray-secondary overflow-auto bg-ds-gray-primary">
           {uploadsProviderList.map((title) => (
             <Fragment key={title}>
-              {title !== NULL && (
+              {title !== NONE && (
                 <span className="sticky top-0 flex-1 border-r border-ds-gray-secondary bg-ds-gray-primary px-4 py-1 text-sm font-semibold">
                   {title}
                 </span>
               )}
-              {sortedUploads[title].map(
+              {groupedUploads[title].map(
                 (
                   {
                     ciUrl,

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.spec.jsx

@@ -75,7 +75,7 @@ describe('UploadsCard', () => {
       setup({
         uploadsProviderList: ['travis', 'circleci', 'null'],
         uploadsOverview: 'uploads overview',
-        sortedUploads: {
+        groupedUploads: {
           travis: [
             {
               id: 0,
@@ -191,19 +191,19 @@ describe('UploadsCard', () => {
       expect(flagOne).toBeInTheDocument()
     })
 
-    it('does not render null as an upload provider label', () => {
+    it('does not render none as an upload provider label', () => {
       render(<UploadsCard />, { wrapper })
 
-      const nullText = screen.queryByText(/null/)
-      expect(nullText).not.toBeInTheDocument()
+      const noneText = screen.queryByText(/none/)
+      expect(noneText).not.toBeInTheDocument()
     })
   })
   describe('renders no Uploads', () => {
     beforeEach(() => {
       setup({
         uploadsProviderList: [],
         uploadsOverview: '',
-        sortedUploads: {},
+        groupedUploads: {},
         hasNoUploads: true,
       })
     })
@@ -227,7 +227,7 @@ describe('UploadsCard', () => {
       setup({
         uploadsProviderList: [],
         uploadsOverview: '',
-        sortedUploads: {},
+        groupedUploads: {},
         hasNoUploads: false,
       })
     })
@@ -244,7 +244,7 @@ describe('UploadsCard', () => {
       setup({
         uploadsProviderList: [],
         uploadsOverview: '',
-        sortedUploads: {},
+        groupedUploads: {},
         hasNoUploads: false,
       })
     })

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/useUploads/useUploads.spec.js → src/pages/CommitDetailPage/CommitCoverage/UploadsCard/useUploads/useUploads.spec.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { graphql } from 'msw'
+import { graphql, RequestHandler } from 'msw'
 import { setupServer } from 'msw/node'
+import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import {
@@ -11,7 +12,7 @@ import {
   commitOnePending,
   compareTotalsEmpty,
 } from 'services/commit/mocks'
-import { TierNames } from 'services/tier'
+import { TierNames, TTierNames } from 'services/tier'
 
 import { useUploads } from './useUploads'
 
@@ -39,7 +40,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const wrapper = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/test/test-repo/1234']}>
     <Route path="/:provider/:owner/:repo/:commit">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
@@ -57,7 +58,7 @@ afterEach(() => {
 afterAll(() => server.close())
 
 describe('useUploads', () => {
-  function setup(query, tierValue = TierNames.PRO) {
+  function setup(query: RequestHandler, tierValue: TTierNames = TierNames.PRO) {
     server.use(query, compareTotalsEmpty)
 
     server.use(
@@ -85,12 +86,12 @@ describe('useUploads', () => {
     })
 
     describe('when data is loaded', () => {
-      it('returns sortedUploads', () => {
+      it('returns groupedUploads', () => {
         const { result } = renderHook(() => useUploads(), {
           wrapper,
         })
 
-        expect(result.current.sortedUploads).toMatchObject({})
+        expect(result.current.groupedUploads).toMatchObject({})
       })
 
       it('returns a uploadsProviderList', () => {
@@ -137,20 +138,20 @@ describe('useUploads', () => {
         )
       })
 
-      it('returns sortedUploads', async () => {
+      it('returns groupedUploads', async () => {
         const { result } = renderHook(() => useUploads(), {
           wrapper,
         })
 
-        const initSortedUploads = result.current.sortedUploads
+        const initgroupedUploads = result.current.groupedUploads
 
         await waitFor(() =>
-          expect(initSortedUploads).not.toMatchObject(
-            result.current.sortedUploads
+          expect(initgroupedUploads).not.toMatchObject(
+            result.current.groupedUploads
           )
         )
 
-        expect(result.current.sortedUploads).toMatchObject({
+        expect(result.current.groupedUploads).toMatchObject({
           'github actions': [
             {
               buildCode: '1234',
@@ -349,7 +350,7 @@ describe('useUploads', () => {
         expect(initUploadsOverview).not.toBe(result.current.uploadsOverview)
       )
 
-      expect(result.current.sortedUploads).toHaveProperty('travisTeam')
+      expect(result.current.groupedUploads).toHaveProperty('travisTeam')
       expect(result.current.uploadsProviderList).toStrictEqual(['travisTeam'])
     })
   })

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/useUploads/useUploads.js → src/pages/CommitDetailPage/CommitCoverage/UploadsCard/useUploads/useUploads.ts

@@ -5,8 +5,15 @@ import { useRepoOverview } from 'services/repo'
 import { TierNames, useTier } from 'services/tier'
 import { extractUploads } from 'shared/utils/extractUploads'
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  commit: string
+}
+
 export function useUploads() {
-  const { provider, owner, repo, commit } = useParams()
+  const { provider, owner, repo, commit } = useParams<URLParams>()
   const { data: overview } = useRepoOverview({ provider, owner, repo })
   const { data: tierData } = useTier({ provider, owner })
 
@@ -21,12 +28,12 @@ export function useUploads() {
     isTeamPlan,
   })
 
-  const { uploadsOverview, sortedUploads, uploadsProviderList, hasNoUploads } =
+  const { uploadsOverview, groupedUploads, uploadsProviderList, hasNoUploads } =
     extractUploads({ unfilteredUploads: data?.commit?.uploads })
 
   return {
     uploadsOverview,
-    sortedUploads,
+    groupedUploads,
     uploadsProviderList,
     hasNoUploads,
   }

src/services/commit/useCommit.tsx

@@ -30,11 +30,11 @@ const CoverageObjSchema = z.object({
   coverage: z.number().nullable(),
 })
 
-const UploadTypeEnumSchema = z.nativeEnum(UploadTypeEnum)
+export const UploadTypeEnumSchema = z.nativeEnum(UploadTypeEnum)
 
-const UploadStateEnumSchema = z.nativeEnum(UploadStateEnum)
+export const UploadStateEnumSchema = z.nativeEnum(UploadStateEnum)
 
-const UploadErrorCodeEnumSchema = z.nativeEnum(ErrorCodeEnum)
+export const UploadErrorCodeEnumSchema = z.nativeEnum(ErrorCodeEnum)
 
 const UploadErrorSchema = z.object({
   errorCode: UploadErrorCodeEnumSchema.nullable(),