0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

feat(test): add useActionState to actions example

This commit is contained in:
bholmesdev 2024-04-24 16:46:22 -04:00
parent 464e4bfeaf
commit ae69456c2f
3 changed files with 22 additions and 30 deletions

View file

@ -21,8 +21,8 @@
"@types/react": "^18.2.79", "@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25", "@types/react-dom": "^18.2.25",
"astro": "^4.6.3", "astro": "^4.6.3",
"react": "18.3.0-canary-670811593-20240322", "react": "19.0.0-canary-cb151849e1-20240424",
"react-dom": "18.3.0-canary-670811593-20240322", "react-dom": "19.0.0-canary-cb151849e1-20240424",
"typescript": "^5.4.5" "typescript": "^5.4.5"
} }
} }

View file

@ -1,30 +1,22 @@
// @ts-expect-error useFormStatus and useFormState are untyped // @ts-expect-error useFormStatus and useActionState are untyped
import { useFormStatus, useFormState } from "react-dom"; import { useActionState } from "react";
import { actions } from "astro:actions"; import { actions } from "astro:actions";
export function Like({ postId, initial }: { postId: string; initial: number }) { export function Like({ postId, initial }: { postId: string; initial: number }) {
const [state, actionName] = useFormState( const [state, actionName, pending] = useActionState(
async () => { async () => {
const { likes } = await actions.blog.like({ postId }); const { likes } = await actions.blog.like({ postId });
return { likes }; return { likes };
}, },
{ {
likes: initial, likes: initial,
} },
); );
return ( return (
<form action={actionName}> <form action={actionName}>
<Button likes={state.likes} /> <button disabled={pending} type="submit">
{state.likes}
</button>
</form> </form>
); );
} }
function Button({ likes }: { likes: number }) {
const { pending } = useFormStatus();
return (
<button disabled={pending} type="submit">
{likes}
</button>
);
}

View file

@ -556,11 +556,11 @@ importers:
specifier: ^4.6.3 specifier: ^4.6.3
version: link:../../../../astro version: link:../../../../astro
react: react:
specifier: 18.3.0-canary-670811593-20240322 specifier: 19.0.0-canary-cb151849e1-20240424
version: 18.3.0-canary-670811593-20240322 version: 19.0.0-canary-cb151849e1-20240424
react-dom: react-dom:
specifier: 18.3.0-canary-670811593-20240322 specifier: 19.0.0-canary-cb151849e1-20240424
version: 18.3.0-canary-670811593-20240322(react@18.3.0-canary-670811593-20240322) version: 19.0.0-canary-cb151849e1-20240424(react@19.0.0-canary-cb151849e1-20240424)
typescript: typescript:
specifier: ^5.4.5 specifier: ^5.4.5
version: 5.4.5 version: 5.4.5
@ -14568,16 +14568,16 @@ packages:
react: 18.2.0 react: 18.2.0
scheduler: 0.23.0 scheduler: 0.23.0
/react-dom@18.3.0-canary-670811593-20240322(react@18.3.0-canary-670811593-20240322): /react-dom@19.0.0-canary-cb151849e1-20240424(react@19.0.0-canary-cb151849e1-20240424):
resolution: {integrity: sha512-AHxCnyDzZueXIHY4WA2Uba1yaL7/vbjhO3D3TWPQeruKD5MwgD0/xExZi0T104gBr6Thv6MEsLSxFjBAHhHKKg==} resolution: {integrity: sha512-J20FmrVUSpjzVXKPuK4q6Gj/aUufdJ3VlHH53zMmWLLH0uXG39ISl2p3iyXQeeGJHz/nW5YQ10s9UEoIp2eDwQ==}
peerDependencies: peerDependencies:
react: 18.3.0-canary-670811593-20240322 react: 19.0.0-canary-cb151849e1-20240424
peerDependenciesMeta: peerDependenciesMeta:
react: react:
optional: true optional: true
dependencies: dependencies:
react: 18.3.0-canary-670811593-20240322 react: 19.0.0-canary-cb151849e1-20240424
scheduler: 0.24.0-canary-670811593-20240322 scheduler: 0.25.0-canary-cb151849e1-20240424
dev: false dev: false
/react-is@18.2.0: /react-is@18.2.0:
@ -14595,8 +14595,8 @@ packages:
dependencies: dependencies:
loose-envify: 1.4.0 loose-envify: 1.4.0
/react@18.3.0-canary-670811593-20240322: /react@19.0.0-canary-cb151849e1-20240424:
resolution: {integrity: sha512-EI6+q3tOT+0z4OkB2sz842Ra/n/yz7b3jOJhSK1HQwi4Ng29VJzLGngWmSuxQ94YfdE3EBhpUKDfgNgzoKM9Vg==} resolution: {integrity: sha512-sX0ec4kqR1z2PAMdCo0cztaYaoGbpy2EoS5hAzUsBekB9FFnGWP4jbYK7GFURTIh5EK9ny1Mmgkb1hiyVYkj4Q==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: false dev: false
@ -15104,8 +15104,8 @@ packages:
dependencies: dependencies:
loose-envify: 1.4.0 loose-envify: 1.4.0
/scheduler@0.24.0-canary-670811593-20240322: /scheduler@0.25.0-canary-cb151849e1-20240424:
resolution: {integrity: sha512-IGX6Fq969h1L0X7jV0sJ/EdI4fr+mRetbBNJl55nn+/RsCuQSVwgKnZG6Q3NByixDNbkRI8nRmWuhOm8NQowGQ==} resolution: {integrity: sha512-Cn5wjkCw+Md7mnE1xWmvmVRsvMvnxRhCQGOvoOUR0u78d2aZfyXxXK05BsKztsHiYg4w0nSOFX7822/XcxnRxg==}
dev: false dev: false
/scslre@0.3.0: /scslre@0.3.0: