Skip to content

Commit e85a985

Browse files
leighmacdonaldleighmacdonald
committed
Use new createLink for typesafe route links
1 parent 24f873f commit e85a985

19 files changed

+118
-114
lines changed

‎frontend/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545
"@mui/x-date-pickers": "^6.20.2",
4646
"@sentry/react": "^7.119.0",
4747
"@tanstack/react-form": "^0.19.5",
48-
"@tanstack/react-query": "^5.55.0",
49-
"@tanstack/react-query-devtools": "^5.55.0",
50-
"@tanstack/react-router": "^1.56.1",
48+
"@tanstack/react-query": "^5.54.1",
49+
"@tanstack/react-query-devtools": "^5.54.1",
50+
"@tanstack/react-router": "^1.53.1",
5151
"@tanstack/react-table": "^8.20.5",
52-
"@tanstack/router-devtools": "^1.56.1",
53-
"@tanstack/router-vite-plugin": "^1.56.1",
52+
"@tanstack/router-devtools": "^1.53.1",
53+
"@tanstack/router-vite-plugin": "^1.54.0",
5454
"@tanstack/zod-form-adapter": "^0.19.5",
5555
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
5656
"@types/eslint__js": "^8.42.3",

‎frontend/pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/component/ButtonLink.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// 1. Import from the package
2+
import Button from '@mui/material/Button';
3+
import { createLink } from '@tanstack/react-router';
4+
5+
export const ButtonLink = createLink(Button);

‎frontend/src/component/ChatTable.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
22
import FlagIcon from '@mui/icons-material/Flag';
33
import ReportIcon from '@mui/icons-material/Report';
44
import Button from '@mui/material/Button';
5-
import IconButton from '@mui/material/IconButton';
65
import Tooltip from '@mui/material/Tooltip';
76
import Typography from '@mui/material/Typography';
87
import { useTheme } from '@mui/material/styles';
@@ -20,8 +19,8 @@ import { PersonMessage } from '../api';
2019
import { stringToColour } from '../util/colours.ts';
2120
import { renderDateTime } from '../util/text.tsx';
2221
import { DataTable } from './DataTable.tsx';
22+
import { IconButtonLink } from './IconButtonLink.tsx';
2323
import { PersonCell } from './PersonCell.tsx';
24-
import RouterLink from './RouterLink.tsx';
2524

2625
export const ChatTable = ({
2726
messages,
@@ -109,18 +108,17 @@ export const ChatTable = ({
109108
size: 30,
110109
cell: (info) => (
111110
<Tooltip title={'Create Report'}>
112-
<IconButton
111+
<IconButtonLink
113112
color={'error'}
114113
disabled={info.row.original.auto_filter_flagged > 0}
115-
component={RouterLink}
116114
to={'/report'}
117115
search={{
118116
person_message_id: info.row.original.person_message_id,
119117
steam_id: info.row.original.steam_id
120118
}}
121119
>
122120
<ReportIcon />
123-
</IconButton>
121+
</IconButtonLink>
124122
</Tooltip>
125123
)
126124
}

‎frontend/src/component/FullTable.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useNavigate } from '@tanstack/react-router';
1+
import { ToOptions, useNavigate } from '@tanstack/react-router';
22
import {
33
ColumnDef,
44
ColumnFiltersState,
@@ -24,6 +24,7 @@ type FullTableProps<T> = {
2424
setPagination: OnChangeFn<PaginationState>;
2525
sorting?: SortingState;
2626
infinitePage?: boolean;
27+
toOptions: ToOptions;
2728
};
2829

2930
// Higher level table component. Most/all tables with client side data should use this eventually.
@@ -35,7 +36,8 @@ export const FullTable = <T,>({
3536
setPagination,
3637
infinitePage = false,
3738
sorting = undefined,
38-
columnFilters = undefined
39+
columnFilters = undefined,
40+
toOptions
3941
}: FullTableProps<T>) => {
4042
const navigate = useNavigate();
4143

@@ -63,13 +65,13 @@ export const FullTable = <T,>({
6365
setPagination((prev) => {
6466
return { ...prev, pageSize: rows };
6567
});
66-
await navigate({ search: (search) => ({ ...search, pageSize: rows }) });
68+
await navigate({ ...toOptions, search: (search) => ({ ...search, pageSize: rows }) });
6769
}}
6870
onPageChange={async (page) => {
6971
setPagination((prev) => {
7072
return { ...prev, pageIndex: page };
7173
});
72-
await navigate({ search: (search) => ({ ...search, pageIndex: page }) });
74+
await navigate({ ...toOptions, search: (search) => ({ ...search, pageIndex: page }) });
7375
}}
7476
count={infinitePage ? -1 : table.getRowCount()}
7577
rows={pagination.pageSize}

‎frontend/src/component/IconButtonLink.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import IconButton from '@mui/material/IconButton';
2+
import { createLink } from '@tanstack/react-router';
3+
4+
export const IconButtonLink = createLink(IconButton);

‎frontend/src/component/PlayerMessageContext.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Box from '@mui/material/Box';
22
import CircularProgress from '@mui/material/CircularProgress';
3-
import Link from '@mui/material/Link';
43
import Table from '@mui/material/Table';
54
import TableBody from '@mui/material/TableBody';
65
import TableCell from '@mui/material/TableCell';
@@ -11,7 +10,7 @@ import Typography from '@mui/material/Typography';
1110
import Grid from '@mui/material/Unstable_Grid2';
1211
import { useQuery } from '@tanstack/react-query';
1312
import { apiGetMessageContext } from '../api';
14-
import RouterLink from './RouterLink.tsx';
13+
import { TextLink } from './TextLink.tsx';
1514

1615
interface PlayerMessageContextProps {
1716
playerMessageId: number;
@@ -59,13 +58,12 @@ export const PlayerMessageContext = ({ playerMessageId, padding = 3 }: PlayerMes
5958
<Typography variant={'body2'}>{m.server_name}</Typography>
6059
</TableCell>
6160
<TableCell>
62-
<Link
63-
component={RouterLink}
61+
<TextLink
6462
to={`/profile/$steamId`}
6563
params={{ steamId: m.steam_id }}
6664
>
6765
{m.persona_name}
68-
</Link>
66+
</TextLink>
6967
</TableCell>
7068
<TableCell>
7169
<Typography variant={'body1'}>{m.body}</Typography>

‎frontend/src/component/TextLink.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Link from '@mui/material/Link';
2+
import { createLink } from '@tanstack/react-router';
3+
4+
export const TextLink = createLink(Link);

‎frontend/src/component/WeaponsStatListContainer.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useState } from 'react';
22
import InsightsIcon from '@mui/icons-material/Insights';
3-
import Link from '@mui/material/Link';
43
import Typography from '@mui/material/Typography';
54
import { useQuery } from '@tanstack/react-query';
65
import { createColumnHelper, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
@@ -11,8 +10,8 @@ import { ContainerWithHeader } from './ContainerWithHeader';
1110
import { DataTable } from './DataTable.tsx';
1211
import FmtWhenGt from './FmtWhenGT.tsx';
1312
import { PaginatorLocal } from './PaginatorLocal.tsx';
14-
import RouterLink from './RouterLink.tsx';
1513
import { TableCellSmall } from './TableCellSmall.tsx';
14+
import { TextLink } from './TextLink.tsx';
1615

1716
export const WeaponsStatListContainer = () => {
1817
const { data, isLoading } = useQuery({
@@ -41,13 +40,9 @@ const StatsWeaponsOverall = ({ stats, isLoading }: { stats: LazyResult<WeaponsOv
4140
size: 350,
4241
cell: (info) => (
4342
<TableCellSmall>
44-
<Link
45-
component={RouterLink}
46-
to={'/stats/weapon/$weapon_id'}
47-
params={{ weapon_id: String(info.getValue()) }}
48-
>
43+
<TextLink to={'/stats/weapon/$weapon_id'} params={{ weapon_id: String(info.getValue()) }}>
4944
{stats.data[info.row.index].name}
50-
</Link>
45+
</TextLink>
5146
</TableCellSmall>
5247
)
5348
}),

‎frontend/src/component/field/Buttons.tsx

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import RestartAltIcon from '@mui/icons-material/RestartAlt';
44
import SendIcon from '@mui/icons-material/Send';
55
import Button from '@mui/material/Button';
66
import ButtonGroup from '@mui/material/ButtonGroup';
7-
import { useNavigate } from '@tanstack/react-router';
7+
import { ToOptions } from '@tanstack/react-router';
8+
import { ButtonLink } from '../ButtonLink.tsx';
89

910
type ButtonProps = {
1011
canSubmit: boolean;
@@ -19,6 +20,7 @@ type ButtonProps = {
1920
onClear?: () => Promise<void>;
2021
onClose?: () => Promise<void>;
2122
fullWidth?: boolean;
23+
navigateOpts?: ToOptions;
2224
};
2325

2426
export const Buttons = ({
@@ -33,10 +35,9 @@ export const Buttons = ({
3335
showClear = false,
3436
showReset = true,
3537
fullWidth = false,
36-
onClose
38+
onClose,
39+
navigateOpts
3740
}: ButtonProps) => {
38-
const navigate = useNavigate();
39-
4041
return (
4142
<ButtonGroup fullWidth={fullWidth}>
4243
<Button
@@ -63,34 +64,36 @@ export const Buttons = ({
6364
)}
6465
{showClear ||
6566
(onClear && (
66-
<Button
67+
<ButtonLink
68+
{...navigateOpts}
6769
key={'clear-button'}
6870
type="button"
69-
onClick={async () => {
70-
if (onClear) {
71-
return await onClear();
72-
}
73-
await navigate({
74-
search: (prev) => {
75-
return {
76-
...prev,
77-
page: 0,
78-
steam_id: '',
79-
body: '',
80-
persona_name: '',
81-
server_id: 0
82-
};
83-
}
84-
});
85-
// TODO fix this hackjob
86-
window.location.reload();
87-
}}
71+
// onClick={async () => {
72+
// if (onClear) {
73+
// return await onClear();
74+
// }
75+
// await navigate({
76+
// ...navigateOpts,
77+
// search: (prev) => {
78+
// return {
79+
// ...prev,
80+
// page: 0,
81+
// steam_id: '',
82+
// body: '',
83+
// persona_name: '',
84+
// server_id: 0
85+
// };
86+
// }
87+
// });
88+
// // TODO fix this hackjob
89+
// window.location.reload();
90+
// }}
8891
variant={'contained'}
8992
color={'error'}
9093
startIcon={<ClearIcon />}
9194
>
9295
{clearLabel}
93-
</Button>
96+
</ButtonLink>
9497
))}
9598
{onClose && (
9699
<Button

0 commit comments

Comments
 (0)