Message flash provider

Allows errors to be displayed neatly in ephemeral boxes at bottom of screen

src/components/App/FlashContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from "preact";
+import { useContext } from "preact/compat";
+
+export const FlashContext = createContext(null);
+
+export const useFlash = () => useContext(FlashContext);

src/components/App/FlashProvider.tsx

@@ -0,0 +1,30 @@
+import { FlashContext } from "./FlashContext";
+import { useState } from "preact/hooks";
+import { MESSAGE_FLASH_TIME } from "../../consts";
+
+export const FlashProvider = ({ children }) => {
+    const [messages, setMessages] = useState([] as string[]);
+
+    return (
+        <FlashContext.Provider
+            value={(message: string) => {
+                setMessages((messages: string[]) => [...messages, message]);
+                setTimeout(() => {
+                    setMessages((messages) => [...messages].splice(1));
+                }, MESSAGE_FLASH_TIME);
+            }}
+        >
+            <>
+                {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>
+                ))}
+            </>
+        </FlashContext.Provider>
+    );
+};

src/components/App/index.tsx

@@ -2,31 +2,29 @@ import { Sidebar } from "../Sidebar";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Route, Router, Switch } from "wouter";
 import { Welcome } from "../Welcome";
-import { GuildReminders } from "../GuildReminders";
+import { Guild } from "../Guild";
+import { FlashProvider } from "./FlashProvider";
 
 export function App() {
     const queryClient = new QueryClient();
 
     return (
-        <QueryClientProvider client={queryClient}>
-            <>
+        <FlashProvider>
+            <QueryClientProvider client={queryClient}>
                 <Router base={"/dashboard"}>
                     <div class="columns is-gapless dashboard-frame">
                         <Sidebar></Sidebar>
                         <div class="column is-main-content">
                             <Switch>
-                                <Route
-                                    path={"/:guild/reminders"}
-                                    component={GuildReminders}
-                                ></Route>
+                                <Route path={"/:guild/reminders"} component={Guild}></Route>
                                 <Route>
-                                    <Welcome></Welcome>
+                                    <Welcome />
                                 </Route>
                             </Switch>
                         </div>
                     </div>
                 </Router>
-            </>
-        </QueryClientProvider>
+            </QueryClientProvider>
+        </FlashProvider>
     );
 }