Add helper for dispatching notify events (#92)

frontend/src/index.ts

@@ -6,6 +6,7 @@ import type { SlDialog } from "@shoelace-style/shoelace";
 import "tailwindcss/tailwind.css";
 
 import type { ArchiveTab } from "./pages/archive";
+import type { NotifyEvent } from "./utils/LiteElement";
 import LiteElement, { html } from "./utils/LiteElement";
 import APIRouter from "./utils/APIRouter";
 import AuthService from "./utils/AuthService";
@@ -478,16 +479,7 @@ export class App extends LiteElement {
     };
   }
 
-  onNotify(
+  onNotify(event: NotifyEvent) {
-    event: CustomEvent<{
-      title?: string;
-      /** Can contain HTML */
-      message?: string;
-      type?: "success" | "warning" | "danger" | "primary";
-      icon?: string;
-      duration?: number;
-    }>
-  ) {
     event.stopPropagation();
 
     const {

frontend/src/pages/accept-invite.ts

@@ -48,16 +48,12 @@ export class AcceptInvite extends LiteElement {
     if (this.isLoggedIn) {
       this.getInviteInfo();
     } else {
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
-          detail: {
         message: msg("Log in to continue."),
         type: "success",
         icon: "check2-circle",
         duration: 10000,
-          },
+      });
-        })
-      );
 
       this.navTo(
         `/log-in?redirectUrl=${encodeURIComponent(
@@ -160,15 +156,11 @@ export class AcceptInvite extends LiteElement {
         }
       );
 
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
-          detail: {
         message: msg(str`You've joined ${this.inviteInfo.archiveName}.`),
         type: "success",
         icon: "check2-circle",
-          },
+      });
-        })
-      );
 
       this.navTo(DASHBOARD_ROUTE);
     } catch (err: any) {
@@ -181,17 +173,13 @@ export class AcceptInvite extends LiteElement {
   }
 
   private onDecline() {
-    this.dispatchEvent(
+    this.notify({
-      new CustomEvent("notify", {
-        detail: {
       message: msg(
         str`You've declined to join ${this.inviteInfo.archiveName}.`
       ),
       type: "info",
       icon: "info-circle",
-        },
+    });
-      })
-    );
 
     this.navTo(DASHBOARD_ROUTE);
   }

frontend/src/pages/archive/crawl-templates-new.ts

@@ -501,10 +501,7 @@ export class CrawlTemplatesNew extends LiteElement {
         }
       );
 
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
-          bubbles: true,
-          detail: {
         message: data.run_now_job
           ? msg(
               str`Crawl running with new template. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/${data.run_now_job}">View crawl</a>`
@@ -513,9 +510,7 @@ export class CrawlTemplatesNew extends LiteElement {
         type: "success",
         icon: "check2-circle",
         duration: 10000,
-          },
+      });
-        })
-      );
 
       this.navTo(`/archives/${this.archiveId}/crawl-templates`);
     } catch (e: any) {

frontend/src/pages/verify.ts

@@ -65,18 +65,13 @@ export class Verify extends LiteElement {
     const isLoggedIn = Boolean(this.authState);
     const shouldLogOut = isLoggedIn && this.authState?.username !== data.email;
 
-    this.dispatchEvent(
+    this.notify({
-      new CustomEvent("notify", {
-        detail: {
       title: msg("Email address verified"),
-          message:
+      message: isLoggedIn && !shouldLogOut ? "" : msg("Log in to continue."),
-            isLoggedIn && !shouldLogOut ? "" : msg("Log in to continue."),
       type: "success",
       icon: "check2-circle",
       duration: 10000,
-        },
+    });
-      })
-    );
 
     if (shouldLogOut) {
       this.dispatchEvent(new CustomEvent("log-out"));

frontend/src/utils/LiteElement.ts

@@ -3,6 +3,23 @@ import { LitElement, html } from "lit";
 import type { Auth } from "../utils/AuthService";
 import { APIError } from "./api";
 
+export interface NotifyEvent extends CustomEvent {
+  detail: {
+    /**
+     * Notification message body.
+     * Can contain HTML.
+     * HTML is rendered as-is without sanitation
+     **/
+    message: string;
+    /** Notification title */
+    title?: string;
+    /** Shoelace icon name */
+    icon?: string;
+    type?: "success" | "warning" | "danger" | "primary" | "info";
+    duration?: number;
+  };
+}
+
 export { html };
 
 export default class LiteElement extends LitElement {
@@ -27,6 +44,18 @@ export default class LiteElement extends LitElement {
     );
   }
 
+  /**
+   * Emit global notification
+   */
+  notify(detail: NotifyEvent["detail"]) {
+    this.dispatchEvent(
+      new CustomEvent("notify", {
+        bubbles: true,
+        detail,
+      })
+    );
+  }
+
   async apiFetch(
     path: string,
     auth: Auth,