Develop

src/app/core/services/feed/post.service.ts

@@ -48,4 +48,12 @@ export class PostService {
       ),
     );
   }
+
+  deletePost(id: string): Observable<Post> {
+    return this.http
+      .delete<Post>(`http://localhost:3000/post/${id}`)
+      .pipe
+      //TODO
+      ();
+  }
 }

src/app/feed/feed.component.html

@@ -2,9 +2,7 @@
   <ngsocial-post-form (save)="savePost($event)"></ngsocial-post-form>
 
   <ng-container *ngFor="let post of posts$ | async; last as isLast">
-    <ngsocial-post [post]="post">
-      <a [routerLink]="['/feed', post._id]"> See post details </a>
-    </ngsocial-post>
+    <ngsocial-post [post]="post"></ngsocial-post>
 
     <hr *ngIf="isLast" />
   </ng-container>

src/app/feed/post-details/post-details.component.html

@@ -1,3 +1,10 @@
 <div *ngIf="post$ | async as post">
-  <ngsocial-post [post]="post"></ngsocial-post>
+  {{ post.text }}
+  <div class="post__comments" *ngIf="post.comments$ | async as comments">
+    <ul *ngFor="let comment of comments">
+      <li *ngIf="comment.post._id ===post._id">
+        {{ comment.text }}
+      </li>
+    </ul>
+
 </div>

src/app/feed/post-details/post-details.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 
@@ -10,6 +10,7 @@ import { Post } from '../../core/models/post.model';
   styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent {
+  @Input() post: Post | null = null;
   post$ = this.route.data.pipe(map(({ post }) => post as Post));
 
   constructor(private route: ActivatedRoute) {}

src/app/feed/post-form/post-form.component.html

@@ -1,4 +1,5 @@
 <form class="post-form" [formGroup]="postForm" (ngSubmit)="savePost()">
   <textarea formControlName="text" id="text" cols="30"></textarea>
   <button type="submit"> Post </button>
+  <button type="submit"  (ngSubmit)="deletePost()" > delete </button>
 </form>

src/app/feed/post-form/post-form.component.ts

@@ -12,6 +12,7 @@ export class PostFormComponent {
   });
 
   @Output() save = new EventEmitter<string>();
+  @Output() delete = new EventEmitter<string>();
 
   constructor(private formBuilder: FormBuilder) {}
 
@@ -22,4 +23,11 @@ export class PostFormComponent {
       this.save.emit(text);
     }
   }
+
+  deletePost(): void {
+    const { text } = this.postForm.value;
+    if (text) {
+      this.delete.emit(text);
+    }
+  }
 }

src/app/feed/post/collapse-text.directive.ts

@@ -4,7 +4,7 @@ import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
   selector: '[ngsocialCollapseText]',
 })
 export class CollapseTextDirective implements AfterViewInit {
-  private readonly THREE_LINES_HEIGHT = 72;
+  private readonly THREE_LINES_HEIGHT = 70;
 
   constructor(
     private elementRef: ElementRef,

src/app/feed/post/post.component.html

@@ -9,15 +9,18 @@
     {{ post.updatedAt | date: 'short' }}
   </div>
 
-  <div class="post__comments">
-    <ul *ngIf="post.comments$ | async as comments">
-      <li *ngFor="let comment of comments">
+  <div class="post__text" *ngIf="post.comments$ | async as comments" ngsocialCollapseText>
+    <a [routerLink]="['/feed', post._id]">
+      see details
+    </a>
+    <ul *ngFor="let comment of comments; index as indice">
+
+      <li *ngIf="comment.post._id ===post._id ">
         {{ comment.text }}
       </li>
-    </ul>
-
-    <ngsocial-post-form (save)="saveComment($event)"></ngsocial-post-form>
+    </ul>    
   </div>
+  <ngsocial-post-form (save)="saveComment($event)"></ngsocial-post-form>
 
   <ng-content></ng-content>
 </div>

src/app/feed/post/post.component.scss

@@ -13,10 +13,10 @@
     &.post__text--more-visible {
       a {
         display: block;
+        font-size: 0.9rem;
       }
     }
   }
-
   .post__date {
     font-size: 0.5rem;
   }

src/app/feed/post/post.model.ts

@@ -0,0 +1,9 @@
+import { User } from 'src/app/core/models/user.model';
+
+export interface Post {
+  _id: string;
+  text: string;
+  createdAt: string;
+  updatedAt: string;
+  author: User;
+}