useToast hook for success/error messages

Author: matt-aitken

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -13,6 +13,7 @@ import { Fragment, useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
+import { useToast } from "~/components/primitives/Toast";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormError } from "~/components/primitives/FormError";
 import { Header2, Header3 } from "~/components/primitives/Headers";
@@ -57,6 +58,7 @@ export function ConfigureErrorAlerts({
 }: ConfigureErrorAlertsProps) {
   const fetcher = useFetcher<{ ok?: boolean }>();
   const navigate = useNavigate();
+  const toast = useToast();
   const location = useOptimisticLocation();
   const isSubmitting = fetcher.state !== "idle";
 
@@ -80,9 +82,10 @@ export function ConfigureErrorAlerts({
 
   useEffect(() => {
     if (fetcher.state === "idle" && fetcher.data?.ok) {
+      toast.success("Alert settings saved");
       navigate(closeHref, { replace: true });
     }
-  }, [fetcher.state, fetcher.data, closeHref, navigate]);
+  }, [fetcher.state, fetcher.data, closeHref, navigate, toast]);
 
   const emailFieldValues = useRef<string[]>(
     existingEmails.length > 0 ? [...existingEmails.map((e) => e.email), ""] : [""]

apps/webapp/app/components/primitives/Toast.tsx

@@ -1,7 +1,7 @@
 import { EnvelopeIcon, ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { useSearchParams } from "@remix-run/react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useTypedLoaderData } from "remix-typedjson";
 import { Toaster, toast } from "sonner";
 import { type ToastMessageAction } from "~/models/message.server";
@@ -43,6 +43,32 @@ export function Toast() {
   return <Toaster />;
 }
 
+export function useToast() {
+  return useMemo(
+    () => ({
+      success(message: string, options?: { title?: string; ephemeral?: boolean }) {
+        const ephemeral = options?.ephemeral ?? true;
+        toast.custom(
+          (t) => (
+            <ToastUI variant="success" message={message} t={t as string} title={options?.title} />
+          ),
+          { duration: ephemeral ? defaultToastDuration : permanentToastDuration }
+        );
+      },
+      error(message: string, options?: { title?: string; ephemeral?: boolean }) {
+        const ephemeral = options?.ephemeral ?? true;
+        toast.custom(
+          (t) => (
+            <ToastUI variant="error" message={message} t={t as string} title={options?.title} />
+          ),
+          { duration: ephemeral ? defaultToastDuration : permanentToastDuration }
+        );
+      },
+    }),
+    []
+  );
+}
+
 export function ToastUI({
   variant,
   message,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx

@@ -5,7 +5,6 @@ import { Form, useNavigation } from "@remix-run/react";
 import { IconChartHistogram, IconEdit, IconTypography } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { toast } from "sonner";
 import { z } from "zod";
 import { defaultChartConfig } from "~/components/code/ChartConfigPanel";
 import { Feedback } from "~/components/Feedback";
@@ -33,7 +32,7 @@ import {
   PopoverVerticalEllipseTrigger,
 } from "~/components/primitives/Popover";
 import { Sheet, SheetContent } from "~/components/primitives/SheetV3";
-import { ToastUI } from "~/components/primitives/Toast";
+import { useToast } from "~/components/primitives/Toast";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { QueryEditor, type QueryEditorSaveData } from "~/components/query/QueryEditor";
 import { $replica, prisma } from "~/db.server";
@@ -206,7 +205,8 @@ export default function Page() {
   const widgetActionUrl = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboards/${friendlyId}/widgets`;
   const layoutActionUrl = widgetActionUrl;
 
-  // Handle sync errors by showing a toast
+  const toast = useToast();
+
   const handleSyncError = useCallback((error: Error, action: string) => {
     const actionMessages: Record<string, string> = {
       add: "Failed to add widget",
@@ -218,15 +218,8 @@ export default function Page() {
 
     const message = actionMessages[action] || "Failed to save changes";
 
-    toast.custom((t) => (
-      <ToastUI
-        variant="error"
-        message={`${message}. Your changes may not be saved.`}
-        t={t as string}
-        title="Sync Error"
-      />
-    ));
-  }, []);
+    toast.error(`${message}. Your changes may not be saved.`, { title: "Sync Error" });
+  }, [toast]);
 
   // Add title dialog state
   const [showAddTitleDialog, setShowAddTitleDialog] = useState(false);