Limit number of participants in group chat to 10

src/status_im/ui/components/checkbox/view.cljs

@@ -3,13 +3,16 @@
             [status-im.ui.components.react :as react]
             [status-im.utils.platform :as platform]))
 
-(defn- checkbox-generic [{:keys [on-value-change checked? accessibility-label style] :or {accessibility-label :checkbox}} plain?]
+(defn- checkbox-generic [{:keys [on-value-change checked? accessibility-label disabled? style] :or {accessibility-label :checkbox}} plain?]
   (let [icon-check-container (if plain? #() styles/icon-check-container)
         check-icon           (if plain? styles/plain-check-icon styles/check-icon)]
-    (if platform/android?
+    (if (or platform/android?
+            platform/desktop?)
       [react/view (merge styles/wrapper style)
        [react/check-box {:on-value-change     on-value-change
                          :value               checked?
+                         :disabled            (and (not checked?)
+                                                   disabled?)
                          :accessibility-label accessibility-label}]]
       [react/touchable-highlight (merge {:style               (merge styles/wrapper style)
                                          :accessibility-label accessibility-label}

src/status_im/ui/components/contact/contact.cljs

@@ -58,11 +58,12 @@
           [react/view styles/more-btn
            [vector-icons/icon :icons/options {:accessibility-label :options}]]]]))]])
 
-(views/defview toggle-contact-view [{:keys [public-key] :as contact} selected-key on-toggle-handler]
+(views/defview toggle-contact-view [{:keys [public-key] :as contact} selected-key on-toggle-handler disabled?]
   (views/letsubs [checked [selected-key public-key]]
     [react/view {:accessibility-label :contact-item}
      [list/list-item-with-checkbox
       {:checked?        checked
+       :disabled?       disabled?
        :on-value-change #(on-toggle-handler checked public-key)
        :plain-checkbox? true}
       [react/view styles/contact-container

src/status_im/ui/screens/group/add_contacts/views.cljs

@@ -12,19 +12,44 @@
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.group.styles :as styles]))
 
-(defn- on-toggle [checked? public-key]
+(defn- on-toggle [allow-new-users? checked? public-key]
-  (let [action (if checked? :deselect-contact :select-contact)]
+  (cond
-    (re-frame/dispatch [action public-key])))
 
-(defn- on-toggle-participant [checked? public-key]
+    checked?
-  (let [action (if checked? :deselect-participant :select-participant)]
+    (re-frame/dispatch [:deselect-contact public-key allow-new-users?])
-    (re-frame/dispatch [action public-key])))
 
-(defn- group-toggle-contact [contact]
+   ;; Only allow new users if not reached the maximum
-  [toggle-contact-view contact :is-contact-selected? on-toggle])
+    (and (not checked?)
+         allow-new-users?)
+    (re-frame/dispatch [:select-contact public-key allow-new-users?])))
 
-(defn- group-toggle-participant [contact]
+(defn- on-toggle-participant [allow-new-users? checked? public-key]
-  [toggle-contact-view contact :is-participant-selected? on-toggle-participant])
+  (cond
+
+    checked?
+    (re-frame/dispatch [:deselect-participant public-key allow-new-users?])
+
+   ;; Only allow new users if not reached the maximum
+    (and (not checked?)
+         allow-new-users?)
+    (re-frame/dispatch [:select-participant public-key allow-new-users?])))
+
+(defn- group-toggle-contact [allow-new-users? contact]
+  [toggle-contact-view
+   contact
+   :is-contact-selected?
+   (partial on-toggle allow-new-users?)
+   (and (not (:is-contact-selected? contact))
+        (not allow-new-users?))])
+
+(defn- group-toggle-participant [allow-new-users? contact]
+  [toggle-contact-view
+   contact
+   :is-participant-selected?
+   (partial on-toggle-participant allow-new-users?)
+   ;; Disable if not-checked and we don't allow new users
+   (and (not (:is-participant-selected? contact))
+        (not allow-new-users?))])
 
 (defn- handle-invite-friends-pressed []
   (if utils.platform/desktop?
@@ -61,6 +86,15 @@
     (i18n/label :t/group-chat-no-contacts)]
    [buttons/secondary-button {:on-press handle-invite-friends-pressed} (i18n/label :t/invite-friends)]])
 
+(def max-participants 10)
+
+(defn number-of-participants-disclaimer [number-of-participants-available]
+  [react/view {:style styles/number-of-participants-disclaimer}
+   [react/text (if (> number-of-participants-available
+                      0)
+                 (i18n/label-pluralize number-of-participants-available :t/available-participants)
+                 (i18n/label :t/no-more-participants-available))]])
+
 ;; Start group chat
 (defview contact-toggle-list []
   (letsubs [contacts                [:contacts/all-added-people-contacts]
@@ -71,15 +105,17 @@
                            :label   (i18n/label :t/next)
                            :count   (pos? selected-contacts-count)}
       (i18n/label :t/group-chat)]
+     [number-of-participants-disclaimer (- (dec max-participants) selected-contacts-count)]
      (if (seq contacts)
-       [toggle-list contacts group-toggle-contact]
+       [toggle-list contacts (partial group-toggle-contact (< selected-contacts-count (dec max-participants)))]
        [no-contacts])]))
 
 ;; Add participants to existing group chat
 (defview add-participants-toggle-list []
   (letsubs [contacts                        [:contacts/all-contacts-not-in-current-chat]
-            {:keys [name]} [:chats/current-chat]
+            {:keys [name] :as current-chat} [:chats/current-chat]
             selected-contacts-count         [:selected-participants-count]]
+    (let [current-participants-count (count (:contacts current-chat))]
       [react/keyboard-avoiding-view {:style styles/group-container}
        [status-bar]
        [toggle-list-toolbar {:count   selected-contacts-count
@@ -88,5 +124,8 @@
                                          (re-frame/dispatch [:navigate-back]))
                              :label   (i18n/label :t/add)}
         name]
+
+       [number-of-participants-disclaimer (- max-participants current-participants-count)]
        (when (seq contacts)
-       [toggle-list contacts group-toggle-participant])]))
+         [toggle-list contacts (partial group-toggle-participant (< (+ current-participants-count
+                                                                       selected-contacts-count) max-participants))])])))

src/status_im/ui/screens/group/styles.cljs

@@ -23,3 +23,10 @@
    :margin-horizontal 50
    :text-align        :center
    :color             colors/gray})
+
+(def number-of-participants-disclaimer
+  {:margin-top        20
+   :margin-bottom     5
+   :font-size         12
+   :margin-horizontal 17})
+

translations/en.json

@@ -33,6 +33,11 @@
     "name-placeholder": "Display name",
     "find": "Find",
     "close-app-title": "Warning!",
+    "available-participants": {
+      "one": "You can select one more participant",
+      "other": "You can select {{count}} more participants"
+    },
+    "no-more-participants-available": "You can't add anymore participants",
     "group-chat-created": "*{{member}}* created the group *{{name}}*",
     "group-chat-admin": "Admin",
     "group-chat-name-changed": "*{{member}}* changed the group's name to *{{name}}*",