adjust toasts usage

LexSwed · Aug 4, 2024 · d9e22fd · d9e22fd
1 parent 8e77672
commit d9e22fd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/packages/ui/src/toast/toast.module.css b/packages/ui/src/toast/toast.module.css
@@ -12,6 +12,7 @@
     /* use padding instead of positioning to allow hover to remain stable for multiple toasts */
     padding: theme("spacing[1]") theme("spacing[3]");
     border-radius: theme(borderRadius.2xl);
+    min-width: theme(spacing.64);
 
     &:nth-of-type(1) {
       z-index: 4;
@@ -81,7 +82,7 @@
     }
   }
   @starting-style {
-    .toast:is(.toast) {
+    .toast:is(:not(:empty)) {
       opacity: 0;
       translate: 0 -2rem;
     }

diff --git a/packages/ui/src/toast/toast.tsx b/packages/ui/src/toast/toast.tsx
@@ -19,7 +19,7 @@ import {
 import { Card } from "../card";
 
 import { tw } from "../tw";
-import { composeEventHandlers, mergeDefaultProps } from "../utils";
+import { mergeDefaultProps } from "../utils";
 import css from "./toast.module.css";
 /**
  * TODO:
@@ -44,9 +44,9 @@ const Toast = (ownProps: ToastProps) => {
 			aria-atomic="true"
 			{...props}
 			class={tw("allow-discrete border border-on-background/5 shadow-popover", props.class)}
-			onClick={composeEventHandlers(props.onClick, (e) => {
-				(e.currentTarget as HTMLElement).dispatchEvent(new ToastDismissEvent());
-			})}
+			// onClick={composeEventHandlers(props.onClick, (e) => {
+			// 	(e.currentTarget as HTMLElement).dispatchEvent(new ToastDismissEvent());
+			// })}
 		>
 			{props.children}
 		</Card>
@@ -120,9 +120,9 @@ function Toaster(props: { label: string }) {
 				)}
 				tabIndex={-1}
 				onMouseEnter={() => toaster.resetTimers()}
-				// onMouseLeave={() => toaster.restartTimers()}
+				onMouseLeave={() => toaster.restartTimers()}
 				onFocusIn={() => toaster.resetTimers()}
-				// onFocusOut={() => toaster.restartTimers()}
+				onFocusOut={() => toaster.restartTimers()}
 			>
 				<div class="-m-1 absolute h-1 w-full [anchor-name:--nou-toast-anchor-list]" aria-hidden />
 				<For each={toaster.items()}>

diff --git a/packages/web/src/routes/app/profile/index.tsx b/packages/web/src/routes/app/profile/index.tsx
@@ -21,6 +21,7 @@ import { cacheTranslations, createTranslator } from "~/server/i18n";
 import type { SupportedLocale } from "~/server/i18n/shared";
 
 import { AppHeader } from "~/lib/app-header";
+import { isSubmissionFailure } from "~/lib/utils/submission";
 
 export const route = {
 	preload() {
@@ -34,7 +35,6 @@ export default function ProfilePage() {
 
 	const user = createAsync(() => getUserProfile());
 	const updateProfileAction = useAction(updateUserProfile);
-	// TODO: error handling, success handling
 	const profileSubmission = useSubmission(updateUserProfile);
 	const toast = useToaster();
 
@@ -57,9 +57,7 @@ export default function ProfilePage() {
 										method="post"
 										action={updateUserProfile}
 										validationErrors={
-											profileSubmission.result &&
-											"errors" in profileSubmission.result &&
-											profileSubmission.result.errors
+											isSubmissionFailure(profileSubmission, "validation")
 												? profileSubmission.result.errors
 												: null
 										}
@@ -70,16 +68,19 @@ export default function ProfilePage() {
 											if ("locale" in updatedUser && updatedUser.locale !== initialLocale) {
 												location.reload();
 											} else {
-												if (profileSubmission.result && "failed" in profileSubmission.result) {
+												if (
+													"failureReason" in updatedUser &&
+													updatedUser.failureReason === "other"
+												) {
 													toast(() => (
-														<Toast>
+														<Toast variant="tonal" tone="failure">
 															<Text tone="danger">Something went wrong, try again?</Text>
 														</Toast>
 													));
 												} else if (profileSubmission.result && "id" in profileSubmission.result) {
 													toast(() => (
-														<Toast>
-															<Text tone="success">Saved!</Text>
+														<Toast variant="tonal" tone="secondary">
+															<Text>Saved!</Text>
 														</Toast>
 													));
 												}

diff --git a/packages/web/src/server/api/user.server.ts b/packages/web/src/server/api/user.server.ts
@@ -26,9 +26,12 @@ export async function updateUserProfileServer(formData: FormData) {
 		return user;
 	} catch (error) {
 		if (isValiError<UpdateUserSchema>(error)) {
-			return json({ errors: await translateErrorTokens(error) }, { status: 422, revalidate: [] });
+			return json(
+				{ failureReason: "validation" as const, errors: await translateErrorTokens(error) },
+				{ status: 422, revalidate: [] },
+			);
 		}
 		console.error(error);
-		return json({ failed: true }, { status: 500, revalidate: [] });
+		return json({ failureReason: "other" as const }, { status: 500, revalidate: [] });
 	}
 }