likes

apps/frontend/src/app/modules/issue/issue.component.html

@@ -26,8 +26,8 @@
       </div>
       <ng-template pTemplate="footer">
         <div class="footer">
-          <div class="likes"><i class="pi pi-heart-fill"></i> {{(issue$ | async)?.likes || 0}}</div>
-          <div class="dislikes"><i class="pi pi-times"></i> {{(issue$ | async)?.dislikes || 0}}</div>
+          <div class="likes" (click)="like()"><i class="pi pi-heart-fill"></i> {{(issue$ | async)?.likes || 0}}</div>
+          <div class="dislikes" (click)="dislike()"><i class="pi pi-times"></i> {{(issue$ | async)?.dislikes || 0}}</div>
         </div>
       </ng-template>
     </p-card>

apps/frontend/src/app/modules/issue/issue.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { EMPTY, Observable, map } from 'rxjs';
+import { EMPTY, Observable, map, switchMap } from 'rxjs';
 import { IssueModel } from 'src/app/models/issue.model';
+import { IssueService } from 'src/app/services/issues.service';
 import { selectIssue } from 'src/app/store/selectors/issue.selectors';
 
 @Component({
@@ -15,7 +16,7 @@ export class IssueComponent implements OnInit {
   status$: Observable<{ value: string; severity: string }> = EMPTY;
   type$: Observable<{ value: string; severity: string }> = EMPTY;
 
-  constructor(private store: Store, private route: ActivatedRoute) {}
+  constructor(private store: Store, private route: ActivatedRoute, private issueService: IssueService) {}
 
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
@@ -52,4 +53,11 @@ export class IssueComponent implements OnInit {
       )
     );
   }
+
+  like(){
+    this.issue$.pipe(switchMap(issue => this.issueService.like(issue?.id || ''))).subscribe() 
+  }
+  dislike(){
+    this.issue$.pipe(switchMap(issue => this.issueService.dislike(issue?.id || ''))).subscribe() 
+  }
 }

apps/frontend/src/app/modules/solution/solution.component.html

@@ -9,10 +9,18 @@
       <div class="content">
         <p>{{ (solution$ | async)?.description }}</p>
       </div>
+
+      <ng-template pTemplate="footer">
+        <div class="footer">
+          <div class="likes" (click)="like()"><i class="pi pi-heart-fill"></i> {{(solution$ | async)?.likes || 0}}</div>
+          <div class="dislikes" (click)="dislike()"><i class="pi pi-times"></i> {{(solution$ | async)?.dislikes || 0}}</div>
+        </div>
+      </ng-template>
     </p-card>
     <app-comments
       [comments]="(solution$ | async)?.comments || []"
       [issueId]="issueId"
     ></app-comments>
+
   </div>
 </div>

apps/frontend/src/app/modules/solution/solution.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { EMPTY, Observable, tap } from 'rxjs';
 import { SolutionModel } from 'src/app/models/solution.model';
+import { SolutionService } from 'src/app/services/solutions.service';
 import { receiveSolutionAction } from 'src/app/store/actions/solution.actions';
 import { selectSolution } from 'src/app/store/selectors/solution.selectors';
 
@@ -14,7 +15,7 @@ import { selectSolution } from 'src/app/store/selectors/solution.selectors';
 export class SolutionComponent implements OnInit {
   solution$: Observable<SolutionModel | undefined> = EMPTY;
   issueId!: string;
-  constructor(private store: Store, private route: ActivatedRoute) {}
+  constructor(private store: Store, private route: ActivatedRoute, private solutionService: SolutionService) {}
 
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
@@ -23,4 +24,11 @@ export class SolutionComponent implements OnInit {
       this.solution$ = this.store.select(selectSolution(params['id'])).pipe(tap(console.log));
     });
   }
+
+  like(){
+    this.solutionService.like(this.issueId || '').subscribe()
+  }
+  dislike(){
+    this.solutionService.dislike(this.issueId || '').subscribe() 
+  }
 }

apps/frontend/src/app/services/issues.service.ts

@@ -29,11 +29,11 @@ export class IssueService {
       )
     );
   }
-  dislike(issueId: number){
-    this.http.post(environments.apiUrl + '/issues/' + issueId + '/dislike', {});
+  dislike(issueId: string){
+    return this.http.post(environments.apiUrl + '/issues/' + issueId + '/dislike', {});
   }
-  like(issueId: number){
-    this.http.post(environments.apiUrl + '/issues/' + issueId + '/like', {});
+  like(issueId: string){
+    return this.http.post(environments.apiUrl + '/issues/' + issueId + '/like', {});
   }
 }
 

apps/frontend/src/app/services/solutions.service.ts

@@ -24,11 +24,11 @@ export class SolutionService {
     );
   }
 
-  dislike(issueId: number){
-    this.http.post(environments.apiUrl + '/issues/' + issueId + '/solution/dislike', {});
+  dislike(issueId: string){
+   return this.http.post(environments.apiUrl + '/issues/' + issueId + '/solution/dislike', {});
   }
-  like(issueId: number){
-    this.http.post(environments.apiUrl + '/issues/' + issueId + '/solution/like', {});
+  like(issueId: string){
+   return this.http.post(environments.apiUrl + '/issues/' + issueId + '/solution/like', {});
   }
 }