N-FIN-47: add an option to delete account and data (#59)

Resolves #47

src/app/account/page.tsx

@@ -5,11 +5,11 @@ import { redirect } from 'next/navigation';
 import signOut from '@/lib/actions/signOut';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import SignOutForm from '@/components/form/signOutForm';
 import { URL_SIGN_IN } from '@/lib/constants';
-import GenerateSampleDataForm from '@/components/form/generateSampleDataForm';
 import generateSampleData from '@/lib/actions/generateSampleData';
 import { prismaClient } from '@/prisma';
+import { ServerActionTrigger } from '@/components/form/serverActionTrigger';
+import accountDelete from '@/lib/actions/accountDelete';
 
 export default async function AccountPage() {
 
@@ -81,18 +81,32 @@ export default async function AccountPage() {
                         </div>
                     </div>
                 </CardContent>
+                <CardFooter className="w-full grid gap-4 grid-cols-1 md:grid-cols-2">
+                    <ServerActionTrigger
+                        action={accountDelete}
+                        dialog={{
+                            title: 'Delete Account',
+                            description: 'Are you sure you want to delete your account? This action is irreversible.',
+                            actionText: 'Delete Account',
+                        }}
+                        variant="outline">
+                        Delete Account
+                    </ServerActionTrigger>
+                    <ServerActionTrigger
+                        action={signOut}>
+                        Sign Out
+                    </ServerActionTrigger>
                     {
-                    process.env.NODE_ENV === 'development' ? (
-                        <CardFooter className="grid gap-4 grid-cols-1 md:grid-cols-2">
-                            <GenerateSampleDataForm onSubmit={generateSampleData}/>
-                            <SignOutForm onSubmit={signOut}/>
-                        </CardFooter>
-                    ) : (
-                        <CardFooter>
-                            <SignOutForm onSubmit={signOut}/>
-                        </CardFooter>
+                        process.env.NODE_ENV === 'development' && (
+                            <ServerActionTrigger
+                                variant="outline"
+                                className="col-span-2"
+                                action={generateSampleData}>
+                                Generate sample data
+                            </ServerActionTrigger>
                         )
                     }
+                </CardFooter>
             </Card>
             <div className="flex w-full items-center justify-between max-w-md mt-2 text-neutral-600">
                 <p>Version {process.env.appVersion}</p>

src/components/form/generateSampleDataForm.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { sonnerContent } from '@/components/ui/sonner';
-import { ActionResponse } from '@/lib/types/actionResponse';
-
-export default function GenerateSampleDataForm({onSubmit}: { onSubmit: () => Promise<ActionResponse> }) {
-
-    const router = useRouter();
-
-    const handleSubmit = async () => {
-        const response = await onSubmit();
-        toast(sonnerContent(response));
-        router.refresh();
-    };
-
-    return (
-        <Button className="w-full" variant="outline" onClick={handleSubmit}>Generate sample data</Button>
-    );
-}

src/components/form/serverActionTrigger.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { buttonVariants } from '@/components/ui/button';
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+import type { VariantProps } from 'class-variance-authority';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+
+export interface ConfirmationDialogProps {
+    title: string;
+    description?: string;
+    actionText?: string;
+}
+
+export interface ButtonWithActionProps<T = any>
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    dialog?: ConfirmationDialogProps;
+    action: () => Promise<ActionResponse<T>>;
+    callback?: (data: T) => void;
+}
+
+const ServerActionTrigger = React.forwardRef<HTMLButtonElement, ButtonWithActionProps>(
+    ({className, variant, size, asChild = false, ...props}, ref) => {
+
+        const router = useRouter();
+
+        const Comp = asChild ? Slot : 'button';
+
+        const handleSubmit = async () => {
+            const response = await props.action();
+            toast(sonnerContent(response));
+            if (props.callback) {
+                props.callback(response);
+            }
+            if (response.redirect) {
+                router.push(response.redirect);
+            }
+        };
+
+        return props.dialog ? (
+            <AlertDialog>
+                <AlertDialogTrigger asChild>
+                    <Comp
+                        className={cn(buttonVariants({variant, size, className}))}
+                        {...{...props, action: undefined, callback: undefined}}
+                        ref={ref}
+                    />
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{props.dialog.title}</AlertDialogTitle>
+                        {props.dialog?.description && (
+                            <AlertDialogDescription>
+                                {props.dialog.description}
+                            </AlertDialogDescription>
+                        )}
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            Cancel
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleSubmit}>
+                            {props.dialog.actionText || 'Confirm'}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        ) : (
+            <Comp
+                className={cn(buttonVariants({variant, size, className}))}
+                ref={ref}
+                onClick={handleSubmit}
+                {...props}
+            />
+        );
+    },
+);
+ServerActionTrigger.displayName = 'ServerActionTrigger';
+
+export { ServerActionTrigger };

src/components/form/signOutForm.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { ActionResponse } from '@/lib/types/actionResponse';
-import { Button } from '@/components/ui/button';
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { sonnerContent } from '@/components/ui/sonner';
-
-export default function SignOutForm({onSubmit}: { onSubmit: () => Promise<ActionResponse> }) {
-
-    const router = useRouter();
-
-    const handleSignOut = async () => {
-        const response = await onSubmit();
-        toast(sonnerContent(response));
-        if (response.redirect) {
-            router.push(response.redirect);
-        }
-    };
-
-    return (
-        <Button className="w-full" onClick={handleSignOut}>Sign out</Button>
-    );
-}

src/lib/actions/accountDelete.ts

@@ -0,0 +1,58 @@
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { URL_SIGN_IN } from '@/lib/constants';
+import { getUser, lucia } from '@/auth';
+import { prismaClient } from '@/prisma';
+import { cookies } from 'next/headers';
+
+export default async function accountDelete(): Promise<ActionResponse> {
+    'use server';
+
+    const user = await getUser();
+
+    if (!user) {
+        return {
+            type: 'error',
+            message: 'You aren\'t signed in.',
+            redirect: URL_SIGN_IN,
+        };
+    }
+
+    await prismaClient.payment.deleteMany({
+        where: {
+            userId: user.id,
+        },
+    });
+
+    await prismaClient.entity.deleteMany({
+        where: {
+            userId: user.id,
+        },
+    });
+
+    await prismaClient.category.deleteMany({
+        where: {
+            userId: user.id,
+        },
+    });
+
+    await prismaClient.session.deleteMany({
+        where: {
+            userId: user.id,
+        },
+    });
+
+    await prismaClient.user.delete({
+        where: {
+            id: user.id,
+        },
+    });
+
+    const sessionCookie = lucia.createBlankSessionCookie();
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+
+    return {
+        type: 'success',
+        message: 'Your account was removed.',
+        redirect: URL_SIGN_IN,
+    };
+}

src/lib/types/actionResponse.ts

@@ -1,5 +1,6 @@
-export interface ActionResponse {
+export interface ActionResponse<T = any> {
     type: 'success' | 'info' | 'warning' | 'error';
     message: string;
     redirect?: string;
+    data?: T;
 }