From c64c5fed35a5de04448ee2891c8301205c7186b4 Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 17:17:57 +0100 Subject: [PATCH 1/6] N-FIN-47: enhance the action response interface The interface got a new property called data which can be typed using generics. --- src/lib/types/actionResponse.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/types/actionResponse.ts b/src/lib/types/actionResponse.ts index 3a436c6..a4787da 100644 --- a/src/lib/types/actionResponse.ts +++ b/src/lib/types/actionResponse.ts @@ -1,5 +1,6 @@ -export interface ActionResponse { +export interface ActionResponse { type: 'success' | 'info' | 'warning' | 'error'; message: string; redirect?: string; + data?: T; } From 410d96a8b859bc37d85bcdb1f6d06150f914153e Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 17:19:05 +0100 Subject: [PATCH 2/6] N-FIN-47: introduce reusable server action trigger component --- src/components/form/serverActionTrigger.tsx | 53 +++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/components/form/serverActionTrigger.tsx diff --git a/src/components/form/serverActionTrigger.tsx b/src/components/form/serverActionTrigger.tsx new file mode 100644 index 0000000..ce5b431 --- /dev/null +++ b/src/components/form/serverActionTrigger.tsx @@ -0,0 +1,53 @@ +'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'; + +export interface ButtonWithActionProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; + action: () => Promise>; + callback?: (data: T) => void; +} + +const ServerActionTrigger = React.forwardRef( + ({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); + } + }; + + // TODO: add optional confirmation dialog + + return ( + + ); + }, +); +ServerActionTrigger.displayName = 'ServerActionTrigger'; + +export { ServerActionTrigger }; From 0e62b7c2fdcbe9c7458713499665c022b1c0ad48 Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 17:20:00 +0100 Subject: [PATCH 3/6] N-FIN-47: replace buttons with new component --- src/app/account/page.tsx | 32 +++++++++++-------- .../form/generateSampleDataForm.tsx | 23 ------------- src/components/form/signOutForm.tsx | 25 --------------- 3 files changed, 18 insertions(+), 62 deletions(-) delete mode 100644 src/components/form/generateSampleDataForm.tsx delete mode 100644 src/components/form/signOutForm.tsx diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index dbec318..d16a9aa 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -5,11 +5,10 @@ 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'; export default async function AccountPage() { @@ -81,18 +80,23 @@ export default async function AccountPage() { - { - process.env.NODE_ENV === 'development' ? ( - - - - - ) : ( - - - - ) - } + + + Sign Out + + { + process.env.NODE_ENV === 'development' && ( + + Generate sample data + + ) + } +

Version {process.env.appVersion}

diff --git a/src/components/form/generateSampleDataForm.tsx b/src/components/form/generateSampleDataForm.tsx deleted file mode 100644 index c8677be..0000000 --- a/src/components/form/generateSampleDataForm.tsx +++ /dev/null @@ -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 }) { - - const router = useRouter(); - - const handleSubmit = async () => { - const response = await onSubmit(); - toast(sonnerContent(response)); - router.refresh(); - }; - - return ( - - ); -} diff --git a/src/components/form/signOutForm.tsx b/src/components/form/signOutForm.tsx deleted file mode 100644 index 9dd51fe..0000000 --- a/src/components/form/signOutForm.tsx +++ /dev/null @@ -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 }) { - - const router = useRouter(); - - const handleSignOut = async () => { - const response = await onSubmit(); - toast(sonnerContent(response)); - if (response.redirect) { - router.push(response.redirect); - } - }; - - return ( - - ); -} From e809912ae37e08b922913d45dc880f8b2efc635f Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 19:54:56 +0100 Subject: [PATCH 4/6] N-FIN-47: add optional confirmation dialog to new component --- src/components/form/serverActionTrigger.tsx | 52 +++++++++++++++++++-- 1 file changed, 48 insertions(+), 4 deletions(-) diff --git a/src/components/form/serverActionTrigger.tsx b/src/components/form/serverActionTrigger.tsx index ce5b431..252b70f 100644 --- a/src/components/form/serverActionTrigger.tsx +++ b/src/components/form/serverActionTrigger.tsx @@ -9,11 +9,29 @@ 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 extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; + dialog?: ConfirmationDialogProps; action: () => Promise>; callback?: (data: T) => void; } @@ -36,14 +54,40 @@ const ServerActionTrigger = React.forwardRef + + + + + + {props.dialog.title} + {props.dialog?.description && ( + + {props.dialog.description} + + )} + + + + Cancel + + + {props.dialog.actionText || 'Confirm'} + + + + + ) : ( ); }, From 2de7d3613864f3d47ddea79db0aab7383a409767 Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 19:55:17 +0100 Subject: [PATCH 5/6] N-FIN-47: add server action to delete account --- src/lib/actions/accountDelete.ts | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/lib/actions/accountDelete.ts diff --git a/src/lib/actions/accountDelete.ts b/src/lib/actions/accountDelete.ts new file mode 100644 index 0000000..28cf745 --- /dev/null +++ b/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 { + '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, + }; +} From c9b9dec3422bc5bc0912cfc726542677354b9578 Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 17 Mar 2024 19:55:30 +0100 Subject: [PATCH 6/6] N-FIN-47: add button to delete account --- src/app/account/page.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index d16a9aa..4e98014 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -9,6 +9,7 @@ import { URL_SIGN_IN } from '@/lib/constants'; 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() { @@ -82,7 +83,16 @@ export default async function AccountPage() { + Delete Account + + Sign Out