Widget form submitting, use non-deprecated parsing function

app/features/user-page/actions/u.$identifier.edit-widgets.server.ts

@@ -3,20 +3,24 @@ import { requireUser } from "~/features/auth/core/user.server";
 import type { StoredWidget } from "~/features/user-page/core/widgets/types";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import { widgetsEditSchema } from "~/features/user-page/user-page-schemas";
-import { parseRequestPayload } from "~/utils/remix.server";
+import { parseFormData } from "~/form/parse.server";
 import { userPage } from "~/utils/urls";
 
 export const action = async ({ request }: { request: Request }) => {
 	const user = requireUser();
 
-	const payload = await parseRequestPayload({
+	const result = await parseFormData({
 		request,
 		schema: widgetsEditSchema,
 	});
 
+	if (!result.success) {
+		return { fieldErrors: result.fieldErrors };
+	}
+
 	await UserRepository.upsertWidgets(
 		user.id,
-		payload.widgets as StoredWidget[],
+		result.data.widgets as StoredWidget[],
 	);
 
 	return redirect(userPage(user));

app/features/user-page/routes/u.$identifier.edit-widgets.tsx

@@ -16,7 +16,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Form, useLoaderData } from "react-router";
+import { useFetcher, useLoaderData } from "react-router";
 import { SendouButton } from "~/components/elements/Button";
 import { Input } from "~/components/Input";
 import { MainSlotIcon } from "~/components/icons/MainSlot";
@@ -42,6 +42,7 @@ export default function EditWidgetsPage() {
 	const { t } = useTranslation(["user", "common"]);
 	const data = useLoaderData<typeof loader>();
 	const isMounted = useIsMounted();
+	const fetcher = useFetcher();
 
 	const [selectedWidgets, setSelectedWidgets] = useState<
 		Array<Tables["UserWidget"]["widget"]>
@@ -116,6 +117,13 @@ export default function EditWidgetsPage() {
 		}
 	};
 
+	const handleSubmit = () => {
+		fetcher.submit(
+			{ widgets: selectedWidgets } as unknown as Record<string, string>,
+			{ method: "post", encType: "application/json" },
+		);
+	};
+
 	const handleSettingsChange = (widgetId: string, settings: any) => {
 		setSelectedWidgets(
 			selectedWidgets.map((w) => (w.id === widgetId ? { ...w, settings } : w)),
@@ -135,19 +143,13 @@ export default function EditWidgetsPage() {
 			<header className={styles.header}>
 				<h1>{t("user:widgets.editTitle")}</h1>
 				<div className={styles.actions}>
-					<SendouButton type="submit" form="widget-form">
+					<SendouButton onPress={handleSubmit}>
 						{t("common:actions.save")}
 					</SendouButton>
 				</div>
 			</header>
 
-			<Form method="post" id="widget-form" className={styles.content}>
-				<input
-					type="hidden"
-					name="widgets"
-					value={JSON.stringify(selectedWidgets)}
-				/>
-
+			<div className={styles.content}>
 				<div className={styles.grid}>
 					<section className={styles.selected}>
 						<DndContext
@@ -176,7 +178,7 @@ export default function EditWidgetsPage() {
 						/>
 					</section>
 				</div>
-			</Form>
+			</div>
 		</div>
 	);
 }