The Best Way to Write React Forms

const { workspaceName, developmentName, developmentOrigin, developmentRPID } =
	parse(
		object({
			// Simplified assertions
			workspaceName: string(),
			developmentName: string(),
			developmentOrigin: string(),
			developmentRPID: string(),
		}),
		{
			workspaceName: formData.get("workspaceName")?.toString(),
			developmentName: formData.get("developmentName")?.toString(),
			developmentOrigin: formData.get("developmentOrigin")?.toString(),
			developmentRPID: formData.get("developmentRPID")?.toString(),
		},
	);

export function EditUsernameForm() {
	const [result, create] = useFormState(editWorkspace, initialState);
 
	return (
		// `validationErrors={}` is the only step needed!
		<Form action={create} validationErrors={result.errors}>
			<TextField
				autoFocus
				label="Name"
				id="username"
				name="username"
				type="text"
				isRequired
			/>
		</Form>
	);
}

/**
 * The initial Action state
 */
export type InitialState = {
	ok: undefined;
	errors: undefined;
};
 
/**
 * Actions should generally return a Promise<ActionResult<T>>.
 * Their `initialState` should be `ActionResult<T>`.
 */
export type ActionResult<T> = InitialState | ErrorResult | SuccessResult<T>;
 
/**
 * Sucessful actions can return JSON of any shape under `data`.
 */
export interface SuccessResult<T> {
	ok: true;
	data: T;
	errors: undefined;
}
 
/**
 * An error response should have a top level `error` string, and then keyed
 * messages depending on what fields errored out.
 */
export interface ErrorData extends Record<string, string> {
	error: string;
}
 
/**
 * An error response shape
 */
export interface ErrorResult {
	ok: false;
	errors: ErrorData;
}

import {
	type ActionResult,
	type ErrorData,
	type ErrorResult,
	type InitialState,
	type SuccessResult,
} from "@/types/actions";
 
/**
 * When using `useFormState`, this should be the initialState value
 */
export const initialState: InitialState = { ok: undefined, errors: undefined };
 
/**
 * Formats and returns a successful action result value
 * @param data The JSON value the action wants to return
 * @returns A formatted successful action result value
 */
export function ok<T>(data: T): SuccessResult<T> {
	return {
		ok: true,
		data,
		errors: undefined,
	};
}
 
/**
 * Formats and returns an unsuccessful action result
 * @param errors An error object keyed of field or an error string
 * @returns A formatted action error value
 */
export function error(errors: ErrorData | string): ErrorResult {
	const result = typeof errors === "string" ? { error: errors } : errors;
 
	return {
		ok: false,
		errors: result,
	};
}
 
export function isError<T>(response: ActionResult<T>): response is ErrorResult {
	return response.ok === false;
}
 
export function isSuccess<T>(
	response: ActionResult<T>,
): response is SuccessResult<T> {
	return response.ok === true;
}

export async function editUsername(
	previousState: ActionResult<void>,
	formData: FormData,
): Promise<ActionResult<{ userId: string }>> {
	const user = await getLoggedInUser();
 
	if (user == null) {
		redirect("/login");
	}
 
	try {
		const { username } = parse(
			object({
				username: string(),
			}),
			{
				username: formData.get("username")?.toString(),
			},
		);
 
		const userId = await editUser({ username });
 
		return ok({ userId });
	} catch (err) {
		// Next.js redirects and 404s throw errors we don't want to intercept
		if (isRedirectError(error) || isNotFoundError(error)) {
			throw err;
		}
 
		console.error(err);
		return error(err.message);
	}
}

const result = await editUsername(data);
 
if (result.ok === true) {
	// Fully type safe!
	router.push(`/profiles/${result.userId}`);
} else {
	setErrors(result.errors);
}