Update the UI for the group chat

Add search for contacts

Add format name inside contact

Add back button on create group

Fix current contact name and alias

fixup

Update UI for group chat profile

Fix tests

Ui clean up

fix change group chat name

Add leave group chat option

Hide options if user has left the chat

Use modal for all required chat screens

Add dark mode to group chats

Fix offset 10 pt off screen on presentation modals

Wrap keyboard avoiding view with safe area offset

Keep only leave chat

Fix search input focus

Make edit name active when title not changed

Fix lint

review cleanup

QA review

Fix group chat inviter name

Fit flat list into container

src/status_im/contact/core.cljs

@@ -156,7 +156,7 @@
             {:db (assoc db
                         :group/selected-contacts #{}
                         :new-chat-name "")}
-            (navigation/navigate-to-cofx :contact-toggle-list nil)))
+            (navigation/navigate-to-cofx :create-group-chat nil)))
 
 (fx/defn set-tribute
   [{:keys [db] :as cofx} public-key tribute-to-talk]

src/status_im/contact/db.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contact.db
   (:require [cljs.spec.alpha :as spec]
+            [clojure.set :as cset]
             [status-im.ethereum.core :as ethereum]
             [status-im.tribute-to-talk.db :as tribute-to-talk.db]
             [status-im.utils.gfycat.core :as gfycat]
@@ -105,10 +106,12 @@
     (query-fn (comp participant-set :public-key) (vals all-contacts))))
 
 (defn get-all-contacts-in-group-chat
-  [members admins contacts current-account]
-  (let [{:keys [public-key] :as current-account-contact}
-        (select-keys current-account [:name :photo-path :public-key])
-        all-contacts (assoc contacts public-key current-account-contact)]
+  [members admins contacts {:keys [public-key] :as current-account}]
+  (let [current-contact (-> current-account
+                            (select-keys  [:name :preferred-name :public-key :photo-path])
+                            (cset/rename-keys {:name           :alias
+                                               :preferred-name :name}))
+        all-contacts    (assoc contacts public-key current-contact)]
     (->> members
          (map #(or (get all-contacts %)
                    (public-key->new-contact %)))

src/status_im/events.cljs

@@ -768,16 +768,6 @@
  (fn [cofx [_ chat-name]]
    (group-chats/create cofx chat-name)))
 
-(handlers/register-handler-fx
- :group-chats.ui/name-changed
- (fn [cofx [_ chat-name]]
-   (group-chats/handle-name-changed cofx chat-name)))
-
-(handlers/register-handler-fx
- :group-chats.ui/save-pressed
- (fn [cofx _]
-   (group-chats/save cofx)))
-
 (handlers/register-handler-fx
  :group-chats.ui/add-members-pressed
  (fn [cofx _]
@@ -794,18 +784,12 @@
    (group-chats/make-admin cofx chat-id public-key)))
 
 (handlers/register-handler-fx
- :group-chats.ui/remove-chat-pressed
+ :group-chats.ui/leave-chat-pressed
  (fn [_ [_ chat-id group?]]
-   {:ui/show-confirmation {:title               (i18n/label :t/delete-confirmation)
-                           :content             (i18n/label :t/delete-chat-confirmation)
-                           :confirm-button-text (i18n/label :t/delete)
-                           :on-accept           #(re-frame/dispatch [:group-chats.ui/remove-chat-confirmed chat-id])}}))
-
-(handlers/register-handler-fx
- :group-chats.ui/remove-chat-confirmed
- (fn [cofx [_ chat-id]]
-   (group-chats/remove cofx chat-id)))
-
+   {:ui/show-confirmation {:title               (i18n/label :t/leave-confirmation)
+                           :content             (i18n/label :t/leave-chat-confirmation)
+                           :confirm-button-text (i18n/label :t/leave)
+                           :on-accept           #(re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id])}}))
 (handlers/register-handler-fx
  :group-chats.ui/join-pressed
  (fn [cofx [_ chat-id]]

src/status_im/group_chats/core.cljs

@@ -98,33 +98,25 @@
   {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "addMembersToGroupChat")
                      :params [nil current-chat-id selected-participants]
                      :on-success #(re-frame/dispatch [::chat-updated %])}]})
-(fx/defn remove
-  "Remove & leave chat"
+
+(fx/defn leave
+  "Leave chat"
+  {:events [:group-chats.ui/leave-chat-confirmed]}
   [{:keys [db] :as cofx} chat-id]
   {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "leaveGroupChat")
-                     :params [nil chat-id]
+                     :params [nil chat-id true]
                      :on-success #(re-frame/dispatch [::chat-updated %])}]})
 
 (defn- valid-name? [name]
   (spec/valid? :profile/name name))
 
-(fx/defn update-name [{:keys [db]} name]
-  {:db (-> db
-           (assoc-in [:group-chat-profile/profile :valid-name?] (valid-name? name))
-           (assoc-in [:group-chat-profile/profile :name] name))})
-
-(fx/defn handle-name-changed
-  "Store name in profile scratchpad"
-  [cofx new-chat-name]
-  (update-name cofx new-chat-name))
-
-(fx/defn save
+(fx/defn name-changed
   "Save chat from edited profile"
-  [{:keys [db] :as cofx}]
-  (let [new-name (get-in cofx [:db :group-chat-profile/profile :name])
-        current-chat-id (:current-chat-id db)]
-    (when (valid-name? new-name)
-      {::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "changeGroupChatName")
-                         :params [nil current-chat-id new-name]
-                         :on-success #(re-frame/dispatch [::chat-updated %])}]})))
+  {:events [:group-chats.ui/name-changed]}
+  [{:keys [db] :as cofx} chat-id new-name]
+  (when (valid-name? new-name)
+    {:db (assoc-in db [:chats chat-id :name] new-name)
+     ::json-rpc/call [{:method (json-rpc/call-ext-method (waku/enabled? cofx) "changeGroupChatName")
+                       :params [nil chat-id new-name]
+                       :on-success #(re-frame/dispatch [::chat-updated %])}]}))
 

src/status_im/group_chats/db.cljs

@@ -2,13 +2,7 @@
   (:require [status-im.chat.models :as models.chat]
             [status-im.multiaccounts.core :as multiaccounts]))
 
-(defn unwrap-events
-  "Flatten all events, denormalizing from field"
-  [all-updates]
-  (mapcat
-   (fn [{:keys [events from]}]
-     (map #(assoc % :from from) events))
-   all-updates))
+(def members-added-type 3)
 
 (defn joined?
   [public-key {:keys [members-joined] :as chat}]
@@ -19,14 +13,14 @@
   (contains? contacts my-public-key))
 
 (defn get-inviter-pk
-  [my-public-key {:keys [membership-updates]}]
-  (->> membership-updates
-       unwrap-events
+  [my-public-key {:keys [membership-update-events]}]
+  (->> membership-update-events
+       reverse
        (keep (fn [{:keys [from type members]}]
-               (when (and (= type "members-added")
+               (when (and (= type members-added-type)
                           ((set members) my-public-key))
                  from)))
-       last))
+       first))
 
 (defn get-pending-invite-inviter-name
   "when the chat is a private group chat in which the user has been

src/status_im/subs.cljs

@@ -729,7 +729,8 @@
 
        (and (chat.models/group-chat? current-chat)
             (group-chats.db/joined? my-public-key current-chat))
-       (assoc :show-input? true)
+       (assoc :show-input? true
+              :joined? true)
 
        (not group-chat)
        (assoc :show-input? true)))))
@@ -893,6 +894,15 @@
  (fn [[selected-contacts active-contacts]]
    (filter-contacts selected-contacts active-contacts)))
 
+(re-frame/reg-sub
+ :group-chat/chat-joined?
+ :<- [:multiaccount/public-key]
+ :<- [:chats/active-chats]
+ (fn [[my-public-key chats] [_ chat-id]]
+   (let [current-chat (get chats chat-id)]
+     (and (chat.models/group-chat? current-chat)
+          (group-chats.db/joined? my-public-key current-chat)))))
+
 (re-frame/reg-sub
  :chats/transaction-status
  ;;TODO address here for transactions
@@ -1692,8 +1702,7 @@
  :<- [:contacts/contacts]
  :<- [:multiaccount]
  (fn [[{:keys [contacts admins]} all-contacts current-multiaccount]]
-   (map #(assoc % :name (multiaccounts/displayed-name %))
-        (contact.db/get-all-contacts-in-group-chat contacts admins all-contacts current-multiaccount))))
+   (contact.db/get-all-contacts-in-group-chat contacts admins all-contacts current-multiaccount)))
 
 (re-frame/reg-sub
  :contacts/contacts-by-chat

src/status_im/ui/components/button.cljs

@@ -51,7 +51,8 @@
 
   Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0"
 
-  [{:keys [label type theme disabled? on-press accessibility-label style container-style] :or {type :main theme :blue}}]
+  [{:keys [label type theme disabled? on-press accessibility-label style container-style text-style]
+    :or   {type :main theme :blue}}]
   (let [label (utils.label/stringify label)]
     [react/touchable-opacity (cond-> {:on-press on-press
                                       :active-opacity 0.5
@@ -65,18 +66,19 @@
       [react/view {:flex-direction :row :align-items :center}
        (when (= type :previous)
          [vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4}
-                                              :color (if disabled? colors/gray colors/blue)}])
-       [react/text {:style {:color (cond
-                                     disabled?
-                                     colors/gray
-                                     (#{:main :secondary :next :previous} type)
-                                     (case theme
-                                       :green colors/green
-                                       :red colors/red
-                                       colors/blue)
-                                     :else
-                                     "")}}
+                                              :color           (if disabled? colors/gray colors/blue)}])
+       [react/text {:style (merge {:color (cond
+                                            disabled?
+                                            colors/gray
+                                            (#{:main :secondary :next :previous} type)
+                                            (case theme
+                                              :green colors/green
+                                              :red   colors/red
+                                              colors/blue)
+                                            :else
+                                            "")}
+                                  text-style)}
         label]
        (when (= type :next)
          [vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4}
-                                              :color (if disabled? colors/gray colors/blue)}])]]]))
+                                              :color           (if disabled? colors/gray colors/blue)}])]]]))

src/status_im/ui/components/chat_icon/screen.cljs

@@ -27,7 +27,7 @@
 
 (defn default-browser-icon [name]
   (default-chat-icon name {:default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color)
-                           :default-chat-icon-text styles/default-chat-icon-text}))
+                           :default-chat-icon-text (styles/default-chat-icon-text 40)}))
 
 (defn dapp-badge [{:keys [online-view-wrapper online-view online-dot-left online-dot-right]}]
   [react/view online-view-wrapper
@@ -54,7 +54,7 @@
     :size                   36
     :chat-icon              styles/chat-icon-chat-toolbar
     :default-chat-icon      (styles/default-chat-icon-chat-toolbar color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 36)}])
 
 (defn chat-icon-view-chat-list
   [contact group-chat name color online]
@@ -67,7 +67,7 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn chat-icon-view-chat-sheet
   [contact group-chat name color online]
@@ -80,13 +80,13 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn custom-icon-view-list
   [name color & [size]]
   [react/view (styles/container-list-size (or size 40))
    [default-chat-icon name {:default-chat-icon      (styles/default-chat-icon-profile color (or size 40))
-                            :default-chat-icon-text styles/default-chat-icon-text}]])
+                            :default-chat-icon-text (styles/default-chat-icon-text (or size 40))}]])
 
 (defn contact-icon-view
   [{:keys [name dapp?] :as contact} {:keys [container] :as styles}]
@@ -107,7 +107,7 @@
     :size                   60
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 60)}])
 
 (defn contact-icon-contacts-tab [contact]
   [contact-icon-view contact
@@ -119,7 +119,7 @@
     :size                   40
     :chat-icon              styles/chat-icon-chat-list
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text 40)}])
 
 (defn dapp-icon-browser [contact size]
   [contact-icon-view contact
@@ -128,7 +128,7 @@
     :size                   size
     :chat-icon              (styles/custom-size-icon size)
     :default-chat-icon      (styles/default-chat-icon-chat-list colors/default-chat-color)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text size)}])
 
 (defn dapp-icon-permission [contact size]
   [contact-icon-view contact
@@ -140,7 +140,7 @@
     :size                   size
     :chat-icon              (styles/custom-size-icon size)
     :default-chat-icon      (styles/default-chat-icon-profile colors/default-chat-color size)
-    :default-chat-icon-text styles/default-chat-icon-text}])
+    :default-chat-icon-text (styles/default-chat-icon-text size)}])
 
 (defn chat-intro-icon-view [icon-text chat-id styles]
   (let [photo-path (re-frame.core/subscribe [:contacts/chat-photo chat-id])]
@@ -156,7 +156,7 @@
                        :size                   size
                        :chat-icon              styles/chat-icon-profile
                        :default-chat-icon      (styles/default-chat-icon-profile color size)
-                       :default-chat-icon-text styles/default-chat-icon-text} override-styles)]
+                       :default-chat-icon-text (styles/default-chat-icon-text size)} override-styles)]
     [react/view (:container styles)
      (when (and edit? (not platform/desktop?))
        [react/view (styles/profile-icon-mask size)])

src/status_im/ui/components/chat_icon/styles.cljs

@@ -40,10 +40,11 @@
           :height        64
           :border-radius 32}))
 
-(def default-chat-icon-text
+(defn default-chat-icon-text [size]
   {:color       (colors/alpha colors/white 0.7)
-   :typography  :title-bold
-   :line-height 21})
+   :font-weight "700"
+   :font-size   (/ size 2)
+   :line-height size})
 
 (def message-status-icon-text
   {:margin-top -2