Improved event listeners

nerdic-coder · nerdic-coder · commit f522c91c7b7f · 2019-01-28T00:04:57.000+02:00
diff --git a/src/pages/app-albums/app-albums.tsx b/src/pages/app-albums/app-albums.tsx
@@ -11,7 +11,6 @@ declare var blockstack;
 })
 export class AppAlbums {
   private present: PresentingService;
-  private refresherListener: any;
   private refresherScroll: any;
 
   @State() albums: any[] = [];
@@ -20,7 +19,6 @@ export class AppAlbums {
 
   constructor() {
     this.present = new PresentingService();
-    this.refresherListener = this.refreshList.bind(this);
   }
 
   componentWillLoad() {
@@ -37,27 +35,12 @@ export class AppAlbums {
       return;
     }
     this.refresherScroll = document.getElementById('albums-refresher-scroll');
-    if (this.refresherScroll) {
-      this.refresherScroll.addEventListener(
-        'ionRefresh',
-        this.refresherListener
-      );
-    }
 
     this.loadAlbums(false);
 
     AnalyticsService.logEvent('photos-list');
   }
 
-  async componentDidUnload() {
-    if (this.refresherScroll) {
-      this.refresherScroll.removeEventListener(
-        'ionRefresh',
-        this.refresherListener
-      );
-    }
-  }
-
   refreshList() {
     this.loadAlbums(true, false);
   }
@@ -271,7 +254,11 @@ export class AppAlbums {
       </ion-header>,
 
       <ion-content>
-        <ion-refresher slot="fixed" id="albums-refresher-scroll">
+        <ion-refresher
+          slot="fixed"
+          id="albums-refresher-scroll"
+          onIonRefresh={() => this.refreshList()}
+        >
           <ion-refresher-content />
         </ion-refresher>
         {empty && this.albumsLoaded ? (
@@ -335,7 +322,7 @@ export class AppAlbums {
                               no-margin
                               type="text"
                               value={col.albumName}
-                              onBlur={event =>
+                              onIonBlur={event =>
                                 this.updateAlbumName(
                                   event,
                                   col.albumId,
diff --git a/src/pages/app-photos/app-photos.tsx b/src/pages/app-photos/app-photos.tsx
@@ -18,8 +18,6 @@ export class AppPhotos {
   private activatedByTouch = false;
   private present: PresentingService;
   private uploadService: UploadService;
-  private photosRangeListener: any;
-  private photosRefresherListener: any;
   private ionRouteDidChangeListener: any;
   private photosLoaded: number;
   private infiniteScroll: any;
@@ -41,8 +39,6 @@ export class AppPhotos {
 
   constructor() {
     this.present = new PresentingService();
-    this.photosRangeListener = this.loadPhotosRange.bind(this);
-    this.photosRefresherListener = this.refreshPhotosList.bind(this);
     this.ionRouteDidChangeListener = this.ionRouteDidChange.bind(this);
   }
 
@@ -79,21 +75,7 @@ export class AppPhotos {
     this.photosLoaded = 0;
 
     this.infiniteScroll = document.getElementById('infinite-scroll');
-    if (this.infiniteScroll) {
-      this.infiniteScroll.addEventListener(
-        'ionInfinite',
-        this.photosRangeListener
-      );
-    }
-
     this.refresherScroll = document.getElementById('photos-refresher-scroll');
-    if (this.refresherScroll) {
-      this.refresherScroll.addEventListener(
-        'ionRefresh',
-        this.photosRefresherListener
-      );
-    }
-
     this.uploadService.addEventListeners(true);
     this.loadPhotosList(false);
 
@@ -108,18 +90,6 @@ export class AppPhotos {
 
   async componentDidUnload() {
     this.uploadService.removeEventListeners(true);
-    if (this.infiniteScroll) {
-      this.infiniteScroll.removeEventListener(
-        'ionInfinite',
-        this.photosRangeListener
-      );
-    }
-    if (this.refresherScroll) {
-      this.refresherScroll.removeEventListener(
-        'ionRefresh',
-        this.photosRefresherListener
-      );
-    }
     this.router.removeEventListener(
       'ionRouteDidChange',
       this.ionRouteDidChangeListener
@@ -418,7 +388,11 @@ export class AppPhotos {
       </ion-header>,
 
       <ion-content id="photos-list">
-        <ion-refresher slot="fixed" id="photos-refresher-scroll">
+        <ion-refresher
+          slot="fixed"
+          id="photos-refresher-scroll"
+          onIonRefresh={() => this.refreshPhotosList()}
+        >
           <ion-refresher-content />
         </ion-refresher>
         {empty && this.listLoaded ? (
@@ -464,7 +438,11 @@ export class AppPhotos {
             ))}
           </ion-grid>
         )}
-        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+        <ion-infinite-scroll
+          threshold="100px"
+          id="infinite-scroll"
+          onIonInfinite={event => this.loadPhotosRange(event)}
+        >
           <ion-infinite-scroll-content
             loading-spinner="bubbles"
             loading-text="Loading more photos..."
diff --git a/src/pages/app-settings/app-settings.tsx b/src/pages/app-settings/app-settings.tsx
@@ -8,38 +8,18 @@ import SettingsService from '../../services/settings-service';
 })
 export class AppSettings {
   private present: PresentingService;
-  private analyticsToggle: HTMLIonToggleElement;
-  private analyticsToggleChangeListener: any;
 
   @State() allowAnalytics: boolean;
 
   constructor() {
     this.present = new PresentingService();
-    this.analyticsToggleChangeListener = this.changeAnalyticsSetting.bind(this);
   }
 
   async componentWillLoad() {
     this.allowAnalytics = await SettingsService.getAnalyticsSetting();
-  }
-
-  async componentDidLoad() {
-    this.analyticsToggle = document.querySelector('ion-toggle');
-    await this.analyticsToggle.componentOnReady();
-    this.analyticsToggle.addEventListener(
-      'ionChange',
-      this.analyticsToggleChangeListener
-    );
-
     AnalyticsService.logEvent('settings-page');
   }
 
-  async componentDidUnload() {
-    this.analyticsToggle.removeEventListener(
-      'ionChange',
-      this.analyticsToggleChangeListener
-    );
-  }
-
   visitBlockstackProfile(event: any): void {
     if (event) {
       event.preventDefault();
@@ -146,6 +126,7 @@ export class AppSettings {
               slot="end"
               value="analytics"
               checked={this.allowAnalytics}
+              onIonChange={() => this.changeAnalyticsSetting()}
             />
           </ion-item>
           <ion-item>
