Chat name validation

src/status_im/chats_list/views/inner_item.cljs

@@ -7,14 +7,14 @@
             [status-im.utils.datetime :as time]))
 
 (defn chat-list-item-inner-view
-  [{:keys [chat-id name color photo-path new-messages-count
+  [{:keys [chat-id name color new-messages-count
            online group-chat contacts] :as chat}]
   (let [last-message (first (:messages chat))]
     [view st/chat-container
      [view st/chat-icon-container
       [chat-icon-view-chat-list chat-id group-chat name color online]]
      [view st/item-container
-      #_[view st/name-view
+      [view st/name-view
        [text {:style st/name-text} (truncate-str name 20)]
        (when group-chat
          [icon :group st/group-icon])

src/status_im/constants.cljs

@@ -10,3 +10,5 @@
 (def content-type-command "command")
 (def content-type-command-request "command-request")
 (def content-type-status "status")
+
+(def max-chat-name-length 20)

src/status_im/group_settings/screen.cljs

@@ -145,7 +145,9 @@
 (defview chat-name []
   [name [:chat :name]
    new-name [:get :new-chat-name]
-   focused? [:get ::name-input-focused]]
+   validation-messages [:new-chat-name-validation-messages]
+   focused? [:get ::name-input-focused]
+   valid? [:new-chat-name-valid?]]
   [view
    [text {:style st/chat-name-text} "Chat name"]
    [view (st/chat-name-value-container focused?)
@@ -156,12 +158,14 @@
                  :on-blur        blur}
      name]
     (if (or focused? (not= name new-name))
-      [touchable-highlight {:style    st/chat-name-btn-edit-container
+      [touchable-highlight {:style    (st/chat-name-btn-edit-container valid?)
                             :on-press save}
        [view [icon :ok-purple st/add-members-icon]]]
-      [touchable-highlight {:style    st/chat-name-btn-edit-container
+      [touchable-highlight {:style    (st/chat-name-btn-edit-container true)
                             :on-press focus}
-       [text {:style st/chat-name-btn-edit-text} "Edit"]])]])
+       [text {:style st/chat-name-btn-edit-text} "Edit"]])]
+   (when (pos? (count validation-messages))
+     [text {:style st/chat-name-validation-message} (first validation-messages)])])
 
 (defview group-settings []
   [show-color-picker [:group-settings :show-color-picker]]

src/status_im/group_settings/styles/group_settings.cljs

@@ -91,9 +91,15 @@
    :fontFamily font
    :color      text1-color})
 
-(def chat-name-btn-edit-container
+(def chat-name-validation-message
+  {:marginTop  8
+   :marginLeft 16
+   :color      :red})
+
+(defn chat-name-btn-edit-container [enabled?]
   {:padding        16
-   :justifyContent :center})
+   :justifyContent :center
+   :opacity        (if enabled? 1 0.3)})
 
 (def chat-name-btn-edit-text
   {:marginTop  -1

src/status_im/group_settings/subs.cljs

@@ -1,6 +1,7 @@
 (ns status-im.group-settings.subs
   (:require-macros [reagent.ratom :refer [reaction]])
-  (:require [re-frame.core :refer [register-sub]]))
+  (:require [re-frame.core :refer [register-sub]]
+            [status-im.constants :refer [max-chat-name-length]]))
 
 (register-sub :selected-participant
   (fn [db _]
@@ -11,3 +12,20 @@
 (register-sub :group-settings
   (fn [db [_ k]]
     (reaction (get-in @db [:group-settings k]))))
+
+(defn get-chat-name-validation-messages [chat-name]
+  (filter some?
+          (list (when (zero? (count chat-name))
+                  "Chat name can't be empty")
+                (when (< max-chat-name-length (count chat-name))
+                  "Chat name is too long"))))
+
+(register-sub :new-chat-name-validation-messages
+  (fn [db [_]]
+    (let [chat-name (reaction (:new-chat-name @db))]
+      (reaction (get-chat-name-validation-messages @chat-name)))))
+
+(register-sub :new-chat-name-valid?
+  (fn [db [_]]
+    (let [chat-name (reaction (:new-chat-name @db))]
+      (reaction (zero? (count (get-chat-name-validation-messages @chat-name)))))))

src/status_im/navigation/handlers.cljs

@@ -48,7 +48,8 @@
     (fn [db _]
       (-> db
           (push-view :new-group)
-          (assoc :new-group #{})))))
+          (assoc :new-group #{})
+          (assoc :new-chat-name nil)))))
 
 (register-handler :show-contacts
   (fn [db _]

src/status_im/new_group/screen.cljs

@@ -3,13 +3,13 @@
   (:require [re-frame.core :refer [subscribe dispatch]]
             [status-im.resources :as res]
             [status-im.components.react :refer [view
-                                              text-input
-                                              text
-                                              image
-                                              icon
-                                              touchable-highlight
-                                              list-view
-                                              list-item]]
+                                                text-input
+                                                text
+                                                image
+                                                icon
+                                                touchable-highlight
+                                                list-view
+                                                list-item]]
             [status-im.components.styles :refer [color-purple]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.utils.listview :refer [to-datasource]]
@@ -18,24 +18,30 @@
 
 
 (defview new-group-toolbar []
-  [group-name [:get ::group-name]
-   creation-disabled? [:get :disable-group-creation]]
-  [toolbar
-   {:title  "New group chat"
-    :action {:image   {:source res/v                        ;; {:uri "icon_search"}
-                       :style  st/toolbar-icon}
-             :handler (when-not creation-disabled?
-                        #(dispatch [:init-group-creation group-name]))}}])
+  [group-name [:get :new-chat-name]
+   creation-disabled? [:get :disable-group-creation]
+   valid? [:new-chat-name-valid?]]
+  (let [create-btn-enabled? (and valid? (not creation-disabled?))]
+    [toolbar
+     {:title  "New group chat"
+      :action {:image   {:source res/v                        ;; {:uri "icon_search"}
+                         :style  (st/toolbar-icon create-btn-enabled?)}
+               :handler (when create-btn-enabled?
+                          #(dispatch [:init-group-creation group-name]))}}]))
 
 (defview group-name-input []
-  [group-name [:get ::group-name]]
-  [text-input
-   {:underlineColorAndroid color-purple
-    :style                 st/group-name-input
-    :autoFocus             true
-    :placeholder           "Group Name"
-    :onChangeText          #(dispatch [:set ::group-name %])}
-   group-name])
+  [group-name [:get :new-chat-name]
+   validation-messages [:new-chat-name-validation-messages]]
+  [view nil
+   [text-input
+    {:underlineColorAndroid color-purple
+     :style                 st/group-name-input
+     :autoFocus             true
+     :placeholder           "Group Name"
+     :onChangeText          #(dispatch [:set :new-chat-name %])}
+    group-name]
+   (when (pos? (count validation-messages))
+     [text {:style st/group-name-validation-message} (first validation-messages)])])
 
 (defview new-group []
   [contacts [:all-contacts]]

src/status_im/new_group/styles.cljs

@@ -7,9 +7,10 @@
                                                text2-color
                                                toolbar-background1]]))
 
-(def toolbar-icon
-  {:width  20
-   :height 18})
+(defn toolbar-icon [enabled?]
+  {:width   20
+   :height  18
+   :opacity (if enabled? 1 0.3)})
 
 (def new-group-container
   {:flex            1
@@ -33,6 +34,9 @@
    :fontFamily font
    :color      text1-color})
 
+(def group-name-validation-message
+  {:color :red})
+
 (def members-text
   {:marginTop    24
    :marginBottom 16