Skip to content

Commit bbdb35f

Browse files
sebasptschsebasptsch
committed
migration in progress
1 parent ed13cb1 commit bbdb35f

33 files changed

+1162
-420
lines changed

‎apps/client/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"@graphql-yoga/subscription": "^5.0.5",
1313
"@hookform/resolvers": "^3.9.0",
1414
"@tanstack/react-query": "^5.90.5",
15-
"@tanstack/react-query-devtools": "^5",
15+
"@tanstack/react-query-devtools": "^5.90.2",
16+
"@tanstack/react-router": "^1.133.25",
17+
"@tanstack/react-router-devtools": "^1.133.25",
1618
"@trpc/client": "^11.6.0",
1719
"@trpc/tanstack-react-query": "^11.6.0",
1820
"@types/qrcode": "^1.5.0",
@@ -33,9 +35,11 @@
3335
"zod-formik-adapter": "^1.1.1"
3436
},
3537
"devDependencies": {
38+
"@tanstack/router-plugin": "^1.133.25",
3639
"@types/bun": "^1.3.0",
3740
"@types/node": "^24.9.1",
3841
"@vitejs/plugin-react": "^5.0.4",
39-
"vite": "^7.1.12"
42+
"vite": "^7.1.12",
43+
"vite-tsconfig-paths": "^5.1.4"
4044
}
4145
}

‎apps/client/src/components/adminRouter.tsx‎

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,53 @@
1-
import { Link } from "react-router-dom";
2-
import { routeBuilders } from "routes";
3-
import { twMerge } from "tailwind-merge";
1+
import { Link } from "@tanstack/react-router";
2+
import { Route } from "routes/room.$roomId/admin.$adminKey";
43

5-
function AdminLink(props: { path: string; name: string }) {
6-
const selected = window.location.pathname === props.path;
4+
export function AdminRouter() {
5+
const { roomId, adminKey } = Route.useParams();
76

87
return (
9-
<Link to={props.path}>
10-
<button
11-
className={twMerge("btn", selected && "btn-secondary")}
12-
type="button"
8+
<div className={"flex gap-4 mb-8"}>
9+
<Link
10+
to="/room/$roomId/admin/$adminKey"
11+
params={{
12+
adminKey,
13+
roomId,
14+
}}
15+
className="btn"
16+
activeOptions={{
17+
exact: true,
18+
}}
19+
activeProps={{
20+
className: "btn btn-secondary",
21+
}}
1322
>
14-
{props.name}
15-
</button>
16-
</Link>
17-
);
18-
}
19-
20-
export function AdminRouter(props: {
21-
className?: string;
22-
roomId: string;
23-
adminKey: string;
24-
}) {
25-
return (
26-
<div className={twMerge("flex gap-4 mb-8", props.className)}>
27-
<AdminLink
28-
path={routeBuilders.manageRoomInfo({
29-
roomId: props.roomId,
30-
adminKey: props.adminKey,
31-
})}
32-
name="Room Info"
33-
/>
34-
<AdminLink
35-
path={routeBuilders.manageWaitingRoom({
36-
roomId: props.roomId,
37-
adminKey: props.adminKey,
38-
})}
39-
name="Waiting Room"
40-
/>
41-
<AdminLink
42-
path={routeBuilders.setRoomQuestions({
43-
roomId: props.roomId,
44-
adminKey: props.adminKey,
45-
})}
46-
name="Set Questions"
47-
/>
23+
Room Info
24+
</Link>
25+
<Link
26+
to="/room/$roomId/admin/$adminKey/waiting-room"
27+
params={{
28+
adminKey,
29+
roomId,
30+
}}
31+
className="btn"
32+
activeProps={{
33+
className: "btn btn-secondary",
34+
}}
35+
>
36+
Waiting Room
37+
</Link>
38+
<Link
39+
to="/room/$roomId/admin/$adminKey/questions"
40+
params={{
41+
adminKey,
42+
roomId,
43+
}}
44+
className="btn"
45+
activeProps={{
46+
className: "btn btn-secondary",
47+
}}
48+
>
49+
Set Questions
50+
</Link>
4851
</div>
4952
);
5053
}

‎apps/client/src/main.tsx‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,42 @@
11
import { QueryClientProvider } from "@tanstack/react-query";
2-
import React from "react";
32
import ReactDOM from "react-dom/client";
4-
import { RouterProvider } from "react-router-dom";
53

6-
import { browserRouter } from "./routes";
74
import { queryClient } from "./utils/trpc";
85

96
import "./index.css";
107

8+
import { createRouter, RouterProvider } from "@tanstack/react-router";
9+
// Import the generated route tree
10+
import { routeTree } from "./routeTree.gen";
1111

12-
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
13-
<React.StrictMode>
12+
// Create a new router instance
13+
const router = createRouter({
14+
routeTree,
15+
context: {
16+
queryClient,
17+
},
18+
defaultPreload: "intent",
19+
// Since we're using React Query, we don't want loader calls to ever be stale
20+
// This will ensure that the loader is always called when the route is preloaded or visited
21+
defaultPreloadStaleTime: 0,
22+
scrollRestoration: true,
23+
});
24+
25+
// Register the router instance for type safety
26+
declare module "@tanstack/react-router" {
27+
interface Register {
28+
router: typeof router;
29+
}
30+
}
31+
32+
// biome-ignore lint/style/noNonNullAssertion: The root element is guaranteed to exist
33+
const rootElement = document.getElementById("root")!;
34+
35+
if (!rootElement.innerHTML) {
36+
const root = ReactDOM.createRoot(rootElement);
37+
root.render(
1438
<QueryClientProvider client={queryClient}>
15-
<RouterProvider router={browserRouter} />
16-
</QueryClientProvider>
17-
</React.StrictMode>,
18-
);
39+
<RouterProvider router={router} />
40+
</QueryClientProvider>,
41+
);
42+
}

apps/client/src/routes/animations.module.css renamed to apps/client/src/old_routes/animations.module.css

File renamed without changes.

‎apps/client/src/old_routes/index.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { JoinWaitingRoomPage } from "pages/room/JoinWaitingRoomPage";
2+
import { RoomResultsListPage } from "pages/room/RoomResultsListPage";
3+
import { VotingRoomPage } from "pages/room/VotingRoomPage";
4+
import { WaitingRoomPage } from "pages/room/WaitingRoomPage";
5+
import { ShortRedirectPage } from "pages/ShortRedirectPage";
6+
import { createBrowserRouter, useOutlet } from "react-router-dom";
7+
import { withRoomFetched } from "utils/withRoomData";
8+
import { buildBuilders, buildRoutes, path, route } from "./routeBuilder";
9+
10+
const routes = {
11+
// home: route({
12+
// path: path`/`,
13+
// component: CreateRoomPage,
14+
// }),
15+
manageWaitingRoom: route({
16+
path: path`/room/${"roomId"}/admin/${"adminKey"}/waiting-room`,
17+
component: withRoomFetched(WaitingRoomManagementPage),
18+
}),
19+
manageRoomInfo: route({
20+
path: path`/room/${"roomId"}/admin/${"adminKey"}`,
21+
component: withRoomFetched(RoomInfoPage),
22+
}),
23+
setRoomQuestions: route({
24+
path: path`/room/${"roomId"}/admin/${"adminKey"}/questions`,
25+
component: withRoomFetched(QuestionSettingPage),
26+
}),
27+
viewRoomBoard: route({
28+
path: path`/room/${"roomId"}/board`,
29+
component: withRoomFetched(BoardPage),
30+
}),
31+
viewRoomResults: route({
32+
path: path`/room/${"roomId"}/results`,
33+
component: withRoomFetched(RoomResultsListPage),
34+
}),
35+
joinRoom: route({
36+
path: path`/join/${"roomId"}`,
37+
component: JoinWaitingRoomPage,
38+
}),
39+
waitInWaitingRoom: route({
40+
path: path`/room/${"roomId"}/wait/${"userId"}`,
41+
component: withRoomFetched(WaitingRoomPage),
42+
}),
43+
votingRoom: route({
44+
path: path`/room/${"roomId"}/vote/${"userId"}/${"votingKey"}`,
45+
component: withRoomFetched(VotingRoomPage),
46+
}),
47+
shortView: route({
48+
path: path`/b/${"shortId"}`,
49+
component: ShortRedirectPage((roomId) => `/room/${roomId}/board`),
50+
}),
51+
shortJoin: route({
52+
path: path`/j/${"shortId"}`,
53+
component: ShortRedirectPage((roomId) => `/join/${roomId}`),
54+
}),
55+
};
56+
57+
export const routeBuilders = buildBuilders(routes);
58+
59+
export const browserRoutes = buildRoutes(routes);
60+
// export const browserRouter = createBrowserRouter(browserRoutes);
61+
62+
export const browserRouter = createBrowserRouter([
63+
{
64+
path: "/",
65+
element: <AnimationRouter />,
66+
children: browserRoutes.map((route) => ({
67+
index: route.path === "/",
68+
path: route.path === "/" ? undefined : route.path,
69+
element: route.element,
70+
})),
71+
},
72+
]);
73+
74+
function AnimationRouter() {
75+
const currentOutlet = useOutlet();
76+
77+
return (
78+
<div className="w-screen h-screen relative overflow-x-hidden">
79+
<div className={"absolute min-h-full"}>{currentOutlet}</div>
80+
</div>
81+
);
82+
}

apps/client/src/routes/routeBuilder.tsx renamed to apps/client/src/old_routes/routeBuilder.tsx

File renamed without changes.

‎apps/client/src/pages/CreateRoomPage.tsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎apps/client/src/pages/room/BoardPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useSubscription } from "@trpc/tanstack-react-query";
22
import { QRCodeRender } from "components/QRCode";
33
import { ResultsViewer } from "components/ResultsViewer";
44
import { CenteredPageContainer, Heading, Question } from "components/styles";
5-
import { routeBuilders } from "routes";
5+
import { routeBuilders } from "old_routes";
66
import { BoardState } from "server/src/live/states";
77
import type { RoomPublicInfo } from "server/src/room/types";
88
import { twMerge } from "tailwind-merge";

‎apps/client/src/pages/room/JoinWaitingRoomPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useMutation } from "@tanstack/react-query";
22
import { Button, CenteredPageContainer, Heading } from "components/styles";
33
import { Field, Form, Formik } from "formik";
4+
import { routeBuilders } from "old_routes";
45
import { useId } from "react";
56
import { useNavigate } from "react-router-dom";
6-
import { routeBuilders } from "routes";
77
import type { UserLocation } from "server/src/dbschema/interfaces";
88
import { locationEnumLabel } from "utils/enumLabels";
99
import { trpc } from "utils/trpc";

‎apps/client/src/pages/room/RoomResultsListPage.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)