polymer-front-end-services

polymer_front_end_services.html

<!-- APP COMPONENT -->
<app>
  <dashboard></dashboard>
</app>

<!-- DASHBAORD COMPONENT -->
<template>
  <div>[[referral.balance]]</div>
  <template is="dom-if" if="is-loading">
    Loading...
  </template>
  <div>[[error]]</div>
  <button on-tap"_onRefresh">Refresh</button>
  <referral-provider prefetch error="{{error}}" referral="{{referral}}"></referral-provider>
  
</template>
<script>

  (function(){
    class ReferralDashboard extends Polymer.Element {
      
      static properties(){
        return {referral: Object, error: Object}
      }

      _onRefresh(){
        this.$$("referral-provider").refresh()
      }
    }})()
</script>

<!-- PROVIDER -->
    <script>
/* Purpose: Maps service data into reusable polymer component for native bindings.
      Can be defined OUTSIDE of .html file
*/
//@inject(ReferralService)
class ReferralProvider extends Subscriber(Polymer.Element) {

  /* Many instance to ONE */
  static get properties(){
    return {
      referral: {
        type: Object,
        notify: true
      },
      error: Object,
      prefetch: Boolean,
      isLoading: Boolean
    }
  }

  attached(){
    if(this.prefetch)
      this.referralService.detailsMulticast$.subscribe(data => this.referral = data)
  }

  refresh(){
    this.subscribe(this.referralService.refreshDetails$())
  }
}
</script>

<!-- SERVICES -->
    <script>
// @Injectable()
class ReferralService extends Fetchable(EventEmittable) {

  // @Inject(PromoterService)
  constructor() {
    super({ });
    this.detailsMulticast$ = this._buildDDetailsMulticast()
  }

  _buildDDetailsMulticast(){
    return this.promoterService.authorized$
      .selectMany(() => this.subject('details'))
      .shareReplay(1)
  }

  refreshDetails$(){
    this.fetch$('/referral/details').subscribe(this.subject('details'))
    return this.subject('details')
  }
}
</script>
<!-- Helpers (for provider) -->
<script>
  Subscriber = Klass => class extends Klass{
    static properties(){
      return {
        isLoading: Boolean
      }
    },

    subscribe(observable, onNext=()=>{}, onError=()=>{}, onCompleted=()=>{}){
      this.isLoading = true
      this.error = undefined
      observable
        .doOnNext(d => this.isLoading = false)
        .doOnError(e => {
          this.isLoading = false
          this.error = e
          this.fire('load-error', e)
        })
        .subscribe(onNext, onError, onCompleted)
  }
}
</script>