-
Notifications
You must be signed in to change notification settings - Fork 2
/
3.click-to-load.tsx
75 lines (68 loc) · 2.37 KB
/
3.click-to-load.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// deno-lint-ignore-file require-await
import { Fragment, HTMXComponents } from "../mod.tsx"
import { nanoid } from 'nanoid'
const { component, partial, serve, routes } = new HTMXComponents('@reggi/click-to-load')
const getContacts = async (page: number) => {
return [
{ name: 'Agent Smith', email: `void${page}${0}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${1}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${2}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${3}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${4}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${5}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${6}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${7}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${8}@null.org`, id: nanoid(5) },
{ name: 'Agent Smith', email: `void${page}${9}@null.org`, id: nanoid(5) },
]
}
const Rows = partial('/contacts-rows', async (_, ctx) => {
const page = parseInt(new URL(ctx.request.url).searchParams.get('page') || '0')
const contacts = await getContacts(page)
return (
<Fragment>
{contacts.map((contact) => (
<tr>
<td>{contact.name}</td>
<td>{contact.email}</td>
<td>{contact.id}</td>
</tr>
))}
<tr id="replaceMe">
<td colSpan={3}>
<Rows.button.get query={{page: page + 1}} target="#replaceMe" swapOuterHTML>
Load More Agents... <img class="htmx-indicator" src="https://htmx.org/img/bars.svg"/>
</Rows.button.get>
</td>
</tr>
</Fragment>
)
})
export const ClickToLoad = component('/click-to-load', (_props, ctx) => {
const page = parseInt(new URL(ctx.request.url).searchParams.get('page') || '0')
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>ID</th>
</tr>
</thead>
<Rows page={page} />
</table>
)
})
export const nav = (
<Fragment>
<h1>Click to Load Example</h1>
<ul>
<li><ClickToLoad.anchor.href boost>Click to Load Example</ClickToLoad.anchor.href></li>
</ul>
</Fragment>
)
if (!Deno.env.get('NO_SERVE')) {
component('/', () => nav)
await serve()
}
export { routes }