Integrated likes and bookmarks API

src/app/components/facebook-login/facebook-login.component.html

@@ -5,7 +5,7 @@
         </section>
     </section>
 
-    <input type="text" *ngIf="token" [(ngModel)]="token.token">
+    <!-- <input type="text" *ngIf="token" [(ngModel)]="token.token"> -->
     
     
     <section class="social-login" [ngClass]="{'active' : showLogout && user }">

src/app/components/facebook-login/facebook-login.component.ts

@@ -86,7 +86,9 @@ export class FacebookLoginComponent implements OnInit {
             localStorage.setItem('FBToken', JSON.stringify(this.token));
 
 
-            this.userService.getUserProfile().then((data) => alert(JSON.stringify(data)), err => alert(JSON.stringify(err)));
+            this.userService.getUserProfile().then((data) => {
+                localStorage.setItem('ServerUserData', JSON.stringify(data));
+            }, err => alert(JSON.stringify(err)));
 
         } else {
             // Not logged in.
@@ -112,6 +114,7 @@ export class FacebookLoginComponent implements OnInit {
         this.token = null;
         localStorage.removeItem('FBUser');
         localStorage.removeItem('FBToken');
+        localStorage.removeItem('ServerUserData');
         App.exitApp();
     }
 

src/app/home/home.page.html

@@ -40,6 +40,16 @@
                         <button (click)="share(news.short_title, image_url + news.image_path + news.image_file_name)">
                             <ion-icon name="share-social-outline"></ion-icon>
                         </button>
+
+                        <button (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
+                            <ion-icon name="bookmark-outline"></ion-icon>
+                            <ion-icon name="bookmark"></ion-icon>
+                        </button>
+
+                        <button (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
+                            <ion-icon name="heart-outline"></ion-icon>
+                            <ion-icon name="heart"></ion-icon>
+                        </button>
                     </section>
     
                     <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
@@ -74,6 +84,16 @@
                         <button (click)="share(news.short_title ? news.short_title : news.asset_title, image_url + news.image_path + news.image_file_name)">
                             <ion-icon name="share-social-outline"></ion-icon>
                         </button>
+
+                        <button (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
+                            <ion-icon name="bookmark-outline"></ion-icon>
+                            <ion-icon name="bookmark"></ion-icon>
+                        </button>
+
+                        <button (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
+                            <ion-icon name="heart-outline"></ion-icon>
+                            <ion-icon name="heart"></ion-icon>
+                        </button>
                     </section>                
     
                     <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
@@ -105,7 +125,17 @@
                         <button (click)="share(news.short_title ? news.short_title : news.asset_title, image_url + news.image_path + news.image_file_name)">
                             <ion-icon name="share-social-outline"></ion-icon>
                         </button>
-                    </section>                
+
+                        <button (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
+                            <ion-icon name="bookmark-outline"></ion-icon>
+                            <ion-icon name="bookmark"></ion-icon>
+                        </button>
+
+                        <button (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
+                            <ion-icon name="heart-outline"></ion-icon>
+                            <ion-icon name="heart"></ion-icon>
+                        </button>
+                    </section>           
     
                     <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
                         <span> More </span>            

src/app/home/home.page.scss

@@ -184,6 +184,60 @@ ion-slides {
                     color: $green;
                     font-size: 1.2rem;
                 }
+
+                &:nth-child(2) {
+                    background-color: transparent;
+                    border: 1px solid $blue-grey;
+
+                    ion-icon {
+                        color: $blue-grey;
+
+                        &:nth-child(2) {
+                            display: none;
+                            color: $brand-blue;
+                        }
+                    }
+
+                    &.marked {
+                        border-color: $brand-blue;
+
+                        ion-icon {
+                            &:nth-child(1) {
+                                display: none;
+                            }
+                            &:nth-child(2) {
+                                display: block;
+                            }
+                        }
+                    }
+                }
+
+                &:nth-child(3) {
+                    background-color: transparent;
+                    border: 1px solid $blue-grey;
+
+                    ion-icon {
+                        color: $blue-grey;
+
+                        &:nth-child(2) {
+                            display: none;
+                            color: $brand-red;
+                        }
+                    }
+
+                    &.liked {
+                        border-color: $brand-red;
+
+                        ion-icon {
+                            &:nth-child(1) {
+                                display: none;
+                            }
+                            &:nth-child(2) {
+                                display: block;
+                            }
+                        }
+                    }
+                }
             }
         }
 

src/app/home/home.page.ts

@@ -37,6 +37,9 @@ export class HomePage implements OnInit {
     image_url = IMAGE_BASE_URL;
     myuptime: string;
 
+    liked_articles: Array<string> = [];
+    bookmarked_articles: Array<string> = [];
+
     constructor(
         private router: Router,
         private newsService: NewsService,
@@ -55,6 +58,34 @@ export class HomePage implements OnInit {
         this.socialSharing.share(message, '', image ? image : '', url? url : '');
     }
 
+    toggleLike(alias: string) {
+        if(this.liked_articles.includes(alias)) {
+            this.liked_articles.splice(this.liked_articles.indexOf(alias), 1);
+            this.userService.dislikePost(alias);
+        } else {
+            this.liked_articles.push(alias);
+            this.userService.likePost(alias);
+        }
+    }
+
+    toggleBookmark(alias: string) {
+        if(this.bookmarked_articles.includes(alias)) {
+            this.bookmarked_articles.splice(this.bookmarked_articles.indexOf(alias), 1);
+            this.userService.UnBookmarkPost(alias);
+        } else {
+            this.bookmarked_articles.push(alias);
+            this.userService.BookmarkPost(alias);
+        }
+    }
+
+    isArticleLiked(alias: string) {        
+        return this.liked_articles.includes(alias);
+    }
+
+    isPostBookmarked(alias: string) {
+        return this.bookmarked_articles.includes(alias);
+    }
+
     ngOnInit() {
         this.newsService.getArticles().then((data: any) => {
             // alert(JSON.stringify());
@@ -94,6 +125,14 @@ export class HomePage implements OnInit {
             console.log(err);
             this.toastService.presentToastWithOptions("Failed to get Gallery data", "danger");
         });
+
+        this.userService.getUserProfile().then((data: any) => {
+            this.liked_articles = data.liked_articles;
+            this.bookmarked_articles = data.bookmarked_articles;
+        }, () => {
+            this.liked_articles = [];
+            this.bookmarked_articles = [];
+        });
     }    
 
     ionViewDidEnter() {

src/app/services/user.service.ts

@@ -26,6 +26,42 @@ export class UserService {
         return this.http.get(this.BASE_URL + '/like-article/' + postId, httpOptions).toPromise();
     }
 
+    dislikePost(postId: string) {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('FBToken')).token
+			})
+		};
+
+        return this.http.get(this.BASE_URL + '/unlike-article/' + postId, httpOptions).toPromise();
+    }
+
+    BookmarkPost(postId: string) {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('FBToken')).token
+			})
+		};
+
+        return this.http.get(this.BASE_URL + '/bookmark-article/' + postId, httpOptions).toPromise();
+    }
+
+    UnBookmarkPost(postId: string) {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('FBToken')).token
+			})
+		};
+
+        return this.http.get(this.BASE_URL + '/unbookmark-article/' + postId, httpOptions).toPromise();
+    }
+
     getUserProfile() {
         const httpOptions = {
 			headers: new HttpHeaders({