Legg til toasts med sonner

Author: LudvigHz

package.json

@@ -112,6 +112,7 @@
         "react-resizable-panels": "^2.1.7",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
+        "sonner": "^2.0.1",
         "styled-components": "^6.1.16",
         "tailwind-merge": "^3.0.2",
         "vite": "^6.2.2",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import createFetchClient from 'openapi-fetch';
 import createClient from 'openapi-react-query';
+import { toast } from 'sonner';
 import { FetchError } from 'src/api/api';
 import { apiBaseUriWithoutRest } from 'src/api/config';
 import type { paths } from 'src/generated/modiapersonoversikt-api';
@@ -73,6 +74,10 @@ export const useSendMelding = () => {
                     params: { query: { enhet } }
                 }).queryKey
             });
+            toast.success('Melding sendt');
+        },
+        onError: () => {
+            toast.error('Kunne ikke sende melding');
         }
     });
 };
@@ -90,6 +95,10 @@ export const useJournalforMutation = () => {
                     params: { query: { enhet } }
                 }).queryKey
             });
+            toast.success('Tråden ble journalført');
+        },
+        onError: () => {
+            toast.error('Kunne ikke journalføre tråden');
         }
     });
 };
@@ -176,6 +185,10 @@ export const useSendTilSladdingMutation = () => {
                     params: { query: { enhet } }
                 }).queryKey
             });
+            toast.success('Meldingene ble sendt til sladding');
+        },
+        onError: () => {
+            toast.error('Kunne ikke sende til sladding');
         }
     });
 };
@@ -193,6 +206,10 @@ export const useMarkerFeilsendtMutation = () => {
                     params: { query: { enhet } }
                 }).queryKey
             });
+            toast.success('Tråden ble markert som feilsent');
+        },
+        onError: () => {
+            toast.error('Kunne ikke avslutte dialogen');
         }
     });
 };
@@ -210,6 +227,10 @@ export const useAvsluttDialogMutation = () => {
                     params: { query: { enhet } }
                 }).queryKey
             });
+            toast.success('Tråden ble avsluttet');
+        },
+        onError: () => {
+            toast.error('Kunne ikke avslutte tråden');
         }
     });
 };

src/lib/clients/modiapersonoversikt-api.ts

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Outlet, createRootRoute, useMatchRoute } from '@tanstack/react-router';
 import { useAtomValue } from 'jotai';
 import { type PropsWithChildren, lazy, useState } from 'react';
+import { Toaster } from 'sonner';
 import HentGlobaleVerdier from 'src/app/FetchSessionInfoOgLeggIRedux';
 import LoggetUtModal from 'src/app/LoggetUtModal';
 import VelgEnhet from 'src/app/VelgEnhet';
@@ -124,6 +125,7 @@ function RootLayout() {
                         </AppWrapper>
                     )}
                     <TanStackRouterDevtools position="bottom-right" />
+                    <Toaster position="top-right" theme={theme} richColors />
                 </ValgtEnhetProvider>
             </Theme>
         </QueryClientProvider>