Add claps, ownerName to post

src/modules/CRMCore.Module.Spa/src/app/posts-state/components/post-comment/post-comment.component.html

@@ -3,7 +3,7 @@
     <img alt="" class="profile-photo-sm pull-left" src="http://placehold.it/300x300">
     <div>
       <a href="#" class="profile-link">{{ comment.ownerName }}</a>
-      <p class="text-muted">Sep 1, 2016</p>
+      <p class="text-muted">{{comment.createdDate | date:'short':'GMT-7'}}</p>
     </div>
   </div>
   <div class="post-text">

src/modules/CRMCore.Module.Spa/src/app/posts-state/components/post-item/post-item.component.html

@@ -1,7 +1,7 @@
 <div class="post-container">
   <img src="http://placehold.it/300x300" alt="user" class="profile-photo-md pull-left" />
   <div class="post-detail">
-    <div class="user-info">
+    <div class="user-info user-post">
       <div *ngIf="!detailMode" class="text-align-right">
         <div id="wrapper">
           <div class="visible">
@@ -11,7 +11,7 @@
       </div>
 
       <h5>
-        <a href="timeline.html" class="profile-link">Alexis Clark</a>
+        <a href="timeline.html" class="profile-link">{{post.ownerName}}</a>
       </h5>
       <p class="text-muted">Posted on {{post.createdDate | date:'short':'GMT-7'}}</p>
 
@@ -22,14 +22,14 @@ <h5>
       <div class="post-text">
         <a class="link-accent">{{post.title}}</a>
         <p>{{post.description }}</p>
-      </div>        
+      </div>
       <div class="none-line-divider"></div>
      </div>
     <ng-template #viewMode>
     <div class="post-text">
       <a class="link-accent" [routerLink]="[post.id]">{{post.title}}</a>
-      <p>{{post.description | words : 10 : '...'}}</p>
-    </div>  
+      <p>{{ post.description | words : 10 : '...' }}</p>
+    </div>
     <a [routerLink]="[post.id]" class="button button--smaller button--chromeless u-baseColor--buttonNormal">Read more…</a>
     <div class="none-line-divider"></div>
     <post-clap [NumberOfClaps] = "post.claps.length"></post-clap>

src/modules/CRMCore.Module.Spa/src/app/posts-state/containers/news-feed-details.component.html

@@ -11,11 +11,11 @@
       </div>
       <div class="icon-wrapper">
         <div class="custom-icon">
-          <post-clap></post-clap>
+          <post-clap [NumberOfClaps] = "numberOfClaps"></post-clap>
         </div>
         <span class="fix-editor">&nbsp;</span>
       </div>
-      <div class="col-md-8">
+      <div class="col-md-8 news-feed-details">
         <post-item [detailMode] = "true" [post]="post$ | async"></post-item>
         <div class="post-content" *ngFor='let comment of comments$ | async'>
           <post-comment [comment]="comment"></post-comment>

src/modules/CRMCore.Module.Spa/src/app/posts-state/containers/news-feed-details.component.ts

@@ -9,7 +9,7 @@ import * as postActions from '../store/actions/post.action';
 import * as fromPost from '../store/reducers';
 import { Store } from '@ngrx/store';
 import { PostActionCreators } from '../store/actions/post.action';
-import { Post, Comment } from '../models';
+import { Post, Comment, Clap } from '../models';
 
 @Component({
     templateUrl: './news-feed-details.component.html',
@@ -19,26 +19,31 @@ export class NewsFeedDetailsComponent implements OnInit, OnDestroy {
   actionsSubscription: Subscription;
   post$: Observable<Post>;
   comments$: Observable<Comment[]>;
+  claps$: Observable<Clap[]>;
+
+  numberOfClaps: number;
   // post: Post  ;
   constructor(private _location: Location, private store: Store<fromPost.State>, route: ActivatedRoute) {
     this.post$ = store.select(fromPost.getSelectedPost);
     this.comments$ = store.select(fromPost.getPostComments);
+    this.claps$ = store.select(fromPost.getPostClaps);
 
     this.actionsSubscription = route.params
       .map(params => PostActionCreators.getPostById(params.id))
       .subscribe(store);
   }
 
   ngOnInit(): void {
-
+    this.claps$.subscribe(clap => {
+      this.numberOfClaps = clap.length;
+    });
   }
 
   ngOnDestroy() {
     this.actionsSubscription.unsubscribe();
   }
 
   onAddComment(comment: Comment) {
-    console.log('Add comment:' + comment.comment);
     this.store.dispatch(PostActionCreators.addComment(comment));
   }
 

src/modules/CRMCore.Module.Spa/src/app/posts-state/models/index.ts

@@ -1,4 +1,4 @@
 export * from './post.model';
 export * from './comment.model';
 export * from './clap.model';
-export * from './schema';
+export * from './schema';

src/modules/CRMCore.Module.Spa/src/app/posts-state/models/post.model.ts

@@ -1,14 +1,16 @@
 export class Post {
-    id:string;
+    id: string;
     title: string;
     description: string;
     createdDate: Date;
     comments: string[];
+    ownerName: string;
+    claps: string[];
 
-    constructor(){
-        this.title = ""
-        this.description = ""
-        this.comments = []       
+    constructor() {
+        this.title = '';
+        this.description = '';
+        this.comments = [];
     }
 }
 

src/modules/CRMCore.Module.Spa/src/app/posts-state/store/reducers/index.ts

@@ -43,6 +43,7 @@ export interface PostState {
 
   export const getCommentEntities = createSelector(getPostEntitiesState, fromPost.getComments);
 
+  export const getClapsEntities = createSelector(getPostEntitiesState, fromPost.getClaps);
 
   export const getSelectedPost = createSelector(
     getPostEntities,
@@ -62,4 +63,13 @@ export interface PostState {
     }
   );
 
+  export const getPostClaps = createSelector(
+    getPostEntities,
+    getSelectedPostId,
+    getClapsEntities,
+    (entities, selectedId, claps) => {
+      return entities[selectedId].claps.map(clap => claps[clap]);
+    }
+  );
+
 

src/modules/CRMCore.Module.Spa/src/app/posts-state/store/reducers/post.reducer.ts

@@ -116,4 +116,6 @@ export const getPosts = (state: State) => state.posts;
 
 export const getComments = (state: State) => state.comments;
 
+export const getClaps = (state: State) => state.claps;
+
 export const getSelectedId = (state: State) => state.selectedPostId;

src/modules/CRMCore.Module.Spa/src/styles.css

@@ -175,7 +175,7 @@ html, body {
     position: relative;
 }
 
-.container-1{ 
+.container-1{
   vertical-align: middle;
   white-space: nowrap;
   position: relative;
@@ -1337,7 +1337,7 @@ visibility:visible !important;
     overflow: hidden;
     position: relative;
   }
-   .post-content-comment{   
+   .post-content-comment{
     overflow: hidden;
     position: relative;
     margin-left: 85px;
@@ -1405,7 +1405,10 @@ p.italic {
     min-width: 0;
   }
 
-
+  .news-feed-details .user-post {
+    margin-left: 55px;
+    position: relative;
+  }
   /*==================================================
     Nearby People CSS
     ==================================================*/