interlocutor-app.html

<script src="./node_modules/matrix-js-sdk/dist/browser-matrix-dev-lite.js"></script>
<script src="./bower_components/moment/min/moment.min.js"></script>
<script src="./src/scripts.js"></script>

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-button/paper-button.html">
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./bower_components/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="./bower_components/paper-button/paper-button.html">

<link rel="import" href="./elements/interlocutor-iron-icons.html">
<link rel="import" href="./elements/interlocutor-comment.html">
<link rel="import" href="./elements/interlocutor-login.html">
<link rel="import" href="./elements/interlocutor-settings.html">
<link rel="import" href="./elements/interlocutor-reply-box.html">
<link rel="import" href="./elements/interlocutor-helper-behavior.html">
<link rel="import" href="./elements/interlocutor-sdk-behavior.html">

<dom-module id="interlocutor-app">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
    </style>
    <template is="dom-if" if="[[!clientReady]]">
      <span hidden="[[!roomId]]">
        Comments are loading
        <paper-spinner-lite active></paper-spinner-lite>
      </span>
    </template>
    <div class='top-section'>
      <span class='user-section'>
        <template is="dom-if" if="[[userId]]">
            <span>[[userId]]</span>
            <paper-button on-tap="logout">Logout</paper-button>
        </template>
        <template is="dom-if" if="[[!userId]]">
          <paper-button on-tap="openLogin">Login to Post</paper-button>
        </template>
        <interlocutor-login id="login" tabindex="-1" with-backdrop user-id="{{userId}}" default-home-server-address="[[homeServerAddress]]"></interlocutor-login>
      </span>
      <span class='settings-section' hidden="[[!clientReady]]">
        <paper-icon-button on-tap="openSettings" icon="settings"></paper-icon-button>
        <interlocutor-settings
          id="settings"
          client-ready="[[clientReady]]"
          user-id="[[userId]]"
          default-settings="[[defaultSettings]]"
          config=[[config]]
          home-server-address=[[homeServerAddress]]
          tabindex="-1"
          with-backdrop>
        </interlocutor-settings>
        [[_filteredChildrenCountStatement(filteredChildrenCount)]]
      </span>
    </div>
    <div class='comment-section' hidden="[[!clientReady]]">
        <template is="dom-if" if=[[replyOpen]]>
          <interlocutor-reply-box
            id="replyBox"
            action="interlocutor.comment"
            target-id=[[roomId]]
            open={{replyOpen}}>
          </interlocutor-reply-box>
        </template>
        <template is="dom-if" if="[[_canReply(userId, roomId)]]">
          <paper-button on-tap="toggleReply" hidden=[[replyOpen]]>Add Comment</paper-button>
        </template>
      <template is="dom-repeat" items="[[topLevelComments]]" as="comment">
        <interlocutor-comment
          comment="[[comment]]"
          state="[[state]]"
          user-id="[[userId]]"
          settings-updated="[[settingsUpdated]]">
        </interlocutor-comment>
      </template>
    </div>
  </template>

<script>
  Polymer({
    is: 'interlocutor-app',

    behaviors: [
      Interlocutor.SdkBehavior,
      Interlocutor.HelperBehavior
    ],

    listeners: {
      'notify': 'notify',
      'settings-updated': '_touchSettingsUpdated',
      'logged-in': 'onLoggedIn',
      'filtered-children-count-changed': '_recomputeFilteredChildrenCountFromEvent',
      'open-author-profile': 'openAuthorProfile',
      'ignore-user': '_ignoreUser',
      'flags-updated': '_recomputeTopLevelComments'
    },

    observers: [
      'initializeRoom(roomId)'
    ],

    properties: {
      // Default Settings are declared here so as to faciliate passing
      // a custom defaultSettings object
      defaultSettings: {
        type: Object,
        value() { return this._defaultSettings() }
      },

      config: {
        type: Object,
        value() { return this._defaultConfig() }
      },

      homeServerAddress: {
        type: String,
      },

      roomId: {
        type: String,
        value: null,
      },

      state: {
        type: Object,
        value: function() { this.commentTree().state },
        notify: true,
      },

      users: {
        type: Object,
        value: function() { return {} },
        notify: true,
      },

      dataTopLevelComments: {
        type: Array,
        value: function() { return [] },
      },

      topLevelComments: {
        type: Array,
        value: function() { return [] },
        computed: '_topLevelComments(dataTopLevelComments.*, settingsUpdated)'
      },

      commentCount: { // TODO: unusued atm
        type: Number,
        value: 0
      },

      filteredChildrenCount: {
        type: Number,
        value: 0,
      },

      userId: {
        type: String,
        value: null,
      },

      settingsUpdated: {
        type: Number,
        value: null,
        notify: true
      },

      clientReady: {
        type: Boolean,
        value: false,
      },

      loggedIn: {
        type: Boolean,
        notify: true
      },

      replyOpen: {
        type: Boolean,
        value: false,
      },

    },

    attached() {
      this.initializeClient()
      // We do this to allow the back-button on mobile to close
      // the settings and login overlays.
      this._hashChangeListener = (hashChangeEvent) => {
        if (hashChangeEvent.oldURL.includes('#interlocutor-settings') && !window.location.hash.includes('#interlocutor-settings')) {
          this.$.settings.close()
        } else if (hashChangeEvent.oldURL.includes('#interlocutor-login') && !window.location.hash.includes('#interlocutor-login')) {
          this.$.login.close()
        }
      }
      // Why the API doesn't give back a listener ID as with timeouts idk
      window.addEventListener("hashchange", this._hashChangeListener)
    },

    dettached() {
      window.removeEventListener("hashchange", this._hashChangeListener)
    },

    initializeClient() {
      this.activateGuestClient(this.homeServerAddress).then((success) => {
        this.loggedIn = true
      })
    },

    _ignoreUser(event, target) {
      this.$.settings.addIgnoredIdentity(target)
    },

    _recomputeFilteredChildrenCountFromEvent(event, source) {
      event.preventDefault()
      this._recomputeFilteredChildrenCount()
    },

    // This needs to go to CommentTree
    _recomputeFilteredChildrenCount() {
      const state = this.commentTree().state
      const computeDataChildrenCount = (targetId) => {
        if (state[targetId] === undefined) return 0
        let count = state[targetId].children.length
        for (let childComment of state[targetId].children) {
          count += computeDataChildrenCount(childComment.event_id)
        }
        return count
      }
      const childrenCount = this.topLevelComments.reduce((prev, cur) => {
        return prev + cur.childrenCount
      }, 0)
      const dataChildrenCount = computeDataChildrenCount(this.roomId)
      this.filteredChildrenCount = dataChildrenCount - childrenCount
    },

    _recomputeTopLevelComments(event, source) {
      this._pathEffector('dataTopLevelComments.*', this.dataTopLevelComments)
    },

    _filteredChildrenCountStatement(filteredCommentsCount) {
      if (filteredCommentsCount == 1) {
        return "1 Comment hidden by filters."
      } else if (filteredCommentsCount > 1) {
        return `${filteredCommentsCount} Comments hidden by filters.`
      }
      return ""
    },

    initializeRoom(_) {
      const roomId = this.roomId
      if (!roomId) return
      // debbounce if client is not loggedIn yet
      if (!window.client || !client._http.opts.accessToken) {
        return this.debounce('initialize-room', this.initializeRoom.bind(this), 300)
      }
      // window.room = this.room = client.getRoom(this.roomId)
      window.roomId = this.roomId
      // debounce if the room create event hasn't been processed yet
      if (!this.roomId) {
        return this.debounce('initialize-room', this.initializeRoom.bind(this), 300)
      }
      this.initializeComments()
    },

    onLoggedIn(userId) {
      this.loggedIn = true
      if (this.roomId && !client.isGuest()) {
        client.joinRoom(this.roomId)
      }
    },

    initializeComments() {
      const state = this.commentTree().state
      try {
        this.commentTree().eventProcessingOn(client)
        this.buildInitialRoomState(this.roomId).then((_) => {
          this.clientReady = true
          // FIX THIS ALSO
          this.dataTopLevelComments = state[this.roomId].children
          this.dataTopLevelComments.addListener(this, 'dataTopLevelComments')
        }, (err) => {
          console.log(err)
        })
      } catch (e) {
        console.log(e)
      }
    },

    _hasComments(dataTopLevelComments, clientReady) {
      return dataTopLevelComments && dataTopLevelComments.length || !clientReady
    },

    _touchSettingsUpdated() {
      // TODO switch to _pathEffector
      // Really should be public API for forcing re-computes in Polymer..
      console.log('_touchSettingsUpdated')
      this.settingsUpdated += 0.1
    },

    _topLevelComments() {
      console.log('_topLevelComments')
      this._recomputeFilteredChildrenCount()
      return this.sortComments(this.dataTopLevelComments.filter((comment) => {
        return comment.content.msgtype === 'interlocutor.comment' && this.permitted(comment)
      }))
    },

    logout() {
      this.loggedIn = false
      this.logoutClient().then((success) => {
        this.userId = null
        this.activateGuestClient(this.homeServerAddress)
      })
    },

    openLogin() {
      window.location.hash = '#interlocutor-login'
      this.$.login.open()
    },

    openSettings() {
      window.location.hash = '#interlocutor-settings'
      this.$.settings.open()
    },

    toggleReply() {
      this.replyOpen = !this.replyOpen
    },

    _canReply(userId, roomId) {
      return userId && roomId
    }
  });
</script>
</dom-module>