Call log read permission didn't work on first time and InfiniteScroll with JSON Object


#1

when building an android app for accessing call history log using ionic-v3, it doesn’t show any log when first running after granting permission. But when we close and open the app, the logs are displaying. What is actually the problem? can anyone find it ?

And also i want to add InfiniteScroll to this recent page. what should i do when it using JSON object. i didnt get any clear picture of parsing the JSON array in my below code.

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AndroidPermissions } from '@ionic-native/android-permissions';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, androidPermissions: AndroidPermissions) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      androidPermissions.requestPermissions(
        [
          androidPermissions.PERMISSION.READ_CALL_LOG
        ]
      );
    });
  }
}

recent.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Recent
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-list-header>Call Log History on this device</ion-list-header>    
    <!-- <ion-item *ngFor="let d of mobileId"> -->
    <ion-item *ngFor="let d of mobileId">
      <ion-avatar [ngSwitch]=d.type item-start>
        <img *ngSwitchCase="'OUTGOING'" src="assets/imgs/icon-OUTGOING.png" height="24" width="24">
        <img *ngSwitchCase="'INCOMING'" src="assets/imgs/icon-INCOMING.png" height="24" width="24">
        <img *ngSwitchCase="'MISSED'" src="assets/imgs/icon-MISSED.png" height="24" width="24">
        <img *ngSwitchDefault src="assets/imgs/icon-REJECTED.png" height="24" width="24">
      </ion-avatar>
      <h2 class="numberBold">{{d.phoneNumber}}</h2>
      <p class="subInfo">{{d.date+'    ( ' + d.callDuration + ' )'}}</p>
    </ion-item>
  </ion-list>
</ion-content>

recent.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Device } from '@ionic-native/device';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { Toast } from '@ionic-native/toast';

@Component({
  selector: 'page-recent',
  templateUrl: 'recent.html',
  providers: [Device]
})
export class RecentPage {

  public mobileId: {};
  public callTypeIcon: any;
  constructor(public navCtrl: NavController, private androidPermissions: AndroidPermissions, public device: Device, private toast: Toast) {
    this.checkPermission();
  }
 async checkPermission() {
    try {
      const { hasPermission } = await this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_CALL_LOG);
      if (!hasPermission) {
        const result = await this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_CALL_LOG);

        if (!result.hasPermission) {
          console.log('call log permission is false');
          this.toast.show('You need to set permission to read call logs in app settings', '5000', 'center').subscribe(
            toast => {
              console.log(toast);
            });
        }
      }
      else {
        console.log('call log permission is true');
        console.log('calling loadCallLog()');
        this.loadCallLog();
      }

    } catch (errorPermission) {
      console.error('Error in Call log', errorPermission);
    }
  }

async loadCallLog() {
    try {
      console.log('inside loadCallLog()');
      this.mobileId = JSON.parse(this.device.uuid);

      if (this.mobileId == null) {
        console.log('mobileid is null ');
      }
      else {
        console.log('mobileid is not null ');
        this.toast.show('Call load load complete !', '5000', 'bottom').subscribe(
          toast => {
            console.log(toast);
          });
      }
    }
    catch (errorLoadCallLog) {
      console.error('Error in Call log', errorLoadCallLog);
    }
  }

Device.java