From 502702ba72e5bfa6679a4481ab2484f595c7de77 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Tue, 7 Feb 2023 15:33:00 +0100
Subject: [PATCH] Improve visualization of notifications

---
 src/app/notifications/notifications.html    |  5 ++++-
 src/app/services/interfaces.ts              |  4 +++-
 src/app/services/relay.ts                   |  9 ++++++---
 src/app/services/ui.ts                      |  8 +++++++-
 src/app/shared/profile-name/profile-name.ts | 17 +++++++++++++----
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/app/notifications/notifications.html b/src/app/notifications/notifications.html
index debd618..98c047b 100644
--- a/src/app/notifications/notifications.html
+++ b/src/app/notifications/notifications.html
@@ -1 +1,4 @@
-<div *ngFor="let notification of ui.notifications">{{notification.message}}</div>
+<div *ngFor="let notification of ui.notifications">
+  <app-profile-name [pubkey]="notification.pubkey"></app-profile-name>
+  {{notification.message}}
+</div>
diff --git a/src/app/services/interfaces.ts b/src/app/services/interfaces.ts
index bb84a10..26c463a 100644
--- a/src/app/services/interfaces.ts
+++ b/src/app/services/interfaces.ts
@@ -251,9 +251,11 @@ export interface LabelModel {
 }
 
 export interface NotificationModel {
-  /** The event ID or pubkey of the notification */
+  /** The event ID of the notification */
   id: string;
 
+  pubkey: string;
+
   message: string;
 
   created: number;
diff --git a/src/app/services/relay.ts b/src/app/services/relay.ts
index d83a347..9af4e4d 100644
--- a/src/app/services/relay.ts
+++ b/src/app/services/relay.ts
@@ -333,22 +333,25 @@ export class RelayService {
     console.log('SAVE EVENT?:', event);
 
     // If the event is a result of notification subscription, we'll parse and update the notification history.
-    if (response.subscription == 'notification') {
+    if (response.subscription == 'notifications') {
       let notification = await this.db.storage.getNotification(event.id!);
 
       if (!notification) {
         let msg = '';
 
         if (event.kind == Kind.Reaction) {
-          msg = `#[${event.pubkey}] reacted with ${event.content} to your post.`;
+          msg = `reacted with ${event.content} to your post.`;
         } else if (event.kind == Kind.Text) {
-          msg = `#[${event.pubkey}] replied to your post.`;
+          msg = `replied to your post.`;
+        } else if (event.kind == Kind.Contacts) {
+          msg = `started following you.`;
         } else {
           msg = `Event kind ${event.kind} notification.`;
         }
 
         notification = {
           id: event.id!,
+          pubkey: event.pubkey,
           message: msg,
           seen: false,
           created: event.created_at,
diff --git a/src/app/services/ui.ts b/src/app/services/ui.ts
index d42aa0f..70d0dc7 100644
--- a/src/app/services/ui.ts
+++ b/src/app/services/ui.ts
@@ -134,7 +134,13 @@ export class UIService {
   notifications: NotificationModel[] = [];
 
   putNotification(notification: NotificationModel) {
-    this.notifications.unshift(notification);
+    const index = this.notifications.findIndex((n) => n.id == notification.id);
+
+    if (index == -1) {
+      this.notifications.unshift(notification);
+    } else {
+      this.notifications[index] = notification;
+    }
   }
 
   putEvent(event: NostrEventDocument) {
diff --git a/src/app/shared/profile-name/profile-name.ts b/src/app/shared/profile-name/profile-name.ts
index 96dd0be..1c95489 100644
--- a/src/app/shared/profile-name/profile-name.ts
+++ b/src/app/shared/profile-name/profile-name.ts
@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ProfileService } from 'src/app/services/profile';
+import { StorageService } from 'src/app/services/storage';
 import { Utilities } from 'src/app/services/utilities';
 import { NostrProfile } from '../../services/interfaces';
 
@@ -8,14 +9,22 @@ import { NostrProfile } from '../../services/interfaces';
   templateUrl: './profile-name.html',
 })
 export class ProfileNameComponent {
-  @Input() publicKey: string = '';
+  @Input() pubkey: string = '';
 
-  profileName = '';
+  profileName? = '';
   tooltip = '';
 
-  constructor(private profiles: ProfileService, private utilities: Utilities) {}
+  constructor(private db: StorageService, private profiles: ProfileService, private utilities: Utilities) {}
+
+  async ngOnInit() {
+    const profile = await this.db.storage.getProfile(this.pubkey);
+
+    if (profile) {
+      this.profileName = profile?.display_name ?? profile.name;
+    } else {
+      this.profileName = this.utilities.getShortenedIdentifier(this.pubkey);
+    }
 
-  ngOnInit() {
     // this.profileName = this.utilities.getNostrIdentifier(this.publicKey);
     // const profile = this.profiles.profiles[this.publicKey] as NostrProfile;
     // if (!profile || !profile.name) {