Skip to content

Commit 73e1554

Browse files
thomasbuildsthomasbuilds
authored
Refactor useSubmission example for clarity
1 parent b94a00a commit 73e1554

1 file changed

Lines changed: 77 additions & 87 deletions

File tree

‎src/routes/solid-router/reference/data-apis/use-submission.mdx‎

Lines changed: 77 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,12 @@ import { useSubmission } from "@solidjs/router";
1313
function Component() {
1414
const submission = useSubmission(postNameAction);
1515

16-
return (
17-
<form action={postNameAction} method="post">
18-
<input type="text" name="name" />
19-
<button type="submit">
20-
{submission.pending ? "Adding..." : "Add"}
21-
</button>
22-
</form>
23-
)
16+
return (
17+
<form action={postNameAction} method="post">
18+
<input type="text" name="name" />
19+
<button type="submit">{submission.pending ? "Adding..." : "Add"}</button>
20+
</form>
21+
);
2422
}
2523
```
2624

@@ -34,23 +32,21 @@ As an optional second parameter, the `useSubmission` helper can receive a filter
3432
The filter receives the submitted data as a parameter and should return a boolean value.
3533
The action below will only submit if the name is "solid".
3634

37-
```tsx title="component.tsx" {4-8}
35+
```tsx title="component.tsx" {4-7}
3836
import { useSubmission } from "@solidjs/router";
3937

4038
function Component() {
41-
const submission = useSubmission(postNameAction, ([formData]) => {
42-
const name = formData.get("name") ?? "";
43-
return name === "solid";
44-
});
45-
46-
return (
47-
<form action={postNameAction} method="post">
48-
<input type="text" name="name" />
49-
<button type="submit">
50-
{submission.pending ? "Adding..." : "Add"}
51-
</button>
52-
</form>
53-
)
39+
const submission = useSubmission(
40+
postNameAction,
41+
([formData]) => formData.get("name") === "solid"
42+
);
43+
44+
return (
45+
<form action={postNameAction} method="post">
46+
<input type="text" name="name" />
47+
<button type="submit">{submission.pending ? "Adding..." : "Add"}</button>
48+
</form>
49+
);
5450
}
5551
```
5652

@@ -60,61 +56,59 @@ When the form is submitted, the `submission` object will be updated with the new
6056
This allows you to provide feedback to the user that the action is in progress.
6157
Once the action is complete, the `pending` property will be set to `false` and the `result` property will be updated with final value.
6258

63-
```tsx tab title="TypeScript" {6,10-12}
64-
// component.tsx
59+
```tsx tab title="TypeScript" {5,9-11}
6560
import { Show } from "solid-js";
6661
import { useSubmission } from "@solidjs/router";
6762

6863
function Component() {
6964
const submission = useSubmission(postNameAction);
7065

71-
return (
72-
<>
73-
<Show when={submission.input?.[0].get("name")} keyed>
74-
{(name) => <div>Optimistic: {name() as string}</div>}
75-
</Show>
76-
77-
<Show when={submission.result?.name} keyed>
78-
{(name) => <div>Result: {name()}</div>}
79-
</Show>
80-
81-
<form method="post" action={sendData}>
82-
<input type="text" name="name" required />
83-
<button type="submit" disabled={submission.pending}>
84-
{submission.pending ? "Submitting" : "Submit"}
85-
</button>
86-
</form>
87-
</>
88-
)
66+
return (
67+
<>
68+
<Show when={submission.input?.[0].get("name")} keyed>
69+
{(name) => <div>Optimistic: {name() as string}</div>}
70+
</Show>
71+
72+
<Show when={submission.result?.name} keyed>
73+
{(name) => <div>Result: {name()}</div>}
74+
</Show>
75+
76+
<form method="post" action={sendData}>
77+
<input type="text" name="name" required />
78+
<button type="submit" disabled={submission.pending}>
79+
{submission.pending ? "Submitting" : "Submit"}
80+
</button>
81+
</form>
82+
</>
83+
);
8984
}
9085
```
9186

92-
```tsx tab title="JavaScript" {6,10-12}
93-
// component.jsx
87+
```tsx tab title="JavaScript" {5,9-11}
9488
import { Show } from "solid-js";
9589
import { useSubmission } from "@solidjs/router";
9690

9791
function Component() {
9892
const submission = useSubmission(postNameAction);
9993

100-
return (
101-
<>
102-
<Show when={submission.input?.[0].get("name")} keyed>
103-
{(name) => <div>Optimistic: {name()}</div>}
104-
</Show>
105-
106-
<Show when={submission.result?.name} keyed>
107-
{(name) => <div>Result: {name()}</div>}
108-
</Show>
109-
110-
<form method="post" action={sendData}>
111-
<input type="text" name="name" required />
112-
<button type="submit" disabled={submission.pending}>
113-
{submission.pending ? "Submitting" : "Submit"}
114-
</button>
115-
</form>
116-
</>
117-
)
94+
return (
95+
<>
96+
<Show when={submission.input?.[0].get("name")} keyed>
97+
{(name) => <div>Optimistic: {name()}</div>}
98+
</Show>
99+
100+
<Show when={submission.result?.name} keyed>
101+
{(name) => <div>Result: {name()}</div>}
102+
</Show>
103+
104+
<form method="post" action={sendData}>
105+
<input type="text" name="name" required />
106+
<button type="submit" disabled={submission.pending}>
107+
{submission.pending ? "Submitting" : "Submit"}
108+
</button>
109+
</form>
110+
</>
111+
);
118112
}
119113
```
120114

@@ -125,36 +119,32 @@ This allows you to provide feedback to the user that the action has failed. Addi
125119

126120
At this stage, you can also use the `retry()` method to attempt the action again or the `clear()` to wipe the filled data in the platform.
127121

128-
```tsx title="component.tsx" {12-18}
122+
```tsx title="component.tsx" {12-14}
129123
import { Show } from "solid-js";
130124
import { useSubmission } from "@solidjs/router";
131125

132126
function Component() {
133127
const submission = useSubmission(postNameAction);
134128

135-
return (
136-
<>
137-
<Show when={submission.error} keyed>
138-
{(error) => (
139-
<div>
140-
<p>Error: {error.message}</p>
141-
<button onClick={() => submission.clear()}>
142-
Clear
143-
</button>
144-
<button onClick={async () => submission.retry()}>
145-
Retry
146-
</button>
147-
</div>
148-
)}
149-
</Show>
150-
151-
<form method="post" action={sendData}>
152-
<input type="text" name="name" required />
153-
<button type="submit" disabled={submission.pending}>
154-
{submission.pending ? "Submitting" : "Submit"}
155-
</button>
156-
</form>
157-
</>
158-
)
129+
return (
130+
<>
131+
<Show when={submission.error} keyed>
132+
{(error) => (
133+
<div>
134+
<p>Error: {error.message}</p>
135+
<button onclick={() => submission.clear()}>Clear</button>
136+
<button onclick={async () => submission.retry()}>Retry</button>
137+
</div>
138+
)}
139+
</Show>
140+
141+
<form method="post" action={sendData}>
142+
<input type="text" name="name" required />
143+
<button type="submit" disabled={submission.pending}>
144+
{submission.pending ? "Submitting" : "Submit"}
145+
</button>
146+
</form>
147+
</>
148+
);
159149
}
160150
```

0 commit comments

Comments
 (0)