Bug 1069816: Enable import button in the contacts list. r=abr
authorMike de Boer <mdeboer@mozilla.com>
Thu, 02 Oct 2014 12:37:43 +0200
changeset 218129 e15661e2c496ef3497db2e1d018fa260851a8e05
parent 218128 4ba581107e6f84c822fcdc7e5f4f7337f1eb71f7
child 218130 16b361184a4518bb62b1d8d6b0f7a9e7c5e9ab2c
push id2
push usergszorc@mozilla.com
push dateWed, 12 Nov 2014 19:43:22 +0000
treeherderfig@7a5f4d72e05d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersabr
bugs1069816
milestone34.0a2
Bug 1069816: Enable import button in the contacts list. r=abr
browser/components/loop/content/js/contacts.js
browser/components/loop/content/js/contacts.jsx
--- a/browser/components/loop/content/js/contacts.js
+++ b/browser/components/loop/content/js/contacts.js
@@ -204,17 +204,18 @@ loop.contacts = (function(_, mozL10n) {
         )
       );
     }
   });
 
   const ContactsList = React.createClass({displayName: 'ContactsList',
     getInitialState: function() {
       return {
-        contacts: {}
+        contacts: {},
+        importBusy: false
       };
     },
 
     componentDidMount: function() {
       let contactsAPI = navigator.mozLoop.contacts;
 
       contactsAPI.getAll((err, contacts) => {
         if (err) {
@@ -267,16 +268,26 @@ loop.contacts = (function(_, mozL10n) {
       this.setState({});
     },
 
     handleContactRemoveAll: function() {
       this.setState({contacts: {}});
     },
 
     handleImportButtonClick: function() {
+      this.setState({ importBusy: true });
+      navigator.mozLoop.startImport({
+        service: "google"
+      }, (err, stats) => {
+        this.setState({ importBusy: false });
+        // TODO: bug 1076764 - proper error and success reporting.
+        if (err) {
+          throw err;
+        }
+      });
     },
 
     handleAddContactButtonClick: function() {
       this.props.startForm("contacts_add");
     },
 
     handleContactAction: function(contact, actionName) {
       switch (actionName) {
@@ -314,22 +325,25 @@ loop.contacts = (function(_, mozL10n) {
         return ContactDetail({key: item._guid, contact: item, 
                               handleContactAction: this.handleContactAction})
       };
 
       let shownContacts = _.groupBy(this.state.contacts, function(contact) {
         return contact.blocked ? "blocked" : "available";
       });
 
+      // TODO: bug 1076767 - add a spinner whilst importing contacts.
       return (
         React.DOM.div(null, 
           React.DOM.div({className: "content-area"}, 
             ButtonGroup(null, 
-              Button({caption: mozL10n.get("import_contacts_button"), 
-                      disabled: true, 
+              Button({caption: this.state.importBusy
+                               ? mozL10n.get("importing_contacts_progress_button")
+                               : mozL10n.get("import_contacts_button"), 
+                      disabled: this.state.importBusy, 
                       onClick: this.handleImportButtonClick}), 
               Button({caption: mozL10n.get("new_contact_button"), 
                       onClick: this.handleAddContactButtonClick})
             )
           ), 
           React.DOM.ul({className: "contact-list"}, 
             shownContacts.available ?
               shownContacts.available.sort(this.sortContacts).map(viewForItem) :
--- a/browser/components/loop/content/js/contacts.jsx
+++ b/browser/components/loop/content/js/contacts.jsx
@@ -204,17 +204,18 @@ loop.contacts = (function(_, mozL10n) {
         </li>
       );
     }
   });
 
   const ContactsList = React.createClass({
     getInitialState: function() {
       return {
-        contacts: {}
+        contacts: {},
+        importBusy: false
       };
     },
 
     componentDidMount: function() {
       let contactsAPI = navigator.mozLoop.contacts;
 
       contactsAPI.getAll((err, contacts) => {
         if (err) {
@@ -267,16 +268,26 @@ loop.contacts = (function(_, mozL10n) {
       this.setState({});
     },
 
     handleContactRemoveAll: function() {
       this.setState({contacts: {}});
     },
 
     handleImportButtonClick: function() {
+      this.setState({ importBusy: true });
+      navigator.mozLoop.startImport({
+        service: "google"
+      }, (err, stats) => {
+        this.setState({ importBusy: false });
+        // TODO: bug 1076764 - proper error and success reporting.
+        if (err) {
+          throw err;
+        }
+      });
     },
 
     handleAddContactButtonClick: function() {
       this.props.startForm("contacts_add");
     },
 
     handleContactAction: function(contact, actionName) {
       switch (actionName) {
@@ -314,22 +325,25 @@ loop.contacts = (function(_, mozL10n) {
         return <ContactDetail key={item._guid} contact={item}
                               handleContactAction={this.handleContactAction} />
       };
 
       let shownContacts = _.groupBy(this.state.contacts, function(contact) {
         return contact.blocked ? "blocked" : "available";
       });
 
+      // TODO: bug 1076767 - add a spinner whilst importing contacts.
       return (
         <div>
           <div className="content-area">
             <ButtonGroup>
-              <Button caption={mozL10n.get("import_contacts_button")}
-                      disabled
+              <Button caption={this.state.importBusy
+                               ? mozL10n.get("importing_contacts_progress_button")
+                               : mozL10n.get("import_contacts_button")}
+                      disabled={this.state.importBusy}
                       onClick={this.handleImportButtonClick} />
               <Button caption={mozL10n.get("new_contact_button")}
                       onClick={this.handleAddContactButtonClick} />
             </ButtonGroup>
           </div>
           <ul className="contact-list">
             {shownContacts.available ?
               shownContacts.available.sort(this.sortContacts).map(viewForItem) :