clidegamer254
clidegamer254
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
@peerreynders I was able to get something working using this flash utility:
import { query } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { toast } from "solid-sonner";
import { getCookie, HTTPEvent } from "vinxi/http";

export const setFlashCookieHeader = (
message: string,
type: string,
age: string = "5",
): ResponseInit["headers"] => {
const headers = new Headers({
"Set-Cookie": `flash=${message}_${type}; Max-Age=${age}; HttpOnly`,
});
return headers;
};
/**
* Get flash message from cookie
*/
export const getStatus = query(async () => {
"use server";
const fetchEvent = getRequestEvent();
const event = fetchEvent?.nativeEvent as HTTPEvent;
const flash = getCookie(event, "flash");
// console.log(flash)
return flash;
}, "flash");

/**
* Set the flash using a toast
* @param flash
* @returns
*/
export const setFlash = (flash: string | undefined) => {
if (flash) {
const message = flash?.split("_")[0];
const type = flash?.split("_")[1];
let timer;
switch (true) {
case type === "success":
timer = setTimeout(() => toast.success(message), 100);
break;
case type == "error":
timer = setTimeout(() => toast.error(message), 100);
break;
case type == "info":
timer = setTimeout(() => toast.info(message), 100);
break;
default:
break;
}
return timer;
}
};
import { query } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { toast } from "solid-sonner";
import { getCookie, HTTPEvent } from "vinxi/http";

export const setFlashCookieHeader = (
message: string,
type: string,
age: string = "5",
): ResponseInit["headers"] => {
const headers = new Headers({
"Set-Cookie": `flash=${message}_${type}; Max-Age=${age}; HttpOnly`,
});
return headers;
};
/**
* Get flash message from cookie
*/
export const getStatus = query(async () => {
"use server";
const fetchEvent = getRequestEvent();
const event = fetchEvent?.nativeEvent as HTTPEvent;
const flash = getCookie(event, "flash");
// console.log(flash)
return flash;
}, "flash");

/**
* Set the flash using a toast
* @param flash
* @returns
*/
export const setFlash = (flash: string | undefined) => {
if (flash) {
const message = flash?.split("_")[0];
const type = flash?.split("_")[1];
let timer;
switch (true) {
case type === "success":
timer = setTimeout(() => toast.success(message), 100);
break;
case type == "error":
timer = setTimeout(() => toast.error(message), 100);
break;
case type == "info":
timer = setTimeout(() => toast.info(message), 100);
break;
default:
break;
}
return timer;
}
};
and it's consumed like so in an action:
throw redirect("/backend", {
headers: setFlashCookieHeader("Logged in", "success"),
});
throw redirect("/backend", {
headers: setFlashCookieHeader("Logged in", "success"),
});
This works on actions login/register/logout, however, it does not work when one manually navigates to a protected route, as the cookie is set on the client, but it doesn't show on the page. Somehow, the middleware can pick it up, but I don't think there's a way to stream it back on the client.
13 replies
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
Will implement and give feedback on approached :p
13 replies
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
I'll have a look at these implementations many thanks for the input 😉
13 replies
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
But they'd need to expire the instant they're subscribed to
13 replies
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
Another way would possibly be cookies.
13 replies
SSolidJS
Created by clidegamer254 on 4/3/2025 in #support
Flash Notifications
How about a success notification in redirect or rather a protected route that does not depend on any actions how would flash notifications be handled for this case @peerreynders
13 replies