jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working to feature parity

Browse Source
This commit is contained in:
jude
2023-11-05 17:01:47 +00:00
parent 30dfaa17af
commit 8ba7a39ce5
10 changed files with 140 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/App/FlashProvider.tsx
View File

@ -2,13 +2,18 @@ import { FlashContext } from "./FlashContext";
import { useState } from "preact/hooks";
import { MESSAGE_FLASH_TIME } from "../../consts";
export type Message = {
message: string;
type: "error" | "success";
};
export const FlashProvider = ({ children }) => {
const [messages, setMessages] = useState([] as string[]);
const [messages, setMessages] = useState([] as Message[]);
return (
<FlashContext.Provider
value={(message: string) => {
setMessages((messages: string[]) => [...messages, message]);
value={(message: Message) => {
setMessages((messages: Message[]) => [...messages, message]);
setTimeout(() => {
setMessages((messages) => [...messages].splice(1));
}, MESSAGE_FLASH_TIME);
@ -16,14 +21,22 @@ export const FlashProvider = ({ children }) => {
>
<>
{children}
{messages.map((message) => (
<div class="notification is-danger flash-message is-active">
<span class="icon">
<i class="far fa-exclamation-circle"></i>
</span>{" "}
<span class="error-message">{message}</span>
</div>
))}
<div class="flash-container">
{messages.map((message) => {
const className = message.type === "error" ? "is-danger" : "is-success";
const icon =
message.type === "error" ? "fa-exclamation-circle" : "fa-check";
return (
<div class={`notification flash-message is-active ${className}`}>
<span class="icon">
<i class={`far ${icon}`}></i>
</span>{" "}
<span class="error-message">{message.message}</span>
</div>
);
})}
</div>
</>
</FlashContext.Provider>
);