Implemented unlike and check if user has already liked the project and added color to button

src/main/java/at/ac/uibk/gitsearch/service/LikesService.java

@@ -82,6 +82,13 @@ public class LikesService {
         likesSearchRepository.deleteById(id);
     }
 
+    public void deleteByUserIDandProjectID(Integer userID, Integer projectID) {
+        Likes like = findLikesByUserIDandProjectID(userID, projectID);
+        if (like.getId() != null){
+            delete(like.getId());
+        }
+    }
+
     /**
      * Search for the likes corresponding to the query.
      *

src/main/java/at/ac/uibk/gitsearch/web/rest/LikesResource.java

@@ -120,12 +120,33 @@ public class LikesResource {
 
     }
 
+    @DeleteMapping("/unlikeProject/{projectID}")
+    public ResponseEntity<Void> deleteLikeWithProjectId(@PathVariable Integer projectID) {
+        log.debug("REST request to delete Likes for project : {}", projectID);
+        likesService.deleteByUserIDandProjectID(userService.getUserWithAuthorities().get().getId().intValue(), projectID);;
+        return ResponseEntity.noContent()
+                .headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, projectID.toString()))
+                .build();
+    }
+
     @GetMapping("/numberOfLikes/{projectID}")
     public ResponseEntity<Integer> getNumberOfLikesForProjectID(@PathVariable Integer projectID) {
         log.debug("REST request to get number of likes for project {}", projectID);
         Integer n = likesService.findNumberOfLikesByProjectID(projectID);
         return ResponseEntity.ok().body(n);
     }
+
+    @GetMapping("/hasLiked/{projectID}")
+    public ResponseEntity<Boolean> hasLikedProject(@PathVariable Integer projectID) {
+        log.debug("REST request to see if user has liked project {}", projectID);
+        Likes like = likesService.findLikesByUserIDandProjectID(userService.getUserWithAuthorities().get().getId().intValue(), projectID);
+        Boolean bool = false;
+        if(like != null){
+            log.debug("User has liked this project yet");    
+            bool = true;
+        }
+        return ResponseEntity.ok().body(bool);
+    }
     
     /**
      * {@code GET  /likes} : get all the likes.

src/main/webapp/app/bookmarks/bookmarks.component.ts

@@ -215,6 +215,7 @@ export class BookmarkComponent implements OnInit, OnDestroy {
       views: searchResult.views,
       downloads: searchResult.downloads,
       numberOfLikes: 0,
+      userHasLiked: false,
     };
   }
 

src/main/webapp/app/entities/likes/likes.service.ts

@@ -63,10 +63,18 @@ export class LikesService {
     return this.http.put<ILikes>(SERVER_API_URL + 'api/likeProject', like, { observe: 'response' });
   }
 
+  unlikeProject(projectId: number): Observable<HttpResponse<{}>> {
+    return this.http.delete(SERVER_API_URL + 'api/unlikeProject/' + projectId, { observe: 'response' });
+  }
+
   getLikesForProjectID(projectID: string): Observable<number> {
     return this.http.get<number>(SERVER_API_URL + 'api/numberOfLikes/' + projectID);
   }
 
+  hasLiked(projectID: string): Observable<boolean> {
+    return this.http.get<boolean>(SERVER_API_URL + 'api/hasLiked/' + projectID);
+  }
+
   protected convertDateFromClient(likes: ILikes): ILikes {
     const copy: ILikes = Object.assign({}, likes, {
       date: likes.date && likes.date.isValid() ? likes.date.format(DATE_FORMAT) : undefined,

src/main/webapp/app/exercise/exercise-card/exercise-card.component.ts

@@ -31,6 +31,13 @@ export class ExerciseCardComponent implements OnInit {
         () => alert('Could not load number of likes')
       );
 
+      this.likesService.hasLiked(this.exercise.originalResult.project.project_id).subscribe(
+        (data: boolean) => {
+          this.exercise!.userHasLiked = data;
+        },
+        () => alert('Could not load if user has liked or not')
+      );
+
       this.searchService.getStatisticsForExercise(this.exercise.originalResult.exerciseId).subscribe(
         (data: Statistics) => {
           this.exercise!.views = data.views!;

src/main/webapp/app/exercise/exercise-details/exercise-details.component.html

@@ -104,11 +104,16 @@
                                             (click)="selectREADME()">README
                                         </button>
                                     </div>
-                                    <div style="width: 100%;"><button type="button" class="btn like"
+                                    <div style="width: 100%;"><button *ngIf="!exercise.userHasLiked"  type="button" class="btn like"
                                             (click)="likeAction()">
                                             <!-- <fa-icon icon="heart"></fa-icon> -->
                                             <fa-icon [icon]="['far', 'heart']"></fa-icon>{{exercise.numberOfLikes}}
                                         </button>
+                                        <button *ngIf="exercise.userHasLiked"  type="button" class="btn like"
+                                            (click)="unlikeAction()">
+                                            <!-- <fa-icon icon="heart"></fa-icon> -->
+                                            <fa-icon class="rediconcolor" icon='heart'></fa-icon>{{exercise.numberOfLikes}}
+                                        </button>
                                     </div>
                                 </div>
                             </div>

src/main/webapp/app/exercise/exercise-details/exercise-details.component.scss

@@ -59,3 +59,7 @@
 // .onhoverIconDisplay {
 //   visibility: hidden;
 // }
+
+.rediconcolor {
+  color: red;
+}

src/main/webapp/app/exercise/exercise-details/exercise-details.component.ts

@@ -21,6 +21,8 @@ export class ExerciseDetailsComponent implements OnInit, OnDestroy {
   @Input() exercise: Exercise | undefined;
   account: Account | null = null;
   authSubscription?: Subscription;
+  hasLiked: Boolean | null = null;
+  likeSubscription?: Subscription;
 
   constructor(
     private accountService: AccountService,
@@ -126,7 +128,34 @@ export class ExerciseDetailsComponent implements OnInit, OnDestroy {
     //     () => alert('Could not load number of likes')
     //   );
 
-    this.ngOnInit();
+    // this.likesService.getLikesForProjectID(this.exercise!.originalResult.project.project_id).subscribe(
+    //   (data: number) => {
+    this.exercise!.numberOfLikes = this.exercise!.numberOfLikes + 1;
+    this.exercise!.userHasLiked = true;
+
+    // eslint-disable-next-line no-console
+    console.log('Reloaded number of likes is ' + this.exercise!.numberOfLikes);
+    //   },
+    //   () => alert('Could not load number of likes')
+    // );
+  }
+
+  unlikeAction(): void {
+    // to do call like service
+    this.likesService.unlikeProject(Number(this.exercise!.originalResult.project.project_id)).subscribe(() =>
+      // eslint-disable-next-line no-console
+      console.log('Unliked post ' + this.exercise!.originalResult.project.project_id)
+    );
+
+    this.exercise!.numberOfLikes = this.exercise!.numberOfLikes - 1;
+    this.exercise!.userHasLiked = false;
+
+    // eslint-disable-next-line no-console
+    console.log('Reloaded number of likes is ' + this.exercise!.numberOfLikes);
+
+    //   },
+    //   () => alert('Could not load number of likes')
+    // );
   }
 
   selectREADME(): void {}

src/main/webapp/app/search/search.component.ts

@@ -99,6 +99,7 @@ export class SearchComponent implements OnInit {
       views: searchResult.views,
       downloads: searchResult.downloads,
       numberOfLikes: 0,
+      userHasLiked: false,
     };
   }
 

src/main/webapp/app/shared/model/exercise.model.ts

@@ -66,4 +66,5 @@ export interface Exercise {
   views: number;
   downloads: number;
   numberOfLikes: number;
+  userHasLiked: boolean;
 }