separated contact list into a component

css/base.css

@@ -461,6 +461,7 @@ ul.menu > li.separator:hover {
   display: flex;
   padding: 0.35rem 0.25rem 0.5rem 0.35rem;
   min-height: 3.5rem;
+  border-bottom: 1px solid #eee;
 }
 .contact-box > li:hover {
   background-color: #eceff1; /* blue-gray 50 highlight */
@@ -1044,6 +1045,10 @@ ul.tabbar li.active > a:after {
   color: rgba(250, 250, 250, 0.8); /* default text color #FAFAFA, gray 50 */
 }
 
+.lettertile:hover {
+  color: white;
+}
+
 /* Colors of letter tiles */
 .lettertile.color0 {
   background-color: #ef9a9a;
@@ -1073,7 +1078,7 @@ ul.tabbar li.active > a:after {
   background-color: #c5e1a5;
 }
 .lettertile.color9 {
-  background-color: #fff59d;
+  background-color: #f0e57d;
 }
 .lettertile.color10 {
   background-color: #f48fb1;
@@ -1161,3 +1166,13 @@ ul.tabbar li.active > a:after {
   background-color: #c0c0c0;
   border-radius: 50%;
 }
+
+.chip {
+  display: inline-block;
+  background-color: white;
+  height: 2rem;
+  line-height: 2;
+  border-radius: 1rem;
+  padding: 0 1rem;
+  background-color: #ccc;
+}

index.html

@@ -885,6 +885,11 @@
 
     /* ContactsView holds all contacts-related stuff */
     var ContactsView = React.createClass({
+      getInitialState: function() {
+        return {
+          contactList: this.prepareContactList()
+        };
+      },
       componentWillMount: function() {
         var me = Tinode.getMeTopic();
         me.onContactUpdate = this.tnMeContactUpdate;
@@ -900,13 +905,13 @@
       // Reactions to updates to the contact list.
       tnMeContactUpdate: function(what, cont) {
         if (what === "on" || what === "off" || what === "read") {
-          this.forceUpdate();
+          this.resetContactList();
         } else if (what === "msg") {
           // New message received
 
           // Skip update if the topic is currently open, otherwise the badge will annoyingly flash.
           if (this.props.topicSelected !== cont.topic) {
-            this.forceUpdate();
+            this.resetContactList();
           }
         } else if (what === "recv") {
           // Explicitly ignoring "recv" -- it causes no visible updates to contact list.
@@ -918,7 +923,7 @@
             this.props.onTopicSelected(null);
           }
           // Redraw without the deleted topic.
-          this.forceUpdate();
+          this.resetContactList();
         } else {
           // TODO(gene): handle other types of notifications:
           // * ua -- user agent changes (may display a pictogram for mobile/desktop)
@@ -927,27 +932,60 @@
           console.log("changed (not updating for it): " + what + " in: " + cont.topic);
         }
       },
+
       tnInvite: function(invite) {
         // TODO(gene): implement invite handling
         console.log("Got invite:");
         console.log(invite);
       },
+
       tnMeSubsUpdated: function(names) {
-        this.forceUpdate();
+        this.resetContactList();
       },
+
+      prepareContactList: function() {
+        var contacts = [];
+        Tinode.getMeTopic().contacts(function(c) {
+          c.unread = c.seq;
+          if (c.read > 0) {
+            c.unread -= c.read;
+          }
+          contacts.push(c);
+        }, this);
+
+        return contacts;
+      },
+
+      resetContactList: function() {
+        this.setState({contactList: this.prepareContactList()});
+      },
+
+      render: function() {
+        return (
+          <ContactList
+            contacts={this.state.contactList}
+            emptyListMessage={<span>You have no chats<br />¯\_(ツ)_/¯</span>}
+            topicSelected={this.props.topicSelected}
+            onTopicSelected={this.props.onTopicSelected}
+            showContextMenu={this.props.showContextMenu} />
+        );
+      }
+    });
+    /* END Contact list */
+
+    /* BEGIN ContactList: component for showing a list of contacts,
+     * such as a list of group members group chat */
+    var ContactList = React.createClass({
       render: function() {
         var contactNodes = [];
-        Tinode.getMeTopic().contacts(function(c) {
+        if (this.props.contacts && this.props.contacts.length > 0) {
-          var unread = c.seq;
+          this.props.contacts.map(function(c) {
-          if (c.read > 0) {
-            unread -= c.read;
-          }
             contactNodes.push(
               <Contact
                 title={c.public ? c.public.fn : null}
                 avatar={makeImageUrl(c.public ? c.public.photo : null)}
                 comment={c.private}
-              unread={unread} now={c.online}
+                unread={c.unread} now={c.online}
                 selected={this.props.topicSelected}
                 onSelected={this.props.onTopicSelected}
                 showContextMenu={this.props.showContextMenu}
@@ -955,6 +993,7 @@
                 key={c.topic} />
             );
           }, this);
+        }
 
         return (
           <div className="contacts-panel">
@@ -963,14 +1002,14 @@
                 {contactNodes}
               </ul>
               :
-              <p className="center-medium-text">
+              <div className="center-medium-text">
-                You have no chats<br />¯\_(ツ)_/¯
+                {this.props.emptyListMessage}
-              </p>}
+              </div>}
           </div>
         );
       }
     });
-    /* END Contact list */
+    /* END ContactList */
 
     /* BEGIN Create new topic and invite users or send an invite */
     var NewTopicView = React.createClass({