How to use deepstream records to select ds-lists

Question

I have a problem with the selection of ds lists in my polymer application. I have a functioning list of chat titles (implemented as deepstream records), which should be used to select the matching chat histories (which are implemented as a deepstream list containing the chat messages as records).

   <div class="chatlist">
     <!-- This is the list of chats -->
      <paper-menu selected="[[chatlist]]">
        <paper-item>
          <paper-input label="New Chat:" id="chatName" on-keydown="setChatName"></paper-input>
        </paper-item>
        <template 
        is="dom-repeat" 
        items="[[todos]]" 
        as="recordId">
        <div role="listbox">
          <chat-names
            name="[[recordId]]">
          </chat-names>
        </div>
        </template>
      </paper-menu>
  </div>

  <!-- this is the chat history -->
  <iron-pages
    selected="[[chatlist]]"
    attr-for-selected="chatView"
    fallback-selection="chatView404"
    role="main">    
      <template 
        is="dom-repeat" 
        items="[[todos]]" 
        as="recordId">
          <chat-view
            chatView="[[???]]"
            name="[[recordId]]">
          </chat-view>
      </template>
  </iron-pages>

So here is my problem: although the chat-list works fine, I don't know how to connect the selection of the chat itself to the display of the matching chat history.

The creation of the chat title happens in the paper-input on-keydown="setChatName" function, which looks like this:

setChatName: function (e) {
    if (e.which === 13) {
      var recordId =  'polymer-example/' + this.ds.getUid();
      var todo = this.$$( '.new-record-input' ).value;
      var todoRecord = this.ds.record.getRecord( recordId );
      var todoList = this.ds.record.getList( this.name );

      todoRecord.set( { name: todo, checked: false } )
      todoRecord.whenReady( function() {
        todoList.addEntry( recordId );
      } );
      this.$.chatName.value = '';
    }
  },

How can I now set not only the record of the chat name itself, but also the ds-list that contains the chat history? And: Which attributes of the ds-list are useful (eg. id? name?) to use as an attribute to select it?

Sorry for the long question, every answer is much appreciated!

Answer 1

First, forgive me, but I'm confused by the examples you've given. The second code snippet appears to be example code for a todo app. It would help immensely if you used descriptive variable names.

You appear to have code that allows a user to create a new chat name, where a record is created called 'polymer-example/$RANDOM_ID' (i'd suggest using something like 'chat-details/$RANDOM_ID' instead) with the value { name: $CHAT_NAME, checked: false }. The record 'polymer-example/$RANDOM_ID' is then added to a list with some polymer property You have a deepstream list of names where each name corresponds to a deepstream record containing the name of a chat.

Supposing that you would like to store a reference to the currently selected chat, I suggest that either you store the corresponding chat id (this is called recordId in the example provided) as a property, or instead you could store a reference to the record itself.

For storing the chat history i'd suggest creating another list (called e.g. 'chat-history/$CHAT_ID') for each chat. Then for each new message, you can create a corresponding record ('chat-message/$RANDOM_ID') and use that to store the message content, name of the sender, time etc. Now add the name of your message record to the chat-history list.

Selecting the correct chat history is then just a case of getting the currently selected chat(chatId), getting the list 'chat-history/' + chatId which contains a list of message ids, then fetching the record 'chat-message/' + messageId.