Gapi using custom service

[Saifer707]

Hi!

This may look like a no-documented question, but i can't find anything that helps me.
Here is the point:

This is part of my Angular 6/Typescript Component:

public isLoggedIn(): boolean {
        return this.googleService.isUserSignedIn();
    }

    public signIn() {
        this.googleService.signIn();
    }

    try_to_sign() {
        if (!this.isLoggedIn()) {
            this.signIn()
        } else {this.createPicker()}
    }

    onPickerApiLoad() {
        this.pickerApiLoaded = true;
    }

    createPicker() {
        let picker;
        if (this.pickerApiLoaded) {
            picker = new google.picker.PickerBuilder().addViewGroup(
                new google.picker.ViewGroup(google.picker.ViewId.DOCS)
                    .addView(google.picker.ViewId.DOCUMENTS)
                    .addView(google.picker.ViewId.PRESENTATIONS))
                .addView(new google.picker.DocsUploadView())
                .setOAuthToken(this.googleService.getToken())
                .setDeveloperKey(this.developerKey)
                .setCallback(this.pickerCallback).build();
            picker.setVisible(true);
        }
        return picker
    }

    // A simple callback implementation.
    pickerCallback(data) {
        let url = 'nothing';
        let name = 'nothing';
        if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
            const doc = data[google.picker.Response.DOCUMENTS][0];
            url = doc[google.picker.Document.URL];
            name = doc.name;
            const param = {'fileId': doc.id, 'name': name};
            console.log(url)
        }
    }

and this is my custom service:

@Injectable({
  providedIn: 'root'
})
export class GoogleService {
  public static readonly SESSION_STORAGE_KEY: string = 'accessToken';
  private user: GoogleUser = undefined;

  constructor(private googleAuthService: GoogleAuthService,
              private ngZone: NgZone) {
  }

  public setUser(user: GoogleUser): void {
    this.user = user;
  }

  public getCurrentUser(): GoogleUser {
    return this.user;
  }

  public getToken(): string {
    const token: string = sessionStorage.getItem(GoogleService.SESSION_STORAGE_KEY);
    if (!token) {
      throw new Error('no token set , authentication required');
    }
    return sessionStorage.getItem(GoogleService.SESSION_STORAGE_KEY);
  }

  public signIn() {

    this.googleAuthService.getAuth().subscribe( (auth) => {
      auth.signIn().then(res => this.signInSuccessHandler(res), err => this.signInErrorHandler(err));
    });
  }

  // TODO: Rework
  public signOut(): void {
    this.googleAuthService.getAuth().subscribe((auth) => {
      try {
        auth.signOut();
      } catch (e) {
        console.error(e);
      }
      sessionStorage.removeItem(GoogleService.SESSION_STORAGE_KEY)
    });
  }

  public isUserSignedIn(): boolean {
    return !_.isEmpty(sessionStorage.getItem(GoogleService.SESSION_STORAGE_KEY));
  }

  private signInSuccessHandler(res: GoogleUser) {
    this.ngZone.run(() => {
      this.user = res;
      sessionStorage.setItem(
          GoogleService.SESSION_STORAGE_KEY, res.getAuthResponse().access_token
      );
    });
  }

  private signInErrorHandler(err) {
    console.warn(err);
  }
}

How you can see, my try_to_sign method checks if user is already logged into Google:

• if he/she's logged, create Google Picker for updating or viewing Google Drive docs (and it's working!)
• if not, my application should prompt Google UI for login and THEN create the picker.

In the second case, my app doesn't wait this method

sessionStorage.setItem(
          GoogleService.SESSION_STORAGE_KEY, res.getAuthResponse().access_token
      );

so picker cannot be made.

I tried Observable, Promise, await/async but nothing seems to work.

Obviously, if i move my createPicker method into my service and if i call it after sessionStorage, everything works fine (but i prefer do not make it).

Thanks for the help!