finished topic creation/deletion

css/base.css

@@ -345,6 +345,13 @@ ul.menu > li.separator:hover {
 }
 
 /* List of contacts */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
 .contacts-panel {
   overflow-y: auto;
   margin-top: 1rem;:
@@ -772,26 +779,26 @@ ul.menu > li.separator:hover {
 /* END of modal dialog */
 
 /* BEGIN Tabs */
-.tabbar {
-  padding-top: 1rem;
-  background: #eeeeee; /* #2196f3; */
-}
 
-.tabbar > ul {
+ul.tabbar {
+  flex-shrink: 0;
+  flex-grow: 0;
+  background: #eeeeee;
   list-style:none;
   margin:0;
   width:100%;
   overflow:hidden;
   padding:0;
-  margin-left:1rem;
+  padding-left:1rem;
 }
 
-.tabbar > ul > li {
+ul.tabbar > li {
   float: left;
 }
 
-.tabbar > ul > li > a {
+ul.tabbar > li > a {
   position: relative;
+  padding-top: 0.75rem;
   text-decoration: none;
   text-transform: uppercase;
   display: block;
@@ -805,11 +812,11 @@ ul.menu > li.separator:hover {
   box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.5);
 }
 
-.tabbar li.active > a {
+ul.tabbar li.active > a {
   color: #2196f3;
 }
 
-.tabbar li.active > a:after {
+ul.tabbar li.active > a:after {
   height:0.15rem;
   display:block;
   content:"";

index.html

@@ -673,14 +673,14 @@
           this.forceUpdate();
         } else if (what === "msg") {
           // Skip update if the topic is currently open, otherwise the badge will annoyingly flash.
-          if (this.props.topicSelected !== cont.src) {
+          if (this.props.topicSelected !== cont.topic) {
             this.forceUpdate();
           }
         } else if (what === "recv") {
           // Explicitly ignoring "recv"
         } else if (what === "del") {
           // Currently selected topic is deleted, clear selection.
-          if (this.props.topicSelected === cont.src) {
+          if (this.props.topicSelected === cont.topic) {
             this.props.onTopicSelected(null);
           }
           // Redraw without the deleted topic.
@@ -688,7 +688,6 @@
         } else {
           // TODO(gene): handle other types of notifications
           console.log("changed (not updating for it): " + what + " in:");
-          console.log(cont);
         }
       },
       tnInvite: function(invite) {
@@ -765,7 +764,6 @@
         }
       },
       handleGroupSubmit: function(name, dataUrl) {
-        //this.setState({errorCleared: false});
         var vcard = null;
         if (name || dataUrl) {
           vcard = {
@@ -783,9 +781,8 @@
       },
       render: function() {
         return (
-          <div>
+          <div className="flex-column">
-            <div className="tabbar">
+            <ul className="tabbar">
-              <ul>
               <li className={this.state.tabSelected === "p2p" ? "active" : null}>
                 <a href="#" data-id="p2p" onClick={this.handleTabClick}>1:1</a>
               </li>
@@ -793,10 +790,12 @@
                 <a href="#"  data-id="grp" onClick={this.handleTabClick}>group</a>
               </li>
             </ul>
-            </div>
             {this.state.tabSelected === "grp" ?
               <NewTopicView.Group onSubmit={this.handleGroupSubmit} /> :
-              <NewTopicView.SelectContacts onContactSelected={this.handleContactSelected} type="p2p" />}
+              <div className="flex-column">
+                <NewTopicView.SearchContacts type="p2p" />
+                <NewTopicView.ContactsList onContactSelected={this.handleContactSelected} type="p2p" />
+              </div>}
           </div>
         );
       }
@@ -813,7 +812,6 @@
         this.setState({fn: e.target.value});
       },
       handleImageChanged: function(img) {
-        console.log(img);
         this.setState({imageDataUrl: img});
       },
       handleSubmit: function(e) {
@@ -842,10 +840,37 @@
       }
     });
 
-    NewTopicView.SelectContacts = React.createClass({
+    NewTopicView.SearchContacts = React.createClass({
+      getInitialState: function() {
+        return {
+          search: null
+        };
+      },
+      handleSearchChange: function(e) {
+        this.setState({search: e.target.value});
+      },
+      handleSearch: function(e) {
+        e.preventDefault();
+        console.log("will search for '" + this.state.search + "'");
+      },
+      render: function() {
+        return (
+          <form className="panel-form" onSubmit={this.handleFindContacts}>
+            <div className="panel-form-one">
+            <input type="text" placeholder="Emails or phones to find" value={this.state.search}
+              onChange={this.handleSearchChange} required />
+              <a href="#" onClick={this.handleSearch}>
+                <i className="material-icons">search</i>
+              </a>
+            </div>
+          </form>
+        );
+      }
+    });
+
+    NewTopicView.ContactsList = React.createClass({
       getInitialState: function() {
         return {
-          search: null,
           selectedUser: null
         };
       },
@@ -856,13 +881,6 @@
           console.log(sel);
         }
       },
-      handleSearchChange: function(e) {
-        this.setState({search: e.target.value});
-      },
-      handleSearch: function(e) {
-        e.preventDefault();
-        console.log("will search for '" + this.state.search + "'");
-      },
       render: function() {
         var contactNodes = [];
         // Don't attempt to create P2P topics which already exist. Server will reject the duplicates.
@@ -882,22 +900,11 @@
           );
         }, this);
         return (
-          <div>
-            <form className="panel-form" onSubmit={this.handleFindContacts}>
-              <div className="panel-form-one">
-              <input type="text" placeholder="Emails or phones to find" value={this.state.search}
-                onChange={this.handleSearchChange} required />
-                <a href="#" onClick={this.handleSearch}>
-                  <i className="material-icons">search</i>
-                </a>
-              </div>
-            </form>
           <div className="contacts-panel">
             <ul className="contact-box">
               {contactNodes}
             </ul>
           </div>
-          </div>
         );
       }
     });
@@ -1003,7 +1010,9 @@
         this.propsChange(nextProps);
       },
       propsChange: function(props) {
-        if (props.topic && (props.topic != this.state.topic)) {
+        if (!props.topic) {
+          this.setState({messages: [], topic: null});
+        } else if (props.topic != this.state.topic) {
           var msgs = [];
           var topic = Tinode.getTopic(props.topic);
           // Bind the new topic to component.
@@ -1341,9 +1350,15 @@
           Tinode.getTopic(data.topic).noteRecv(data.seq);
         }, RECEIVED_DELAY);
       },
-      // User clicked on a contact in the side panel.
+      // User clicked on a contact in the side panel or deleted a contact.
       handleTopicSelected: function(topicName) {
+        if (topicName) {
+          // Contact selected
           this.setState({topicSelected: topicName, mobilePanel: 'topic-view'});
+        } else {
+          // Currently selected contact deleted
+          this.setState({topicSelected: null, mobilePanel: 'sidepanel'});
+        }
       },
       // In mobile view user requested to show sidepanel
       handleHideMessageView: function() {
@@ -1401,19 +1416,15 @@
           var params = {get: {desc: {}, data: {}}};
           if (!peerName) {
             params.get.sub = {}; // Fetch subs for grp topics only. Subscriptions for a p2p topic are useless.
-            params.set = {set: {desc: {public: vcard}}};
+            params.set = {desc: {public: vcard}};
           }
           topic.subscribe(params).then(function() {
-            if (peerName) {
             instance.setState({
               errorText: '',
               topicSelected: topic.name,
               sidePanelSelected: 'contacts',
               mobilePanel: 'topic-view'
             });
-            } else {
-              console.log("new group topic created: " + topic.name);
-            }
           }).catch(function(err) {
             instance.setState({errorText: err.message});
           });