eny.space Landingpage
fix(signup): replace useActionState with useState/useTransition for React 18
+27
-5
+15
-5
app/signup/signup-form.tsx
+15
-5
app/signup/signup-form.tsx
···
1
1
"use client";
2
2
3
-
import { useActionState } from "react";
3
+
import { useState, useTransition } from "react";
4
4
import Link from "next/link";
5
5
import { signUp } from "@/actions/auth";
6
6
import { Button } from "@/actions/components/ui/button";
···
21
21
}
22
22
23
23
export function SignUpForm({ next, loginHref }: SignUpFormProps) {
24
-
const [state, action, pending] = useActionState(signUp, null);
24
+
const [state, setState] = useState<{ error?: string; success?: boolean } | null>(null);
25
+
const [isPending, startTransition] = useTransition();
26
+
27
+
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
28
+
e.preventDefault();
29
+
const formData = new FormData(e.currentTarget);
30
+
startTransition(async () => {
31
+
const result = await signUp(null, formData);
32
+
setState(result);
33
+
});
34
+
}
25
35
26
36
if (state?.success) {
27
37
return (
···
49
59
</CardDescription>
50
60
</CardHeader>
51
61
<CardContent>
52
-
<form action={action} className="space-y-4">
62
+
<form onSubmit={handleSubmit} className="space-y-4">
53
63
<input type="hidden" name="next" value={next} />
54
64
{state?.error && (
55
65
<p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
···
77
87
required
78
88
/>
79
89
</div>
80
-
<Button type="submit" className="w-full" disabled={pending}>
81
-
{pending ? "Creating account…" : "Sign Up"}
90
+
<Button type="submit" className="w-full" disabled={isPending}>
91
+
{isPending ? "Creating account…" : "Sign Up"}
82
92
</Button>
83
93
</form>
84
94
</CardContent>
+11
package-lock.json
+11
package-lock.json
···
30
30
"devDependencies": {
31
31
"@types/node": "20.4.6",
32
32
"@types/react": "18.2.8",
33
+
"@types/react-dom": "^18.2.8",
33
34
"tw-animate-css": "^1.4.0",
34
35
"typescript": "5.1.6"
35
36
}
···
2149
2150
"@types/prop-types": "*",
2150
2151
"@types/scheduler": "*",
2151
2152
"csstype": "^3.0.2"
2153
+
}
2154
+
},
2155
+
"node_modules/@types/react-dom": {
2156
+
"version": "18.2.8",
2157
+
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.8.tgz",
2158
+
"integrity": "sha512-bAIvO5lN/U8sPGvs1Xm61rlRHHaq5rp5N3kp9C+NJ/Q41P8iqjkXSu0+/qu8POsjH9pNWb0OYabFez7taP7omw==",
2159
+
"devOptional": true,
2160
+
"license": "MIT",
2161
+
"dependencies": {
2162
+
"@types/react": "*"
2152
2163
}
2153
2164
},
2154
2165
"node_modules/@types/scheduler": {