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]
     [status-im.constants :as constants]
@@ -58,6 +59,10 @@
            :admins         #{}
            :members-joined #{})))
 
+(defn <-color
+  [value]
+  (if (string/starts-with? value "#") value (keyword value)))
+
 (defn <-rpc
   [chat]
   (-> chat
@@ -78,13 +83,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

@@ -66,16 +66,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

@@ -84,11 +84,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 {:title {:text (i18n/label :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/inputs/title_input/style.cljs

@@ -43,10 +43,12 @@
 
 (defn container
   [disabled?]
-  {:flex-direction  :row
-   :opacity         (if disabled? 0.3 1)
-   :justify-content :center
-   :align-items     :center})
+  {:flex-direction     :row
+   :opacity            (if disabled? 0.3 1)
+   :justify-content    :center
+   :align-items        :center
+   :padding-horizontal 20
+   :padding-vertical   12})
 
 (defn counter-container
   [focused?]

src/status_im/common/floating_button_page/style.cljs

@@ -1,8 +1,10 @@
-(ns status-im.common.floating-button-page.style)
+(ns status-im.common.floating-button-page.style
+  (:require [react-native.safe-area :as safe-area]))
 
-(def page-container
+(defn page-container
+  [top?]
   {:position :absolute
-   :top      0
+   :top      (if top? (safe-area/get-top) 0)
    :bottom   0
    :left     0
    :right    0})

src/status_im/common/floating_button_page/view.cljs

@@ -53,7 +53,7 @@
 
 (defn view
   [{:keys [header footer customization-color footer-container-padding header-container-style
-           gradient-cover?]
+           gradient-cover? top?]
     :or   {footer-container-padding (safe-area/get-top)}} &
    children]
   (reagent/with-let [window-height                (:height (rn/get-window))
@@ -85,7 +85,7 @@
                                              :keyboard-shown?          keyboard-shown?})]
       [:<>
        (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}])
-       [rn/view {:style style/page-container}
+       [rn/view {:style (style/page-container top?)}
         [rn/view
          {:on-layout set-header-height
           :style     header-container-style}

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

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

src/status_im/constants.cljs

@@ -120,6 +120,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,29 @@
+(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
+                                                 [(data-store.chats/<-rpc-js %)]])}]}))

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]
+            [react-native.hole-view :as hole-view]
+            [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}
+   [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
+      :top?                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
+        :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)}])]]]))