feat: Session Page - Toggle session watch

src/components/page-session/page-session.tsx

@@ -9,17 +9,15 @@ import { UserData } from '../../providers/user-data';
 export class PageSession {
 
   private session: any;
+  @State() isWatched: boolean;
   @State() isFavorite: boolean;
   @Prop() sessionId: string;
   @Prop() goback = '/';
 
   async componentWillLoad() {
     this.session = await ConferenceData.getSession(this.sessionId);
     this.isFavorite = UserData.hasFavorite(this.session.name);
-  }
-
-  sessionClick(item: string) {
-    console.log('Clicked', item);
+    this.isWatched = UserData.hasWatch(this.session.name);
   }
 
   toggleFavorite() {
@@ -32,6 +30,20 @@ export class PageSession {
     }
   }
 
+  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) {
+    console.log('Clicked', item);
+  }
+
   render() {
     return [
       <ion-header>
@@ -71,15 +83,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>

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);