Bookmarks page + API connections

src/app/app-routing.module.ts

@@ -65,6 +65,10 @@ const routes: Routes = [
     path: 'league-table',
     loadChildren: () => import('./league-table/league-table.module').then( m => m.LeagueTablePageModule)
   },
+  {
+    path: 'bookmarks',
+    loadChildren: () => import('./bookmarks/bookmarks.module').then( m => m.BookmarksPageModule)
+  },
 
 ];
 @NgModule({

src/app/bookmarks/bookmarks-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BookmarksPage } from './bookmarks.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookmarksPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BookmarksPageRoutingModule {}

src/app/bookmarks/bookmarks.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookmarksPageRoutingModule } from './bookmarks-routing.module';
+
+import { BookmarksPage } from './bookmarks.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BookmarksPageRoutingModule
+  ],
+  declarations: [BookmarksPage]
+})
+export class BookmarksPageModule {}

src/app/bookmarks/bookmarks.page.html

@@ -0,0 +1,21 @@
+<ion-content>
+    <section class="header-with-action-buttons">
+        <div class="nav">
+            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <header> Bookmarks({{ this.bookmarked_articles.length }}) <br> <span> All your bookmarked posts in one place  </span> </header>
+    </section>
+
+    <ion-list lines="full">
+        <ion-item *ngFor="let news of bookmarked_articles"
+        (click)="showNewsDetails(news.alias, news.type)">
+            <ion-thumbnail slot="start">
+                <ion-img [src]="news.image"></ion-img>
+            </ion-thumbnail>         
+            <ion-label>
+                <h3> {{ news.title }} </h3>
+            </ion-label>
+        </ion-item>
+    </ion-list>
+
+</ion-content>

src/app/bookmarks/bookmarks.page.scss

@@ -0,0 +1,15 @@
+@import '../colors';
+
+ion-list {
+    ion-item {
+        --padding-top: 10px;
+        --padding-bottom: 10px;
+    }
+
+    h3 {
+        font-size: 1rem;
+        white-space: normal;
+        line-height: 1.5;
+        color: darken($blue-grey, 10%);
+    }
+}

src/app/bookmarks/bookmarks.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BookmarksPage } from './bookmarks.page';
+
+describe('BookmarksPage', () => {
+  let component: BookmarksPage;
+  let fixture: ComponentFixture<BookmarksPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookmarksPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BookmarksPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/bookmarks/bookmarks.page.ts

@@ -0,0 +1,90 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { UserService } from '../services/user.service';
+import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
+import { Platform } from '@ionic/angular';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-bookmarks',
+    templateUrl: './bookmarks.page.html',
+    styleUrls: ['./bookmarks.page.scss'],
+})
+export class BookmarksPage implements OnInit {
+    bookmarked_articles: Array<{
+        title: string,
+        alias: string,
+        image: string,
+        type: string,
+    }> = [];
+
+    image_url = IMAGE_BASE_URL;
+
+    constructor(
+        private location: Location,
+        private userService: UserService,
+        private newsService: NewsService,
+        private router: Router,
+        private platform: Platform,
+    ) { }
+
+    back() {
+        this.location.back();
+    }
+
+    getType(type: string) {
+        let returnType: string = '';
+
+        console.log(type);
+
+        switch(type) {
+            case 'Photos': returnType = 'gallery'; break;
+            case 'Videos': returnType = 'videos'; break;
+            case 'News': returnType = 'news'; break;
+        }
+
+        return returnType;
+    }
+
+    showNewsDetails(alias_title: string, type: string) {
+        this.router.navigate(['/home-details', { alias_title: alias_title, type: type }]);
+    }
+
+    ngOnInit() {
+        this.userService.getUserProfile().then((data: any) => {            
+            let bookmarked_articles: Array<string> = data.bookmarked_articles;
+            this.bookmarked_articles = [];
+
+            for (let i = 0; i < bookmarked_articles.length; i += 1) {
+                
+                this.newsService.getArticleDetails(bookmarked_articles[i]).then((info: any) => {
+
+                    if (this.platform.is('android') || this.platform.is('capacitor')) {
+                        this.bookmarked_articles.push({
+                            title: JSON.parse(info.data)['content'].data.short_title ? JSON.parse(info.data)['content'].data.short_title : JSON.parse(info.data)['content'].data.asset_title,
+                            alias: bookmarked_articles[i],
+                            image: this.image_url + JSON.parse(info.data)['content'].data.image_path + JSON.parse(info.data)['content'].data.image_file_name,
+                            type: this.getType(JSON.parse(info.data)['EntityData'].entities[0].ent_display_name)
+                        });
+
+                    } else {
+                        this.bookmarked_articles.push({
+                            title: info.content.data.short_title ? info.content.data.short_title : info.content.data.asset_title,
+                            alias: bookmarked_articles[i],
+                            image: this.image_url + info.content.data.image_path + info.content.data.image_file_name,
+                            type: this.getType(info.EntityData.entities[0].ent_display_name)
+                        });
+                    }
+
+                    
+                }, (e) => {
+                    // alert(JSON.stringify(e));
+                });
+            }
+
+        }, () => {
+            this.bookmarked_articles = [];
+        });
+    }
+
+}

src/app/fan-zone/fan-zone.page.html

@@ -41,6 +41,14 @@
                 </div>
             </li>
 
+            <li [routerLink]="['/bookmarks']">
+                <div>
+                    <ion-icon name="bookmarks-outline"></ion-icon>
+
+                    <label> Bookmarks </label>
+                </div>
+            </li>
+
             <!-- <li [routerLink]="['/collections']">
                 <div>
                     <ion-icon name="trophy-outline"></ion-icon>

src/app/services/user.service.ts

@@ -63,15 +63,19 @@ export class UserService {
     }
 
     getUserProfile() {
-        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 + '/user-details/', httpOptions).toPromise();
+        if (localStorage.getItem('FBToken')) {
+            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 + '/user-details/', httpOptions).toPromise();
+        } else {
+            return Promise.reject(null);
+        }
     }
     
 }