Add likes/reposts to the state

src/app/app.action-types.ts

@@ -1,2 +1,4 @@
 export const POST_ADD = 'POST_ADD';
+export const POST_TOGGLE_LIKE = 'POST_TOGGLE_LIKE';
+export const POST_TOGGLE_REPOST = 'POST_TOGGLE_REPOST';
 export const NEW_POST_IDS_RESET = 'NEW_POST_IDS_RESET';

src/app/app.reducers.ts

@@ -1,10 +1,15 @@
 import { combineReducers } from 'redux';
 
 import { mockPosts } from './timeline/mock-posts';
-import { POST_ADD, NEW_POST_IDS_RESET } from './app.action-types';
+import {
+  POST_ADD,
+  POST_TOGGLE_LIKE,
+  POST_TOGGLE_REPOST,
+  NEW_POST_IDS_RESET,
+} from './app.action-types';
 
 const LAST_TWO_POST_IDS = mockPosts.slice(0, 2).map(post => post.id);
-function newPostIds(state = LAST_TWO_POST_IDS, action) {
+function newPostIds(state: string[] = LAST_TWO_POST_IDS, action) {
   if (action.type === POST_ADD) {
     return [action.value.id, ...state];
   }
@@ -14,11 +19,27 @@ function newPostIds(state = LAST_TWO_POST_IDS, action) {
   return state;
 }
 
-function posts(state = mockPosts, action) {
-  if (action.type === POST_ADD) {
-    return [action.value, ...state];
+function posts(state: IPost[] = mockPosts, action) {
+  switch (action.type) {
+    case POST_ADD:
+      return [action.value, ...state];
+    case POST_TOGGLE_LIKE:
+      return state.map(post => {
+        if (post.id === action.value.id) {
+          return Object.assign({}, action.value, { liked: !action.value.liked });
+        }
+        return post;
+      });
+    case POST_TOGGLE_REPOST:
+      return state.map(post => {
+        if (post.id === action.value.id) {
+          return Object.assign({}, action.value, { reposted: !action.value.reposted });
+        }
+        return post;
+      });
+    default:
+      return state;
   }
-  return state;
 }
 
 const USER_INITIAL_STATE = {

src/app/post-modal/post-modal.component.html

@@ -2,7 +2,11 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-body">
-        <app-post [post]="post"></app-post>
+        <app-post
+          [post]="post"
+          (toggleLikePost)="handleToggleLikePost($event)"
+          (toggleRepost)="handleToggleRepost($event)"
+          ></app-post>
       </div>
     </div>
   </div>

src/app/post-modal/post-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ElementRef, ViewChild } from '@angular/core';
 declare var $;
 
@@ -9,9 +9,21 @@ declare var $;
 })
 export class PostModalComponent {
   @Input() post: IPost;
+  @Output() private toggleLikePost: EventEmitter<void> = new EventEmitter<void>();
+  @Output() private toggleRepost: EventEmitter<void> = new EventEmitter<void>();
   @ViewChild('modal') private modal: ElementRef;
 
   open(): void {
     $(this.modal.nativeElement).modal();
   }
+
+  // tslint:disable-next-line:no-unused-variable
+  private handleToggleLikePost() {
+    this.toggleLikePost.emit(null);
+  }
+
+  // tslint:disable-next-line:no-unused-variable
+  private handleToggleRepost() {
+    this.toggleRepost.emit(null);
+  }
 }

src/app/post/post.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-post',
@@ -7,18 +7,20 @@ import { Component, Input } from '@angular/core';
 })
 export class PostComponent {
   @Input() private post: IPost;
+  @Output() private toggleLikePost: EventEmitter<void> = new EventEmitter<void>();
+  @Output() private toggleRepost: EventEmitter<void> = new EventEmitter<void>();
 
   // tslint:disable-next-line:no-unused-variable
   private handleLikeButtonClick(event) {
-    this.post.liked = !this.post.liked;
+    this.toggleLikePost.emit(null);
 
     // Prevent the post modal from opening.
     event.stopPropagation();
   }
 
   // tslint:disable-next-line:no-unused-variable
   private handleRepostButtonClick(event) {
-    this.post.reposted = !this.post.reposted;
+    this.toggleRepost.emit(null);
 
     // Prevent the post modal from opening.
     event.stopPropagation();

src/app/timeline/timeline.component.html

@@ -22,8 +22,15 @@
       <app-post
         [post]="post"
         (click)="postModal.open()"
+        (toggleLikePost)="handleToggleLikePost(post)"
+        (toggleRepost)="handleToggleRepost(post)"
         ></app-post>
-      <app-post-modal #postModal [post]="post"></app-post-modal>
+      <app-post-modal
+        #postModal
+        [post]="post"
+        (toggleLikePost)="handleToggleLikePost(post)"
+        (toggleRepost)="handleToggleRepost(post)"
+        ></app-post-modal>
     </li>
   </ul>
 </div>

src/app/timeline/timeline.component.ts

@@ -50,6 +50,8 @@ export class TimelineComponent {
 
   @Output() private newPost: EventEmitter<IPost> = new EventEmitter<IPost>();
   @Output() private newPostNotificationClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() private toggleLikePost: EventEmitter<IPost> = new EventEmitter<IPost>();
+  @Output() private toggleRepost: EventEmitter<IPost> = new EventEmitter<IPost>();
 
   // tslint:disable-next-line:no-unused-variable
   private handleNewPostNotificationClick() {
@@ -80,6 +82,16 @@ export class TimelineComponent {
     }
   }
 
+  // tslint:disable-next-line:no-unused-variable
+  private handleToggleLikePost(post: IPost) {
+    this.toggleLikePost.emit(post);
+  }
+
+  // tslint:disable-next-line:no-unused-variable
+  private handleToggleRepost(post: IPost) {
+    this.toggleRepost.emit(post);
+  }
+
   // tslint:disable-next-line:no-unused-variable
   private postAnimationState(post: IPost): 'visible' | 'hidden' {
     if (this.newPostIds.indexOf(post.id) !== -1) {

src/app/timeline/timeline.container.ts

@@ -1,7 +1,12 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NgRedux } from 'ng2-redux';
 
-import { POST_ADD, NEW_POST_IDS_RESET } from '../app.action-types';
+import {
+  POST_ADD,
+  POST_TOGGLE_LIKE,
+  POST_TOGGLE_REPOST,
+  NEW_POST_IDS_RESET,
+} from '../app.action-types';
 
 @Component({
   selector: 'app-timeline-container',
@@ -12,6 +17,8 @@ import { POST_ADD, NEW_POST_IDS_RESET } from '../app.action-types';
       [isRedux]="true"
       (newPost)="handleNewPost($event)"
       (newPostNotificationClick)="handleNewPostNotificationClick()"
+      (toggleLikePost)="handleToggleLikePost($event)"
+      (toggleRepost)="handleToggleRepost($event)"
       ></app-timeline>
   `,
 })
@@ -42,6 +49,8 @@ export class TimelineContainerComponent implements OnDestroy {
     return {
       handleNewPost: (post: IPost) => dispatch({ type: POST_ADD, value: post }),
       handleNewPostNotificationClick: () => dispatch({ type: NEW_POST_IDS_RESET }),
+      handleToggleLikePost: (post: IPost) => dispatch({ type: POST_TOGGLE_LIKE, value: post }),
+      handleToggleRepost: (post: IPost) => dispatch({ type: POST_TOGGLE_REPOST, value: post }),
     };
   }
 }