WIP: Public chat

src/app/app.html

@@ -87,14 +87,15 @@
           <mat-icon [matBadgeHidden]="(ui.unreadNotifications$ | async) == 0" [matBadge]="ui.unreadNotifications$ | async">notifications</mat-icon>
           <span *ngIf="displayLabels">{{ 'App.Notifications' | translate }}</span>
         </a>
-        <!-- <a [routerLink]="['/chat']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
+        <a [routerLink]="['/chat']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
           <mat-icon>chat</mat-icon>
-          <span *ngIf="displayLabels">Channels</span>
+          <span *ngIf="displayLabels">Chats</span>
         </a>
+
         <a [routerLink]="['/m']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
             <mat-icon matBadge="2">mail</mat-icon>
           <span *ngIf="displayLabels">Messages</span>
-        </a> -->
+        </a>
         <a [routerLink]="['/people']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
           <mat-icon>people</mat-icon>
           <span *ngIf="displayLabels">{{ 'App.People' | translate }}</span>

src/app/app.module.ts

@@ -154,6 +154,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { DragScrollModule } from 'ngx-drag-scroll';
 import { ZappersListDialogComponent } from './shared/zappers-list-dialog/zappers-list-dialog.component';
 import { ExampleComponent } from './example/example';
+import { MessageListComponent } from './shared/message-list/message-list.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -245,7 +246,8 @@ import { ExampleComponent } from './example/example';
     TagsComponent,
     BadgeComponent,
     ZappersListDialogComponent,
-    ExampleComponent
+    ExampleComponent,
+    MessageListComponent
   ],
   imports: [
     HttpClientModule,

src/app/chat/chat.html

@@ -1,9 +1,9 @@
 <mat-sidenav-container class="drawer-container" autosize>
   <mat-tab-group mat-align-tabs="center">
-    <mat-tab label="Messages">
+    <mat-tab label="Subscribed">
       <app-chat-list (openChatSidebar)="open.chatSideBar($event)"></app-chat-list>
     </mat-tab>
-    <mat-tab label="Users">
+    <mat-tab label="Public">
       <app-user-list (openUserSidebar)="open.userSideBar($event)"></app-user-list>
     </mat-tab>
   </mat-tab-group>

src/app/chat/chat.ts

@@ -1,6 +1,9 @@
 import { Component, ChangeDetectorRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { ApplicationState } from '../services/applicationstate';
+import { UIService } from '../services/ui';
+import { RelayService } from '../services/relay';
+import { Kind } from 'nostr-tools';
 @Component({
   selector: 'app-chat',
   templateUrl: './chat.html',
@@ -10,7 +13,9 @@ import { ApplicationState } from '../services/applicationstate';
 export class ChatComponent {
   @ViewChild('chatSidebar', { static: false }) chatSidebar!: MatSidenav;
   @ViewChild('userSidebar', { static: false }) userSidebar!: MatSidenav;
-  constructor(private appState: ApplicationState) {}
+  subscription?: string;
+
+  constructor(private appState: ApplicationState, private relayService: RelayService, public ui: UIService) {}
   sidebarTitles = {
     user: '',
     chat: '',
@@ -22,15 +27,24 @@ export class ChatComponent {
       this.me.sidebarTitles.user = title;
     },
     chatSideBar: function (title: string = '') {
+      debugger;
       this.me.chatSidebar.open();
       this.me.userSidebar.close();
       this.me.sidebarTitles.chat = title;
     },
   };
 
   async ngOnInit() {
+    this.ui.clearChats();
+    this.subscription = this.relayService.subscribe([{ kinds: [Kind.ChannelCreation, Kind.ChannelMetadata], limit: 10 }]).id;
+
     this.appState.updateTitle('Chat');
     this.appState.goBack = true;
     this.appState.actions = [];
   }
+
+  ngOnDestroy() {
+    // this.relayService.unsubscribe(this.subscription!);
+    // this.ui.clearChats();
+  }
 }

src/app/message/message.ts

@@ -32,7 +32,7 @@ export class MessageComponent {
   };
 
   async ngOnInit() {
-    this.appState.updateTitle('@Milad');
+    this.appState.updateTitle('');
     this.appState.goBack = true;
     this.appState.showBackButton = true;
     this.appState.actions = [];

src/app/services/chat.service.ts

@@ -51,6 +51,42 @@ export class ChatService {
 
   subscriptions: Subscription[] = [];
 
+  downloadChatRooms() {
+    debugger;
+    // this.chats2 = [];
+    this.#chats = [];
+
+    this.dataService
+      .downloadEventsByQuery([{ kinds: [40, 41] }], 3000)
+      .pipe(
+        finalize(async () => {
+          debugger;
+          for (let index = 0; index < this.#chats.length; index++) {
+            const event = this.#chats[index];
+            const content = await this.nostr.decrypt(event.pubkey, event.content);
+            event.content = content;
+            console.log('DECRYPTED EVENT:', event);
+          }
+        })
+      )
+      .subscribe(async (event) => {
+        if (this.#chats.findIndex((e) => e.id === event.id) > -1) {
+          return;
+        }
+
+        // const gt = globalThis as any;
+        // const content = await gt.nostr.nip04.decrypt(event.pubkey, event.content);
+        // event.content = content;
+
+        this.#chats.unshift(event);
+
+        // this.chats2.push(event);
+        // this.#chatsChanged2.next(this.chats2);
+      });
+
+    // this.subscriptions.push(this.dataService.downloadEventsByQuery([{}]));
+  }
+
   download() {
     // this.chats2 = [];
     this.#chats = [];

src/app/services/data.ts

@@ -582,7 +582,6 @@ export class DataService {
   downloadFromRelay(filters: Filter[], relay: NostrRelay, requestTimeout = 10000): Observable<NostrEventDocument> {
     return new Observable<NostrEventDocument>((observer: Observer<NostrEventDocument>) => {
       const sub = relay.sub([...filters], {}) as NostrSubscription;
-      // relay.subscriptions.push(sub);
 
       sub.on('event', (originalEvent: any) => {
         const event = this.eventService.processEvent(originalEvent);
@@ -599,16 +598,14 @@ export class DataService {
       });
 
       return () => {
-        // console.log('downloadFromRelay:finished:unsub');
-        // When the observable is finished, this return function is called.
         sub.unsub();
       };
     }).pipe(
       timeout(requestTimeout),
       catchError((error) => {
         console.warn('The observable was timed out.');
         return of();
-      }) // Simply return undefined when the timeout is reached.
+      })
     );
   }
 

src/app/services/interfaces.ts

@@ -319,26 +319,32 @@ export interface UserModel {
   bio: string;
 }
 
-export interface MessageModel {
-  id: number;
-  cover: string;
-  message: string;
-}
+// export interface MessageModel {
+//   id: number;
+//   cover: string;
+//   message: string;
+// }
 
 export interface CustomObjectModel {
   tmpl: string;
   data: any;
   formatted?: string;
 }
 
+export interface NostrEventChat extends NostrEvent {
+  about: string;
+  name: string;
+  picture: string;
+}
+
 export class ChatModel {
   'id': number;
   'targetUserId': number;
   'username': string;
   'cover': string;
   'lastMessage': string;
   'lastMessageLength': string | number;
-  'chat': Array<MessageModel>;
+  // 'chat': Array<MessageModel>;
 }
 
 export interface LabelModel {

src/app/services/relay.ts

@@ -427,6 +427,18 @@ export class RelayService {
       this.zapUi.addZap(event);
     }
 
+    if (event.kind == Kind.ChannelCreation) {
+      this.ui.putChat(event);
+    }
+
+    if (event.kind == Kind.ChannelMetadata) {
+      this.ui.putChatMetadata(event);
+    }
+
+    if (event.kind == Kind.ChannelMessage) {
+      this.ui.putChatMessage(event);
+    }
+
     if (response.subscription) {
       const sub = this.subs.get(response.subscription);
       if (sub) {