list channels

src/app/chat/chat/channel-list/channel-entry/channel-entry.component.scss

@@ -1,5 +1,5 @@
 button {
-  width: 70%;
+  width: 95%;
   display: block;
-  margin: 10px auto;
+  margin: 5px auto;
 }

src/app/chat/chat/channel-list/channel-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { Channel } from '../../../models/channel';
 import { ChatService } from '../../../services/chat.service';
 import { Subject, takeUntil } from 'rxjs';
@@ -20,7 +20,7 @@ export class ChannelListComponent implements OnInit, OnDestroy {
   constructor(private chatService: ChatService) { }
 
   ngOnInit() {
-    this.chatService.ListChannels()
+    this.chatService.ListAvailableChannels()
       .pipe(takeUntil(this.destroy))
       .subscribe(channels => {
         this.channels = channels;

src/app/services/chat.service.ts

@@ -1,37 +1,38 @@
 import { Injectable } from '@angular/core';
-import { from, Observable } from 'rxjs';
+import { catchError, from, map, Observable, throwError } from 'rxjs';
 import { Channel } from '../models/channel';
 import { Message } from '../models/message';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environment/environment';
+import { ListAvailableChannelsResponse } from './responses/chat';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ChatService {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
-  // TODO: implement
-  public ListChannels(): Observable<Channel[]> {
-    return new Observable<Channel[]>(subscriber => {
-      subscriber.next([
-        {
-          id: 0,
-          name: 'default',
-          description: 'this is the default channel'
-        },
-        {
-          id: 1,
-          name: 'XIV. Leo',
-          description: 'this is another channel'
-        },
-      ]);
-      subscriber.complete();
-    });
+  public ListAvailableChannels(): Observable<Channel[]> {
+    let url = `${environment.apiBase}/chat/channels`
+    return this.http.get<ListAvailableChannelsResponse>(url, { withCredentials: true })
+      .pipe(
+        map(response => {
+          if (response.error) {
+            throw new Error(response.error);
+          }
+
+          if (response.channels) {
+            return response.channels;
+          }
+
+          throw new Error("bad API response, missing channels with no error");
+        }),
+        catchError(error => throwError(() => new Error(error.error.message)))
+      );
   }
 
   // TODO: implement
-  // TODO: refactor this so it first returns the n last messages,
-  //       then listens for incoming messages and forwards them as they come 
   public GetMessages(channelID: number): Observable<Message> {
 
     return from([
@@ -44,21 +45,21 @@ export class ChatService {
       },
       {
         id: 1,
-        sender: 'admin',
+        sender: 'alice',
         channel: 1,
         time: new Date(),
         content: 'this is my first message'
       },
       {
         id: 1,
-        sender: 'admin',
+        sender: 'bob',
         channel: 1,
         time: new Date(),
         content: 'this is my first message'
       },
       {
         id: 1,
-        sender: 'admin',
+        sender: 'charlie',
         channel: 1,
         time: new Date(),
         content: 'this is my first message'

src/app/services/responses/chat.ts

@@ -0,0 +1,6 @@
+import { Channel } from "../../models/channel";
+import { APIResponse } from "./basic";
+
+export class ListAvailableChannelsResponse extends APIResponse {
+  public channels?: Channel[];
+}