feat(web-ui): add blog post event handler

Author: Johan Book

services/web-ui/src/core/events/index.ts

@@ -0,0 +1,20 @@
+export abstract class BaseEvent {}
+
+type Constructor<T> = new (...props: any) => T;
+
+export function dispatchEvent<T extends BaseEvent>(event: T) {
+  const customEvent = new CustomEvent(event.constructor.name, {
+    detail: event,
+  });
+  document.dispatchEvent(customEvent);
+}
+
+export function addEventListener<T extends BaseEvent>(
+  event: Constructor<T>,
+  onEvent: (event: T) => void
+): void {
+  document.addEventListener(event.name, (event) => {
+    const customEvent = event as CustomEvent<T>;
+    onEvent(customEvent.detail);
+  });
+}

services/web-ui/src/core/notifications/index.ts

@@ -2,3 +2,4 @@ export { NotificationEventsConstants } from "./constants/notification-events.con
 export { useHandleNotification } from "./hooks/useHandleNotification";
 export { useNotifications } from "./hooks/useNotifications";
 export { NotificationProvider } from "./notification.provider";
+export { INotification } from "./types/notification.interface";

services/web-ui/src/core/notifications/notification.event.ts

@@ -0,0 +1,9 @@
+import { BaseEvent } from "src/core/events";
+
+import { INotification } from "./types/notification.interface";
+
+export class NotificationEvent extends BaseEvent {
+  constructor(public readonly notification: INotification) {
+    super();
+  }
+}

services/web-ui/src/core/notifications/notificationEvent.handler.ts

@@ -4,7 +4,9 @@ import { v4 as uuid } from "uuid";
 import { NotificationMetaDetailsWsEventNamesEnum } from "src/api";
 import { Logger } from "src/core/logging";
 
+import { dispatchEvent } from "../events";
 import { NotificationEventsConstants } from "./constants/notification-events.constants";
+import { NotificationEvent } from "./notification.event";
 import { INotification } from "./types/notification.interface";
 
 const eventName = NotificationMetaDetailsWsEventNamesEnum.Notification;
@@ -79,10 +81,8 @@ export class NotificationEventHandler {
 
     this.logger.trace("Received notification", { notification });
 
-    const event = new CustomEvent(eventName, {
-      detail: notification,
-    });
-    document.dispatchEvent(event);
+    const event = new NotificationEvent(notification);
+    dispatchEvent(event);
 
     let eventWasHandled = false;
 

services/web-ui/src/features/blogs/index.tsx

@@ -0,0 +1,12 @@
+import { addEventListener } from "src/core/events";
+import { NotificationEvent } from "src/core/notifications/notification.event";
+import { CacheKeysConstants } from "src/core/query";
+import { QUERY_CLIENT } from "src/queryQlient";
+
+addEventListener(NotificationEvent, (event) => {
+  const notification = event.notification;
+
+  if ((notification.type as any) === "new_blog_post") {
+    QUERY_CLIENT.invalidateQueries([CacheKeysConstants.BlogPosts]);
+  }
+});

services/web-ui/src/pages/BlogPostListPage/BlogPostListPage.container.tsx

@@ -6,10 +6,6 @@ import { blogsApi } from "src/apis";
 import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { InteractionObserver } from "src/core/infinite-scroll";
-import {
-  NotificationEventsConstants,
-  useHandleNotification,
-} from "src/core/notifications";
 import { CacheKeysConstants, useInfiniteQuery } from "src/core/query";
 
 import { BlogPostPageComponent } from "./BlogPostListPage.component";
@@ -22,7 +18,7 @@ const ITEMS_PER_PAGE = 10;
 export function BlogPostListPageContainer(): ReactElement {
   const { t } = useTranslation("blog");
 
-  const { error, data, isLoading, fetchNextPage, hasNextPage, refetch } =
+  const { error, data, isLoading, fetchNextPage, hasNextPage } =
     useInfiniteQuery(
       [CacheKeysConstants.BlogPosts],
       ({ pageParam = 0 }) =>
@@ -41,11 +37,6 @@ export function BlogPostListPageContainer(): ReactElement {
       }
     );
 
-  useHandleNotification({
-    onNotification: () => refetch(),
-    type: NotificationEventsConstants.NEW_BLOG_POST,
-  });
-
   if (error) {
     return (
       <>