a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
migrate backgrounds to use remote functions
+69
-36
-16
app/src/routes/(app)/backgrounds/+page.server.ts
-16
app/src/routes/(app)/backgrounds/+page.server.ts
···
1
-
import { db } from '$server/db'
2
-
import { BackgroundRepository } from '$server/db/repos/background'
3
-
import { definePageMeta } from '$ui/page-meta'
4
-
import type { PageServerLoad } from './$types'
5
-
6
-
export const load: PageServerLoad = async () => {
7
-
const backgroundRepo = new BackgroundRepository(db)
8
-
const queryBackgrounds = await backgroundRepo.getBackgroundsBy()
9
-
10
-
return {
11
-
meta: definePageMeta({
12
-
title: 'Backgrounds',
13
-
}),
14
-
backgrounds: queryBackgrounds,
15
-
}
16
-
}
+5
-6
app/src/routes/(app)/backgrounds/+page.svelte
+5
-6
app/src/routes/(app)/backgrounds/+page.svelte
···
3
3
import OriginIcon from '$ui/icons/OriginIcon.svelte'
4
4
import { Breadcrumb } from '$ui/layout/breadcrumb'
5
5
import NoEntriesFound from '../NoEntriesFound.svelte'
6
-
import type { PageProps } from './$types'
6
+
import { getPageMeta, queryBackgrounds, queryBreadcrumb } from './page.remote'
7
7
8
-
const { data }: PageProps = $props()
9
-
const { meta, backgrounds } = $derived(data)
8
+
const meta = await getPageMeta()
9
+
const backgrounds = await queryBackgrounds()
10
+
const paths = await queryBreadcrumb()
10
11
</script>
11
12
12
13
<svelte:head>
13
14
<PageMeta {...meta} />
14
15
</svelte:head>
15
16
16
-
<Breadcrumb links={[
17
-
{ path: '/backgrounds', text: 'Backgrounds' }
18
-
]} />
17
+
<Breadcrumb links={paths.root} />
19
18
20
19
{#each backgrounds as background (background.id)}
21
20
{@debug background}
-10
app/src/routes/(app)/backgrounds/new/+page.server.ts
-10
app/src/routes/(app)/backgrounds/new/+page.server.ts
+8
-4
app/src/routes/(app)/backgrounds/new/+page.svelte
+8
-4
app/src/routes/(app)/backgrounds/new/+page.svelte
···
1
1
<script lang="ts">
2
+
import { Breadcrumb } from '$ui/layout/breadcrumb'
2
3
import { PageMeta } from '$ui/page-meta'
3
-
import type { PageProps } from './$types'
4
+
import { queryBreadcrumb } from '../page.remote'
5
+
import { getPageMeta } from './page.remote'
4
6
5
-
let { data }: PageProps = $props()
6
-
const { meta } = $derived(data)
7
+
const meta = getPageMeta()
8
+
const paths = await queryBreadcrumb()
7
9
</script>
8
10
9
11
<svelte:head>
10
-
<PageMeta {...meta} />
12
+
<PageMeta {...await meta} />
11
13
</svelte:head>
14
+
15
+
<Breadcrumb links={paths.newEntry} />
+28
app/src/routes/(app)/backgrounds/new/page.remote.ts
+28
app/src/routes/(app)/backgrounds/new/page.remote.ts
···
1
+
import { form, prerender } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { BackgroundRepository, zBackgroundSchema } from '$server/db/repos/background'
4
+
import { definePageMeta } from '$ui/page-meta'
5
+
6
+
export const getPageMeta = prerender(() =>
7
+
definePageMeta({
8
+
title: 'Create a new background entry',
9
+
}),
10
+
)
11
+
12
+
export const createBackground = form(
13
+
zBackgroundSchema.toInsert,
14
+
async ({ name, description, sourcebookId, toolId, featId }) => {
15
+
const backgroundRepo = new BackgroundRepository(db)
16
+
return await backgroundRepo.createBackground({
17
+
backgroundModel: {
18
+
name,
19
+
description,
20
+
sourcebookId,
21
+
toolId,
22
+
featId,
23
+
},
24
+
skillProficiencies: [],
25
+
abilities: [],
26
+
})
27
+
},
28
+
)
+28
app/src/routes/(app)/backgrounds/page.remote.ts
+28
app/src/routes/(app)/backgrounds/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { BackgroundRepository } from '$server/db/repos/background'
4
+
import { definePaths } from '$ui/layout/breadcrumb'
5
+
import { definePageMeta } from '$ui/page-meta'
6
+
7
+
export const getPageMeta = prerender(() =>
8
+
definePageMeta({
9
+
title: 'Backgrounds',
10
+
}),
11
+
)
12
+
13
+
export const queryBackgrounds = query(async () => {
14
+
const backgroundRepo = new BackgroundRepository(db)
15
+
const queryBackgrounds = await backgroundRepo.getBackgroundsBy()
16
+
17
+
return queryBackgrounds
18
+
})
19
+
20
+
export const queryBreadcrumb = query(async () => {
21
+
const root = { path: '/backgrounds', text: 'Backgrounds' }
22
+
const newEntry = { path: '/backgrounds/new', text: 'Create a new background entry' }
23
+
24
+
return definePaths({
25
+
root: [root],
26
+
newEntry: [root, newEntry],
27
+
})
28
+
})