From df94cba083368c6ea09f30c996860923bc498020 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 24 Feb 2016 19:15:06 +0300 Subject: [PATCH] Refactoring --- src/messenger/android/contacts_list.cljs | 179 +++++++++++++++++++++++ src/messenger/android/core.cljs | 162 +------------------- 2 files changed, 182 insertions(+), 159 deletions(-) create mode 100644 src/messenger/android/contacts_list.cljs diff --git a/src/messenger/android/contacts_list.cljs b/src/messenger/android/contacts_list.cljs new file mode 100644 index 0000000000..dc4c1808a6 --- /dev/null +++ b/src/messenger/android/contacts_list.cljs @@ -0,0 +1,179 @@ +(ns messenger.android.contacts-list + (:require-macros + [natal-shell.components :refer [view text image touchable-highlight list-view + toolbar-android]] + [natal-shell.data-source :refer [data-source clone-with-rows]] + [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])) + +(def fake-contacts? true) + +(def react-native-contacts (js/require "react-native-contacts")) + +(def logo-icon (js/require "./images/logo.png")) +(def user-no-photo (js/require "./images/no-photo.png")) +(def online-icon (js/require "./images/online.png")) +(def seen-icon (js/require "./images/seen.png")) +(def delivered-icon (js/require "./images/delivered.png")) + +(defui Contact + static om/Ident + (ident [this {:keys [name]}] + [:contact/by-name name]) + static om/IQuery + (query [this] + '[:name :photo :delivery-status :datetime :new-messages-count :online]) + Object + (render [this] + (let [{:keys [name photo delivery-status datetime new-messages-count online]} + (om/props this)] + (view {:style {:flexDirection "row" + :marginTop 5 + :marginBottom 5 + :paddingLeft 15 + :paddingRight 15 + :height 75 + :transform [{:translateX 0} + {:translateY 0}]}} + (view {:width 54 + :height 54} + ;;; photo + (view {:width 54 + :height 54 + :borderRadius 50 + :backgroundColor "#FFFFFF" + :elevation 6} + (image {:source (if (< 0 (count photo)) + {:uri photo} + user-no-photo) + :style {:borderWidth 2 + :borderColor "#FFFFFF" + :borderRadius 50 + :width 54 + :height 54 + :position "absolute" + ;; :top 2 + ;; :right 2 + }})) + ;;; online + (when online + (view {:position "absolute" + :top 41 + :left 36 + :width 12 + :height 12 + :borderRadius 50 + :backgroundColor "#FFFFFF" + :elevation 6} + (image {:source online-icon + :style {:width 12 + :height 12}})))) + (view {:style {:flexDirection "column" + :marginLeft 7 + :marginRight 10 + :flex 1 + :position "relative"}} + ;;; name + (text {:style {:fontSize 15 + :fontFamily "Avenir-Roman"}} name) + ;;; last message + (text {:style {:color "#AAB2B2" + :fontFamily "Avenir-Roman" + :fontSize 14 + :marginTop 2 + :paddingRight 10}} + (str "Hi, I'm " name))) + (view {:style {:flexDirection "column"}} + ;;; delivery status + (view {:style {:flexDirection "row" + :position "absolute" + :top 0 + :right 0}} + (when delivery-status + (image {:source (if (= (keyword delivery-status) :seen) + seen-icon + delivered-icon) + :style {:marginTop 5}})) + ;;; datetime + (text {:style {:fontFamily "Avenir-Roman" + :fontSize 11 + :color "#AAB2B2" + :letterSpacing 1 + :lineHeight 15 + :marginLeft 5}} + datetime)) + ;;; new messages count + (when (< 0 new-messages-count) + (view {:style {:position "absolute" + :right 0 + :bottom 24 + :width 18 + :height 18 + :backgroundColor "#6BC6C8" + :borderColor "#FFFFFF" + :borderRadius 50 + :alignSelf "flex-end"}} + (text {:style {:width 18 + :height 17 + :fontFamily "Avenir-Roman" + :fontSize 10 + :color "#FFFFFF" + :lineHeight 19 + :textAlign "center" + :top 1}} + new-messages-count)))))))) + +(def contact (om/factory Contact {:keyfn :name})) + +(defn render-row [row section-id row-id] + (contact (js->clj row :keywordize-keys true))) + +(defn generate-contact [n] + {:name (str "Contact " n) + :photo "" + :delivery-status (if (< (rand) 0.5) :delivered :seen) + :datetime "15:30" + :new-messages-count (rand-int 3) + :online (< (rand) 0.5)}) + +(defn generate-contacts [n] + (map generate-contact (range 1 (inc n)))) + +(defn load-contacts [] + (if fake-contacts? + (swap! state/app-state update :contacts-ds + #(clone-with-rows % + (vec (generate-contacts 100)))) + (.getAll react-native-contacts + (fn [error raw-contacts] + (when (not error) + (let [contacts (map (fn [contact] + (merge (generate-contact 1) + {:name (:givenName contact) + :photo (:thumbnailPath contact)})) + (js->clj raw-contacts :keywordize-keys true))] + (swap! state/app-state update :contacts-ds + #(clone-with-rows % contacts)))))))) + +(defui ContactsList + static om/IQuery + (query [this] + '[:contacts-ds]) + Object + (componentDidMount [this] + (load-contacts)) + (render [this] + (let [{:keys [contacts-ds]} (om/props this)] + (view {:style {:flex 1}} + (toolbar-android {:logo logo-icon + :title "Chats" + :style {:backgroundColor "#e9eaed" + :height 56}}) + (list-view {:dataSource contacts-ds + :renderRow render-row + :style {}}))))) + +(def contacts-list (om/factory ContactsList)) diff --git a/src/messenger/android/core.cljs b/src/messenger/android/core.cljs index ac9ee5c09f..a0bc4b089e 100644 --- a/src/messenger/android/core.cljs +++ b/src/messenger/android/core.cljs @@ -7,176 +7,20 @@ [natal-shell.alert :refer [alert]]) (:require [om.next :as om :refer-macros [defui]] [re-natal.support :as sup] - [messenger.state :as state])) - -(def fake-contacts? true) + [messenger.state :as state] + [messenger.android.contacts-list :as contacts-list])) (set! js/React (js/require "react-native")) -(def react-native-contacts (js/require "react-native-contacts")) - (def app-registry (.-AppRegistry js/React)) -(def logo-icon (js/require "./images/logo.png")) -(def user-no-photo (js/require "./images/no-photo.png")) -(def online-icon (js/require "./images/online.png")) -(def seen-icon (js/require "./images/seen.png")) -(def delivered-icon (js/require "./images/delivered.png")) - -(defui Contact - static om/Ident - (ident [this {:keys [name]}] - [:contact/by-name name]) - static om/IQuery - (query [this] - '[:name :photo :delivery-status :datetime :new-messages-count :online]) - Object - (render [this] - (let [{:keys [name photo delivery-status datetime new-messages-count online]} - (om/props this)] - (view {:style {:flexDirection "row" - :marginTop 5 - :marginBottom 5 - :paddingLeft 15 - :paddingRight 15 - :height 75 - :transform [{:translateX 0} - {:translateY 0}]}} - (view {:width 54 - :height 54} - ;;; photo - (view {:width 54 - :height 54 - :borderRadius 50 - :backgroundColor "#FFFFFF" - :elevation 6} - (image {:source (if (< 0 (count photo)) - {:uri photo} - user-no-photo) - :style {:borderWidth 2 - :borderColor "#FFFFFF" - :borderRadius 50 - :width 54 - :height 54 - :position "absolute" - ;; :top 2 - ;; :right 2 - }})) - ;;; online - (when online - (view {:position "absolute" - :top 41 - :left 36 - :width 12 - :height 12 - :borderRadius 50 - :backgroundColor "#FFFFFF" - :elevation 6} - (image {:source online-icon - :style {:width 12 - :height 12}})))) - (view {:style {:flexDirection "column" - :marginLeft 7 - :marginRight 10 - :flex 1 - :position "relative"}} - ;;; name - (text {:style {:fontSize 15 - :fontFamily "Avenir-Roman"}} name) - ;;; last message - (text {:style {:color "#AAB2B2" - :fontFamily "Avenir-Roman" - :fontSize 14 - :marginTop 2 - :paddingRight 10}} - (str "Hi, I'm " name))) - (view {:style {:flexDirection "column"}} - ;;; delivery status - (view {:style {:flexDirection "row" - :position "absolute" - :top 0 - :right 0}} - (when delivery-status - (image {:source (if (= (keyword delivery-status) :seen) - seen-icon - delivered-icon) - :style {:marginTop 5}})) - ;;; datetime - (text {:style {:fontFamily "Avenir-Roman" - :fontSize 11 - :color "#AAB2B2" - :letterSpacing 1 - :lineHeight 15 - :marginLeft 5}} - datetime)) - ;;; new messages count - (when (< 0 new-messages-count) - (view {:style {:position "absolute" - :right 0 - :bottom 24 - :width 18 - :height 18 - :backgroundColor "#6BC6C8" - :borderColor "#FFFFFF" - :borderRadius 50 - :alignSelf "flex-end"}} - (text {:style {:width 18 - :height 17 - :fontFamily "Avenir-Roman" - :fontSize 10 - :color "#FFFFFF" - :lineHeight 19 - :textAlign "center" - :top 1}} - new-messages-count)))))))) - -(def contact (om/factory Contact {:keyfn :name})) - -(defn render-row [row section-id row-id] - (contact (js->clj row :keywordize-keys true))) - -(defn generate-contact [n] - {:name (str "Contact " n) - :photo "" - :delivery-status (if (< (rand) 0.5) :delivered :seen) - :datetime "15:30" - :new-messages-count (rand-int 3) - :online (< (rand) 0.5)}) - -(defn generate-contacts [n] - (map generate-contact (range 1 (inc n)))) - -(defn load-contacts [] - (if fake-contacts? - (swap! state/app-state update :contacts-ds - #(clone-with-rows % - (vec (generate-contacts 100)))) - (.getAll react-native-contacts - (fn [error raw-contacts] - (when (not error) - (let [contacts (map (fn [contact] - (merge (generate-contact 1) - {:name (:givenName contact) - :photo (:thumbnailPath contact)})) - (js->clj raw-contacts :keywordize-keys true))] - (swap! state/app-state update :contacts-ds - #(clone-with-rows % contacts)))))))) (defui AppRoot static om/IQuery (query [this] '[:contacts-ds]) Object - (componentDidMount [this] - (load-contacts)) (render [this] (let [{:keys [contacts-ds]} (om/props this)] - (view {:style {:flex 1}} - (toolbar-android {:logo logo-icon - :title "Chats" - :style {:backgroundColor "#e9eaed" - :height 56}}) - (list-view {:dataSource contacts-ds - :renderRow render-row - :style {}}))))) + (contacts-list/contacts-list (om/props this))))) (swap! state/app-state assoc :contacts-ds (data-source {:rowHasChanged (fn [row1 row2]