fix - remove profile picture without JS (epicweb-dev#324)

Co-authored-by: Kent C. Dodds <[email protected]>

app/routes/resources+/delete-image.tsx

@@ -1,5 +1,6 @@
 import { parse } from '@conform-to/zod'
-import { json, type DataFunctionArgs } from '@remix-run/node'
+import { json, type DataFunctionArgs, redirect } from '@remix-run/node'
+import { safeRedirect } from 'remix-utils'
 import { z } from 'zod'
 import { requireUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
@@ -8,6 +9,7 @@ export const ROUTE_PATH = '/resources/delete-image'
 
 const DeleteFormSchema = z.object({
 	imageId: z.string(),
+	redirectTo: z.string().optional(),
 })
 
 export async function action({ request }: DataFunctionArgs) {
@@ -29,7 +31,7 @@ export async function action({ request }: DataFunctionArgs) {
 	if (submission.intent !== 'submit') {
 		return json({ status: 'success', submission } as const)
 	}
-	const { imageId } = submission.value
+	const { imageId, redirectTo } = submission.value
 	const image = await prisma.image.findFirst({
 		select: { fileId: true },
 		where: {
@@ -52,5 +54,9 @@ export async function action({ request }: DataFunctionArgs) {
 		where: { fileId: image.fileId },
 	})
 
+	if (redirectTo) {
+		return redirect(safeRedirect(redirectTo))
+	}
+
 	return json({ status: 'success' } as const)
 }

app/routes/settings+/profile.photo.tsx

@@ -225,6 +225,15 @@ export default function PhotoRoute() {
 				action={deleteImageRoute.ROUTE_PATH}
 				onSubmit={() => setNewImageSrc(null)}
 			>
+				<ServerOnly>
+					{() => (
+						<input
+							name="redirectTo"
+							value="/settings/profile/photo"
+							type="hidden"
+						/>
+					)}
+				</ServerOnly>
 				<input name="intent" type="hidden" value="submit" />
 				<input name="imageId" type="hidden" value={data.user?.imageId ?? ''} />
 			</deleteImageFetcher.Form>