User phone number input view

.re-natal

@@ -4,7 +4,8 @@
   "androidHost": "10.0.3.2",
   "modules": [
     "react-native-contacts",
-    "react-native-invertible-scroll-view"
+    "react-native-invertible-scroll-view",
+    "awesome-phonenumber"
   ],
   "imageDirs": [
     "images"

package.json

@@ -6,6 +6,7 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
+    "awesome-phonenumber": "^1.0.12",
     "react-native": "0.20.0",
     "react-native-contacts": "^0.2.1",
     "react-native-i18n": "0.0.8",

src/messenger/android/contacts_list.cljs

@@ -172,7 +172,7 @@
           (let [{:keys [contacts-ds]} (om/props this)
                 {:keys [nav]} (om/get-computed this)]
             (view {:style {:flex 1
-                           :backgroundColor "#F3F2F1"}}
+                           :backgroundColor "white"}}
                   (toolbar-android {:logo res/logo-icon
                                     :title "Chats"
                                     :titleColor "#4A5258"

src/messenger/android/core.cljs

@@ -9,6 +9,7 @@
   (:require [om.next :as om :refer-macros [defui]]
             [re-natal.support :as sup]
             [messenger.state :as state]
+            [messenger.android.login :refer [login]]
             [messenger.android.contacts-list :refer [contacts-list]]
             [messenger.android.chat :refer [chat]]))
 
@@ -31,12 +32,12 @@
 (defui AppRoot
   static om/IQuery
   (query [this]
-         '[:page :contacts-ds])
+         '[:page :contacts-ds :user-phone-number])
   Object
   (render [this]
           (let [{:keys [page]} (om/props this)]
             (navigator
-             {:initialRoute {:component contacts-list}
+             {:initialRoute {:component login}
               :renderScene (fn [route nav]
                              (when state/*nav-render*
                                (init-back-button-handler! nav)

src/messenger/android/login.cljs

@@ -0,0 +1,82 @@
+(ns messenger.android.login
+  (:require-macros
+   [natal-shell.components :refer [view text image touchable-highlight list-view
+                                   toolbar-android text-input]]
+   [natal-shell.async-storage :refer [get-item set-item]]
+   [natal-shell.core :refer [with-error-view]]
+   [natal-shell.alert :refer [alert]])
+  (:require [om.next :as om :refer-macros [defui]]
+            [re-natal.support :as sup]
+            [messenger.state :as state]
+            [messenger.android.resources :as res]
+            [messenger.android.contacts-list :refer [contacts-list]]))
+
+(set! js/PhoneNumber (js/require "awesome-phonenumber"))
+(def country-code "US")
+
+(defn show-home-view [nav]
+  (binding [state/*nav-render* false]
+    (.replace nav (clj->js {:component contacts-list
+                            :name "contacts-list"}))))
+
+(defn save-phone-number [nav]
+  (let [phone-number (:user-phone-number @state/app-state)]
+    (set-item "user-phone-number" phone-number)
+    (show-home-view nav)))
+
+(defn update-phone-number [value]
+  (let [formatted (str (.getNumber (js/PhoneNumber. value country-code "international")))]
+    (swap! state/app-state assoc :user-phone-number
+           formatted)))
+
+(defn load-user-phone-number []
+  (get-item "user-phone-number"
+            (fn [error value]
+              (if (not error)
+                (swap! state/app-state assoc :user-phone-number
+                       value)
+                (alert (str "error" error))))))
+
+(defui Login
+  static om/IQuery
+  (query [this]
+         '[:user-phone-number])
+  Object
+  (componentDidMount [this]
+                     (load-user-phone-number))
+  (render [this]
+          (let [{:keys [user-phone-number]} (om/props this)
+                {:keys [nav]} (om/get-computed this)]
+            (view
+             {:style {:flex 1
+                      :backgroundColor "white"}}
+             (toolbar-android {:logo res/logo-icon
+                               :title "Login"
+                               :titleColor "#4A5258"
+                               :style {:backgroundColor "white"
+                                       :height 56
+                                       :elevation 2}})
+             (view {:style {;; :alignItems "center"
+                            }}
+                   (text-input {:underlineColorAndroid "#9CBFC0"
+                                :placeholder "Enter your phone number"
+                                :keyboardType "phone-pad"
+                                :onChangeText (fn [value]
+                                                (update-phone-number value))
+                                :style {:flex 1
+                                        :marginHorizontal 18
+                                        :lineHeight 42
+                                        :fontSize 14
+                                        :fontFamily "Avenir-Roman"
+                                        :color "#9CBFC0"}}
+                               user-phone-number)
+                   (touchable-highlight {:onPress #(save-phone-number nav)
+                                         :style {:alignSelf "center"
+                                                 :borderRadius 7
+                                                 :backgroundColor "#E5F5F6"
+                                                 :width 100}}
+                                        (text {:style {:marginVertical 10
+                                                       :textAlign "center"}}
+                                              "Sign in")))))))
+
+(def login (om/factory Login))

src/messenger/state.cljs

@@ -4,7 +4,8 @@
 
 (set! js/React (js/require "react-native"))
 
-(defonce app-state (atom {:component nil}))
+(defonce app-state (atom {:component nil
+                          :user-phone-number nil}))
 (def ^{:dynamic true :private true} *nav-render*
   "Flag to suppress navigator re-renders from outside om when pushing/popping."
   true)