diff --git a/.re-natal b/.re-natal index 58421ce73d..4bcf0c5673 100644 --- a/.re-natal +++ b/.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" diff --git a/package.json b/package.json index d9360d09d2..c900c6366d 100644 --- a/package.json +++ b/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", diff --git a/src/messenger/android/contacts_list.cljs b/src/messenger/android/contacts_list.cljs index dc5bcf4927..1fb2eebb01 100644 --- a/src/messenger/android/contacts_list.cljs +++ b/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" diff --git a/src/messenger/android/core.cljs b/src/messenger/android/core.cljs index effe5c1b28..0cefcba0cf 100644 --- a/src/messenger/android/core.cljs +++ b/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) diff --git a/src/messenger/android/login.cljs b/src/messenger/android/login.cljs new file mode 100644 index 0000000000..24848f4dd4 --- /dev/null +++ b/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)) diff --git a/src/messenger/state.cljs b/src/messenger/state.cljs index fa684aefe6..3961596c96 100644 --- a/src/messenger/state.cljs +++ b/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)