Skip to content

Commit 0892137

Browse files
flybayerflybayer
authored
🎉 Add full working CRUD actions to pages generator! + fix RPC b… (#214)
minor
1 parent 797060c commit 0892137

File tree

5 files changed

+198
-51
lines changed

5 files changed

+198
-51
lines changed

‎packages/cli/templates/page/__id__.tsx‎

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,59 @@
1-
import {Head} from '@blitzjs/core'
1+
import {Suspense} from 'react'
2+
import {Head, Link, useRouter, useQuery} from 'blitz'
3+
import get<%= ModelName %> from 'app/<%= modelNames %>/queries/get<%= ModelName %>'
4+
import delete<%= ModelName %> from 'app/<%= modelNames %>/mutations/delete<%= ModelName %>'
25

3-
const Show<%= ModelName %>Page = () => (
4-
<div className="container">
5-
<Head>
6-
<title><%= ModelName %></title>
7-
<link rel="icon" href="/favicon.ico" />
8-
</Head>
96

10-
<main>
11-
<h1>Place the detail view for a single <%= ModelName %> here</h1>
12-
</main>
13-
</div>
14-
)
7+
export const <%= ModelName %> = () => {
8+
const router = useRouter()
9+
const id = parseInt(router?.query.id as string)
10+
const [<%= modelName %>] = useQuery(get<%= ModelName %>, {where: {id}})
11+
12+
return (
13+
<div>
14+
<h1><%= ModelName %> {<%= modelName %>.id}</h1>
15+
<pre>
16+
{JSON.stringify(<%= modelName %>)}
17+
</pre>
18+
19+
<Link href="/<%= modelNames %>/[id]/edit" as={`/<%= modelNames %>/${<%= modelName %>.id}/edit`}>
20+
<a>Edit</a>
21+
</Link>
22+
23+
<button type="button" onClick={async () => {
24+
if (confirm("This will be deleted")) {
25+
await delete<%= ModelName %>({where: {id: <%= modelName %>.id}})
26+
router.push('/<%= modelNames %>')
27+
}
28+
}}>
29+
Delete
30+
</button>
31+
</div>
32+
)
33+
}
34+
35+
const Show<%= ModelName %>Page = () => {
36+
return (
37+
<div className="container">
38+
<Head>
39+
<title><%= ModelName %></title>
40+
<link rel="icon" href="/favicon.ico" />
41+
</Head>
42+
43+
<main>
44+
<p>
45+
<Link href="/<%= modelNames %>">
46+
<a><%= ModelNames %></a>
47+
</Link>
48+
</p>
49+
50+
<Suspense fallback={<div>Loading...</div>}>
51+
<<%= ModelName %> />
52+
</Suspense>
53+
</main>
54+
</div>
55+
)
56+
}
1557

1658
export default Show<%= ModelName %>Page
59+

‎packages/cli/templates/page/__id__/edit.tsx‎

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,62 @@
1-
import {Head} from '@blitzjs/core'
1+
import {Suspense} from 'react'
2+
import {Head, Link, useRouter, useQuery} from 'blitz'
3+
import get<%= ModelName %> from 'app/<%= modelNames %>/queries/get<%= ModelName %>'
4+
import update<%= ModelName %> from 'app/<%= modelNames %>/mutations/update<%= ModelName %>'
25

3-
const Edit<%= ModelName %>Page = () => (
4-
<div className="container">
5-
<Head>
6-
<title>Edit <%= ModelName %></title>
7-
<link rel="icon" href="/favicon.ico" />
8-
</Head>
6+
export const Edit<%= ModelName %> = () => {
7+
const router = useRouter()
8+
const id = parseInt(router?.query.id as string)
9+
const [<%= modelName %>] = useQuery(get<%= ModelName %>, {where: {id}})
910

10-
<main>
11-
<h1>Place the UI for editing a <%= ModelName %> here</h1>
12-
</main>
13-
</div>
14-
)
11+
return (
12+
<div>
13+
<h1>Edit <%= ModelName %> {<%= modelName %>.id}</h1>
14+
<pre>
15+
{JSON.stringify(<%= modelName %>)}
16+
</pre>
17+
18+
<form onSubmit={async (event) => {
19+
event.preventDefault()
20+
try {
21+
const updated = await update<%= ModelName %>({
22+
where: {id: <%= modelName %>.id},
23+
data: {name: 'MyNewName'},
24+
})
25+
alert('Success!' + JSON.stringify(updated))
26+
router.push('/<%= modelNames %>/[id]', `/<%= modelNames %>/${updated.id}`)
27+
} catch (error) {
28+
alert('Error creating <%= modelName %> ' + JSON.stringify(error, null, 2))
29+
}
30+
}}>
31+
<div>Put your form fields here</div>
32+
<button>Submit</button>
33+
</form>
34+
</div>
35+
)
36+
}
37+
38+
const Edit<%= ModelName %>Page = () => {
39+
return (
40+
<div className="container">
41+
<Head>
42+
<title>Edit <%= ModelName %></title>
43+
<link rel="icon" href="/favicon.ico" />
44+
</Head>
45+
46+
<main>
47+
<Suspense fallback={<div>Loading...</div>}>
48+
<Edit<%= ModelName %> />
49+
</Suspense>
50+
51+
<p>
52+
<Link href="/<%= modelNames %>">
53+
<a><%= ModelNames %></a>
54+
</Link>
55+
</p>
56+
</main>
57+
</div>
58+
)
59+
}
1560

1661
export default Edit<%= ModelName %>Page
62+

‎packages/cli/templates/page/index.tsx‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,49 @@
1-
import {Head} from '@blitzjs/core'
1+
import {Suspense} from 'react'
2+
import {Head, Link, useQuery} from 'blitz'
3+
import get<%= ModelNames %> from 'app/<%= modelNames %>/queries/get<%= ModelNames %>'
24

3-
const <%= ModelNames %>Page = () => (
4-
<div className="container">
5-
<Head>
6-
<title><%= ModelNames %></title>
7-
<link rel="icon" href="/favicon.ico" />
8-
</Head>
5+
export const <%= ModelNames %>List = () => {
6+
const [<%= modelNames %>] = useQuery(get<%= ModelNames %>)
97

10-
<main>
11-
<h1>Place the listing view for multiple <%= ModelNames %> here</h1>
12-
</main>
13-
</div>
14-
)
8+
return (
9+
<ul>
10+
{<%= modelNames %>.map((<%= modelName %>) => (
11+
<li key={<%= modelName %>.id}>
12+
<Link href="/<%= modelNames %>/[id]" as={`/<%= modelNames %>/${<%= modelName %>.id}`}>
13+
<a>{<%= modelName %>.name}</a>
14+
</Link>
15+
</li>
16+
))}
17+
</ul>
18+
)
19+
}
20+
21+
const <%= ModelNames %>Page = () => {
22+
return (
23+
<div className="container">
24+
<Head>
25+
<title><%= ModelNames %></title>
26+
<link rel="icon" href="/favicon.ico" />
27+
</Head>
28+
29+
<main>
30+
<h1><%= ModelNames %></h1>
31+
32+
<p>
33+
<Link href="/<%= modelNames %>/new">
34+
<a>Create <%= ModelName %></a>
35+
</Link>
36+
</p>
37+
38+
<Suspense fallback={<div>Loading...</div>}>
39+
<<%= ModelNames %>List />
40+
</Suspense>
41+
</main>
42+
</div>
43+
)
44+
}
1545

1646
export default <%= ModelNames %>Page
47+
48+
49+

‎packages/cli/templates/page/new.tsx‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,41 @@
1-
import {Head} from '@blitzjs/core'
1+
import {Head, Link, useRouter} from 'blitz'
2+
import create<%= ModelName %> from 'app/<%= modelNames %>/mutations/create<%= ModelName %>'
23

3-
const New<%= ModelName %>Page = () => (
4-
<div className="container">
5-
<Head>
6-
<title>New <%= ModelName %></title>
7-
<link rel="icon" href="/favicon.ico" />
8-
</Head>
4+
const New<%= ModelName %>Page = () => {
5+
const router = useRouter()
6+
return (
7+
<div className="container">
8+
<Head>
9+
<title>New <%= ModelName %></title>
10+
<link rel="icon" href="/favicon.ico" />
11+
</Head>
912

10-
<main>
11-
<h1>Place the form to create a new <%= ModelName %> here</h1>
12-
</main>
13-
</div>
14-
)
13+
<main>
14+
<h1>Create New <%= ModelName %> </h1>
15+
16+
<form onSubmit={async (event) => {
17+
event.preventDefault()
18+
try {
19+
const <%= modelName %> = await create<%= ModelName %>({data: {name: 'MyName'}})
20+
alert('Success!' + JSON.stringify(<%= modelName %>))
21+
router.push('/<%= modelNames %>/[id]', `/<%= modelNames %>/${<%= modelName %>.id}`)
22+
} catch (error) {
23+
alert('Error creating <%= modelName %> ' + JSON.stringify(error, null, 2))
24+
}
25+
}}>
26+
<div>Put your form fields here</div>
27+
<button>Submit</button>
28+
</form>
29+
30+
<p>
31+
<Link href="/<%= modelNames %>">
32+
<a><%= ModelNames %></a>
33+
</Link>
34+
</p>
35+
</main>
36+
</div>
37+
)
38+
}
1539

1640
export default New<%= ModelName %>Page
41+

‎packages/core/src/rpc.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export async function rpc(url: string, params: any) {
1414

1515
const json = await result.json()
1616

17-
if (json.result) {
18-
return json.result
19-
} else {
17+
if (json.error) {
2018
throw deserializeError(json.error)
19+
} else {
20+
return json.result
2121
}
2222
}
2323

0 commit comments

Comments
 (0)