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:
parent
464e4bfeaf
commit
ae69456c2f
3 changed files with 22 additions and 30 deletions
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in a new issue