/*jshint esnext: true */

​

// Create client instance

const client = new Circuit.Client({

  domain: jsBinTpl.domain,       // read domain from url

  client_id: jsBinTpl.client_id, // get client_id for domain

  scope: 'ALL'

});

​

// Template for Circuit JSBin examples. Builds generic part of page incl. login button.

const {logonButton, logoutButton, print} = jsBinTpl.init(client, template, {

  title: 'Circuit JS SDK: List conversations, get threads and comments. Define injectors.',

  description: 'Retrieve 25 most recent conversations and display them in the left more list. When selecting a conversation, retrieve their 50 most recent threads and show them in the middle list. When selecting a thread, then show the 20 most recent comments in the right list. Defines conversationInjector and itemInjector.',

  apiMethods: ['getConversations', 'getConversationFeed', 'getThreadComments', 'Injectors.conversationInjector', 'Injectors.itemInjector'],

  prerequisites: ['None']

});

​

//Circuit.logger.setLevel(Circuit.Enums.LogLevel.Debug);

​

// Local variables

var _conversations;

​

logonButton.addEventListener('click', () => {

  clearLists();

  client.logon()

  .then(user => print(`Successfully authenticated as ${user.displayName}`))

  .then(client.getConversations)

  .then(showConversations)

  .catch(print);

});

​

logoutButton.addEventListener('click', () => {

  client.logout()

  .catch(print);

});

​

function clearLists(skipConvList) {

  !skipConvList && (convList.innerHTML = '');

  threadList.innerHTML = '';

  itemList.innerHTML = '';

}

​

function showConversations(conversations) {

  conversations.reverse().forEach(c => { 

    console.log(c.userData) 

    let opt = document.createElement('option');

    opt.value = c.convId;

    opt.innerHTML = c.title;

    convList.appendChild(opt);

  })

}

​

function selectConv() {

  client.getConversationFeed(convList.value, {commentsPerThread: 0, maxUnreadPerThread: 0})

  .then(res => showThreads(res.threads))

  .catch(print);

}

​

function showThreads(threads) {

  clearLists(true);

  // Reverse the list to show the newest on top, and filter out non-text items.

  threads.reverse()

  .filter(thread => {

    var p = thread.parentItem;

    return !!p.text && (p.text.subject || p.text.content);

  })

  .forEach(thread => {

    var p = thread.parentItem;

    let opt = document.createElement('option');

    opt.value = p.itemId;

    opt.innerHTML = p.text.teaser;

    threadList.appendChild(opt);

  })

}

​

function selectThread() {

  // For better performance the comments could have already retrieved with

  // getConversationFeed, but to demonstrate the getItemsByThread API we

  // fetch the comments here.

  client.getItemsByThread(convList.value, threadList.value, {number: 20})

  .then(res => showItems(res.items))

  .catch(print);

}

​

function showItems(items) {

  itemList.innerHTML = '';

  items = items.filter(item => {

    return !!item.text;

  });

  items.forEach(item => {

    let opt = document.createElement('option');

    opt.value = item.itemId;

    opt.innerHTML = item.text.teaser;

    itemList.appendChild(opt);

  })

}

client.addEventListener('connectionStateChanged', function (evt) {

    console.log('Received connectionStateChanged event. state: ', evt.state)

});

​

// Setup conversation injector (async) so all conversations returned in any API

// will contain a title attribute which is either the diplayName of a

// direct conversation peer, the topic of a group conversation (if given),

// or a list of the first 5 members firstnames

Circuit.Injectors.conversationInjector = conv => {

  return new Promise((resolve, reject) => {

    if (conv.topic) {

      conv.title = conv.topic;

      resolve(conv);

      return;

    }

    let userIds = conv.participants.slice(0, 5).filter(p => {

      return p !== client.loggedOnUser.userId;

    });

    client.getUsersById(userIds)

    .then(users => {

      if (conv.type === Circuit.Enums.ConversationType.DIRECT) {

        conv.title = users[0].displayName;

      } else {

        conv.title = users.map(u => {

          return u.firstName;

        }).join(', ');

      }

      resolve(conv);

    })

    .catch(reject);

  });

}

​

// Synchroneous item injector to add a `teaser` attribute to a text item

Circuit.Injectors.itemInjector = item => {

  if (item.text) {

    let len = 35;

    item.text.teaser = item.text.subject || item.text.content;

    if (item.text.teaser.length > len) {

      item.text.teaser = `${item.text.teaser.slice(0, len - 3)}...`;

    }

  }

}