Combine with local-only state

client/src/app/graphql/chat.actions.ts

@@ -0,0 +1,6 @@
+import { ID } from '../whatsapp';
+
+export class ToggleStar {
+  static type = '[Chat] toggle star';
+  constructor(public id: ID) {}
+}

client/src/app/graphql/chat.state.ts

@@ -1,7 +1,15 @@
-import { State, Update, Context } from '@loona/angular';
+import {
+  State,
+  Update,
+  Context,
+  Resolve,
+  Effect,
+  EffectContext,
+} from '@loona/angular';
 import gql from 'graphql-tag';
 
 import NewMessage from './queries/new-message.graphql';
+import { ToggleStar } from './chat.actions';
 
 @State()
 export class ChatState {
@@ -25,16 +33,39 @@ export class ChatState {
         if (!data.messages || !data.messages.length) {
           data.messages = [];
         }
-        
+
         const message = {
           id,
           __typename: 'Message',
         };
 
-
         data.messages.push(message);
         data.recentMessage = message;
       },
     );
   }
+
+  @Resolve('Chat.starred')
+  starred() {
+    // default value
+    return false;
+  }
+
+  @Effect(ToggleStar)
+  toggleStar(action, context: EffectContext) {
+    const id = action.id;
+
+    context.patchFragment(
+      gql`
+        fragment chat on Chat {
+          id
+          starred
+        }
+      `,
+      { id },
+      data => {
+        data.starred = !data.starred;
+      },
+    );
+  }
 }

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

@@ -15,6 +15,7 @@ import {
 import GetChats from './queries/get-chats.graphql';
 import GetChat from './queries/get-chat.graphql';
 import NewMessage from './queries/new-message.graphql';
+import { ToggleStar } from './chat.actions';
 
 @Component({
   selector: 'app-graphql-root',
@@ -85,7 +86,9 @@ export class GraphQLRootComponent {
       .subscribe();
   }
 
-  toggleStar(chatId: ID) {}
+  toggleStar(chatId: ID) {
+    this.loona.dispatch(new ToggleStar(chatId));
+  }
 
   loadChats() {
     this.chats = this.loona

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

@@ -6,6 +6,7 @@ export default gql`
   query getChat($id: ID!) {
     chat(id: $id) @rest(type: "Chat", path: "/chats/{args.id}") {
       id @export(as: "chatId")
+      starred @client
       members @rest(type: "[User]", path: "/chats/:chatId/members") {
         ...UserFragment
       }

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

@@ -6,6 +6,7 @@ export default gql`
   {
     chats @rest(type: "Chat", path: "/chats") {
       id @export(as: "chatId")
+      starred @client
       members @rest(type: "[User]", path: "/chats/:chatId/members") {
         ...UserFragment
       }

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

@@ -2,8 +2,20 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
-import { Chat, Pages, PageChangeEvent, MessageEvent, ID, pickOtherUser } from '../whatsapp';
-import { LoadChats, LoadMessages, SendMessage } from './state/chat.actions';
+import {
+  Chat,
+  Pages,
+  PageChangeEvent,
+  MessageEvent,
+  ID,
+  pickOtherUser,
+} from '../whatsapp';
+import {
+  LoadChats,
+  LoadMessages,
+  SendMessage,
+  ToggleStar,
+} from './state/chat.actions';
 import { AppState } from './app.state';
 
 @Component({
@@ -56,7 +68,9 @@ export class NgRxRootComponent {
     );
   }
 
-  toggleStar(chatId: ID) {}
+  toggleStar(chatId: ID) {
+    this.store.dispatch(new ToggleStar({ chatId }));
+  }
 
   loadChats() {
     this.store.dispatch(new LoadChats());

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

@@ -14,6 +14,8 @@ export enum ActionTypes {
   SendMessageOptimistic = '[Chat] Send message Optimistic',
   SendMessageSuccess = '[Chat] Send message Success',
   SendMessageFailure = '[Chat] Send message Failure',
+
+  ToggleStar = '[Chat] Toggle star',
 }
 
 // All chats
@@ -106,6 +108,15 @@ export class SendMessageFailure implements Action {
   ) {}
 }
 
+export class ToggleStar implements Action {
+  readonly type = ActionTypes.ToggleStar;
+  constructor(
+    public payload: {
+      chatId: ID;
+    },
+  ) {}
+}
+
 export type ChatAction =
   | LoadChats
   | LoadChatsSuccess
@@ -116,4 +127,5 @@ export type ChatAction =
   | SendMessage
   | SendMessageOptimistic
   | SendMessageSuccess
-  | SendMessageFailure;
+  | SendMessageFailure
+  | ToggleStar;

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

@@ -81,6 +81,19 @@ export function chatReducer(
       });
     }
 
+    case ActionTypes.ToggleStar: {
+      const { chatId } = action.payload;
+
+      return state.map(chat =>
+        chat.id === chatId
+          ? {
+              ...chat,
+              starred: !chat.starred,
+            }
+          : chat,
+      );
+    }
+
     default:
       return state;
   }