From 2635b1855b058d2d272ad5c03b289ff85b775f57 Mon Sep 17 00:00:00 2001
From: Gerrit van Huyssteen <gerrit.vanhuyssteen@britehouse.co.za>
Date: Fri, 9 Mar 2018 21:38:26 +0200
Subject: [PATCH] feat: Session Page - Toggle session watch

---
 src/components/page-session/page-session.tsx | 32 +++++++++++++++-----
 src/providers/user-data.ts                   | 16 ++++++++++
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/page-session/page-session.tsx b/src/components/page-session/page-session.tsx
index 5845ae3..8a031db 100644
--- a/src/components/page-session/page-session.tsx
+++ b/src/components/page-session/page-session.tsx
@@ -1,5 +1,6 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, State } from '@stencil/core';
 import { ConferenceData } from '../../providers/conference-data';
+import { UserData } from '../../providers/user-data';
 
 @Component({
   tag: 'page-session',
@@ -8,11 +9,23 @@ import { ConferenceData } from '../../providers/conference-data';
 export class PageSession {
 
   private session: any;
+  @State() isWatched: boolean;
   @Prop() sessionId: string;
   @Prop() goback = '/';
 
   async componentWillLoad() {
     this.session = await ConferenceData.getSession(this.sessionId);
+    this.isWatched = UserData.hasWatch(this.session.name);
+  }
+
+  toggleWatch() {
+    if (UserData.hasWatch(this.session.name)) {
+      UserData.removeWatch(this.session.name);
+      this.isWatched = false;
+    } else {
+      UserData.addWatch(this.session.name);
+      this.isWatched = true;
+    }
   }
 
   sessionClick(item: string) {
@@ -57,15 +70,20 @@ export class PageSession {
         </div>
 
         <ion-list>
-          <ion-item onClick={() => this.sessionClick('watch')}>
-            <ion-label color="primary">Watch</ion-label>
-          </ion-item>
+          {
+            this.isWatched ?
+            <ion-item onClick={() => this.toggleWatch()}>
+              <ion-label color="primary">Mark as Unwatched</ion-label>
+            </ion-item>
+            :
+            <ion-item onClick={() => this.toggleWatch()}>
+              <ion-label color="primary">Watch</ion-label>
+            </ion-item>
+          }
+
           <ion-item onClick={() => this.sessionClick('add to calendar')}>
             <ion-label color="primary">Add to Calendar</ion-label>
           </ion-item>
-          <ion-item onClick={() => this.sessionClick('mark as unwatched')}>
-            <ion-label color="primary">Mark as Unwatched</ion-label>
-          </ion-item>
           <ion-item onClick={() => this.sessionClick('download video')}>
             <ion-label color="primary">Download Video</ion-label>
             <ion-icon slot="end" color="primary" size="small" name="cloud-download"></ion-icon>
diff --git a/src/providers/user-data.ts b/src/providers/user-data.ts
index ed3e660..f847428 100644
--- a/src/providers/user-data.ts
+++ b/src/providers/user-data.ts
@@ -5,6 +5,7 @@ const HAS_SEEN_TUTORIAL = 'hasSeenTutorial';
 
 export class UserDataController {
   private favorites: string[] = [];
+  private watches: string[] = [];
 
   hasFavorite(sessionName: string): boolean {
     return (this.favorites.indexOf(sessionName) > -1);
@@ -21,6 +22,21 @@ export class UserDataController {
     }
   }
 
+  hasWatch(sessionName: string): boolean {
+    return (this.watches.indexOf(sessionName) > -1);
+  }
+
+  addWatch(sessionName: string): void {
+    this.watches.push(sessionName);
+  }
+
+  removeWatch(sessionName: string): void {
+    const index = this.watches.indexOf(sessionName);
+    if (index > -1) {
+      this.watches.splice(index, 1);
+    }
+  }
+
   login(username: string): Promise<void> {
      return set(HAS_LOGGED_IN, true).then(() => {
        this.setUsername(username);