dashboard: fix toaster

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx

@@ -24,25 +24,20 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
   const deletion = api.dashboard.delete.useMutation({
     onError: (error, variables) => {
       return handleErrorToastOptions({
-        action: (
-          <ToastAction
-            altText="Force delete"
-            onClick={() => {
-              deletion.mutate({
-                forceDelete: true,
-                id: variables.id,
-              });
-            }}
-          >
-            Force delete
-          </ToastAction>
-        ),
+        action: {
+          label: 'Force delete',
+          onClick: () => {
+            deletion.mutate({
+              forceDelete: true,
+              id: variables.id,
+            });
+          },
+        },
       })(error);
     },
     onSuccess() {
       router.refresh();
-      toast({
-        title: 'Success',
+      toast('Success', {
         description: 'Dashboard deleted.',
       });
     },

apps/web/src/app/(app)/[organizationId]/[projectId]/settings/organization/edit-organization.tsx

@@ -25,13 +25,12 @@ export default function EditOrganization({
   const router = useRouter();
 
   const { register, handleSubmit, formState, reset } = useForm<IForm>({
-    defaultValues: organization,
+    defaultValues: organization ?? undefined,
   });
 
   const mutation = api.organization.update.useMutation({
     onSuccess(res) {
-      toast({
-        title: 'Organization updated',
+      toast('Organization updated', {
         description: 'Your organization has been updated.',
       });
       reset(res);
@@ -57,7 +56,7 @@ export default function EditOrganization({
           <InputWithLabel
             label="Name"
             {...register('name')}
-            defaultValue={organization.name}
+            defaultValue={organization?.name}
           />
         </WidgetBody>
       </Widget>

apps/web/src/app/(app)/[organizationId]/[projectId]/settings/organization/invite-user.tsx

@@ -27,8 +27,7 @@ export function InviteUser() {
 
   const mutation = api.organization.inviteUser.useMutation({
     onSuccess() {
-      toast({
-        title: 'User invited!',
+      toast('User invited!', {
         description: 'The user has been invited to the organization.',
       });
       reset();

apps/web/src/app/(app)/[organizationId]/[projectId]/settings/profile/edit-profile.tsx

@@ -35,8 +35,7 @@ export default function EditProfile({ profile }: EditProfileProps) {
 
   const mutation = api.user.update.useMutation({
     onSuccess(res) {
-      toast({
-        title: 'Profile updated',
+      toast('Profile updated', {
         description: 'Your profile has been updated.',
       });
       reset(res);

apps/web/src/app/_trpc/client.tsx

@@ -1,8 +1,8 @@
-import type { Toast } from '@/components/ui/use-toast';
 import type { AppRouter } from '@/server/api/root';
 import type { TRPCClientErrorBase } from '@trpc/react-query';
 import { createTRPCReact } from '@trpc/react-query';
 import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
+import type { ExternalToast } from 'sonner';
 import { toast } from 'sonner';
 
 export const api = createTRPCReact<AppRouter>({});
@@ -24,16 +24,14 @@ export type IChartData = RouterOutputs['chart']['chart'];
 export type IChartSerieDataItem = IChartData['series'][number]['data'][number];
 
 export function handleError(error: TRPCClientErrorBase<any>) {
-  toast({
-    title: 'Error',
+  toast('Error', {
     description: error.message,
   });
 }
 
-export function handleErrorToastOptions(options: Toast) {
+export function handleErrorToastOptions(options: ExternalToast) {
   return function (error: TRPCClientErrorBase<any>) {
-    toast({
-      title: 'Error',
+    toast('Error', {
       description: error.message,
       ...options,
     });

apps/web/src/app/providers.tsx

@@ -2,7 +2,6 @@
 
 import React, { useRef, useState } from 'react';
 import { api } from '@/app/_trpc/client';
-import { Toaster } from '@/components/ui/toaster';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { ModalProvider } from '@/modals';
 import type { AppStore } from '@/redux';
@@ -50,7 +49,6 @@ export default function Providers({ children }: { children: React.ReactNode }) {
           <QueryClientProvider client={queryClient}>
             <TooltipProvider delayDuration={200}>
               {children}
-              <Toaster />
               <ModalProvider />
             </TooltipProvider>
           </QueryClientProvider>