feat: enhance API response handling and add new components for module management

apps/web/app/[locale]/home/[account]/verband/settings/_components/settings-content.tsx

@@ -3,12 +3,11 @@
 import { useState } from 'react';
 
 import { Plus, Pencil, Trash2, Settings } from 'lucide-react';
-import { useAction } from 'next-safe-action/hooks';
 
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Input } from '@kit/ui/input';
-import { toast } from '@kit/ui/sonner';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
 import {
   createRole,
   updateRole,
@@ -185,63 +184,45 @@ export default function SettingsContent({
   feeTypes,
 }: SettingsContentProps) {
   // Roles
-  const { execute: execCreateRole, isPending: isCreatingRole } = useAction(
-    createRole,
-    {
-      onSuccess: () => toast.success('Funktion erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execUpdateRole, isPending: isUpdatingRole } = useAction(
-    updateRole,
-    {
-      onSuccess: () => toast.success('Funktion aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteRole } = useAction(deleteRole, {
-    onSuccess: () => toast.success('Funktion gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+  const { execute: execCreateRole, isPending: isCreatingRole } =
+    useActionWithToast(createRole, {
+      successMessage: 'Funktion erstellt',
+    });
+  const { execute: execUpdateRole, isPending: isUpdatingRole } =
+    useActionWithToast(updateRole, {
+      successMessage: 'Funktion aktualisiert',
+    });
+  const { execute: execDeleteRole } = useActionWithToast(deleteRole, {
+    successMessage: 'Funktion gelöscht',
   });
 
   // Types
-  const { execute: execCreateType, isPending: isCreatingType } = useAction(
-    createAssociationType,
+  const { execute: execCreateType, isPending: isCreatingType } =
+    useActionWithToast(createAssociationType, {
+      successMessage: 'Vereinstyp erstellt',
+    });
+  const { execute: execUpdateType, isPending: isUpdatingType } =
+    useActionWithToast(updateAssociationType, {
+      successMessage: 'Vereinstyp aktualisiert',
+    });
+  const { execute: execDeleteType } = useActionWithToast(
+    deleteAssociationType,
     {
-      onSuccess: () => toast.success('Vereinstyp erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+      successMessage: 'Vereinstyp gelöscht',
     },
   );
-  const { execute: execUpdateType, isPending: isUpdatingType } = useAction(
-    updateAssociationType,
-    {
-      onSuccess: () => toast.success('Vereinstyp aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteType } = useAction(deleteAssociationType, {
-    onSuccess: () => toast.success('Vereinstyp gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-  });
 
   // Fee Types
-  const { execute: execCreateFeeType, isPending: isCreatingFee } = useAction(
-    createFeeType,
-    {
-      onSuccess: () => toast.success('Beitragsart erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execUpdateFeeType, isPending: isUpdatingFee } = useAction(
-    updateFeeType,
-    {
-      onSuccess: () => toast.success('Beitragsart aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteFeeType } = useAction(deleteFeeType, {
-    onSuccess: () => toast.success('Beitragsart gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+  const { execute: execCreateFeeType, isPending: isCreatingFee } =
+    useActionWithToast(createFeeType, {
+      successMessage: 'Beitragsart erstellt',
+    });
+  const { execute: execUpdateFeeType, isPending: isUpdatingFee } =
+    useActionWithToast(updateFeeType, {
+      successMessage: 'Beitragsart aktualisiert',
+    });
+  const { execute: execDeleteFeeType } = useActionWithToast(deleteFeeType, {
+    successMessage: 'Beitragsart gelöscht',
   });
 
   return (