Merge pull request #620 from johanbook/blog-post-event-handler

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

Author: johanbook

services/api/src/core/notifications/application/contracts/dtos/notification-meta.dto.ts

@@ -7,7 +7,7 @@ export enum NotificationEventNames {
 
 export class NotificationWebSocketDetails {
   description!: string;
-  data?: NotificationData;
+  data!: NotificationData;
   message!: string;
   resourcePath!: string;
   type!: NotificationEventsConstants;

services/api/src/core/notifications/client/gateways/notification.gateway.ts

@@ -63,7 +63,10 @@ export class NotificationGateway
       return false;
     }
 
-    const notificationDto = map(NotificationWebSocketDetails, notification);
+    const notificationDto = map(NotificationWebSocketDetails, {
+      data: {},
+      ...notification,
+    });
 
     socket.emit(NotificationEventNames.Notification, notificationDto);
 

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

@@ -0,0 +1,21 @@
+export abstract class BaseEvent {}
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+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/constants/notification-events.constants.ts

@@ -1,6 +1 @@
-export enum NotificationEventsConstants {
-  ADDED_TO_ORGANIZATION = "added_to_organization",
-  NEW_BLOG_POST = "new_blog_post",
-  NEW_BLOG_POST_COMMENT = "new_blog_post_comment",
-  NEW_CHAT_MESSAGE = "new_chat_message",
-}
+export { NotificationWebSocketDetailsTypeEnum as NotificationEventsConstants } from "src/api";

services/web-ui/src/core/notifications/hooks/useHandleNotification.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import { useContext, useEffect } from "react";
 
 import { NotificationEventsConstants } from "../constants/notification-events.constants";
 import { NotificationContext } from "../notification.provider";
-import { INotification } from "../types/notification.interface";
+import { INotification } from "../types";
 
 interface UseHandleNotificationProps<
   T extends NotificationEventsConstants,
@@ -21,9 +21,9 @@ export function useHandleNotification<
   onNotification,
   type,
 }: UseHandleNotificationProps<T, V>): void {
-  const notificationHandler = React.useContext(NotificationContext);
+  const notificationHandler = useContext(NotificationContext);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!notificationHandler) {
       throw new Error(
         "Unable to register notification handler. Make sure the NotificationProvider is correctly setup."

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";

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

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

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

@@ -4,8 +4,10 @@ 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 { INotification } from "./types/notification.interface";
+import { NotificationEvent } from "./notification.event";
+import { INotification } from "./types";
 
 const eventName = NotificationMetaDetailsWsEventNamesEnum.Notification;
 
@@ -31,10 +33,10 @@ export class NotificationEventHandler {
     NotificationEventsConstants,
     Record<string, Handler>
   > = {
-    [NotificationEventsConstants.ADDED_TO_ORGANIZATION]: {},
-    [NotificationEventsConstants.NEW_BLOG_POST]: {},
-    [NotificationEventsConstants.NEW_BLOG_POST_COMMENT]: {},
-    [NotificationEventsConstants.NEW_CHAT_MESSAGE]: {},
+    [NotificationEventsConstants.AddedToOrganization]: {},
+    [NotificationEventsConstants.NewBlogPost]: {},
+    [NotificationEventsConstants.NewBlogPostComment]: {},
+    [NotificationEventsConstants.NewChatMessage]: {},
   };
 
   private readonly socket: Socket;
@@ -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/core/notifications/types.ts

@@ -0,0 +1,3 @@
+import { NotificationWebSocketDetails } from "src/api";
+
+export type INotification = NotificationWebSocketDetails;

services/web-ui/src/core/notifications/types/notification.interface.ts

@@ -0,0 +1,10 @@
+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) => {
+  if (event.notification.type === "new_blog_post") {
+    QUERY_CLIENT.invalidateQueries([CacheKeysConstants.BlogPosts]);
+  }
+});

services/web-ui/src/features/blogs/index.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 (
       <>

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

@@ -25,9 +25,10 @@ export function ChatPageContainer(): React.ReactElement {
   );
 
   useHandleNotification({
-    onCondition: (event) => String(event.data.senderId) === id,
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    onCondition: (event: any) => String(event.data.senderId) === id,
     onNotification: () => refetch(),
-    type: NotificationEventsConstants.NEW_CHAT_MESSAGE,
+    type: NotificationEventsConstants.NewChatMessage,
   });
 
   if (!id) {