Add Sonner for success toast

Tietokilta · Jan 15, 2025 · ae00f6d · ae00f6d
1 parent 534df5d
commit ae00f6d
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 197 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -32,6 +32,7 @@
     "remeda": "^2.19.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
+    "sonner": "^1.5.0",
     "strip-markdown": "^6.0.0",
     "tailwind-merge": "catalog:",
     "tailwindcss": "catalog:",

diff --git a/apps/web/src/components/invoice-generator/index.tsx b/apps/web/src/components/invoice-generator/index.tsx
@@ -20,6 +20,8 @@ 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;
@@ -86,19 +88,18 @@ function SubmitButton({
   const t = useScopedI18n("invoicegenerator");
   const { pending } = useFormStatus();
   const errorKeys = formState?.errors ? Object.keys(formState.errors) : [];
+
+  useEffect(() => {
+    if (formState?.success === true) toast.success(t("Sent invoice"));
+  }, [formState]);
+
   return (
     <div>
       <Button className="w-full max-w-sm" type="submit" disabled={pending}>
         {t("Submit")}
       </Button>
       {formState?.success ? (
-        <p
-          data-form-status
-          className="text-2l w-full max-w-sm text-green-600"
-          aria-live="polite"
-        >
-          {t("Sent invoice")}
-        </p>
+        <Toaster richColors />
       ) : formState?.success === false && errorKeys.length === 0 ? (
         <p data-form-status aria-live="polite" className="block text-red-600">
           {formState.errorText}