Add my profile view

src/syng_im/android/core.cljs

@@ -15,7 +15,7 @@
             [syng-im.components.chats.new-group :refer [new-group]]
             [syng-im.components.chat.new-participants :refer [new-participants]]
             [syng-im.components.chat.remove-participants :refer [remove-participants]]
-            [syng-im.components.profile :refer [profile]]
+            [syng-im.components.profile :refer [profile my-profile]]
             [syng-im.utils.logging :as log]
             [syng-im.utils.utils :refer [toast]]
             [syng-im.navigation :as nav]
@@ -48,7 +48,8 @@
         :new-group [new-group]
         :contact-list [contact-list]
         :chat [chat]
-        :profile [profile]))))
+        :profile [profile]
+        :my-profile [my-profile]))))
 
 (defn init []
   (dispatch-sync [:initialize-db])

src/syng_im/components/drawer.cljs

@@ -36,42 +36,44 @@
     name]])
 
 (defn drawer-menu [navigator]
-  [view st/drawer-menu
+  (let [username (subscribe [:username])]
-   [view st/user-photo-container
+    (fn [navigator]
-    [user-photo {}]]
+      [view st/drawer-menu
-   [view st/name-container
+      [view st/user-photo-container
-    [text {:style st/name-text}
+       [user-photo {}]]
-     "Status"]]
+      [view st/name-container
-   [view st/menu-items-container
+       [text {:style st/name-text}
-    [menu-item {:name    "Profile"
+        @username]]
-                :handler (fn []
+      [view st/menu-items-container
-                           (dispatch [:show-profile navigator]))}]
+       [menu-item {:name    "Profile"
-    [menu-item {:name    "Settings"
+                   :handler (fn []
-                :handler (fn []
+                              (dispatch [:show-my-profile]))}]
-                           ;; TODO not implemented
+       [menu-item {:name    "Settings"
-                           )}]
+                   :handler (fn []
-    [menu-item {:name    "Discovery"
+                              ;; TODO not implemented
-                :handler (fn []
+                              )}]
-                           (dispatch [:navigate-to :discovery]))}]
+       [menu-item {:name    "Discovery"
-    [menu-item {:name    "Contacts"
+                   :handler (fn []
-                :handler (fn []
+                              (dispatch [:navigate-to :discovery]))}]
-                           (dispatch [:show-contacts navigator]))}]
+       [menu-item {:name    "Contacts"
-    [menu-item {:name    "Invite friends"
+                   :handler (fn []
-                :handler (fn []
+                              (dispatch [:show-contacts navigator]))}]
-                           ;; TODO not implemented
+       [menu-item {:name    "Invite friends"
-                           )}]
+                   :handler (fn []
-    [menu-item {:name    "FAQ"
+                              ;; TODO not implemented
-                :handler (fn [])}]]
+                              )}]
-   [view st/switch-users-container
+       [menu-item {:name    "FAQ"
-    [touchable-opacity {:onPress (fn []
+                   :handler (fn [])}]]
-                                   (close-drawer)
+      [view st/switch-users-container
-                                   ;; TODO not implemented
+       [touchable-opacity {:onPress (fn []
-                                   )}
+                                      (close-drawer)
-     [text {:style st/switch-users-text}
+                                      ;; TODO not implemented
-      "Switch users"]]]])
+                                      )}
+        [text {:style st/switch-users-text}
+         "Switch users"]]]])))
 
 (defn drawer-view [{:keys [navigator]} items]
-  [drawer-layout-android {:drawerWidth            300
+  [drawer-layout-android {:drawerWidth            260
                           :drawerPosition         js/React.DrawerLayoutAndroid.positions.Left
                           :render-navigation-view #(r/as-element [drawer-menu navigator])
                           :ref  (fn [drawer]

src/syng_im/components/profile.cljs

@@ -41,10 +41,10 @@
   (let [contact (subscribe [:contact])]
     (fn []
       [scroll-view {:style st/profile}
-       [touchable-highlight {:style    st/profile-back-button-touchable
+       [touchable-highlight {:style    st/back-btn-touchable
                              :on-press #(dispatch [:navigate-back])}
-        [view st/profile-back-button-container
+        [view st/back-btn-container
-         [icon :back st/profile-back-button-icon]]]
+         [icon :back st/back-btn-icon]]]
        [view st/status-block
         [view st/user-photo-container
          [user-photo  {}]
@@ -74,3 +74,36 @@
          [touchable-opacity {}
           [text {:style st/report-user-text}
            "REPORT USER"]]]]])))
+
+(defn my-profile []
+  (let [username     (subscribe [:username])
+        phone-number (subscribe [:phone-number])
+        email        (subscribe [:email])
+        status       (subscribe [:status])]
+    (fn []
+      [scroll-view {:style st/profile}
+       [touchable-highlight {:style    st/back-btn-touchable
+                             :on-press #(dispatch [:navigate-back])}
+        [view st/back-btn-container
+         [icon :back st/back-btn-icon]]]
+       [touchable-highlight {:style    st/actions-btn-touchable
+                             :on-press (fn []
+                                         ;; TODO not implemented
+                                         )}
+        [view st/actions-btn-container
+         [icon :dots st/actions-btn-icon]]]
+       [view st/status-block
+        [view st/user-photo-container
+         [user-photo  {}]
+         [user-online {:online true}]]
+        [text {:style st/user-name}
+         @username]
+        [text {:style st/status}
+         @status]]
+       [view st/profile-properties-container
+        [profile-property-view {:name "Username"
+                                :value @username}]
+        [profile-property-view {:name "Phone number"
+                                :value @phone-number}]
+        [profile-property-view {:name "Email"
+                                :value @email}]]])))

src/syng_im/components/profile_styles.cljs

@@ -68,19 +68,33 @@
    :backgroundColor color-white
    :flexDirection   :column})
 
-(def profile-back-button-touchable
+(def back-btn-touchable
   {:position :absolute})
 
-(def profile-back-button-container
+(def back-btn-container
   {:width  56
    :height 56})
 
-(def profile-back-button-icon
+(def back-btn-icon
   {:marginTop  21
    :marginLeft 23
    :width      8
    :height     14})
 
+(def actions-btn-touchable
+  {:position :absolute
+   :right    0})
+
+(def actions-btn-container
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center})
+
+(def actions-btn-icon
+  {:width  4
+   :height 16})
+
 (def status-block
   {:alignSelf  :center
    :alignItems :center

src/syng_im/db.cljs

@@ -7,8 +7,7 @@
 (def default-view :chat-list)
 
 ;; initial state of app-db
-(def app-db {:greeting             "Hello Clojure in iOS and Android!"
+(def app-db {:identity-password    "replace-me-with-user-entered-password"
-             :identity-password    "replace-me-with-user-entered-password"
              :identity             "me"
              :contacts             []
              :current-chat-id      "console"
@@ -22,7 +21,11 @@
              :signed-up            false
              :view-id              default-view
              :navigation-stack     (list default-view)
-             :name                 "My Name"
+             ;; TODO fix hardcoded values
+             :username             "My Name"
+             :phone-number         "3147984309"
+             :email                "myemail@gmail.com"
+             :status               "Hi, this is my status"
              :current-tag          nil})
 
 (def protocol-initialized-path [:protocol-initialized])

src/syng_im/handlers.cljs

@@ -457,6 +457,12 @@
       (dispatch [:navigate-to :profile])
       db)))
 
+(register-handler :show-my-profile
+  (fn [db [action]]
+    (log/debug action)
+    (dispatch [:navigate-to :my-profile])
+    db))
+
 ;; -- Chats --------------------------------------------------------------
 
 (register-handler :show-chat

src/syng_im/subs.cljs

@@ -94,14 +94,28 @@
 
 ;; -- User data --------------------------------------------------------------
 
-;; (register-sub
+(register-sub :username
-;;   :get-user-phone-number
+  (fn [db _]
-;;   (fn [db _]
+    (reaction
-;;     (reaction
+     (get @db :username))))
-;;       (get @db :user-phone-number))))
+
+(register-sub :phone-number
+  (fn [db _]
+    (reaction
+     (get @db :phone-number))))
+
+(register-sub :email
+  (fn [db _]
+    (reaction
+     (get @db :email))))
+
+(register-sub :status
+  (fn [db _]
+    (reaction
+     (get @db :status))))
 
 (register-sub
-  :get-user-identity
+ :get-user-identity
   (fn [db _]
     (reaction
       (get @db :user-identity))))