@anli/user v1.0.0

Ionic Module User

Install

npm install @anli/user --save

npm install @ngrx/store @ngrx/effects @ngrx/entity --save
npm install @ngrx/store-devtools --save-dev

npm install angularfire2@5.0.0-rc.4 --save
npm install firebase@4.13.1 --save

npm install ramda --save

Usage

Update to src/environments/environment.ts:

export const environment = {
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }
}

Update to src/app/app.module.ts:

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { UserModule } from '@anli/user';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
...
@NgModule({
  ...
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    EffectsModule.forRoot([]),
    StoreModule.forRoot({ }),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
    UserModule,

Update to user-profile-update.module.ts:

import { ComponentsModule } from '@anli/user';
...
@NgModule({
  ...
  imports: [
    ...
    ComponentsModule,

Update to login.html:

<user-profile-form #profileForm (onSubmit)="save($event)"></user-profile-form>

<ion-row justify-content-start padding-right padding-left>
  <button ion-button margin-top
    (click)="save(profileForm.form)" >
    Save
  </button>
</ion-row>

Update to user-profile-update.ts:

export class LoginPage {
  ...
  // allow only login user to update profile
  ionViewCanEnter(): Promise<boolean> {
    const promise = this.store.pipe(
      select(selectCurrentUser),
      map(res => R.isNil(res) ? false : true),
      first(),
    ).toPromise();

    promise.then((res) => {
      if (!res) {
        this.notification('Please login and try again.');
      }
    })
    return promise;
  }

  // Update user profile and close page on success
  save(form: FormGroup): void {
    let loading = this.loadingCtrl.create({ content: 'Please wait...' });
    loading.present();

    this.store.dispatch(new UpdateCurrent(form.value));
    this.store
      .pipe(
        select(selectError),
        filter(res => !R.isNil(res)),
        first(),
      )
      .subscribe((res: { ok: boolean, response?: string }) => {
        loading.dismiss();

        if (res.response) {
          this.notification(res.response);
        }
        
        if (res.ok) {
          this.navCtrl.pop();
        }
      });
  }

  notification(message: string, duration: number = 3000): void {
    let toast = this.toastCtrl.create({
      message,
      duration,
    });
    toast.present();
  }