Adiciona comentarios na tela do video

src/app/pages/video-viewer/video-comment/video-comment.component.html

@@ -1,11 +1,36 @@
 <div>
-
-    <form [formGroup]="commentForm" (submit)="addComment()" class="text-center">  
-
-        <textarea name="comment" placeholder="Adicione um comentário" type="text" formControlName="comment" required> </textarea>
-        <button class="w-20 h-8 bg-blue-brand rounded-lg justify-center my-8 text-white md:h-10 md:w-32" type="submit">Adicionar comentário</button>
-
-
-    </form> 
-
-</div>
+  <div *ngIf="userId">
+    <form [formGroup]="commentForm" (submit)="addComment()" class="text-center">
+      <textarea
+        name="comment"
+        placeholder="Adicione um comentário"
+        type="text"
+        formControlName="comment"
+        required
+      >
+      </textarea>
+      <button
+        class="w-20 h-8 bg-blue-brand rounded-lg justify-center my-8 text-white md:h-10 md:w-32"
+        type="submit"
+      >
+        Adicionar comentário
+      </button>
+    </form>
+  </div>
+  <div *ngIf="!userId">
+    <p class="text-center">Faça login para comentar</p>
+  </div>
+  <div *ngFor="let comment of comments" class="flex">
+    <div>
+      <div>
+        {{ comment.user_name }}
+      </div>
+      <div>
+        <p>{{ comment.content }}</p>
+      </div>
+      <div>
+        <p>{{ comment.created_at }}</p>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/video-viewer/video-comment/video-comment.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { VideoCommentService }from '../../../services/video-comment.service';
+import { VideoCommentService } from '../../../services/video-comment.service';
 import { ActivatedRoute } from '@angular/router';
-import { HttpResponse } from '@angular/common/http';
+import jwt_decode from 'jwt-decode';
+import { AuthService } from '../../../services/auth.service';
+import { Comment } from '../../../../shared/model/comment.model';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-video-comment',
@@ -13,39 +16,89 @@ export class VideoCommentComponent implements OnInit {
   commentForm!: FormGroup;
   comment: string = '';
   video_id: number = 0;
+  userId: any;
+  comments: Comment[] = [];
+  userName: string = '';
+
 
   constructor(
     private fb: FormBuilder,
     private vcs: VideoCommentService,
-    private route: ActivatedRoute
-  ) {}
+    private route: ActivatedRoute,
+    private authService: AuthService,
+    private userService: UserService
+  ) { }
 
   ngOnInit(): void {
     this.commentForm = this.fb.group({
-        comment: ['', [Validators.required,Validators.maxLength(300)]],
-      },
+      comment: ['', [Validators.required, Validators.maxLength(300)]],
+    },
     );
-    this.route.params.subscribe((params)=> {
+    this.route.params.subscribe((params) => {
       this.video_id = params['idVideo'];
     })
+    if (this.authService.isAuthenticated()) {
+      this.setUserIdFromToken(localStorage.getItem('token') as string);
+    } else {
+      this.userId = 0;
+    }
+    this.vcs.getComments(this.video_id).subscribe({
+      next: (data) => {
+        this.comments = data.body as Comment[];
+        this.comments.forEach((comment) => {
+          this.vcs.getUser(comment.user_id as number).subscribe({
+            next: (data) => {
+              console.log(data);
+              comment.user_name = data.body.name;
+            },
+            error: (error) => {
+              console.log(error)
+            }
+          });
+        });
+        console.log(this.comments);
+      },
+      error: (error) => {
+        console.log(error)
+      }
+    });
+
   }
+
+  setUserIdFromToken(token: string) {
+    const decodedToken: any = jwt_decode(token);
+    this.userId = decodedToken.id;
+    // console.log(this.userId);
+  }
+
+  getUserName(userId: number) {
+    this.userService.getUser(userId).subscribe({
+      next: (data) => {
+        return data.name;
+      },
+      error: (error) => {
+        console.log(error)
+      }
+    });
+  }
+
   addComment() {
     if (this.commentForm.valid) {
       this.comment = this.commentForm.value.comment;
       this.vcs.postComment({
-        user_id: 123,
+        user_id: this.userId,
         video_id: this.video_id,
         content: this.comment
       }).subscribe({
-        next: (data)=> {
+        next: (data) => {
           console.log(data);
         },
-        error: (error)=> {
+        error: (error) => {
           console.log(error)
         }
       });
     } else {
-        alert("Comentário não pode ser vazio");
+      alert("Comentário não pode ser vazio");
     }
   }
 }

src/app/services/video-comment.service.ts

@@ -1,19 +1,29 @@
 import { Injectable } from '@angular/core';
 import { environment } from '../environment/environment';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { IComment } from '../../shared/model/comment.model';
+
+type CommentResponseType = HttpResponse<IComment[]>;
 
 @Injectable({
   providedIn: 'root'
 })
 export class VideoCommentService {
 
   private apiURLVideo = environment.apiURLVideo;
+  private apiURLUsers = environment.apiURL;
 
   constructor(private http: HttpClient) { }
 
-  getComments(video_id: any): Observable<any> {
-    return this.http.get(`${this.apiURLVideo}/comments/${video_id}`);
+  getUser(id: any): Observable<any> {
+    const token = localStorage.getItem('token');
+    let headers = new HttpHeaders({ Authorization: `Bearer ${token}` });
+    return this.http.get(`${this.apiURLUsers}/users/${id}`, { headers: headers, observe: 'response' });
+  }
+
+  getComments(video_id: any): Observable<CommentResponseType> {
+    return this.http.get<IComment[]>(`${this.apiURLVideo}/comments/${video_id}`, { observe: 'response' });
   }
 
   postComment(body: any): Observable<any> {