mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

got account deletion working

Browse Source
This commit is contained in:
m5r 2022-05-14 19:54:04 +02:00
parent 315ffb61ac
commit 218aeb31da
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/features/settings/components/account/danger-zone.tsx
View File

@ -1,5 +1,5 @@
import { useRef, useState } from "react"; 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 clsx from "clsx";
import Button from "../button"; import Button from "../button";
@ -12,9 +12,6 @@ export default function DangerZone() {
const isDeletingUser = isCurrentFormTransition && transition.state === "submitting"; const isDeletingUser = isCurrentFormTransition && transition.state === "submitting";
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false); const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
const modalCancelButtonRef = useRef<HTMLButtonElement>(null); const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
const fetcher = useFetcher();
const submit = useSubmit();
// TODO
const closeModal = () => { const closeModal = () => {
if (isDeletingUser) { if (isDeletingUser) {
@ -56,19 +53,22 @@ export default function DangerZone() {
</div> </div>
</div> </div>
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse"> <div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
<button <Form method="post">
type="button" <button
className={clsx( type="submit"
"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", 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, "bg-red-400 cursor-not-allowed": isDeletingUser,
}, "bg-red-600 hover:bg-red-700": !isDeletingUser,
)} },
disabled={isDeletingUser} )}
> disabled={isDeletingUser}
Delete my account >
</button> Delete my account
</button>
<input type="hidden" name="_action" value="deleteUser" />
</Form>
<button <button
ref={modalCancelButtonRef} ref={modalCancelButtonRef}
type="button" type="button"