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 ListAvailableChannels(): Observable<Channel[]> {
-  public ListChannels(): Observable<Channel[]> {
+    let url = `${environment.apiBase}/chat/channels`
-    return new Observable<Channel[]>(subscriber => {
+    return this.http.get<ListAvailableChannelsResponse>(url, { withCredentials: true })
-      subscriber.next([
+      .pipe(
-        {
+        map(response => {
-          id: 0,
+          if (response.error) {
-          name: 'default',
+            throw new Error(response.error);
-          description: 'this is the default channel'
+          }
-        },
+
-        {
+          if (response.channels) {
-          id: 1,
+            return response.channels;
-          name: 'XIV. Leo',
+          }
-          description: 'this is another channel'
+
-        },
+          throw new Error("bad API response, missing channels with no error");
-      ]);
+        }),
-      subscriber.complete();
+        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[];
+}