-
Notifications
You must be signed in to change notification settings - Fork 7
/
demo.tsx
51 lines (43 loc) 路 1.37 KB
/
demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { useActionData, useLoaderData, useTransition } from '@remix-run/react'
import { MetaFunction } from '@remix-run/react/dist/routeModules'
import { deserialize } from 'superjson'
import { SuperJSONResult } from 'superjson/dist/types'
import {
demoPageAction,
DemoPageFormErrors,
} from '~/features/demo/actions/demo-page-action'
import {
demoPageLoader,
DemoPageLoaderPayload,
} from '~/features/demo/loaders/demo-page-loader'
import DemoPage from '~/features/demo/pages/demo-page'
export let meta: MetaFunction = () => {
return {
title: 'Demo Page',
}
}
/**
* In the route, I like to only put 'links' to the functions and components
*/
export let loader = demoPageLoader
export let action = demoPageAction
export default function Index() {
// In the deserialize function, we can use the same type as the loader
let { serverTime, items, page, totalItems, itemsPerPage } =
deserialize<DemoPageLoaderPayload>(useLoaderData() as SuperJSONResult)
// Same thing for the types of the errors
let errors = useActionData<DemoPageFormErrors>()
let transition = useTransition()
// This component is just a simple wrapper around the page component
return (
<DemoPage
serverTime={serverTime}
items={items}
page={page}
total={totalItems}
itemsPerPage={itemsPerPage}
transition={transition}
errors={errors}
/>
)
}