Skip to content

Commit a4c43c4

Browse files
leighmacdonaldleighmacdonald
committed
Use BoolCell for column cells
1 parent 08ceb13 commit a4c43c4

22 files changed

+1068
-369
lines changed

‎frontend/src/component/MarkdownRenderer.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,15 @@ interface MDImgProps {
2020
}
2121

2222
const MDImg = ({ src, alt }: MDImgProps) => {
23-
return <ImageBox src={src} alt={alt} key={alt} maxWidth={"100%"} maxHeight={"100%"} />;
23+
return (
24+
<ImageBox
25+
src={src}
26+
alt={alt}
27+
key={alt}
28+
maxWidth={"100%"}
29+
maxHeight={"100%"}
30+
/>
31+
);
2432
};
2533

2634
interface MDLnkProps {
@@ -92,10 +100,13 @@ export const MarkDownRenderer = ({
92100
.join("\n");
93101
}, [assetURL, body_md]);
94102

95-
console.log(links);
96-
97103
return (
98-
<Box paddingLeft={2} paddingRight={2} maxWidth={"100%"} minHeight={minHeight}>
104+
<Box
105+
paddingLeft={2}
106+
paddingRight={2}
107+
maxWidth={"100%"}
108+
minHeight={minHeight}
109+
>
99110
<MuiMarkdown options={mdRenderOpts}>{links}</MuiMarkdown>
100111
</Box>
101112
);

‎frontend/src/component/form/field/SteamIDField.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ type Props = {
2121
export const SteamIDField = (props: Props) => {
2222
const field = useFieldContext<string>();
2323
const errors = useStore(field.store, (state) => state.meta.errors);
24-
const [profile, setProfile] = useState<SteamValidate | undefined>(props.defaultProfile);
24+
const [profile, setProfile] = useState<SteamValidate | undefined>(
25+
props.defaultProfile,
26+
);
2527
const [error, setError] = useState<string>();
2628
const [loading, setLoading] = useState(false);
2729

@@ -70,16 +72,26 @@ export const SteamIDField = (props: Props) => {
7072
return <ErrorOutlineIcon color={"error"} sx={{ width: 40 }} />;
7173
}
7274
if (profile) {
73-
return <Avatar src={avatarHashToURL(profile.hash ?? defaultAvatarHash)} variant={"square"} />;
75+
return (
76+
<Avatar
77+
src={avatarHashToURL(profile.hash ?? defaultAvatarHash)}
78+
variant={"square"}
79+
/>
80+
);
7481
}
7582

7683
return <QuestionMark color={"secondary"} />;
77-
}, [field.state.meta.isPristine, field.state.meta.isValidating, profile, field.state.meta.errors, error, loading]);
84+
}, [
85+
field.state.meta.isPristine,
86+
field.state.meta.isValidating,
87+
profile,
88+
field.state.meta.errors,
89+
error,
90+
loading,
91+
]);
7892

7993
const onChange = useCallback(
8094
(e: ChangeEvent<HTMLInputElement>) => {
81-
// Update the value immediately
82-
console.log(e.target.value);
8395
field.handleChange(e.target.value);
8496
setProfile(undefined);
8597

@@ -101,7 +113,9 @@ export const SteamIDField = (props: Props) => {
101113
helperText={error ?? "Any form of Steam ID or profile link."}
102114
slotProps={{
103115
input: {
104-
endAdornment: <InputAdornment position={"end"}>{adornment}</InputAdornment>,
116+
endAdornment: (
117+
<InputAdornment position={"end"}>{adornment}</InputAdornment>
118+
),
105119
},
106120
}}
107121
/>

‎frontend/src/component/table/BoolCell.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import CheckIcon from "@mui/icons-material/Check";
2+
import CloseIcon from "@mui/icons-material/Close";
3+
4+
/* For use with column defs that already output a <td> wrapper */
5+
export const BoolCell = ({ enabled }: { enabled: boolean }) => {
6+
return enabled ? (
7+
<CheckIcon color={"success"} />
8+
) : (
9+
<CloseIcon color={"error"} />
10+
);
11+
};

‎frontend/src/component/table/IPHistoryTable.tsx‎

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import {
88
type TableOptions,
99
useReactTable,
1010
} from "@tanstack/react-table";
11+
import { useMemo } from "react";
1112
import type { PersonConnection } from "../../schema/people.ts";
1213
import type { LazyResult } from "../../util/table.ts";
1314
import { renderDateTime } from "../../util/time.ts";
1415
import { DataTable } from "./DataTable.tsx";
15-
import { TableCellSmall } from "./TableCellSmall.tsx";
1616

1717
const columnHelper = createColumnHelper<PersonConnection>();
1818

@@ -29,43 +29,35 @@ export const IPHistoryTable = ({
2929
pagination?: PaginationState;
3030
setPagination?: OnChangeFn<PaginationState>;
3131
}) => {
32-
const columns = [
33-
columnHelper.accessor("created_on", {
34-
header: "Created",
35-
size: 120,
36-
cell: (info) => (
37-
<TableCellSmall>
32+
const columns = useMemo(() => {
33+
return [
34+
columnHelper.accessor("created_on", {
35+
header: "Created",
36+
size: 120,
37+
cell: (info) => (
3838
<Typography>{renderDateTime(info.getValue())}</Typography>
39-
</TableCellSmall>
40-
),
41-
}),
42-
columnHelper.accessor("persona_name", {
43-
header: "Name",
44-
cell: (info) => (
45-
<TableCellSmall>
46-
<Typography>{info.getValue()}</Typography>
47-
</TableCellSmall>
48-
),
49-
}),
50-
columnHelper.accessor("ip_addr", {
51-
header: "IP Address",
52-
size: 120,
53-
cell: (info) => (
54-
<TableCellSmall>
55-
<Typography>{info.getValue()}</Typography>
56-
</TableCellSmall>
57-
),
58-
}),
59-
columnHelper.accessor("server_id", {
60-
header: "Server",
61-
size: 120,
62-
cell: (info) => (
63-
<TableCellSmall>
64-
<Typography>{connections.data[info.row.index].server_name_short}</Typography>
65-
</TableCellSmall>
66-
),
67-
}),
68-
];
39+
),
40+
}),
41+
columnHelper.accessor("persona_name", {
42+
header: "Name",
43+
cell: (info) => <Typography>{info.getValue()}</Typography>,
44+
}),
45+
columnHelper.accessor("ip_addr", {
46+
header: "IP Address",
47+
size: 120,
48+
cell: (info) => <Typography>{info.getValue()}</Typography>,
49+
}),
50+
columnHelper.accessor("server_id", {
51+
header: "Server",
52+
size: 120,
53+
cell: (info) => (
54+
<Typography>
55+
{connections.data[info.row.index].server_name_short}
56+
</Typography>
57+
),
58+
}),
59+
];
60+
}, [connections.data]);
6961

7062
const opts: TableOptions<PersonConnection> = {
7163
data: connections.data,

‎frontend/src/component/table/TableCellBool.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import CheckIcon from "@mui/icons-material/Check";
22
import CloseIcon from "@mui/icons-material/Close";
3+
import TableCell from "@mui/material/TableCell";
34

45
export const TableCellBool = ({ enabled }: { enabled: boolean }) => {
5-
return <div>{enabled ? <CheckIcon color={"success"} /> : <CloseIcon color={"error"} />}</div>;
6+
return (
7+
<TableCell>
8+
{enabled ? (
9+
<CheckIcon color={"success"} />
10+
) : (
11+
<CloseIcon color={"error"} />
12+
)}
13+
</TableCell>
14+
);
615
};

‎frontend/src/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import { getAppInfo } from "./api/app.ts";
1111
import { newRouter } from "./router.tsx";
1212

1313
const queryClient = new QueryClient();
14-
const appInfo = await queryClient.fetchQuery({ queryKey: ["appInfo"], queryFn: getAppInfo });
14+
const appInfo = await queryClient.fetchQuery({
15+
queryKey: ["appInfo"],
16+
queryFn: getAppInfo,
17+
});
1518
const router = newRouter(queryClient, appInfo);
1619

1720
// Register the router instance for type safety

‎frontend/src/routes/_admin.admin.servers.tsx‎

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ import { apiGetServersAdmin } from "../api";
2424
import { ContainerWithHeaderAndButtons } from "../component/ContainerWithHeaderAndButtons.tsx";
2525
import { PaginatorLocal } from "../component/forum/PaginatorLocal.tsx";
2626
import { ServerEditorModal } from "../component/modal/ServerEditorModal.tsx";
27+
import { BoolCell } from "../component/table/BoolCell.tsx";
2728
import { DataTable } from "../component/table/DataTable.tsx";
28-
import { TableCellBool } from "../component/table/TableCellBool.tsx";
2929
import { TableCellString } from "../component/table/TableCellString.tsx";
3030
import { TableCellStringHidden } from "../component/table/TableCellStringHidden.tsx";
3131
import { useUserFlashCtx } from "../hooks/useUserFlashCtx.ts";
@@ -38,7 +38,17 @@ const serversSearchSchema = z.object({
3838
page_size: z.number().optional().catch(RowsPerPage.TwentyFive),
3939
sort_order: z.enum(["desc", "asc"]).optional().catch("desc"),
4040
sort_column: z
41-
.enum(["server_id", "short_name", "name", "address", "port", "region", "cc", "enable_stats", "is_enabled"])
41+
.enum([
42+
"server_id",
43+
"short_name",
44+
"name",
45+
"address",
46+
"port",
47+
"region",
48+
"cc",
49+
"enable_stats",
50+
"is_enabled",
51+
])
4252
.optional(),
4353
});
4454

@@ -56,7 +66,10 @@ export const Route = createFileRoute("/_admin/admin/servers")({
5666
},
5767
head: ({ match }) => {
5868
return {
59-
meta: [{ name: "description", content: "Server Editor" }, match.context.title("Edit Servers")],
69+
meta: [
70+
{ name: "description", content: "Server Editor" },
71+
match.context.title("Edit Servers"),
72+
],
6073
};
6174
},
6275

@@ -76,7 +89,10 @@ function AdminServers() {
7689
const onCreate = async () => {
7790
try {
7891
const newServer = (await NiceModal.show(ServerEditorModal, {})) as Server;
79-
queryClient.setQueryData(["serversAdmin"], [...(servers ?? []), newServer]);
92+
queryClient.setQueryData(
93+
["serversAdmin"],
94+
[...(servers ?? []), newServer],
95+
);
8096
sendFlash("success", "Server created successfully");
8197
} catch (e) {
8298
sendFlash("error", `Failed to create new server: ${e}`);
@@ -168,7 +184,9 @@ const AdminServersTable = ({
168184
accessorKey: "server_id",
169185
size: 40,
170186
header: "ID",
171-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
187+
cell: (info) => (
188+
<TableCellString>{info.getValue() as string}</TableCellString>
189+
),
172190
},
173191
{
174192
accessorKey: "short_name",
@@ -177,7 +195,9 @@ const AdminServersTable = ({
177195
tooltip: "Short unique server identifier",
178196
},
179197
header: "Name",
180-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
198+
cell: (info) => (
199+
<TableCellString>{info.getValue() as string}</TableCellString>
200+
),
181201
},
182202
{
183203
accessorKey: "name",
@@ -186,43 +206,60 @@ const AdminServersTable = ({
186206
tooltip: "Full name of the server, AKA srcds hostname",
187207
},
188208
header: "Name Long",
189-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
209+
cell: (info) => (
210+
<TableCellString>{info.getValue() as string}</TableCellString>
211+
),
190212
},
191213
{
192214
accessorKey: "address",
193215
meta: {
194216
tooltip: "IP or DNS/Hostname of the server",
195217
},
196218
header: "Address",
197-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
219+
cell: (info) => (
220+
<TableCellString>{info.getValue() as string}</TableCellString>
221+
),
198222
},
199223
{
200224
accessorKey: "port",
201225
size: 50,
202226
header: "Port",
203-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
227+
cell: (info) => (
228+
<TableCellString>{info.getValue() as string}</TableCellString>
229+
),
204230
},
205231
{
206232
accessorKey: "rcon",
207233
meta: {
208234
tooltip: "Standard RCON password",
209235
},
210236
header: () => "RCON",
211-
cell: (info) => <TableCellStringHidden>{info.getValue() as string}</TableCellStringHidden>,
237+
cell: (info) => (
238+
<TableCellStringHidden>
239+
{info.getValue() as string}
240+
</TableCellStringHidden>
241+
),
212242
},
213243
{
214244
accessorKey: "password",
215245
meta: {
216-
tooltip: "A password that the server uses to authenticate with the central gbans server",
246+
tooltip:
247+
"A password that the server uses to authenticate with the central gbans server",
217248
},
218249
header: () => "Auth Key",
219-
cell: (info) => <TableCellStringHidden>{info.getValue() as string}</TableCellStringHidden>,
250+
cell: (info) => (
251+
<TableCellStringHidden>
252+
{info.getValue() as string}
253+
</TableCellStringHidden>
254+
),
220255
},
221256
{
222257
accessorKey: "region",
223258
size: 75,
224259
header: "Region",
225-
cell: (info) => <TableCellString>{info.getValue() as string}</TableCellString>,
260+
cell: (info) => (
261+
<TableCellString>{info.getValue() as string}</TableCellString>
262+
),
226263
},
227264
// {
228265
// accessorKey: 'cc',
@@ -257,7 +294,11 @@ const AdminServersTable = ({
257294
tooltip: "Last time the server authenticated itself",
258295
},
259296
header: "Last Auth",
260-
cell: (info) => <TableCellString>{renderDateTime(info.getValue() as Date)}</TableCellString>,
297+
cell: (info) => (
298+
<TableCellString>
299+
{renderDateTime(info.getValue() as Date)}
300+
</TableCellString>
301+
),
261302
},
262303
{
263304
accessorKey: "enable_stats",
@@ -266,7 +307,7 @@ const AdminServersTable = ({
266307
tooltip: "Stat Tracking Enabled",
267308
},
268309
header: "St",
269-
cell: (info) => <TableCellBool enabled={info.getValue() as boolean} />,
310+
cell: (info) => <BoolCell enabled={info.getValue() as boolean} />,
270311
},
271312
{
272313
accessorKey: "is_enabled",
@@ -275,7 +316,7 @@ const AdminServersTable = ({
275316
tooltip: "Enabled",
276317
},
277318
header: "En.",
278-
cell: (info) => <TableCellBool enabled={info.getValue() as boolean} />,
319+
cell: (info) => <BoolCell enabled={info.getValue() as boolean} />,
279320
},
280321
{
281322
id: "actions",

0 commit comments

Comments
 (0)