From 218aeb31da497c13bef730c80141e9a8429d9bdd Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sat, 14 May 2022 19:54:04 +0200
Subject: [PATCH] got account deletion working

---
 .../components/account/danger-zone.tsx        | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/features/settings/components/account/danger-zone.tsx b/app/features/settings/components/account/danger-zone.tsx
index 9c843d0..c8fc24e 100644
--- a/app/features/settings/components/account/danger-zone.tsx
+++ b/app/features/settings/components/account/danger-zone.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { useFetcher, useSubmit, useTransition } from "@remix-run/react";
+import { Form, useTransition } from "@remix-run/react";
 import clsx from "clsx";
 
 import Button from "../button";
@@ -12,9 +12,6 @@ export default function DangerZone() {
 	const isDeletingUser = isCurrentFormTransition && transition.state === "submitting";
 	const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
 	const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
-	const fetcher = useFetcher();
-	const submit = useSubmit();
-	// TODO
 
 	const closeModal = () => {
 		if (isDeletingUser) {
@@ -56,19 +53,22 @@ export default function DangerZone() {
 					</div>
 				</div>
 				<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
-					<button
-						type="button"
-						className={clsx(
-							"transition-colors duration-150 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-3 md:w-auto md:text-sm",
-							{
-								"bg-red-400 cursor-not-allowed": isDeletingUser,
-								"bg-red-600 hover:bg-red-700": !isDeletingUser,
-							},
-						)}
-						disabled={isDeletingUser}
-					>
-						Delete my account
-					</button>
+					<Form method="post">
+						<button
+							type="submit"
+							className={clsx(
+								"transition-colors duration-150 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-3 md:w-auto md:text-sm",
+								{
+									"bg-red-400 cursor-not-allowed": isDeletingUser,
+									"bg-red-600 hover:bg-red-700": !isDeletingUser,
+								},
+							)}
+							disabled={isDeletingUser}
+						>
+							Delete my account
+						</button>
+						<input type="hidden" name="_action" value="deleteUser" />
+					</Form>
 					<button
 						ref={modalCancelButtonRef}
 						type="button"