Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

feat: getActionState utility

Browse source
This commit is contained in:
bholmesdev 2024-05-16 11:56:51 -04:00
parent ffd14b90ce
commit 36319faf9c
2 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/astro/e2e/fixtures/actions-blog/src/actions/index.ts
View file

@ -1,6 +1,7 @@
import { db, Comment, Likes, eq, sql } from 'astro:db';
import { ActionError, defineAction, z } from 'astro:actions';
import { ActionError, defineAction, getApiContext, z } from 'astro:actions';
import { getCollection } from 'astro:content';
import { getActionState } from '@astrojs/react/actions';
export const server = {
blog: {
@ -10,10 +11,13 @@ export const server = {
handler: async ({ postId }) => {
await new Promise((r) => setTimeout(r, 200));
const context = getApiContext();
const state = await getActionState<number>(context);
const { likes } = await db
.update(Likes)
.set({
likes: sql`likes + 1`,
likes: state + 1,
})
.where(eq(Likes.postId, postId))
.returning()

31
packages/integrations/react/src/actions.ts
View file

@ -1,3 +1,5 @@
import { AstroError } from 'astro/errors';
type FormFn<T> = (formData: FormData) => Promise<T>;
export function withState<T>(action: FormFn<T>) {
@ -18,6 +20,35 @@ export function withState<T>(action: FormFn<T>) {
return callback;
}
export async function getActionState<T>({ request }: { request: Request }): Promise<T> {
const contentType = request.headers.get('Content-Type');
if (!contentType || !isFormRequest(contentType)) {
throw new AstroError(
'`getActionState()` must be called with a form request.',
"Ensure your action uses the `accept: 'form'` option."
);
}
const formData = await request.clone().formData();
const state = formData.get('_astroActionState')?.toString();
if (!state) {
throw new AstroError(
'`getActionState()` could not find a state object.',
'Ensure your action was passed to `useActionState()` with the `withState()` wrapper.'
);
}
return JSON.parse(state) as T;
}
const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
function isFormRequest(contentType: string) {
// Split off parameters like charset or boundary
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
const type = contentType.split(';')[0].toLowerCase();
return formContentTypes.some((t) => type === t);
}
function injectStateIntoFormActionData<R extends [this: unknown, state: unknown, ...unknown[]]>(
fn: (...args: R) => unknown,
...args: R