chat name/load messages on [:navigate-to :chat id]/ other

Former-commit-id: ae1918a2ae

src/syng_im/android/core.cljs

@@ -12,10 +12,9 @@
             [syng-im.chat.screen :refer [chat]]
             [syng-im.chats-list.screen :refer [chats-list]]
             [syng-im.new-group.screen :refer [new-group]]
-            [syng-im.participants.views.create :refer [new-participants]]
+            [syng-im.participants.views.add :refer [new-participants]]
             [syng-im.participants.views.remove :refer [remove-participants]]
             [syng-im.group-settings.screen :refer [group-settings]]
-            [syng-im.group-settings.views.chat-name-edit :refer [chat-name-edit]]
             [syng-im.profile.screen :refer [profile my-profile]]
             [syng-im.utils.utils :refer [toast]]
             [syng-im.utils.encryption]))
@@ -43,7 +42,6 @@
         :chat-list [chats-list]
         :new-group [new-group]
         :group-settings [group-settings]
-        :chat-name-edit [chat-name-edit]
         :contact-list [contact-list]
         :chat [chat]
         :profile [profile]

src/syng_im/chat/handlers.cljs

@@ -187,7 +187,8 @@
       ((enrich add-commands))
       ((enrich clear-input))
       ((enrich clear-staged-commands))
-      ((after send-message!))
+      ;; todo uncomment once
+      ;((after send-message!))
       ((after save-message-to-realm!))
       ((after save-commands-to-realm!))
       ((after handle-commands))))
@@ -283,10 +284,13 @@
 
 (defmethod nav/preload-data! :chat
   [{:keys [current-chat-id] :as db} [_ _ id]]
-  (-> db
-      (assoc :current-chat-id (or id current-chat-id))
-      load-messages!
-      init-chat))
+  (let [messages (get-in db [:chats current-chat-id :messages])]
+    (if (seq messages)
+      (-> db
+          (assoc :current-chat-id (or id current-chat-id))
+          load-messages!
+          init-chat)
+      db)))
 
 (defn prepare-chat
   [{:keys [contacts] :as db} [_ contcat-id]]

src/syng_im/chats_list/views/chat_list_item.cljs

@@ -10,7 +10,7 @@
 
 (defn chat-list-item [{:keys [chat-id] :as chat}]
   [touchable-highlight
-   {:on-press #(dispatch [:show-chat chat-id :push])}
+   {:on-press #(dispatch [:navigate-to :chat chat-id])}
    ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
    [view [chat-list-item-inner-view (merge chat
                                            {:photo-path         nil

src/syng_im/components/react.cljs

@@ -35,9 +35,11 @@
 (def picker-item (r/adapt-react-class (.-Item (.-Picker js/React))))
 
 
-(defn icon [n style]
-  [image {:source {:uri (keyword (str "icon_" (name n)))}
-          :style  style}])
+(defn icon
+  ([n] (icon n {}))
+  ([n style]
+   [image {:source {:uri (keyword (str "icon_" (name n)))}
+           :style  style}]))
 
 (def platform (.. js/React -Platform -OS))
 

src/syng_im/group_settings/handlers.cljs

@@ -1,72 +1,59 @@
 (ns syng-im.group-settings.handlers
-  (:require [re-frame.core :refer [register-handler debug dispatch]]
+  (:require [re-frame.core :refer [register-handler debug dispatch after]]
             [syng-im.persistence.realm :as r]
-            [syng-im.models.messages :refer [clear-history]]))
+            [syng-im.models.messages :refer [clear-history]]
+            [clojure.string :as s]))
 
-(defn set-chat-name [db]
-  (let [chat-id (:current-chat-id db)
-        name    (:new-chat-name db)]
-    (r/write (fn []
-               (-> (r/get-by-field :chats :chat-id chat-id)
-                   (r/single)
-                   (aset "name" name))))
-    (assoc-in db [:chats chat-id :name] name)))
+(defn save-chat-property!
+  [db-name property-name]
+  (fn [{:keys [current-chat-id] :as db} _]
+    (let [property (db-name db)]
+      (r/write (fn []
+                 (-> (r/get-by-field :chats :chat-id current-chat-id)
+                     (r/single)
+                     (aset (name property-name) property)))))))
 
-(defn set-chat-color [db]
-  (let [chat-id (:current-chat-id db)
-        color   (:new-chat-color db)]
-    (r/write (fn []
-               (-> (r/get-by-field :chats :chat-id chat-id)
-                   (r/single)
-                   (aset "color" color))))
-    (assoc-in db [:chats chat-id :color] color)))
+(defn update-chat-property
+  [db-name property-name]
+  (fn [{:keys [current-chat-id] :as db} _]
+    (let [property (db-name db)]
+      (assoc-in db [:chats current-chat-id property-name] property))))
 
 (defn delete-chat [chat-id]
   (r/write
-   (fn []
-     (-> (r/get-by-field :chats :chat-id chat-id)
-         (r/single)
-         (r/delete))))
+    (fn []
+      (-> (r/get-by-field :chats :chat-id chat-id)
+          (r/single)
+          (r/delete))))
   ;; TODO temp. Update chat in db atom
   (dispatch [:initialize-chats]))
 
+(defn prepare-chat-settings
+  [{:keys [current-chat-id] :as db} _]
+  (let [{:keys [name color]} (-> db
+                                 (get-in [:chats current-chat-id])
+                                 (select-keys [:name :color]))]
+    (-> db
+        (assoc :new-chat-name name
+               :new-chat-color color
+               :group-settings {}))))
+
 (register-handler :show-group-settings
-  (fn [db _]
-    (let [chat-id    (:current-chat-id db)
-          chat-name  (get-in db [:chats chat-id :name])
-          chat-color (get-in db [:chats chat-id :color])
-          db         (assoc db
-                            :new-chat-name                    chat-name
-                            :new-chat-color                   chat-color
-                            :group-settings-show-color-picker false
-                            :group-settings-selected-member   nil)]
-      (dispatch [:navigate-to :group-settings])
-      db)))
+  (after (fn [_ _] (dispatch [:navigate-to :group-settings])))
+  prepare-chat-settings)
 
 (register-handler :set-chat-name
-  (fn [db [action]]
-    (set-chat-name db)))
+  (after (save-chat-property! :new-chat-name :name))
+  (update-chat-property :new-chat-name :name))
 
 (register-handler :set-chat-color
-  (fn [db [action]]
-    (set-chat-color db)))
-
-(register-handler :set-new-chat-name
-  (fn [db [action name]]
-    (assoc db :new-chat-name name)))
-
-(register-handler :set-new-chat-color
-  (fn [db [action color]]
-    (assoc db :new-chat-color color)))
-
-(register-handler :select-group-chat-member
-  (fn [db [action identity]]
-    (assoc db :group-settings-selected-member identity)))
-
-(register-handler :set-group-settings-show-color-picker
-  (fn [db [action show?]]
-    (assoc db :group-settings-show-color-picker show?)))
+  (after (save-chat-property! :new-chat-color :color))
+  (update-chat-property :new-chat-color :color))
 
 (register-handler :clear-history
-  (fn [db [action]]
+  (fn [db _]
     (clear-history (:current-chat-id db))))
+
+(register-handler :group-settings
+  (fn [db [_ k v]]
+    (assoc-in db [:group-settings k] v)))

src/syng_im/group_settings/screen.cljs

@@ -13,13 +13,14 @@
                                               touchable-highlight]]
             [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.group-settings.styles.group-settings :as st]
-            [syng-im.group-settings.views.member :refer [member-view]]))
+            [syng-im.group-settings.views.member :refer [member-view]]
+            [clojure.string :as s]))
 
 (defn remove-member [{:keys [whisper-identity]}]
   (dispatch [:chat-remove-member whisper-identity]))
 
 (defn close-member-menu []
-  (dispatch [:select-group-chat-member nil]))
+  (dispatch [:set :group-settings-selected-member nil]))
 
 (defview member-menu []
   [member [:group-settings-selected-member]]
@@ -58,15 +59,15 @@
         subtitle])]]])
 
 (defn close-chat-color-picker []
-  (dispatch [:set-group-settings-show-color-picker false]))
+  (dispatch [:group-settings :show-color-picker false]))
 
 (defn set-chat-color []
   (close-chat-color-picker)
   (dispatch [:set-chat-color]))
 
 (defview chat-color-picker []
-  [show-color-picker [:get :group-settings-show-color-picker]
-   new-color         [:get :new-chat-color]]
+  [show-color-picker [:group-settings :show-color-picker]
+   new-color [:get :new-chat-color]]
   [modal {:animated       false
           :transparent    false
           :onRequestClose close-chat-color-picker}
@@ -74,11 +75,11 @@
                          :on-press close-chat-color-picker}
     [view st/modal-color-picker-inner-container
      [picker {:selectedValue new-color
-              :onValueChange #(dispatch [:set-new-chat-color %])}
-      [picker-item {:label "Blue"       :value "#7099e6"}]
-      [picker-item {:label "Purple"     :value "#a187d5"}]
-      [picker-item {:label "Green"      :value "green"}]
-      [picker-item {:label "Red"        :value "red"}]]
+              :onValueChange #(dispatch [:set :new-chat-color %])}
+      [picker-item {:label "Blue" :value "#7099e6"}]
+      [picker-item {:label "Purple" :value "#a187d5"}]
+      [picker-item {:label "Green" :value "green"}]
+      [picker-item {:label "Red" :value "red"}]]
      [touchable-highlight {:on-press set-chat-color}
       [text {:style st/modal-color-picker-save-btn-text}
        "Save"]]]]])
@@ -88,7 +89,7 @@
   [view {:style (st/chat-color-icon chat-color)}])
 
 (defn show-chat-color-picker []
-  (dispatch [:set-group-settings-show-color-picker true]))
+  (dispatch [:group-settings :show-color-picker true]))
 
 (defn settings-view []
   ;; TODO implement settings handlers
@@ -105,22 +106,22 @@
                            {:icon       :muted
                             :icon-style {:width  18
                                          :height 21}}))
-                  {:icon        :close-gray
-                   :icon-style  {:width  12
-                                 :height 12}
-                   :title       "Clear history"
-                   :handler     #(dispatch [:clear-history])}
-                  {:icon        :bin
-                   :icon-style  {:width  12
-                                 :height 18}
-                   :title       "Delete and leave"
-                   :handler     #(dispatch [:leave-group-chat])}]]
+                  {:icon       :close-gray
+                   :icon-style {:width  12
+                                :height 12}
+                   :title      "Clear history"
+                   :handler    #(dispatch [:clear-history])}
+                  {:icon       :bin
+                   :icon-style {:width  12
+                                :height 18}
+                   :title      "Delete and leave"
+                   :handler    #(dispatch [:leave-group-chat])}]]
     [view st/settings-container
      (for [setting settings]
        ^{:key setting} [setting-view setting])]))
 
 (defview chat-icon []
-  [name  [:chat :name]
+  [name [:chat :name]
    color [:chat :color]]
   [view (st/chat-icon color)
    [text {:style st/chat-icon-text} (first name)]])
@@ -129,24 +130,44 @@
   [toolbar {:title         "Chat settings"
             :custom-action [chat-icon]}])
 
+(defn focus []
+  (dispatch [:set ::name-input-focused true]))
+
+(defn blur []
+  (dispatch [:set ::name-input-focused false]))
+
+(defn save []
+  (dispatch [:set-chat-name]))
+
+(defview chat-name []
+  [name [:chat :name]
+   new-name [:get :new-chat-name]
+   focused? [:get ::name-input-focused]]
+  [view
+   [text {:style st/chat-name-text} "Chat name"]
+   [view (st/chat-name-value-container focused?)
+    [text-input {:style          st/chat-name-value
+                 :ref            #(when (and % focused?) (.focus %))
+                 :on-change-text #(dispatch [:set :new-chat-name %])
+                 :on-focus       focus
+                 :on-blur        blur}
+     name]
+    (if (or focused? (not= name new-name))
+      [touchable-highlight {:style    st/chat-name-btn-edit-container
+                            :on-press save}
+       [view [icon :ok-purple st/add-members-icon]]]
+      [touchable-highlight {:style    st/chat-name-btn-edit-container
+                            :on-press focus}
+       [text {:style st/chat-name-btn-edit-text} "Edit"]])]])
+
 (defview group-settings []
-  [chat-name         [:chat :name]
-   selected-member   [:group-settings-selected-member]
-   show-color-picker [:get :group-settings-show-color-picker]]
+  [selected-member [:group-settings-selected-member]
+   show-color-picker [:group-settings :show-color-picker]]
   [view st/group-settings
    [new-group-toolbar]
    [scroll-view st/body
-    [text {:style st/chat-name-text}
-     "Chat name"]
-    [view st/chat-name-value-container
-     [text {:style st/chat-name-value}
-      chat-name]
-     [touchable-highlight {:style st/chat-name-btn-edit-container
-                           :on-press show-chat-name-edit}
-      [text {:style st/chat-name-btn-edit-text}
-       "Edit"]]]
-    [text {:style st/members-text}
-     "Members"]
+    [chat-name]
+    [text {:style st/members-text} "Members"]
     [touchable-highlight {:on-press #(dispatch [:show-add-participants])}
      [view st/add-members-container
       [icon :add-gray st/add-members-icon]

src/syng_im/group_settings/styles/chat_name_edit.cljs

@@ -1,19 +0,0 @@
-(ns syng-im.group-settings.styles.chat-name-edit
-  (:require [syng-im.components.styles :refer [font
-                                               color-white
-                                               text1-color]]))
-
-(def save-action-icon
-  {:width  18
-   :height 14})
-
-(def chat-name-container
-  {:flex            1
-   :flexDirection   :column
-   :backgroundColor color-white})
-
-(def chat-name-input
-  {:marginLeft 12
-   :fontSize   14
-   :fontFamily font
-   :color      text1-color})

src/syng_im/group_settings/styles/group_settings.cljs

@@ -24,17 +24,17 @@
    :backgroundColor color-white})
 
 (def modal-member-name
-  {:color        text2-color
-   :fontFamily   font
-   :fontSize     14
-   :lineHeight   20})
+  {:color      text2-color
+   :fontFamily font
+   :fontSize   14
+   :lineHeight 20})
 
 (def modal-remove-text
-  {:margin       10
-   :color        text1-color
-   :fontFamily   font
-   :fontSize     14
-   :lineHeight   20})
+  {:margin     10
+   :color      text1-color
+   :fontFamily font
+   :fontSize   14
+   :lineHeight 20})
 
 (def modal-color-picker-inner-container
   {:borderRadius    10
@@ -42,12 +42,12 @@
    :backgroundColor color-white})
 
 (def modal-color-picker-save-btn-text
-  {:margin       10
-   :alignSelf    :center
-   :color        text1-color
-   :fontFamily   font
-   :fontSize     14
-   :lineHeight   20})
+  {:margin     10
+   :alignSelf  :center
+   :color      text1-color
+   :fontFamily font
+   :fontSize   14
+   :lineHeight 20})
 
 (def chat-members-container
   {:marginBottom 10})
@@ -85,14 +85,14 @@
    :fontSize     14
    :lineHeight   20})
 
-(def chat-name-value-container
+(defn chat-name-value-container [focused?]
   {:flexDirection     :row
    :marginLeft        16
    :height            56
    :alignItems        :center
    :justifyContent    :center
-   :borderBottomWidth 1
-   :borderBottomColor separator-color})
+   :borderBottomWidth 2
+   :borderBottomColor (if focused? color-purple separator-color)})
 
 (def chat-name-value
   {:flex       1
@@ -105,11 +105,11 @@
    :justifyContent :center})
 
 (def chat-name-btn-edit-text
-  {:marginTop    -1
-   :color        text2-color
-   :fontFamily   font
-   :fontSize     16
-   :lineHeight   20})
+  {:marginTop  -1
+   :color      text2-color
+   :fontFamily font
+   :fontSize   16
+   :lineHeight 20})
 
 (def members-text
   {:marginTop    24

src/syng_im/group_settings/subs.cljs

@@ -1,14 +1,13 @@
 (ns syng-im.group-settings.subs
   (:require-macros [reagent.ratom :refer [reaction]])
-  (:require [re-frame.core :refer [register-sub]]
-            [syng-im.models.contacts :refer [contact-by-identity]]))
+  (:require [re-frame.core :refer [register-sub]]))
 
 (register-sub :group-settings-selected-member
   (fn [db [_]]
     (reaction
      (let [identity (get @db :group-settings-selected-member)]
-       (contact-by-identity identity)))))
+       (get-in @db [:contacts identity])))))
 
-(register-sub :group-settings-show-color-picker
-  (fn [db [_]]
-    (reaction (get @db :group-settings-show-color-picker))))
+(register-sub :group-settings
+  (fn [db [_ k]]
+    (reaction (get-in @db [:group-settings k]))))

src/syng_im/group_settings/views/chat_name_edit.cljs

@@ -1,31 +0,0 @@
-(ns syng-im.group-settings.views.chat-name-edit
-  (:require-macros [syng-im.utils.views :refer [defview]])
-  (:require [reagent.core :as r]
-            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [syng-im.components.react :refer [view text-input]]
-            [syng-im.components.toolbar :refer [toolbar]]
-            [syng-im.group-settings.styles.chat-name-edit :as st]
-            [syng-im.components.styles :refer [toolbar-background2
-                                               text2-color]]))
-
-(defn save-group-chat-name []
-  (dispatch [:set-chat-name])
-  (dispatch [:navigate-back]))
-
-(defn chat-name-edit-toolbar [chat-name]
-  [toolbar {:background-color toolbar-background2
-            :title           "Edit chat name"
-            ;; TODO change to dark 'ok' icon
-            :action          {:image   {:source {:uri :icon_ok}
-                                        :style  st/save-action-icon}
-                              :handler save-group-chat-name}}])
-
-(defview chat-name-edit []
-  [new-chat-name [:get :new-chat-name]]
-  [view st/chat-name-container
-   [chat-name-edit-toolbar]
-   [text-input {:style                st/chat-name-input
-                :autoFocus            true
-                :placeholderTextColor text2-color
-                :onChangeText         #(dispatch [:set-new-chat-name %])}
-    new-chat-name]])

src/syng_im/group_settings/views/member.cljs

@@ -38,6 +38,6 @@
       [text {:style st/role-text}
        role])]
    [touchable-highlight
-    {:on-press #(dispatch [:select-group-chat-member whisper-identity])}
+    {:on-press #(dispatch [:set :group-settings-selected-member whisper-identity])}
     [view st/more-btn
      [icon :more-vertical st/more-btn-icon]]]])

src/syng_im/handlers.cljs

@@ -63,6 +63,11 @@
     (fn [db [_ k v]]
       (assoc db k v))))
 
+(register-handler :set-in
+  (debug
+    (fn [db [_ path v]]
+      (assoc-in db path v))))
+
 (register-handler :initialize-db
   (fn [_ _]
     (assoc app-db
@@ -279,12 +284,13 @@
     (dispatch [:initialize-chats])
     db))
 
+
 (register-handler :chat-remove-member
   (fn [db [action]]
     (let [chat-id  (:current-chat-id db)
           identity (:group-settings-selected-member db)
           db       (chat-remove-member db)]
-      (dispatch [:select-group-chat-member nil])
+      (dispatch [:set :group-settings-selected-member nil])
       ;; TODO fix and uncomment
       (api/group-remove-participant chat-id identity)
       (removed-participant-msg chat-id identity)

src/syng_im/navigation/handlers.cljs

@@ -27,6 +27,7 @@
     (push-view db view-id)))
 
 (register-handler :navigation-replace
+  (enrich preload-data!)
   (fn [db [_ view-id]]
     (replace-view db view-id)))
 
@@ -46,13 +47,6 @@
           (push-view :new-group)
           (assoc :new-group #{})))))
 
-(register-handler :show-chat
-  (fn [db [_ chat-id nav-type]]
-    (let [update-view-id-fn (if (= :replace nav-type) replace-view push-view)]
-      (-> db
-          (update-view-id-fn :chat)
-          (assoc :current-chat-id chat-id)))))
-
 (register-handler :show-contacts
   (fn [db _]
     (push-view db :contact-list)))

src/syng_im/new_group/handlers.cljs

@@ -56,7 +56,7 @@
 
 (defn show-chat!
   [{:keys [new-group-id]} _]
-  (dispatch [:show-chat new-group-id :replace]))
+  (dispatch [:navigation-replace :chat new-group-id]))
 
 (defn enable-creat-buttion
   [db _]

src/syng_im/new_group/subs.cljs

@@ -1,9 +1,7 @@
 (ns syng-im.new-group.subs
   (:require-macros [reagent.ratom :refer [reaction]])
-  (:require [re-frame.core :refer [register-sub]]))
+  (:require [re-frame.core :refer [register-sub]]
+            [syng-im.utils.subs :as u]))
 
 (register-sub :is-contact-selected?
-  (fn [db [_ id]]
-    (-> (:selected-contacts @db)
-        (contains? id)
-        (reaction))))
+  (u/contains-sub :selected-contacts))

src/syng_im/participants/subs.cljs

@@ -0,0 +1,3 @@
+(ns syng-im.participants.subs)
+
+()

src/syng_im/participants/views/add.cljs

@@ -1,4 +1,5 @@
-(ns syng-im.participants.views.create
+(ns syng-im.participants.views.add
+  (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch]]
             [syng-im.resources :as res]
             [syng-im.components.react :refer [view list-view list-item]]
@@ -19,12 +20,10 @@
   [row _ _]
   (list-item [participant-contact row]))
 
-(defn new-participants []
-  (let [contacts (subscribe [:all-new-contacts])]
-    (fn []
-      (let [contacts-ds (to-datasource @contacts)]
-        [view st/participants-container
-         [new-participants-toolbar]
-         [list-view {:dataSource contacts-ds
-                     :renderRow  new-participants-row
-                     :style      st/participants-list}]]))))
+(defview new-participants []
+  [contacts [:all-new-contacts]]
+  [view st/participants-container
+   [new-participants-toolbar]
+   [list-view {:dataSource (to-datasource contacts)
+               :renderRow  new-participants-row
+               :style      st/participants-list}]])

src/syng_im/participants/views/remove.cljs

@@ -1,4 +1,5 @@
 (ns syng-im.participants.views.remove
+  (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch]]
             [syng-im.resources :as res]
             [syng-im.components.react :refer [view text-input text image
@@ -22,12 +23,10 @@
   [row _ _]
   (r/as-element [participant-contact row]))
 
-(defn remove-participants []
-  (let [contacts (subscribe [:current-chat-contacts])]
-    (fn []
-      (let [contacts-ds (to-datasource @contacts)]
-        [view st/participants-container
-         [remove-participants-toolbar]
-         [list-view {:dataSource contacts-ds
-                     :renderRow  remove-participants-row
-                     :style      st/participants-list}]]))))
+(defview remove-participants []
+  [contacts [:current-chat-contacts]]
+  [view st/participants-container
+   [remove-participants-toolbar]
+   [list-view {:dataSource (to-datasource contacts)
+               :renderRow  remove-participants-row
+               :style      st/participants-list}]])

src/syng_im/profile/screen.cljs

@@ -32,7 +32,7 @@
 
 (defn message-user [identity]
   (when identity
-    (dispatch [:show-chat identity :push])))
+    (dispatch [:navigate-to :chat identity])))
 
 (defview profile []
   [{:keys [name whisper-identity phone-number]} [:contact]]

src/syng_im/subs.cljs

@@ -10,3 +10,7 @@
 (register-sub :get
   (fn [db [_ k]]
     (reaction (k @db))))
+
+(register-sub :get-in
+  (fn [db [_ path]]
+    (reaction (get-in @db path))))

src/syng_im/utils/subs.cljs

@@ -0,0 +1,10 @@
+(ns syng-im.utils.subs
+  (:require-macros [reagent.ratom :refer [reaction]]))
+
+(defn contains-sub
+  "Creates subscrition that cheks if collection (map or set) contains element"
+  [collection]
+  (fn [db [_ element]]
+    (-> (collection @db)
+        (contains? element)
+        (reaction))))