use the new defview

Former-commit-id: dfc772d0cd61f60a245b8c1c624228fae2a5eac9

src/syng_im/chats_list/screen.cljs

@@ -14,6 +14,7 @@
             [syng-im.components.drawer.view :refer [drawer-view open-drawer]]
             [syng-im.components.styles :refer [color-blue]]
             [syng-im.components.toolbar :refer [toolbar]]
+            [syng-im.components.main-tabs :refer [main-tabs]]
             [syng-im.components.icons.ionicons :refer [icon]]
             [syng-im.chats-list.styles :as st]))
 
@@ -37,7 +38,9 @@
                     :renderRow  (fn [row _ _]
                                   (list-item [chat-list-item row]))
                     :style      st/list-container}]
-        [action-button {:buttonColor color-blue}
+        [action-button {:buttonColor color-blue
+                        :offsetY     72
+                        :offsetX     16}
          [action-button-item
           {:title       "New Chat"
            :buttonColor :#9b59b6
@@ -49,4 +52,5 @@
            :buttonColor :#1abc9c
            :onPress     #(dispatch [:show-group-new])}
           [icon {:name  :person-stalker
-                 :style st/person-stalker-icon}]]]]])))
+                 :style st/person-stalker-icon}]]]
+        [main-tabs]]])))

src/syng_im/components/main-tabs.cljs

@@ -1,4 +1,5 @@
 (ns syng-im.components.main-tabs
+  (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view
                                               text-input
@@ -8,10 +9,9 @@
             [syng-im.components.tabs.tabs :refer [tabs]]
             [syng-im.utils.logging :as log]))
 
-(defn main-tabs []
+(defview main-tabs []
-  (let [view-id (subscribe [:view-id])]
+  [view-id [:get :view-id]]
-    (fn []
+  [tabs {:selected-index (case view-id
-      [tabs {:selected-index (case @view-id
                            :chat-list 0
                            :discovery 1
                            :contact-list 2
@@ -27,4 +27,4 @@
                           {:handler #(dispatch [:navigate-to
                                                 :contact-list])
                            :title   "Contacts"
-                               :icon    "icon_tab_contacts"}]}])))
+                           :icon    "icon_tab_contacts"}]}])

src/syng_im/components/tabs/tab.cljs

@@ -1,4 +1,5 @@
 (ns syng-im.components.tabs.tab
+  (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view
                                               text-input
@@ -8,13 +9,11 @@
             [reagent.core :as r]
             [syng-im.components.tabs.styles :as st]))
 
-(defn tab [{:keys [handler title icon selected-index index]}]
+(defview tab [{:keys [handler title icon selected-index index]}]
-  (fn [{:keys [handler title icon selected-index index]}]
   [touchable-highlight {:style   st/tab
-                          :onPress #(do (reset! selected-index index)
+                        :onPress handler}
-                                        (handler))}
     [view {:style st/tab-container}
       [image {:source {:uri icon}
               :style  st/tab-icon}]
-      (when (= @selected-index index)
+      (when (= selected-index index)
-        [text {:style st/tab-title} title])]]))
+        [text {:style st/tab-title} title])]])

src/syng_im/components/tabs/tabs.cljs

@@ -1,4 +1,5 @@
 (ns syng-im.components.tabs.tabs
+  (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view
                                               text-input
@@ -15,9 +16,7 @@
                           :selected-index selected-index})]
     [tab data]))
 
-(defn tabs [{:keys [style tab-list selected-index]}]
+(defview tabs [{:keys [style tab-list selected-index]}]
-  (let [selected-index (r/atom selected-index)]
-    (fn [{:keys [style tab-list]}]
   (let [style (merge st/tabs style)]
     [view {:style style}
-         (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))))
+     (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))

src/syng_im/contacts/screen.cljs

@@ -9,6 +9,7 @@
             [syng-im.contacts.views.contact :refer [contact-view]]
             [syng-im.components.styles :refer [toolbar-background2]]
             [syng-im.components.toolbar :refer [toolbar]]
+            [syng-im.components.main-tabs :refer [main-tabs]]
             [syng-im.contacts.styles :as st]
             [syng-im.utils.listview :as lw]))
 
@@ -32,4 +33,5 @@
      [list-view {:dataSource          (lw/to-datasource contacts)
                  :enableEmptySections true
                  :renderRow           render-row
-                 :style               st/contacts-list}])])
+                 :style               st/contacts-list}])
+   [main-tabs]])

src/syng_im/discovery/screen.cljs

@@ -9,6 +9,7 @@
     [syng-im.components.toolbar :refer [toolbar]]
     [syng-im.discovery.views.popular :refer [popular]]
     [syng-im.discovery.views.recent :refer [discovery-recent]]
+    [syng-im.components.main-tabs :refer [main-tabs]]
     [syng-im.discovery.styles :as st]))
 
 (defn get-hashtags [status]
@@ -49,4 +50,5 @@
     [popular]
     [view st/section-spacing
      [text {:style st/discovery-subtitle} "Recent"]]
-    [discovery-recent]]])
+    [discovery-recent]]
+   [main-tabs]])