Skip to content

Commit 5c70525

Browse files
openscriptopenscript
committed
feat: add content shell
1 parent 0e17f35 commit 5c70525

File tree

14 files changed

+123
-94
lines changed

14 files changed

+123
-94
lines changed

‎apps/frontend/src/routes/__root.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,19 @@ import {
1616
IconMapSearch,
1717
Divider,
1818
} from "@quassel/ui";
19-
import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
19+
import { createRootRouteWithContext, Link, Outlet, RouteContext, useNavigate } from "@tanstack/react-router";
2020
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
2121
import { version } from "../../package.json";
2222
import { $session } from "../stores/session";
2323
import { useStore } from "@nanostores/react";
2424
import { $layout } from "../stores/layout";
2525
import { $api } from "../stores/api";
26-
import { DefaultError, QueryClient, useQueryClient } from "@tanstack/react-query";
26+
import { DefaultError, useQueryClient } from "@tanstack/react-query";
27+
import { i18n } from "../stores/i18n";
28+
29+
const messages = i18n("RootRoute", {
30+
title: "Home",
31+
});
2732

2833
function Root() {
2934
const n = useNavigate();
@@ -101,6 +106,7 @@ function Root() {
101106
);
102107
}
103108

104-
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
109+
export const Route = createRootRouteWithContext<RouteContext>()({
110+
beforeLoad: () => ({ title: messages.get().title }),
105111
component: Root,
106112
});

‎apps/frontend/src/routes/_auth/administration.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1-
import { createFileRoute, Outlet } from "@tanstack/react-router";
1+
import { createFileRoute, Outlet, useMatches } from "@tanstack/react-router";
22
import { useEffect } from "react";
33
import { $layout } from "../../stores/layout";
4+
import { i18n } from "../../stores/i18n";
5+
import { ContentShell } from "@quassel/ui";
6+
7+
const messages = i18n("AdministrationRoute", {
8+
title: "Administration",
9+
});
410

511
function AdministrationLayout() {
612
useEffect(() => {
713
$layout.set({ admin: true });
814
return () => $layout.set({ admin: false });
915
}, []);
1016

17+
const matches = useMatches();
18+
const title = matches[matches.length - 2]?.context.title;
19+
1120
return (
12-
<>
21+
<ContentShell title={title || messages.get().title}>
1322
<Outlet />
14-
</>
23+
</ContentShell>
1524
);
1625
}
1726

1827
export const Route = createFileRoute("/_auth/administration")({
28+
beforeLoad: () => ({ title: messages.get().title }),
1929
component: AdministrationLayout,
2030
});

‎apps/frontend/src/routes/_auth/administration/carers.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Paper, Title } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationCarers() {
5-
return (
6-
<>
7-
<Title>Carers</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationCarersRoute", {
5+
title: "Carers",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/carers")({
16-
component: AdministrationCarers,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/export.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Paper, Title } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationExport() {
5-
return (
6-
<>
7-
<Title>Export</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationExportRoute", {
5+
title: "Export",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/export")({
16-
component: AdministrationExport,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/index.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
import { Title } from "@quassel/ui";
21
import { createFileRoute } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
export const Route = createFileRoute("/_auth/administration/")({
5-
component: Index,
4+
const messages = i18n("AdministrationDashboardRoute", {
5+
title: "Dashboard",
66
});
77

88
function Index() {
9-
return <Title>Welcome to the administration interface!</Title>;
9+
return null;
1010
}
11+
12+
export const Route = createFileRoute("/_auth/administration/")({
13+
beforeLoad: () => ({ title: messages.get().title }),
14+
component: Index,
15+
});

‎apps/frontend/src/routes/_auth/administration/languages.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Title, Paper } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationLanguages() {
5-
return (
6-
<>
7-
<Title>Languages</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationLanguagesRoute", {
5+
title: "Languages",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/languages")({
16-
component: AdministrationLanguages,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/participants.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Paper, Title } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationParticipants() {
5-
return (
6-
<>
7-
<Title>Participants</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationParticipantsRoute", {
5+
title: "Participants",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/participants")({
16-
component: AdministrationParticipants,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/questionnaires.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Title, Paper } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationQuestionnaires() {
5-
return (
6-
<>
7-
<Title>Questionnaires</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationQuestionnairesRoute", {
5+
title: "Questionnaires",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/questionnaires")({
16-
component: AdministrationQuestionnaires,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/studies.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Title, Paper } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationStudies() {
5-
return (
6-
<>
7-
<Title>Studies</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationStudiesRoute", {
5+
title: "Studies",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/studies")({
16-
component: AdministrationStudies,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

‎apps/frontend/src/routes/_auth/administration/users.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Paper, Title } from "@quassel/ui";
21
import { createFileRoute, Outlet } from "@tanstack/react-router";
2+
import { i18n } from "../../../stores/i18n";
33

4-
function AdministrationUsers() {
5-
return (
6-
<>
7-
<Title>Users</Title>
8-
<Paper my="lg">
9-
<Outlet />
10-
</Paper>
11-
</>
12-
);
13-
}
4+
const messages = i18n("AdministrationUsersRoute", {
5+
title: "Users",
6+
});
147

158
export const Route = createFileRoute("/_auth/administration/users")({
16-
component: AdministrationUsers,
9+
beforeLoad: () => ({ title: messages.get().title }),
10+
component: Outlet,
1711
});

0 commit comments

Comments
 (0)