Move Toaster to layout.tsx

Tietokilta · Feb 4, 2025 · 8ecd810 · 8ecd810
1 parent b1d33e4
commit 8ecd810
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/apps/web/src/app/[locale]/(main)/layout.tsx b/apps/web/src/app/[locale]/(main)/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 // eslint-disable-next-line camelcase -- next/font/google
 import { Inter, Roboto_Mono } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
+import { Toaster } from "sonner";
 import { Footer } from "@components/footer";
 import { MainNav } from "@components/main-nav";
 import { MobileNav } from "@components/mobile-nav";
@@ -100,6 +101,7 @@ export default async function RootLayout(
           <MobileNav className="sticky top-0 z-50 lg:hidden" />
           <MainNav className="sticky top-0 z-50 hidden lg:block" />
           <div className="min-h-screen flex-1">{children}</div>
+          <Toaster richColors />
           <Footer />
         </div>
       </body>

diff --git a/apps/web/src/components/invoice-generator/index.tsx b/apps/web/src/components/invoice-generator/index.tsx
@@ -12,6 +12,7 @@ import {
   useState,
 } from "react";
 import Form from "next/form";
+import { toast } from "sonner";
 import {
   I18nProviderClient,
   useCurrentLocale,
@@ -20,8 +21,6 @@ import {
 import { SaveAction } from "../../lib/api/external/laskugeneraattori/actions";
 import { type InvoiceGeneratorFormState } from "../../lib/api/external/laskugeneraattori/index";
 
-import { Toaster, toast } from "sonner";
-
 interface GenericFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   unit?: string;
@@ -91,16 +90,14 @@ function SubmitButton({
 
   useEffect(() => {
     if (formState?.success === true) toast.success(t("Sent invoice"));
-  }, [formState]);
+  }, [formState, t]);
 
   return (
     <div>
       <Button className="w-full max-w-sm" type="submit" disabled={pending}>
         {t("Submit")}
       </Button>
-      {formState?.success ? (
-        <Toaster richColors />
-      ) : formState?.success === false && errorKeys.length === 0 ? (
+      {formState?.success === false && errorKeys.length === 0 ? (
         <p data-form-status aria-live="polite" className="block text-red-600">
           {formState.errorText}
         </p>