Skip to content

Commit e0224c7

Browse files
imaitlandimaitland
authored
route constants
* refactor routes to use constants see pr for ref article.
1 parent 4475c8e commit e0224c7

20 files changed

+217
-55
lines changed

‎app/components/ControllerConfig.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
action,
88
Intent,
99
} from "~/routes/devices.$id.$name.experiments.$experiment_id.controllers.$controller_id.config";
10+
import { ROUTES } from "~/utils/routes";
1011

1112
type ControllerConfigProps = {
1213
controller: {
@@ -21,7 +22,7 @@ export function ControllerConfig({
2122
actionData,
2223
}: ControllerConfigProps) {
2324
const { classinfo, classinfoSchema } = useLoaderData<typeof loader>();
24-
const { id, experiment_id, controller_id } = useParams();
25+
const { id, name, experiment_id, controller_id } = useParams();
2526
const submit = useSubmit();
2627

2728
// Display any error messages from the action
@@ -87,7 +88,10 @@ export function ControllerConfig({
8788
</li>
8889
</ul>
8990
<div className="justify-end card-actions">
90-
<Link className="btn btn-primary" to={`/devices/${id}/list/config`}>
91+
<Link
92+
className="btn btn-primary"
93+
to={ROUTES.device.config({ id, name })}
94+
>
9195
edit
9296
</Link>
9397
</div>

‎app/components/ExperimentsTable.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Link, useLocation, useParams } from "react-router";
2+
import { ROUTES } from "../utils/routes";
23
import { Experiment_Output } from "client";
34
import clsx from "clsx";
45

@@ -23,7 +24,11 @@ export function ExperimentsTable({
2324
className={clsx(
2425
pathElements.includes(experiment_name) && "underline",
2526
)}
26-
to={`/devices/${id}/${name}/experiments/${experiment_name}`}
27+
to={ROUTES.device.experiment.current({
28+
id,
29+
name,
30+
experimentId: experiment_name,
31+
})}
2732
>
2833
{experiment_name}
2934
</Link>
@@ -32,7 +37,7 @@ export function ExperimentsTable({
3237
<td>
3338
<Link
3439
className={clsx("btn btn-outline join-item")}
35-
to={`/devices/${id}/${name}/experiments/${experiment_name}/logs#logs`}
40+
to={`${ROUTES.device.experiment.logs({ id, name, experimentId: experiment_name })}#logs`}
3641
>
3742
logs
3843
</Link>
@@ -60,7 +65,7 @@ export function ExperimentsTable({
6065
<div className="join">
6166
<Link
6267
className={clsx("btn btn-outline join-item")}
63-
to={`/devices/${id}/${name}/experiments/${experiment_name}/controllers/${controllerName}/config#${controllerName + "config"}`}
68+
to={`${ROUTES.device.experiment.controllers.current.config({ id, name, experimentId: experiment_name, controllerId: controllerName })}#${controllerName + "config"}`}
6469
>
6570
config
6671
</Link>

‎app/components/HardwareTable.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Link, useLocation, useParams, useSearchParams } from "react-router";
2+
import { ROUTES } from "../utils/routes";
23
import { EvolverConfigWithoutDefaults } from "client";
34
import clsx from "clsx";
45

@@ -24,7 +25,7 @@ export function HardwareTable({
2425
const vials = evolverHardware[key]?.config?.vials;
2526

2627
const vialsWithLinks = vials?.map((vial) => {
27-
const linkTo = `/devices/${id}/${name}/hardware/${key}/history?vials=${vial}`;
28+
const linkTo = `${ROUTES.device.hardware.history({ id, name, hardwareName: key })}?vials=${vial}`;
2829
const activeVial =
2930
currentVials?.includes(vial.toString()) && hardwareName === key;
3031
const vialButtons = (
@@ -61,8 +62,8 @@ export function HardwareTable({
6162
key={"all"}
6263
to={
6364
vials
64-
? `/devices/${id}/${name}/hardware/${key}/history?vials=${vials?.join(",")}`
65-
: `/devices/${id}/${name}/hardware/${key}/history`
65+
? `${ROUTES.device.hardware.history({ id, name, hardwareName: key })}?vials=${vials?.join(",")}`
66+
: ROUTES.device.hardware.history({ id, name, hardwareName: key })
6667
}
6768
>
6869
{" "}
@@ -94,7 +95,11 @@ export function HardwareTable({
9495
currentPath === "calibrate" &&
9596
"btn-active",
9697
)}
97-
to={`/devices/${id}/${name}/hardware/${key}/calibrate`}
98+
to={ROUTES.device.hardware.calibrate({
99+
id,
100+
name,
101+
hardwareName: key,
102+
})}
98103
>
99104
calibrate
100105
</Link>

‎app/components/Navbar.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { Link } from "react-router";
22
import ThemeController from "./ThemeController";
33
import clsx from "clsx";
4+
import { ROUTES } from "../utils/routes";
45

56
export default function Navbar({ pathname = "" as string }): JSX.Element {
67
return (
78
<div className="">
89
<div className="mx-auto max-w-6xl flex flex-wrap justify-between gap-4 min-h-16 items-center">
910
<div className="flex-1">
1011
<div className="flex items-center space-x-1">
11-
<Link to="/" className="text-primary ">
12-
Evolver
12+
<Link to={ROUTES.static.root} className="text-primary ">
13+
eVolver
1314
</Link>
1415
</div>
1516
</div>
@@ -19,9 +20,9 @@ export default function Navbar({ pathname = "" as string }): JSX.Element {
1920
role="button"
2021
className={clsx(
2122
"link",
22-
pathname !== "/devices/list" && "link-hover",
23+
pathname !== ROUTES.static.devices && "link-hover",
2324
)}
24-
to="/devices/list"
25+
to={ROUTES.static.devices}
2526
>
2627
devices
2728
</Link>

‎app/components/VialGrid.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Link, useParams } from "react-router";
2+
import { ROUTES } from "../utils/routes";
23
import clsx from "clsx";
34
import { useState, useEffect } from "react";
45

@@ -22,7 +23,7 @@ const DataTable = ({
2223
<th>
2324
<Link
2425
className={"font-mono"}
25-
to={`/devices/${id}/${name}/hardware`}
26+
to={ROUTES.device.hardware.list({ id, name })}
2627
>
2728
{vialIndex}
2829
</Link>{" "}
@@ -50,7 +51,7 @@ const DataTable = ({
5051
>
5152
<Link
5253
className="link"
53-
to={`/devices/${id}/${name}/hardware/${mainKey}/history?vials=${vialIndex}`}
54+
to={`${ROUTES.device.hardware.history({ id, name, hardwareName: mainKey })}?vials=${vialIndex}`}
5455
>
5556
{mainKey}
5657
</Link>
@@ -59,8 +60,8 @@ const DataTable = ({
5960
{renderSubKey && (
6061
<td>
6162
<Link
62-
className="link font-mono"
63-
to={`/devices/${id}/${name}/hardware/${mainKey}/history?properties=${subKey}&vials=${vialIndex}`}
63+
className="link"
64+
to={`${ROUTES.device.hardware.history({ id, name, hardwareName: mainKey })}?properties=${subKey}&vials=${vialIndex}`}
6465
>
6566
{subKey}
6667
</Link>

‎app/root.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
LoaderFunctionArgs,
1515
redirect,
1616
} from "react-router";
17+
import { ROUTES } from "./utils/routes";
1718
import { ReactNode } from "react";
1819
import "~/tailwind.css";
1920
import Navbar from "~/components/Navbar";
@@ -108,7 +109,7 @@ export function ErrorBoundary({ error }) {
108109
{error.status} {error.statusText || error.data}
109110
</pre>
110111
<div className="flex flex-col">
111-
<Link className="link" to="/devices/list" reloadDocument>
112+
<Link className="link" to={ROUTES.static.devices} reloadDocument>
112113
home
113114
</Link>
114115
{` `}
@@ -149,7 +150,7 @@ function Document(props: {
149150
<Meta />
150151
<Links />
151152
</head>
152-
<body className="pl-4 pr-4 pb-4">
153+
<body>
153154
<GlobalLoading />
154155
{props.children}
155156
<ScrollRestoration />

‎app/routes/devices.$id.$name.config.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
ActionFunctionArgs,
1010
redirect,
1111
} from "react-router";
12+
import { ROUTES } from "~/utils/routes";
1213
import { EditJson } from "~/components/EditJson.client";
1314
import { ClientOnly } from "remix-utils/client-only";
1415
import { useEffect, useState } from "react";
@@ -26,7 +27,7 @@ import { getEvolverClientForDevice } from "~/utils/evolverClient.server";
2627
export const handle = {
2728
breadcrumb: ({ params }: { params: { id: string; name: string } }) => {
2829
const { id, name } = params;
29-
return <Link to={`/devices/${id}/${name}/config`}>config</Link>;
30+
return <Link to={ROUTES.device.config({ id, name })}>config</Link>;
3031
},
3132
};
3233

@@ -111,7 +112,7 @@ export async function action({ request }: ActionFunctionArgs) {
111112
where: { device_id: id },
112113
data: { name },
113114
});
114-
return redirect(`/devices/${id}/${name}/config?mode=view`);
115+
return redirect(`${ROUTES.device.config({ id, name })}?mode=view`);
115116
} catch (error) {
116117
return submission.reply({
117118
formErrors: [

‎app/routes/devices.$id.$name.experiments.$experiment_id.controllers.$controller_id.config.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import * as Evolver from "client/services.gen";
1616
import { useEffect } from "react";
1717
import { getEvolverClientForDevice } from "~/utils/evolverClient.server";
1818
import { ControllerConfig } from "~/components/ControllerConfig";
19+
import { ROUTES } from "~/utils/routes";
1920

2021
export const handle = {
2122
breadcrumb: ({
@@ -31,7 +32,12 @@ export const handle = {
3132
const { id, experiment_id, name, controller_id } = params;
3233
return (
3334
<Link
34-
to={`/devices/${id}/${name}/experiments/${experiment_id}/${controller_id}/config`}
35+
to={ROUTES.device.experiment.controllers.current.config({
36+
id,
37+
name,
38+
experimentId: experiment_id,
39+
controllerId: controller_id,
40+
})}
3541
>
3642
{controller_id}
3743
</Link>
@@ -50,7 +56,7 @@ export function ErrorBoundary() {
5056
</div>
5157
</div>
5258

53-
<Link to={`/devices/${id}/${name}/config`} className="link">
59+
<Link to={ROUTES.device.config({ id, name })} className="link">
5460
config
5561
</Link>
5662
</div>
@@ -239,7 +245,12 @@ export async function action({ request }: ActionFunctionArgs) {
239245
parsedControllerConfig.name || controller_id;
240246

241247
return redirect(
242-
`/devices/${id}/${name}/experiments/${experiment_id}/controllers/${newControllerName}/config#${newControllerName}config`,
248+
`${ROUTES.device.experiment.controllers.current.config({
249+
id,
250+
name,
251+
experimentId: experiment_id,
252+
controllerId: newControllerName,
253+
})}#${newControllerName}config`,
243254
);
244255
} catch (error) {
245256
return submission.reply({

‎app/routes/devices.$id.$name.experiments.$experiment_id.logs.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link, useLoaderData, LoaderFunctionArgs } from "react-router";
33
import * as Evolver from "client/services.gen";
44
import LogTable from "~/components/LogTable";
55
import { getEvolverClientForDevice } from "~/utils/evolverClient.server";
6+
import { ROUTES } from "~/utils/routes";
67
export const handle = {
78
breadcrumb: ({
89
params,
@@ -11,7 +12,13 @@ export const handle = {
1112
}) => {
1213
const { id, experiment_id, name } = params;
1314
return (
14-
<Link to={`/devices/${id}/${name}/experiments/${experiment_id}/logs`}>
15+
<Link
16+
to={ROUTES.device.experiment.logs({
17+
id,
18+
name,
19+
experimentId: experiment_id,
20+
})}
21+
>
1522
logs
1623
</Link>
1724
);

‎app/routes/devices.$id.$name.experiments.$experiment_id.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { WrenchScrewdriverIcon } from "@heroicons/react/24/solid";
1111

1212
import * as Evolver from "client/services.gen";
1313
import { getEvolverClientForDevice } from "~/utils/evolverClient.server";
14+
import { ROUTES } from "~/utils/routes";
1415

1516
export const handle = {
1617
breadcrumb: ({
@@ -20,7 +21,13 @@ export const handle = {
2021
}) => {
2122
const { id, experiment_id, name } = params;
2223
return (
23-
<Link to={`/devices/${id}/${name}/experiments/${experiment_id}`}>
24+
<Link
25+
to={ROUTES.device.experiment.current({
26+
id,
27+
name,
28+
experimentId: experiment_id,
29+
})}
30+
>
2431
{experiment_id}
2532
</Link>
2633
);
@@ -38,7 +45,7 @@ export function ErrorBoundary() {
3845
</div>
3946
</div>
4047

41-
<Link to={`/devices/${id}/${name}/config`} className="link">
48+
<Link to={ROUTES.device.config({ id, name })} className="link">
4249
config
4350
</Link>
4451
</div>
@@ -88,7 +95,7 @@ export default function Controllers() {
8895
>
8996
<Link
9097
className="link text-primary"
91-
to={`/devices/${id}/${name}/config`}
98+
to={ROUTES.device.config({ id, name })}
9299
>
93100
add experiment
94101
</Link>

0 commit comments

Comments
 (0)