Skip to content

Commit 96238a4

Browse files
spalmurrayspalmurray
committed
Convert OptionButton and DisplayTypeButton to TS
1 parent 3f72266 commit 96238a4

File tree

18 files changed

+174
-145
lines changed

18 files changed

+174
-145
lines changed

‎src/pages/CommitDetailPage/CommitCoverage/routes/CommitDetailFileExplorer/CommitDetailFileExplorer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import ToggleHeader from 'pages/CommitDetailPage/Header/ToggleHeader/ToggleHeader'
22
import { useLocationParams } from 'services/navigation'
33
import ContentsTableHeader from 'shared/ContentsTable/ContentsTableHeader'
4-
import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
4+
import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
55
import { useCommitTreePaths } from 'shared/treePaths'
66
import Breadcrumb from 'ui/Breadcrumb'
77
import SearchField from 'ui/SearchField'

‎src/pages/PlanPage/subRoutes/UpgradePlanPage/PlanDetailsControls/PlanDetailsControls.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
findTeamPlans,
1212
} from 'shared/utils/billing'
1313
import { TEAM_PLAN_MAX_ACTIVE_USERS } from 'shared/utils/upgradeForm'
14-
import OptionButton from 'ui/OptionButton'
14+
import { OptionButton } from 'ui/OptionButton/OptionButton'
1515

1616
interface PlanDetailsControlsProps {
1717
setSelectedPlan: (x?: IndividualPlan) => void
@@ -52,14 +52,16 @@ const PlanDetailsControls: React.FC<PlanDetailsControlsProps> = ({
5252
}
5353
setOption(text)
5454
}}
55-
options={[
56-
{
57-
text: 'Pro',
58-
},
59-
{
60-
text: 'Team',
61-
},
62-
]}
55+
options={
56+
[
57+
{
58+
text: 'Pro',
59+
},
60+
{
61+
text: 'Team',
62+
},
63+
] as const
64+
}
6365
/>
6466
{option === 'Team' && <p>Up to {TEAM_PLAN_MAX_ACTIVE_USERS} users</p>}
6567
</div>

‎src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/BillingOptions/BillingOptions.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'services/account/useAvailablePlans'
99
import { usePlanData } from 'services/account/usePlanData'
1010
import { BillingRate, findProPlans } from 'shared/utils/billing'
11-
import OptionButton from 'ui/OptionButton'
11+
import { OptionButton } from 'ui/OptionButton/OptionButton'
1212

1313
import { OptionPeriod, TimePeriods } from '../../../constants'
1414
import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -78,14 +78,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
7878

7979
setOption(text)
8080
}}
81-
options={[
82-
{
83-
text: TimePeriods.ANNUAL,
84-
},
85-
{
86-
text: TimePeriods.MONTHLY,
87-
},
88-
]}
81+
options={
82+
[
83+
{
84+
text: TimePeriods.ANNUAL,
85+
},
86+
{
87+
text: TimePeriods.MONTHLY,
88+
},
89+
] as const
90+
}
8991
/>
9092
<p>
9193
<span className="font-semibold">${baseUnitPrice}</span> per

‎src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/BillingOptions/BillingOptions.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'services/account/useAvailablePlans'
99
import { usePlanData } from 'services/account/usePlanData'
1010
import { BillingRate, findSentryPlans } from 'shared/utils/billing'
11-
import OptionButton from 'ui/OptionButton'
11+
import { OptionButton } from 'ui/OptionButton/OptionButton'
1212

1313
import { OptionPeriod, TimePeriods } from '../../../constants'
1414
import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -79,14 +79,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
7979

8080
setOption(text)
8181
}}
82-
options={[
83-
{
84-
text: TimePeriods.ANNUAL,
85-
},
86-
{
87-
text: TimePeriods.MONTHLY,
88-
},
89-
]}
82+
options={
83+
[
84+
{
85+
text: TimePeriods.ANNUAL,
86+
},
87+
{
88+
text: TimePeriods.MONTHLY,
89+
},
90+
] as const
91+
}
9092
/>
9193
<p>
9294
<span className="font-semibold">${baseUnitPrice}</span> per

‎src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'services/account/useAvailablePlans'
99
import { usePlanData } from 'services/account/usePlanData'
1010
import { BillingRate, findTeamPlans } from 'shared/utils/billing'
11-
import OptionButton from 'ui/OptionButton'
11+
import { OptionButton } from 'ui/OptionButton/OptionButton'
1212

1313
import { OptionPeriod, TimePeriods } from '../../../constants'
1414
import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -78,14 +78,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
7878

7979
setOption(text)
8080
}}
81-
options={[
82-
{
83-
text: TimePeriods.ANNUAL,
84-
},
85-
{
86-
text: TimePeriods.MONTHLY,
87-
},
88-
]}
81+
options={
82+
[
83+
{
84+
text: TimePeriods.ANNUAL,
85+
},
86+
{
87+
text: TimePeriods.MONTHLY,
88+
},
89+
] as const
90+
}
8991
/>
9092
<p>
9193
<span className="font-semibold">${baseUnitPrice}</span> per

‎src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/PlanTypeOptions/PlanTypeOptions.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
TierNames,
1818
} from 'shared/utils/billing'
1919
import { TEAM_PLAN_MAX_ACTIVE_USERS } from 'shared/utils/upgradeForm'
20-
import OptionButton from 'ui/OptionButton'
20+
import { OptionButton } from 'ui/OptionButton/OptionButton'
2121

2222
import { TierName } from '../constants'
2323
import { usePlanParams } from '../hooks/usePlanParams'
@@ -94,14 +94,16 @@ const PlanTypeOptions: React.FC<PlanTypeOptionsProps> = ({
9494
updateParams({ plan: TierNames.TEAM })
9595
}
9696
}}
97-
options={[
98-
{
99-
text: TierName.PRO,
100-
},
101-
{
102-
text: TierName.TEAM,
103-
},
104-
]}
97+
options={
98+
[
99+
{
100+
text: TierName.PRO,
101+
},
102+
{
103+
text: TierName.TEAM,
104+
},
105+
] as const
106+
}
105107
/>
106108
{planOption === TierName.TEAM && (
107109
<p>Up to {TEAM_PLAN_MAX_ACTIVE_USERS} users</p>

‎src/pages/PullRequestPage/PullCoverage/routes/FileExplorer/FileExplorer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import ToggleHeader from 'pages/PullRequestPage/Header/ToggleHeader/ToggleHeader'
22
import { useLocationParams } from 'services/navigation'
33
import ContentsTableHeader from 'shared/ContentsTable/ContentsTableHeader'
4-
import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
4+
import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
55
import { usePullTreePaths } from 'shared/treePaths'
66
import Breadcrumb from 'ui/Breadcrumb'
77
import SearchField from 'ui/SearchField'

‎src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useLocationParams } from 'services/navigation'
2-
import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
2+
import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
33
import FileBreadcrumb from 'shared/ContentsTable/FileBreadcrumb'
44
import SearchField from 'ui/SearchField'
55

‎src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.test.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import FileExplorer from './FileExplorer'
99

1010
vi.mock('./FileListTable', () => ({ default: () => 'File list table' }))
1111
vi.mock('./CodeTreeTable', () => ({ default: () => 'Code tree table' }))
12-
vi.mock('shared/ContentsTable/DisplayTypeButton', () => ({
13-
default: () => 'Display type button',
12+
vi.mock('shared/ContentsTable/DisplayTypeButton/DisplayTypeButton', () => ({
13+
DisplayTypeButton: () => 'Display type button',
1414
}))
1515
vi.mock('shared/ContentsTable/FileBreadcrumb', () => ({
1616
default: () => 'File breadcrumb',

‎src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.test.jsx ‎src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.test.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
22
import { render, screen } from '@testing-library/react'
33
import userEvent from '@testing-library/user-event'
4+
import { Mock } from 'vitest'
45

56
import { useLocationParams } from 'services/navigation'
67

7-
import DisplayTypeButton from './DisplayTypeButton'
8+
import { DisplayTypeButton } from './DisplayTypeButton'
89

910
vi.mock('services/navigation', () => {
1011
const originalModule = vi.importActual('services/navigation')
@@ -14,6 +15,8 @@ vi.mock('services/navigation', () => {
1415
}
1516
})
1617

18+
const mockedUseLocationParams = useLocationParams as Mock
19+
1720
const queryClient = new QueryClient({
1821
defaultOptions: {
1922
queries: {
@@ -54,7 +57,7 @@ const mockUrlParams = {
5457
describe('Coverage Tab', () => {
5558
function setup(urlParams = mockUrlParams) {
5659
const user = userEvent.setup()
57-
useLocationParams.mockReturnValue({
60+
mockedUseLocationParams.mockReturnValue({
5861
updateParams: vi.fn(),
5962
params: urlParams,
6063
})

‎src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.jsx ‎src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.tsx

+27-25
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,44 @@
1-
import PropTypes from 'prop-types'
21
import { useState } from 'react'
32

43
import { useLocationParams } from 'services/navigation'
5-
import OptionButton from 'ui/OptionButton'
4+
import { OptionButton } from 'ui/OptionButton/OptionButton'
65

76
import { displayTypeParameter } from '../constants'
87

9-
const options = [
10-
{
11-
text: 'Code tree',
12-
displayType: displayTypeParameter.tree,
13-
},
14-
{
15-
text: 'File list',
16-
displayType: displayTypeParameter.list,
17-
},
18-
]
19-
20-
function initialState(urlParams) {
21-
const [treeView, listView] = options
8+
const treeView = {
9+
text: 'Code tree',
10+
displayType: displayTypeParameter.tree,
11+
} as const
12+
13+
const listView = {
14+
text: 'File list',
15+
displayType: displayTypeParameter.list,
16+
} as const
17+
18+
const options = [treeView, listView]
19+
type Options = (typeof options)[number]
20+
21+
// useLocationParams is pain
22+
function initialState(urlParams: any): Options {
2223
return urlParams?.displayType ===
2324
displayTypeParameter.list.toLocaleLowerCase()
2425
? listView
2526
: treeView
2627
}
2728

28-
function DisplayTypeButton({ dataLength, isLoading }) {
29+
interface DisplayTypeButtonProps {
30+
dataLength?: number
31+
isLoading?: boolean
32+
}
33+
34+
export function DisplayTypeButton({
35+
dataLength,
36+
isLoading,
37+
}: DisplayTypeButtonProps) {
2938
const { params, updateParams } = useLocationParams()
30-
const [active, setActive] = useState(() => initialState(params))
39+
const [active, setActive] = useState<Options>(() => initialState(params))
3140

32-
function handleOnChange(option) {
41+
function handleOnChange(option: Options) {
3342
updateParams({ displayType: option.displayType.toLowerCase() })
3443
setActive(option)
3544
}
@@ -47,10 +56,3 @@ function DisplayTypeButton({ dataLength, isLoading }) {
4756
</div>
4857
)
4958
}
50-
51-
DisplayTypeButton.propTypes = {
52-
dataLength: PropTypes.number,
53-
isLoading: PropTypes.bool,
54-
}
55-
56-
export default DisplayTypeButton

‎src/shared/ContentsTable/DisplayTypeButton/index.js

-1
This file was deleted.

‎src/ui/OptionButton/OptionButton.jsx

-46
This file was deleted.

‎src/ui/OptionButton/OptionButton.stories.jsx

-19
This file was deleted.

0 commit comments

Comments
 (0)