Allow user to select a color for the group chat #18982

src/legacy/status_im/data_store/chats.cljs

@@ -1,6 +1,7 @@
 (ns legacy.status-im.data-store.chats
   (:require
     [clojure.set :as set]
+    [clojure.string :as string]
     [legacy.status-im.data-store.messages :as messages]
     [legacy.status-im.utils.deprecated-types :as types]
     [re-frame.core :as re-frame]
@@ -59,6 +60,10 @@
            :admins         #{}
            :members-joined #{})))
 
+(defn <-color
+  [value]
+  (if (string/starts-with? value "#") value (keyword value)))
+
 (defn <-rpc
   [chat]
   (-> chat
@@ -79,13 +84,14 @@
       rpc->type
       unmarshal-members
       (update :last-message #(when % (messages/<-rpc %)))
+      (update :color <-color)
       (dissoc :members)))
 
 (defn <-rpc-js
   [^js chat]
   (-> {:name                    (.-name chat)
        :description             (.-description chat)
-       :color                   (.-color chat)
+       :color                   (<-color (.-color chat))
        :emoji                   (.-emoji chat)
        :timestamp               (.-timestamp chat)
        :alias                   (.-alias chat)

src/legacy/status_im/data_store/chats_test.cljs

@@ -5,7 +5,7 @@
 
 (deftest normalize-chat-test
   (let [chat          {:id                     "chat-id"
-                       :color                  "color"
+                       :color                  "yellow"
                        :name                   "name"
                        :chatType               3
                        :members                [{:id     "a"
@@ -26,7 +26,7 @@
                        :timestamp              2}
         expected-chat {:public?                  false
                        :group-chat               true
-                       :color                    "color"
+                       :color                    :yellow
                        :chat-name                "name"
                        :contacts                 #{"a" "b" "c" "d"}
                        :chat-type                3

src/legacy/status_im/group_chats/core.cljs

@@ -64,16 +64,6 @@
                     :js-response true
                     :on-success  #(re-frame/dispatch [:chat-updated %])}]})
 
-(rf/defn create
-  {:events       [:group-chats.ui/create-pressed]
-   :interceptors [(re-frame/inject-cofx :random-guid-generator)]}
-  [{:keys [db] :as cofx} group-name]
-  (let [selected-contacts (:group/selected-contacts db)]
-    {:json-rpc/call [{:method      "wakuext_createGroupChatWithMembers"
-                      :params      [nil group-name (into [] selected-contacts)]
-                      :js-response true
-                      :on-success  #(re-frame/dispatch [:chat-updated %])}]}))
-
 (rf/defn create-from-link
   {:events [:group-chats/create-from-link]}
   [cofx {:keys [chat-id invitation-admin chat-name]}]

src/legacy/status_im/ui/screens/screens.cljs

@@ -91,11 +91,6 @@
     :options   {:insets {:top? true}}
     :component stickers/pack}
 
-   {:name      :new-group
-    :options   {:insets {:top? true}}
-    ;;TODO custom subtitle
-    :component group-chat/new-group}
-
    {:name      :currency-settings
     :options   {:topBar (topbar-options :t/main-currency)
                 :insets {:top? true}}

src/quo/components/avatars/group_avatar/view.cljs

@@ -25,7 +25,7 @@
         :or   {size                :size-20
                customization-color :blue
                picture             nil
-               icon-name           :i/group}}]
+               icon-name           :i/members}}]
     (let [container-size (get-in sizes [size :container])
           icon-size      (get-in sizes [size :icon])]
       [rn/view

src/quo/components/colors/color_picker/view.cljs

@@ -3,7 +3,8 @@
     [quo.components.colors.color.constants :as constants]
     [quo.components.colors.color.view :as color]
     [quo.foundations.colors :as colors]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]))
 
 (defn get-item-layout
   [_ index]
@@ -52,7 +53,7 @@
                                         :index        index
                                         :viewPosition 0.5})))))
         50)))
-    [rn/flat-list
+    [gesture/flat-list
      {:ref                               on-ref
       ;; TODO: using :feng-shui? temporarily while b & w is being developed.
       ;; https://github.com/status-im/status-mobile/discussions/16676

src/status_im/common/floating_button_page/view.cljs

@@ -3,6 +3,7 @@
     [oops.core :as oops]
     [quo.core :as quo]
     [react-native.core :as rn]
+    [react-native.gesture :as gesture]
     [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -90,7 +91,7 @@
          {:on-layout set-header-height
           :style     header-container-style}
          header]
-        [rn/scroll-view
+        [gesture/scroll-view
          {:on-scroll               set-content-y-scroll
           :scroll-event-throttle   64
           :content-container-style {:flex-grow 1}}

src/status_im/common/standard_authentication/password_input/view.cljs

@@ -89,4 +89,3 @@
          :i/face-id])]
      (when error?
        [error-info error-message processing shell?])]))
-

src/status_im/constants.cljs

@@ -121,6 +121,7 @@
 
 (def ^:const min-password-length 6)
 (def ^:const max-group-chat-participants 20)
+(def ^:const max-group-chat-name-length 24)
 (def ^:const default-number-of-messages 20)
 (def ^:const default-number-of-pin-messages 3)
 

src/status_im/contexts/chat/events.cljs

@@ -9,6 +9,7 @@
     [status-im.constants :as constants]
     [status-im.contexts.chat.contacts.events :as contacts-store]
     status-im.contexts.chat.effects
+    status-im.contexts.chat.group-create.events
     [status-im.contexts.chat.messenger.composer.link-preview.events :as link-preview]
     status-im.contexts.chat.messenger.messages.content.reactions.events
     [status-im.contexts.chat.messenger.messages.delete-message-for-me.events :as delete-for-me]
@@ -79,17 +80,10 @@
              :invitation-admin
              (:invitation-admin chat)))))
 
-(rf/defn leave-removed-chat
-  {:events [:chat/leave-removed-chat]}
-  [{{:keys [view-id current-chat-id chats]} :db
-    :as                                     cofx}]
-  (when (and (= view-id :chat)
-             (not (contains? chats current-chat-id)))
-    (navigation/navigate-back cofx)))
-
 (defn ensure-chats
   [{:keys [db] :as cofx} [chats]]
-  (let [{:keys [all-chats chats-home-list removed-chats]}
+  (let [{:keys [view-id current-chat-id]} db
+        {:keys [all-chats chats-home-list removed-chats]}
         (reduce
          (fn [acc {:keys [chat-id profile-public-key timeline? community-id active muted] :as chat}]
            (if (not (or active muted))
@@ -110,7 +104,8 @@
              (update :chats-home-list set/difference removed-chats))
      :fx [(when (not-empty removed-chats)
             [:effects/push-notifications-clear-message-notifications removed-chats])
-          [:dispatch [:chat/leave-removed-chat]]]}))
+          (when (and (= view-id :chat) (removed-chats current-chat-id))
+            [:dispatch [:navigate-back]])]}))
 
 (re-frame/reg-event-fx :chat/ensure-chats ensure-chats)
 

src/status_im/contexts/chat/group_create/events.cljs

@@ -0,0 +1,30 @@
+(ns status-im.contexts.chat.group-create.events
+  (:require [legacy.status-im.data-store.chats :as data-store.chats]
+            [oops.core :as oops]
+            [re-frame.core :as rf]))
+
+(rf/reg-event-fx :group-chat/create
+ (fn [{:keys [db]} [group-name color image]]
+   (let [selected-contacts (:group/selected-contacts db)]
+     {:json-rpc/call [{:method      "wakuext_createGroupChatWithMembers"
+                       :params      [nil group-name (into [] selected-contacts)]
+                       :js-response true
+                       :on-success  (fn [response]
+                                      (let [chat-id (-> (oops/oget response :chats)
+                                                        first
+                                                        (oops/oget :id))]
+                                        (rf/dispatch [:chat-updated response])
+                                        (rf/dispatch [:group-chat/edit
+                                                      {:chat-id    chat-id
+                                                       :group-name group-name
+                                                       :color      color
+                                                       :image      image}])))}]})))
+
+(rf/reg-event-fx :group-chat/edit
+ (fn [_ [{:keys [chat-id group-name color image]}]]
+   {:json-rpc/call [{:method      "chat_editChat"
+                     :params      ["" chat-id group-name (name color) image]
+                     :js-response true
+                     :on-success  #(rf/dispatch [:chat/ensure-chats
+                                                 [(dissoc (data-store.chats/<-rpc-js %)
+                                                   :community-id)]])}]}))

src/status_im/contexts/chat/group_create/style.cljs

@@ -0,0 +1,22 @@
+(ns status-im.contexts.chat.group-create.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def avatar {:width 88 :margin-top 12 :margin-left 20})
+
+(def hole
+  {:y            (- 80 32)
+   :x            (+ (- 80 32) 8)
+   :width        32
+   :height       32
+   :borderRadius 10})
+
+(def camera {:position :absolute :right 0 :bottom 0})
+
+(defn color-label
+  [theme]
+  {:color              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :padding-horizontal 20})
+
+(def tags {:flex-direction :row :flex-wrap :wrap :padding-horizontal 20 :padding-top 12})
+
+(def tag {:margin-right 8 :margin-bottom 8})

src/status_im/contexts/chat/group_create/view.cljs

@@ -0,0 +1,99 @@
+(ns status-im.contexts.chat.group-create.view
+  (:require [quo.core :as quo]
+            [quo.foundations.colors :as colors]
+            [quo.theme]
+            [react-native.core :as rn]
+            [status-im.common.floating-button-page.view :as floating-button-page]
+            [status-im.constants :as constants]
+            [status-im.contexts.chat.group-create.style :as style]
+            [status-im.contexts.profile.utils :as profile.utils]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [utils.responsiveness :as responsiveness]))
+
+(defn avatar
+  [{:keys [customization-color]}]
+  [rn/pressable {:style style/avatar}
+   ;;NOTE with hole-view group-avatar doesn't change it's background color
+   #_[hole-view/hole-view
+      {:holes [style/hole]}]
+   [quo/group-avatar
+    {:customization-color customization-color
+     :size                :size-80}]
+   [quo/button
+    {:on-press        (fn []
+                        #_(rf/dispatch
+                           [:show-bottom-sheet
+                            {:content (fn []
+                                        [profile-picture-picker/view
+                                         {:update-profile-pic-callback on-change-profile-pic
+                                          :has-picture?                has-picture?}])
+                             :theme   :dark
+                             :shell?  true}]))
+     :container-style style/camera
+     :icon-only?      true
+     :type            :grey
+     :background      :photo
+     :size            32}
+    :i/camera]])
+
+(defn view
+  []
+  (let [theme                         (quo.theme/use-theme-value)
+        {window-width :width}         (rn/get-window)
+        profile                       (rf/sub [:profile/profile-with-image])
+        contacts                      (rf/sub [:selected-group-contacts])
+        contacts-count                (count contacts)
+        [group-name set-group-name]   (rn/use-state "")
+        group-name-empty?             (not (and (string? group-name) (not-empty group-name)))
+        [group-color set-group-color] (rn/use-state (rand-nth colors/account-colors))
+        create-group-on-press         (rn/use-callback #(debounce/throttle-and-dispatch
+                                                         [:group-chat/create group-name group-color]
+                                                         300)
+                                                       [group-name group-color])
+        back-on-press                 (rn/use-callback #(rf/dispatch [:navigate-back]))]
+    [floating-button-page/view
+     {:customization-color group-color
+      :gradient-cover?     true
+      :header              [quo/page-nav
+                            {:background :photo
+                             :type       :no-title
+                             :icon-name  :i/arrow-left
+                             :on-press   back-on-press}]
+      :footer              [quo/button
+                            {:customization-color group-color
+                             :disabled?           group-name-empty?
+                             :on-press            create-group-on-press}
+                            (i18n/label :t/create-group-chat)]}
+     [:<>
+      [avatar {:customization-color group-color}]
+      [quo/title-input
+       {:on-change-text  set-group-name
+        :container-style {:padding-horizontal 20 :padding-vertical 12}
+        :placeholder     (i18n/label :t/name-your-group)
+        :max-length      constants/max-group-chat-name-length}]
+      [quo/divider-line]
+      [rn/view
+       {:style {:padding-vertical 8}}
+       [quo/text
+        {:size   :paragraph-2
+         :weight :medium
+         :style  (style/color-label theme)}
+        (i18n/label :t/accent-colour)]
+       [quo/color-picker
+        {:default-selected group-color
+         :on-change        set-group-color
+         :container-style  {:padding-vertical 12
+                            :padding-left     (responsiveness/iphone-11-Pro-20-pixel-from-width
+                                               window-width)}}]]
+      [quo/divider-label
+       (i18n/label :t/n-m-people {:n (inc contacts-count) :m constants/max-group-chat-participants})]
+      [rn/view {:style style/tags}
+       (for [contact (conj contacts profile)]
+         ^{:key contact}
+         [quo/context-tag
+          {:container-style style/tag
+           :size            24
+           :profile-picture (profile.utils/photo contact)
+           :full-name       (profile.utils/displayed-name contact)}])]]]))

src/status_im/contexts/chat/group_details/view.cljs

@@ -135,22 +135,22 @@
       {:container-style style/actions-view
        :actions         [{:accessibility-label :pinned-messages
                           :label               (i18n/label :t/pinned-messages)
-                          :color               color
+                          :customization-color color
                           :icon                :i/pin
                           :counter-value       (count pinned-messages)
                           :on-press            (fn []
                                                  (rf/dispatch [:dismiss-keyboard])
                                                  (rf/dispatch [:pin-message/show-pins-bottom-sheet
                                                                chat-id]))}
                          {:accessibility-label :toggle-mute
-                          :color               color
+                          :customization-color color
                           :icon                (if muted :i/muted :i/activity-center)
                           :label               (i18n/label (if muted :unmute-group :mute-group))
                           :on-press            #(rf/dispatch [:chat.ui/mute chat-id (not muted)
                                                               (when-not muted
                                                                 constants/mute-till-unmuted)])}
                          {:accessibility-label :manage-members
-                          :color               color
+                          :customization-color color
                           :icon                :i/add-user
                           :label               (i18n/label (if admin? :t/manage-members :t/add-members))
                           :counter-value       (count contacts)

src/status_im/contexts/chat/home/new_chat/view.cljs

@@ -148,7 +148,7 @@
           :on-press            (fn []
                                  (if one-contact-selected?
                                    (rf/dispatch [:chat.ui/start-chat public-key])
-                                   (rf/dispatch [:navigate-to :new-group])))}
+                                   (rf/dispatch [:open-modal :group-create])))}
          (if one-contact-selected?
            (i18n/label :t/chat-with {:selected-user primary-name})
            (i18n/label :t/setup-group-chat))]])]))