a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
migrate classes to use remote functions
+55
-39
-16
app/src/routes/(app)/classes/+page.server.ts
-16
app/src/routes/(app)/classes/+page.server.ts
···
1
-
import { db } from '$server/db'
2
-
import { ClassRepository } from '$server/db/repos/class'
3
-
import { definePageMeta } from '$ui/page-meta'
4
-
import type { PageServerLoad } from './$types'
5
-
6
-
export const load: PageServerLoad = async () => {
7
-
const classRepo = new ClassRepository(db)
8
-
const queryClasses = await classRepo.getClassesBy()
9
-
10
-
return {
11
-
meta: definePageMeta({
12
-
title: 'Classes',
13
-
}),
14
-
classes: queryClasses,
15
-
}
16
-
}
+5
-5
app/src/routes/(app)/classes/+page.svelte
+5
-5
app/src/routes/(app)/classes/+page.svelte
···
3
3
import ClassIcon from '$ui/icons/ClassIcon.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, queryClasses } from './page.remote'
7
7
8
-
const { data }: PageProps = $props()
9
-
const { meta, classes } = $derived(data)
8
+
const meta = getPageMeta()
9
+
const classes = queryClasses()
10
10
</script>
11
11
12
12
<svelte:head>
13
-
<PageMeta {...meta} />
13
+
<PageMeta {...await meta} />
14
14
</svelte:head>
15
15
16
16
<Breadcrumb links={[
17
17
{ path: '/classes', text: 'Classes' }
18
18
]} />
19
19
20
-
{#each classes as classEntry (classEntry.id)}
20
+
{#each await classes as classEntry (classEntry.id)}
21
21
{@debug classEntry}
22
22
{:else}
23
23
<NoEntriesFound entryName="class">
-15
app/src/routes/(app)/classes/new/+page.server.ts
-15
app/src/routes/(app)/classes/new/+page.server.ts
···
1
-
import { definePageMeta } from '$ui/page-meta'
2
-
import { AbilityAbbrArray, getAbilityDesc, getAbilityName } from '@starlight/types/dnd'
3
-
import type { PageServerLoad } from './$types'
4
-
5
-
export const load: PageServerLoad = async () => {
6
-
return {
7
-
meta: definePageMeta({
8
-
title: 'Create a new class entry',
9
-
}),
10
-
abilities: AbilityAbbrArray.map((ability) => ({
11
-
title: getAbilityName(ability),
12
-
desc: getAbilityDesc(ability),
13
-
})),
14
-
}
15
-
}
+8
-3
app/src/routes/(app)/classes/new/+page.svelte
+8
-3
app/src/routes/(app)/classes/new/+page.svelte
···
5
5
import { Field } from '$ui/form/field'
6
6
import { Radio } from '$ui/form/radio'
7
7
import { TextAreaInput, TextInput } from '$ui/form/text-input'
8
+
import { Breadcrumb } from '$ui/layout/breadcrumb'
8
9
import { PageLayout } from '$ui/layout/page-layout'
9
-
import type { PageProps } from './$types'
10
+
import { queryBreadcrumb } from '../page.remote'
11
+
import { getAbilities, getPageMeta } from './page.remote'
10
12
11
-
let { data }: PageProps = $props()
12
-
const { meta, abilities } = $derived(data)
13
+
const meta = await getPageMeta()
14
+
const paths = await queryBreadcrumb()
15
+
const abilities = await getAbilities()
13
16
</script>
14
17
15
18
<svelte:head>
16
19
<PageMeta {...meta } />
17
20
</svelte:head>
21
+
22
+
<Breadcrumb links={paths.newEntry} />
18
23
19
24
<PageLayout display="flex" direction="col" class="gap-8" items="stretch">
20
25
<HeadingGroup>
+16
app/src/routes/(app)/classes/new/page.remote.ts
+16
app/src/routes/(app)/classes/new/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { definePageMeta } from '$ui/page-meta'
3
+
import { AbilityAbbrArray, getAbilityDesc, getAbilityName } from '@starlight/types/dnd'
4
+
5
+
export const getPageMeta = prerender(() =>
6
+
definePageMeta({
7
+
title: 'Create a new class entry',
8
+
}),
9
+
)
10
+
11
+
export const getAbilities = query(async () => {
12
+
return AbilityAbbrArray.map((ability) => ({
13
+
title: getAbilityName(ability),
14
+
desc: getAbilityDesc(ability),
15
+
}))
16
+
})
+26
app/src/routes/(app)/classes/page.remote.ts
+26
app/src/routes/(app)/classes/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { ClassRepository } from '$server/db/repos/class'
4
+
import { definePaths } from '$ui/layout/breadcrumb'
5
+
import { definePageMeta } from '$ui/page-meta'
6
+
7
+
export const getPageMeta = prerender(() =>
8
+
definePageMeta({
9
+
title: 'Classes',
10
+
}),
11
+
)
12
+
13
+
export const queryBreadcrumb = query(async () => {
14
+
const root = { path: '/classes', text: 'Classes' }
15
+
const newEntry = { path: '/classes/new', text: 'Create a new class entry' }
16
+
17
+
return definePaths({
18
+
root: [root],
19
+
newEntry: [root, newEntry],
20
+
})
21
+
})
22
+
23
+
export const queryClasses = query(async () => {
24
+
const classRepo = new ClassRepository(db)
25
+
return await classRepo.getClassesBy()
26
+
})