eny.space Landingpage
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(signup): replace useActionState with useState/useTransition for React 18

+27 -5
+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
··· 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": {
+1
package.json
··· 31 31 "devDependencies": { 32 32 "@types/node": "20.4.6", 33 33 "@types/react": "18.2.8", 34 + "@types/react-dom": "^18.2.8", 34 35 "tw-animate-css": "^1.4.0", 35 36 "typescript": "5.1.6" 36 37 }