Can now edit thread

Author: tschaffter

client/app/discussion/app-thread/app-thread.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="thread$ | async as thread">
     <div class="app-primary-header">
         <mat-icon class="app-nav-back-icon" routerLink="/discussion">keyboard_arrow_left</mat-icon>
-        <h1>{{ thread.title }}</h1>
+        <h1>Thread</h1>
     </div>
 
     <thread [thread]="thread"></thread>

client/components/messaging/messaging.service.ts

@@ -50,12 +50,22 @@ export class MessagingService {
      */
     updateThread(thread: Thread): Observable<Thread> {
         return this.httpClient.patch<Thread>(`/api/threads/${thread._id}`, [
-            { op: 'replace', path: '/title', value: thread.title }
+            { op: 'replace', path: '/title', value: thread.title },
         ]);
     }
 
     // MESSAGES FUNCTIONS
 
+    /**
+     * Returns the messages associated to the thread specified.
+     * @param thread
+     */
+    getMessages(thread: Thread): Observable<Message[]> {
+        return this.httpClient
+            .get<Message[]>(`/api/threads/${thread._id}/messages`)
+            .pipe(map(messages => orderBy(['createdAt'], ['asc'], messages)));
+    }
+
     /**
      * Creates a new message and associates it to the thread specified.
      * @param thread
@@ -99,12 +109,6 @@ export class MessagingService {
         this.secondarySidenavService.open();
     }
 
-    getMessagesByThread(thread: Thread): Observable<Message[]> {
-        return this.httpClient
-            .get<Message[]>(`/api/threads/entity/${thread.entityId}/${thread._id}/messages`)
-            .pipe(map(messages => orderBy(['createdAt'], ['asc'], messages)));
-    }
-
     updateMessage(thread: Thread, message: Message): Observable<Message> {
         return this.httpClient.patch<Message>(
             `/api/threads/entity/${thread.entityId}/${thread._id}/messages/${message._id}`,

client/components/messaging/thread-sidenav/thread-sidenav.component.ts

@@ -52,7 +52,7 @@ export class ThreadSidenavComponent implements OnDestroy {
                 take(1),
                 // TODO Emit socket event when Message is created or added
                 tap(thread => this.socketMessagesEventName = `message:entity:${thread.entityId}:${thread._id}`),
-                switchMap(thread => this.messagingService.getMessagesByThread(thread))
+                switchMap(thread => this.messagingService.getMessages(thread))
             )
             .subscribe(messages => {
                 this._messages.next(messages);

client/components/messaging/thread/thread.component.ts

@@ -5,8 +5,10 @@ import { App } from 'models/entities/app.model';
 import { Thread } from 'models/messaging/thread.model';
 // import { AppService } from './../../app.service';
 // import config from '../../app.constants';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, filter, take, tap } from 'rxjs/operators';
 import { NotificationService } from 'components/notification/notification.service';
+import { MessagingService } from '../messaging.service';
+import { Message } from 'models/messaging/message.model';
 
 @Component({
     selector: 'thread',
@@ -15,13 +17,18 @@ import { NotificationService } from 'components/notification/notification.servic
 })
 export class ThreadComponent implements OnInit {
     private _thread: BehaviorSubject<Thread> = new BehaviorSubject<Thread>(null);
+    private messages: BehaviorSubject<Message[]> = new BehaviorSubject<Message[]>([]);
 
     // @Input() private thread$: Observable<Thread>;
     private showThreadEditTemplate = false;
 
-    static parameters = [Router, ActivatedRoute, NotificationService];
-    constructor(private router: Router, private route: ActivatedRoute, private notificationService: NotificationService) {
-
+    static parameters = [Router, ActivatedRoute, NotificationService, MessagingService];
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private notificationService: NotificationService,
+        private messagingService: MessagingService
+    ) {
         // this.thread$ = this.route.params.pipe(
         //     switchMap(res => this.dataCatalogService.get(res.id))
         // );
@@ -33,12 +40,32 @@ export class ThreadComponent implements OnInit {
 
     @Input()
     set thread(thread) {
-        console.log('THEAD IS NOW', thread);
         this._thread.next(thread);
     }
 
+    get messages$(): Observable<Message[]> {
+        return this.messages.asObservable();
+    }
+
     ngOnInit() {
-        // this.app$ = this.appService.getApp();
+        this._thread
+            .pipe(
+                filter(thread => !!thread),
+                take(1),
+                // TODO Emit socket event when Message is created or added
+                // tap(thread => this.socketMessagesEventName = `message:entity:${thread.entityId}:${thread._id}`),
+                switchMap(thread => this.messagingService.getMessages(thread))
+            )
+            .subscribe(
+                messages => {
+                    this.messages.next(messages);
+                    // this.socketService.syncArraySubject(this.socketMessagesEventName,
+                    //     this._messages, (items: Message[]) => {
+                    //         return orderBy('createdAt', 'asc', items);
+                    //     });
+                },
+                err => console.error(err)
+            );
     }
 
     getLink(): string {

client/components/messaging/thread/thread.html

@@ -38,6 +38,17 @@
                 </mat-menu>
             </div>
         </mat-card-header>
+
+        <div *ngIf="messages$ | async as messages">
+                <ng-template ngFor let-message let-i="index" let-first="first" [ngForOf]="messages">
+                    <!-- <message-date-separator *ngIf="first" class="message-date-separator" [isoDate]="message.createdAt"></message-date-separator>
+                    <message-date-separator *ngIf="!first && !(message.createdAt | sameDay: (messages)[i-1].createdAt)" class="message-date-separator" [isoDate]="message.createdAt"></message-date-separator> -->
+                    <!-- TODO Remove message.showStartThreadButton -->
+                    <!-- TODO Remove message.showReplyButton -->
+                    <!-- <message [thread]="thread" [message]="message" (deleteMessage)="onDeleteMessage($event)" (editMessage)="onEditMessage($event)"></message> -->
+                </ng-template>
+            </div>
+            <!-- <message-new class="app-messaging-new" [thread]="thread" (newMessage)="onNewMessage($event)"></message-new> -->
     </mat-card>
 
     <ng-template #showThreadEditForm>

server/api/thread/index.js

@@ -17,6 +17,9 @@ router.patch('/:id', auth.isAuthenticated(), controller.patch);
 // Returns the threads associated with the entity specified.
 router.get('/entity/:entityId', auth.isAuthenticated(), controller.indexByEntity);
 
+// Returns the messages for the thread specified.
+router.get('/:id/messages', auth.isAuthenticated(), controller.indexMessages);
+
 // Adds a message to the thread specified.
 router.post('/:id/messages', auth.isAuthenticated(), controller.createMessage);
 
@@ -27,6 +30,8 @@ router.get('/:id/messages/count', auth.isAuthenticated(), controller.messagesCou
 
 
 
+
+
 // import {
 //     accessTypes,
 // } from '../../config/environment';
@@ -44,15 +49,6 @@ router.get('/:id/messages/count', auth.isAuthenticated(), controller.messagesCou
 // // ),
 // controller.destroy);
 
-// // Returns the messages for the thread specified.
-// router.get('/entity/:entityId/:id/messages',
-// // auth.canAccessEntity(
-// //     READ_ACCESS,
-// //     WRITE_ACCESS,
-// //     ADMIN_ACCESS
-// // ),
-// controller.indexMessages);
-
 // // Patches the message specified.
 // router.patch('/entity/:entityId/:id/messages/:messageId',
 // // auth.hasPermissionForEntityRelatedObject(Thread),