From ff91912a7abe844930b72ba041538abbc75829e2 Mon Sep 17 00:00:00 2001
From: virvar <revalka@gmail.com>
Date: Mon, 21 Mar 2016 15:27:50 +0300
Subject: [PATCH] Loading spinner for sign up confirmation view

Former-commit-id: 81b1d6440a5feb3e04e0d462cb4956913786964c
---
 src/messenger/android/sign_up_confirm.cljs | 91 ++++++++++++----------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/messenger/android/sign_up_confirm.cljs b/src/messenger/android/sign_up_confirm.cljs
index a01810c036..fdbbeaeb76 100644
--- a/src/messenger/android/sign_up_confirm.cljs
+++ b/src/messenger/android/sign_up_confirm.cljs
@@ -10,12 +10,14 @@
             [messenger.state :as state]
             [messenger.utils.utils :refer [log toast]]
             [messenger.utils.resources :as res]
+            [messenger.components.spinner :refer [spinner]]
             [messenger.comm.intercom :as intercom :refer [set-confirmation-code]]
             [messenger.android.contacts-list :refer [contacts-list]]))
 
 (def nav-atom (atom nil))
 
 (defn show-home-view []
+  (swap! state/app-state assoc :loading false)
   (binding [state/*nav-render* false]
     (.replace @nav-atom (clj->js {:component contacts-list
                                   :name "contacts-list"}))))
@@ -37,6 +39,7 @@
 
 (defn send-code [code]
   (when (code-valid? code)
+    (swap! state/app-state assoc :loading true)
     (intercom/sign-up-confirm code on-send-code-response)))
 
 (defn update-code [value]
@@ -46,54 +49,58 @@
 (defui SignUpConfirm
   static om/IQuery
   (query [this]
-         '[:confirmation-code])
+         '[:confirmation-code :loading])
   Object
   (render
    [this]
-   (let [{:keys [confirmation-code]} (om/props this)
+   (let [{:keys [confirmation-code loading]} (om/props this)
          {:keys [nav]} (om/get-computed this)]
      (reset! nav-atom nav)
      (view
-      {:style {:flex 1
-               :backgroundColor "white"}}
-      (toolbar-android {:logo res/logo-icon
-                        :title "Confirm"
-                        :titleColor "#4A5258"
-                        :style {:backgroundColor "white"
-                                :height 56
-                                :elevation 2}})
-      (view {}
-            (text-input {:underlineColorAndroid "#9CBFC0"
-                         :placeholder "Enter confirmation code"
-                         :keyboardType "number-pad"
-                         :maxLength 4
-                         :onChangeText (fn [value]
-                                         (update-code value))
-                         :style {:flex 1
-                                 :marginHorizontal 18
-                                 :lineHeight 42
-                                 :fontSize 14
-                                 :fontFamily "Avenir-Roman"
-                                 :color "#9CBFC0"}}
-                        confirmation-code)
-            (if (code-valid? confirmation-code)
-              (touchable-highlight
-               {:onPress #(send-code confirmation-code)
-                :style {:alignSelf "center"
-                        :borderRadius 7
-                        :backgroundColor "#E5F5F6"
+      {:style {:flex 1}}
+      (view
+       {:style {:flex 1
+                :backgroundColor "white"}}
+       (toolbar-android {:logo res/logo-icon
+                         :title "Confirm"
+                         :titleColor "#4A5258"
+                         :style {:backgroundColor "white"
+                                 :height 56
+                                 :elevation 2}})
+       (view {}
+             (text-input {:underlineColorAndroid "#9CBFC0"
+                          :placeholder "Enter confirmation code"
+                          :keyboardType "number-pad"
+                          :maxLength 4
+                          :onChangeText (fn [value]
+                                          (update-code value))
+                          :style {:flex 1
+                                  :marginHorizontal 18
+                                  :lineHeight 42
+                                  :fontSize 14
+                                  :fontFamily "Avenir-Roman"
+                                  :color "#9CBFC0"}}
+                         confirmation-code)
+             (if (code-valid? confirmation-code)
+               (touchable-highlight
+                {:onPress #(send-code confirmation-code)
+                 :style {:alignSelf "center"
+                         :borderRadius 7
+                         :backgroundColor "#E5F5F6"
 
-                        :width 100}}
-               (text {:style {:marginVertical 10
-                              :textAlign "center"}}
-                     "Confirm"))
-              (view
-               {:style {:alignSelf "center"
-                        :borderRadius 7
-                        :backgroundColor "#AAB2B2"
-                        :width 100}}
-               (text {:style {:marginVertical 10
-                              :textAlign "center"}}
-                     "Confirm"))))))))
+                         :width 100}}
+                (text {:style {:marginVertical 10
+                               :textAlign "center"}}
+                      "Confirm"))
+               (view
+                {:style {:alignSelf "center"
+                         :borderRadius 7
+                         :backgroundColor "#AAB2B2"
+                         :width 100}}
+                (text {:style {:marginVertical 10
+                               :textAlign "center"}}
+                      "Confirm")))))
+      (when loading
+        (spinner {:visible true}))))))
 
 (def sign-up-confirm (om/factory SignUpConfirm))