feat: add realtime notification feature

package.json

@@ -8,6 +8,7 @@
     "start:services": "docker compose up",
     "start:api": "npm run start --workspace=api",
     "start:website": "npm run start:swa --workspace=portal",
+    "start:realtime": "npm run start --workspace=realtime",
     "test": "npm run test -ws --if-present",
     "build": "npm run build -ws --if-present",
     "format": "prettier --write .",

packages/portal/angular.json

@@ -30,7 +30,7 @@
             ],
             "scripts": [],
             "ngxEnv": {
-              "prefix": "(CODESPACE|GITHUB|AI)_"
+              "prefix": "(CODESPACE|GITHUB|AI|SERVICE)_"
             }
           },
           "configurations": {

packages/portal/package.json

@@ -32,6 +32,7 @@
     "apollo-angular": "^5.0.1",
     "graphql": "^16.6.0",
     "rxjs": "~7.5.0",
+    "socket.io-client": "^4.7.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

packages/portal/src/app/homepage/homepage.component.ts

@@ -2,19 +2,21 @@ import { Component, OnInit, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MatButtonModule } from "@angular/material/button";
 import { MatDividerModule } from "@angular/material/divider";
+import { MatSnackBar, MatSnackBarModule  } from '@angular/material/snack-bar';
 import { environment } from "../../environments/environment";
 import { CardListComponent } from "../shared/card-list/card-list.component";
 import { FavoriteService } from "../shared/favorite.service";
 import { InfiniteScrollingDirective } from "../shared/infinite-scrolling.directive";
 import { ListingService } from "../shared/listing.service";
 import { UserService } from "../shared/user/user.service";
+import { RealtimeService } from "../shared/realtime.service";
 
 @Component({
   selector: "app-homepage",
   templateUrl: "./homepage.component.html",
   styleUrls: ["./homepage.component.scss"],
   standalone: true,
-  imports: [CommonModule, CardListComponent, MatButtonModule, MatDividerModule, InfiniteScrollingDirective],
+  imports: [CommonModule, CardListComponent, MatButtonModule, MatDividerModule, InfiniteScrollingDirective, MatSnackBarModule],
 })
 export class HomepageComponent implements OnInit {
   featuredListings: Listing[] = [];
@@ -25,10 +27,49 @@ export class HomepageComponent implements OnInit {
   private listingService = inject(ListingService);
   private favoriteService = inject(FavoriteService);
   private userService = inject(UserService);
+  private realtimeService = inject(RealtimeService);
+
+  constructor(private snackBar: MatSnackBar) { }
+
+  notify(message: string) {
+    this.snackBar.open(message, "Close", {
+      duration: 10000,
+      horizontalPosition: 'end',
+      verticalPosition: 'top'
+    });
+  }
 
   async ngOnInit() {
     this.user = await this.userService.currentUser();
     this.featuredListings = await this.listingService.getFeaturedListings();
+
+    // Get notification when someone favourtied a listing
+    this.realtimeService.getNotifiedForFavourite((listingTitle) => {
+      const notifyMessage = this.user?.name?.length > 0
+        ? `Hurry up! Another user has favorited the listing "${listingTitle}".`
+        : `A user has favorited the listing "${listingTitle}".`;
+      this.notify(notifyMessage);
+    });
+
+    this.realtimeService.getNotifiedForCheckout(async (listing: Listing, from: string, to: string) => {
+      // Get notification when someone booked any listing
+      let notifyMessage = this.user?.name?.length > 0
+        ? `Hurry up! Another user has booked the listing "${listing.title}" but didn't complete the payment.`
+        : `A user has booked the listing "${listing}". but didn't complete the payment`;
+      this.notify(notifyMessage);
+
+      // Get notification when someone booked a listing which is favourited by current user
+      const favourites: Array<Listing> = await this.favoriteService.getFavoritesByUser(this.user) ?? [];
+
+      for (const favour of favourites) {
+        if (favour.id === listing.id) {
+          notifyMessage =
+          `"${favour.title}" in your favorites has been booked and it's no longer available between the dates ${from} ~ ${to}.`
+          this.notify(notifyMessage);
+          break;
+        }
+      }
+    });
   }
 
   async onFavoritedToggle(listing: Listing | null) {

packages/portal/src/app/shared/favorite.service.ts

@@ -1,10 +1,13 @@
-import { Injectable } from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { UserRole } from "./user/user.service";
+import { RealtimeService } from "./realtime.service";
 
 @Injectable({
   providedIn: "root",
 })
 export class FavoriteService {
+  private realtimeService = inject(RealtimeService);
+
   async addFavorite(listing: Listing, user: User) {
     const resource = await fetch("/api/favorites", {
       method: "POST",
@@ -13,7 +16,7 @@ export class FavoriteService {
         user,
       }),
     });
-
+    this.realtimeService.broadcastFavouriteNotification(listing);
     return resource.status === 200;
   }
 

packages/portal/src/app/shared/listing.service.ts

@@ -1,11 +1,13 @@
 import { Injectable, inject } from "@angular/core";
 import { WindowService } from "../core/window/window.service";
+import { RealtimeService } from "./realtime.service";
 
 @Injectable({
   providedIn: "root",
 })
 export class ListingService {
   private windowService = inject(WindowService);
+  private realtimeService = inject(RealtimeService);
 
   async getListings({ limit = 10, offset = 0 } = {}): Promise<Listing[]> {
     const resource = await fetch(`/api/listings?limit=${limit}&offset=${offset}`).then(response => {
@@ -69,6 +71,7 @@ export class ListingService {
   }
 
   async reserve(reservationDetails: ReservationRequest): Promise<CheckoutSession> {
+    console.log("reservationDetails = ", reservationDetails)
     const resource = await fetch(`/api/checkout`, {
       method: "POST",
       headers: {
@@ -80,6 +83,13 @@ export class ListingService {
     if (resource.status !== 200) {
       throw new Error(checkoutSession.error);
     }
+    const listing = await this.getListingById(reservationDetails.listingId ?? "");
+    if (listing) {
+      this.realtimeService.broadcastCheckoutNotification(listing, reservationDetails.from, reservationDetails.to);
+    }
+    else {
+      console.log(`Invalid reservationDetails.listingId = ${reservationDetails.listingId}`);
+    }
     return checkoutSession;
   }
 }

packages/portal/src/app/shared/realtime.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from "@angular/core";
+import * as sioClient from "socket.io-client";
+import { environment } from "src/environments/environment";
+
+@Injectable({
+  providedIn: "root",
+})
+export class RealtimeService {
+  client = {} as sioClient.Socket;
+
+  constructor() {
+
+    if (!environment.notificationUrl || !environment.notificationPath) {
+      // TODO: disable this feature at the injector level if the URL or Path is not set.
+      alert("RealtimeService: Notification URL or Path is not set. Please check environment.ts file.");
+    }
+
+    this.client = sioClient.io(environment.notificationUrl, {
+      path: environment.notificationPath,
+    });
+  }
+
+  broadcastFavouriteNotification(listing: Listing) {
+    this.client.emit("sendFavourite", listing.title);
+  }
+
+  broadcastCheckoutNotification(listing: Listing, from: string, to: string) {
+    this.client.emit("sendCheckout", listing, from, to);
+  }
+
+  getNotifiedForFavourite(notifyAction: (listingTitle: string) => void | Promise<void>) {
+    this.client.on("notifyFavourite", async (listingTitle: string) => {
+      await notifyAction(listingTitle);
+    });
+  }
+
+  getNotifiedForCheckout(notifyAction: (listing: Listing, from: string, to: string) => void | Promise<void>) {
+    this.client.on("notifyCheckout", async (listing: Listing, from: string, to: string) => {
+      await notifyAction(listing, from, to);
+    });
+  }
+}

packages/portal/src/environments/environment.prod.ts

@@ -8,4 +8,5 @@ export const environment = {
   strapiGraphQlUri: "{{SERVICE_CMS_URI_PLACEHOLDER}}/graphql",
   aiEnableChat: "{{AI_ENABLE_CHAT_PLACEHOLDER}}",
   aiChatApiUri: "{{AI_CHAT_API_URI_PLACEHOLDER}}",
+  notificationUrl: "{{WEB_PUB_SUB_URL_PLACEHOLDER}}",
 };

packages/portal/src/environments/environment.ts

@@ -8,6 +8,8 @@ export const environment = {
   strapiGraphQlUri: process.env["CODESPACE_NAME"] ? `https://${process.env["CODESPACE_NAME"]}-1337.${process.env["GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN"]}/graphql` : 'http://localhost:1337/graphql',
   aiEnableChat: process.env["AI_ENABLE_CHAT"],
   aiChatApiUri: process.env["AI_CHAT_API_URI"],
+  notificationUrl: process.env["SERVICE_WEB_PUB_SUB_URL"] as string,
+  notificationPath: process.env["SERVICE_WEB_PUB_SUB_PATH"] as string,
 };
 
 /*

packages/portal/src/styles/styles.scss

@@ -76,3 +76,16 @@ ul {
       height: 637px;
   }
   }
+
+
+// ::ng-deep .success-snackbar {
+//   background: rgb(92, 147, 92) !important;
+//   background: rgb(92, 147, 92) !important;
+// }
+
+body {
+  .mdc-snackbar .mdc-snackbar__surface
+  {
+    background-color: rgb(92, 147, 92);
+  }
+}

packages/realtime/.env.example

@@ -0,0 +1,2 @@
+SERVICE_WEB_PUBSUB_CONNECTION_STRING=
+SERVICE_WEB_PUBSUB_PORT=4242

packages/realtime/.gitignore

@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db