Load Messages

Author: kamilkisiela

client/src/app/graphql/graphql-root.component.ts

@@ -5,6 +5,7 @@ import { pluck } from 'rxjs/operators';
 
 import { Chat, Pages, PageChangeEvent, MessageEvent, ID } from '../whatsapp';
 import GetChats from './queries/get-chats.graphql';
+import GetChat from './queries/get-chat.graphql';
 
 @Component({
   selector: 'app-graphql-root',
@@ -52,5 +53,11 @@ export class GraphQLRootComponent {
       .valueChanges.pipe(pluck('data', 'chats'));
   }
 
-  loadChat(id: ID) {}
+  loadChat(id: ID) {
+    this.chat = this.loona
+      .query(GetChat, {
+        id,
+      })
+      .valueChanges.pipe(pluck('data', 'chat'));
+  }
 }

client/src/app/graphql/queries/get-chat.graphql.ts

@@ -0,0 +1,19 @@
+import gql from 'graphql-tag';
+
+import { MessageFragment, UserFragment } from './fragments.graphql';
+
+export default gql`
+  query getChat($id: ID!) {
+    chat(id: $id) @rest(type: "Chat", path: "/chats/{args.id}") {
+      id @export(as: "chatId")
+      members @rest(type: "[User]", path: "/chats/:chatId/members") {
+        ...UserFragment
+      }
+      messages @rest(type: "[Message]", path: "/chats/:chatId/messages") {
+        ...MessageFragment
+      }
+    }
+  }
+  ${MessageFragment}
+  ${UserFragment}
+`;

client/src/app/ngrx/chats.service.ts

@@ -19,6 +19,10 @@ export class ChatsService {
     );
   }
 
+  getMessages(chatId: ID) {
+    return this.fetchChatMessages(chatId);
+  }
+
   private fetchChats() {
     return this.http.get<ChatsResponse>(api('/chats'));
   }
@@ -27,6 +31,10 @@ export class ChatsService {
     return this.http.get<UserResponse>(link);
   }
 
+  private fetchChatMessages(id: string) {
+    return this.http.get<ChatMessagesResponse>(api(`/chats/${id}/messages`));
+  }
+
   private resolveChat(chat: ChatResponse) {
     return combineLatest(chat.members.map(link => this.fetchUser(link))).pipe(
       map(members => {

client/src/app/ngrx/ngrx-root.component.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import { Chat, Pages, PageChangeEvent, MessageEvent, ID } from '../whatsapp';
-import { LoadChats } from './state/chat.actions';
+import { LoadChats, LoadMessages } from './state/chat.actions';
 import { AppState } from './app.state';
 
 @Component({
@@ -55,5 +55,13 @@ export class NgRxRootComponent {
     this.chats = this.store.select(state => state.chats);
   }
 
-  loadChat(id: ID) {}
+  loadChat(id: ID) {
+    this.store.dispatch(
+      new LoadMessages({
+        chatId: id,
+      }),
+    );
+
+    this.chat = this.store.select(state => state.chats.find(c => c.id === id));
+  }
 }

client/src/app/ngrx/state/chat.actions.ts

@@ -5,6 +5,10 @@ export enum ActionTypes {
   LoadChats = '[Chats] Load',
   LoadChatsSuccess = '[Chats] Load Success',
   LoadChatsFailure = '[Chats] Load Failure',
+
+  LoadMessages = '[Chat] Load messages',
+  LoadMessagesSuccess = '[Chat] Load messages Success',
+  LoadMessagesFailure = '[Chat] Load messages Failure',
 }
 
 // All chats
@@ -26,4 +30,36 @@ export class LoadChatsFailure implements Action {
   readonly type = ActionTypes.LoadChatsFailure;
 }
 
-export type ChatAction = LoadChats | LoadChatsSuccess | LoadChatsFailure;
+// Chat's messages
+
+export class LoadMessages implements Action {
+  readonly type = ActionTypes.LoadMessages;
+
+  constructor(
+    public payload: {
+      chatId: ID;
+    },
+  ) {}
+}
+
+export class LoadMessagesSuccess implements Action {
+  readonly type = ActionTypes.LoadMessagesSuccess;
+  constructor(
+    public payload: {
+      chatId: ID;
+      messages: Message[];
+    },
+  ) {}
+}
+
+export class LoadMessagesFailure implements Action {
+  readonly type = ActionTypes.LoadMessagesFailure;
+}
+
+export type ChatAction =
+  | LoadChats
+  | LoadChatsSuccess
+  | LoadChatsFailure
+  | LoadMessages
+  | LoadMessagesSuccess
+  | LoadMessagesFailure;

client/src/app/ngrx/state/chat.effects.ts

@@ -9,6 +9,8 @@ import {
   ActionTypes,
   LoadChatsSuccess,
   LoadChatsFailure,
+  LoadMessagesSuccess,
+  LoadMessagesFailure,
 } from './chat.actions';
 import { User } from '../../whatsapp';
 import { ChatsService } from '../chats.service';
@@ -31,4 +33,24 @@ export class ChatEffects {
       );
     }),
   );
+
+  @Effect()
+  loadMessages$: Observable<ChatAction> = this.actions$.pipe(
+    ofType(ActionTypes.LoadMessages),
+    mergeMap(action =>
+      this.store$
+        .select(state => state.chats.find(c => c.id === action.payload.chatId))
+        .pipe(first()),
+    ),
+    mergeMap(chat =>
+      this.chats
+        .getMessages(chat.id)
+        .pipe(
+          mergeMap(messages =>
+            of(new LoadMessagesSuccess({ messages, chatId: chat.id })),
+          ),
+        ),
+    ),
+    catchError(() => of(new LoadMessagesFailure())),
+  );
 }

client/src/app/ngrx/state/chat.reducer.ts

@@ -14,6 +14,21 @@ export function chatReducer(
       return chats;
     }
 
+    case ActionTypes.LoadMessagesSuccess: {
+      const { chatId, messages } = action.payload;
+
+      return state.map(chat => {
+        if (chat.id === chatId) {
+          return {
+            ...chat,
+            messages,
+          };
+        }
+
+        return chat;
+      });
+    }
+
     default:
       return state;
   }