From 392056106c6c591c49f1e0711be780570df3a8be Mon Sep 17 00:00:00 2001
From: Mike de Boer <mdeboer@mozilla.com>
Date: Thu, 2 Oct 2014 12:37:43 +0200
Subject: [PATCH] Bug 1069816: Enable import button in the contacts list. r=abr

---
 .../components/loop/content/js/contacts.js    | 20 ++++++++++++++++---
 .../components/loop/content/js/contacts.jsx   | 20 ++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/browser/components/loop/content/js/contacts.js b/browser/components/loop/content/js/contacts.js
index 820a1d597ce0..c861cc4fd238 100644
--- a/browser/components/loop/content/js/contacts.js
+++ b/browser/components/loop/content/js/contacts.js
@@ -209,7 +209,8 @@ loop.contacts = (function(_, mozL10n) {
   const ContactsList = React.createClass({displayName: 'ContactsList',
     getInitialState: function() {
       return {
-        contacts: {}
+        contacts: {},
+        importBusy: false
       };
     },
 
@@ -272,6 +273,16 @@ loop.contacts = (function(_, mozL10n) {
     },
 
     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() {
@@ -319,12 +330,15 @@ loop.contacts = (function(_, mozL10n) {
         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})
diff --git a/browser/components/loop/content/js/contacts.jsx b/browser/components/loop/content/js/contacts.jsx
index 8708d30f4288..a3e612abe542 100644
--- a/browser/components/loop/content/js/contacts.jsx
+++ b/browser/components/loop/content/js/contacts.jsx
@@ -209,7 +209,8 @@ loop.contacts = (function(_, mozL10n) {
   const ContactsList = React.createClass({
     getInitialState: function() {
       return {
-        contacts: {}
+        contacts: {},
+        importBusy: false
       };
     },
 
@@ -272,6 +273,16 @@ loop.contacts = (function(_, mozL10n) {
     },
 
     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() {
@@ -319,12 +330,15 @@ loop.contacts = (function(_, mozL10n) {
         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} />