fs-person-mixin.html

<link rel="import" href="../fs-api-aware/fs-api-aware.html">
<link rel="import" href="../fs-request/fs-request.html">
<link rel="import" href="../polymer/polymer-element.html">

<script>
  /**
   * `fs-person-mixin`
   * 
   * Helps elements retrieve and manage person data from the FamilySearch API
   *
   * @polymer
   * @mixinFunction
   */
  const FSPersonMixin = Polymer.dedupingMixin((superClass) => class extends FSApiAwareMixin(superClass) {
    static get properties() {
      return {
        
        /** Person ID */
        personId: {
          type: String,
          notify: true,
          observer: '_idChanged',
          reflectToAttribute: true
        },
        
        /** Person data */
        person: {
          type: Object,
          notify: true,
          observer: '_personChanged'
        },
        
        /** Whether the person has been requested */
        personRequested: {
          type: Boolean,
          readOnly: true,
          value: false,
          notify: true
        },
        
        /** Whether the person is currently being requested from the API */
        personLoading: {
          type: Boolean,
          readOnly: true,
          value: false,
          notify: true
        },
        
        /** An fs-request instance */
        _personRequest: Object
      };
    }
    
    _setupRequest() {
      if(!this._personRequest) {
        this._personRequest = document.createElement('fs-request');
        this._personRequest.requireAuthentication = true;
        if(this.clientName) {
          this._personRequest.clientName = this.clientName;
        }
        
        // Loading status changes
        this._personRequest.addEventListener('loading-changed', (e) => {
          this._setPersonLoading(e.detail.value);
        });
        
        // Request status changes
        this._personRequest.addEventListener('sent-changed', (e) => {
          this._setPersonRequested(e.detail.value);
        });
        
        // Response received
        this._personRequest.addEventListener('response', (e) => {
          if(e.detail && e.detail.response && e.detail.response.data && e.detail.response.data.persons) {
            this.person = e.detail.response.data.persons[0];
          }
        });
        
        // Hack to make Polymer setup property observers so that we get change notifications
        // https://github.com/Polymer/polymer/issues/4526#issuecomment-328966951
        this._personRequest.ready();
        
        // Make sure request events propagate
        this._personRequest.delegateEvents(this);
      }
    }
    
    loadPerson() {
      
      // TODO: don't request if the client isn't authenticated
      if(!this.personRequested && this.personId) {
        
        // Make sure the fs-request instance has been created and configured
        this._setupRequest();
        
        // Set the URL
        this._personRequest.url = `/platform/tree/persons/${this.personId}`;
        
        // Issue the request
        this._personRequest.generateRequest();
      }
    }
    
    /**
     * Clear the personId and person and reset
     * the element to its default state
     */
    reset() {
      this.personId = null;
    }
    
    // TODO: can we still use this if the elements won't 
    // usually have a client that emits this event?
    _authenticatedChanged(event) {
      if(event.detail.value){
        this.loadPerson();
      }
    }
    
    /**
     * Update the state when appropriate. It's not as simple as we would want it
     * to be because we're trying to keep the personId and person in sync while
     * allowing either of them to change. If the personId changes we want to request
     * a new person; if the person changes we want to update the personId. But
     * if a personId and person are already set, then we change the person and
     * update the personId, we don't want to clear the person and request them again.
     */
    _idChanged() {

      // New id that does match current person; don't need to change anything
      if(this.personId && this.person && this.personId === this.person.id){
        // do nothing
      }
      
      // Something has changed so reset
      else {
        this._setPersonRequested(false);
        this._setPersonLoading(false);
        this.person = null;
        
        // Load the new person if we need to
        if(!this.person || this.person.id !== this.personId){
          this.loadPerson();
        }
      }
    }
    
    _personChanged() {
      if(this.person){
        this.personId = this.person.id;
      }
    }
  });
</script>