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

src/legacy/status_im/data_store/chats.cljs

@@ -78,13 +78,14 @@
       rpc->type
       unmarshal-members
       (update :last-message #(when % (messages/<-rpc %)))
+      (update :color keyword)
       (dissoc :members)))
 
 (defn <-rpc-js
   [^js chat]
   (-> {:name                    (.-name chat)
        :description             (.-description chat)
-       :color                   (.-color chat)
+       :color                   (keyword (.-color chat))
        :emoji                   (.-emoji chat)
        :timestamp               (.-timestamp chat)
        :alias                   (.-alias chat)

src/legacy/status_im/group_chats/core.cljs

@@ -66,15 +66,7 @@
                     :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]}

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

@@ -88,11 +88,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,19 +80,13 @@
              :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}]
+           (println "CHAT" active muted (not (or active muted)))
            (if (not (or active muted))
              (update acc :removed-chats conj chat-id)
              (cond-> acc
@@ -110,7 +105,13 @@
              (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))
+            (println "NAVIGATE BACK"
+                     view-id
+                     current-chat-id
+                     (= 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/view.cljs

@@ -0,0 +1,106 @@
+(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.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 {:width 88 :margin-top 12 :margin-left 20}}
+   [hole-view/hole-view
+    {:holes [{:y            (- 80 32)
+              :x            (+ (- 80 32) 8)
+              :width        32
+              :height       32
+              :borderRadius 10}]}
+    [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 {:position :absolute :right 0 :bottom 0}
+     :icon-only?      true
+     :type            :grey
+     :background      :photo
+     :size            32}
+    :i/camera]])
+
+(defn color-label
+  [theme]
+  {:color              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :padding-horizontal 20})
+
+(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))]
+    [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   (fn []
+                                           (rf/dispatch [:navigate-back]))}]
+      :footer              [quo/button
+                            {:customization-color group-color
+                             :disabled?           group-name-empty?
+                             :on-press            #(debounce/throttle-and-dispatch
+                                                    [:group-chat/create group-name group-color]
+                                                    300)}
+                            (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  (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 {:flex-direction :row :flex-wrap :wrap :padding-horizontal 20 :padding-top 12}
+       (for [contact (conj contacts profile)]
+         ^{:key contact}
+         [quo/context-tag
+          {:container-style     {:margin-right 8 :margin-bottom 8}
+           :customization-color :army
+           :size                24
+           :profile-picture     (profile.utils/photo contact)
+           :full-name           (profile.utils/displayed-name contact)}])]]]))

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

@@ -64,29 +64,33 @@
                                   :on-check on-toggle}}
        item])))
 
-(defn- view-internal
-  [{:keys [scroll-enabled? on-scroll close theme]}]
-  (let [contacts                          (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
+(defn view
+  []
+  (let [theme                             (quo.theme/use-theme-value)
+        contacts                          (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
         selected-contacts-count           (rf/sub [:selected-contacts-count])
         selected-contacts                 (rf/sub [:group/selected-contacts])
         one-contact-selected?             (= selected-contacts-count 1)
         contacts-selected?                (pos? selected-contacts-count)
         {:keys [primary-name public-key]} (when one-contact-selected?
                                             (rf/sub [:contacts/contact-by-identity
                                                      (first selected-contacts)]))]
-    [rn/view {:flex 1}
+    [:<>
      [rn/view {:padding-horizontal 20}
       [quo/button
        {:type       :grey
         :size       32
         :icon-only? true
-        :on-press   close} :i/close]
+        :on-press   #(rf/dispatch [:navigate-back])}
+       :i/close]
       [rn/view {:style style/contact-selection-heading}
        [quo/text
         {:weight :semi-bold
          :size   :heading-1
          :style  {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
-        (i18n/label :t/new-chat)]
+        (if (and contacts-selected? (not one-contact-selected?))
+          (i18n/label :t/new-group-chat)
+          (i18n/label :t/new-chat))]
        (when (seq contacts)
          [quo/text
           {:size   :paragraph-2
@@ -104,9 +108,7 @@
          :sections                       (rf/sub [:contacts/filtered-active-sections])
          :render-section-header-fn       contact-list/contacts-section-header
          :content-container-style        {:padding-bottom 70}
-         :render-fn                      contact-item-render
-         :scroll-enabled                 @scroll-enabled?
-         :on-scroll                      on-scroll}])
+         :render-fn                      contact-item-render}])
      (when contacts-selected?
        [quo/button
         {:type                :primary
@@ -115,9 +117,8 @@
          :on-press            (fn []
                                 (if one-contact-selected?
                                   (rf/dispatch [:chat.ui/start-chat public-key])
-                                  (rf/dispatch [:navigate-to :new-group])))}
+                                  (rf/dispatch [:navigate-to-within-stack
+                                                [:group-create :start-a-new-chat]])))}
         (if one-contact-selected?
           (i18n/label :t/chat-with {:selected-user primary-name})
           (i18n/label :t/setup-group-chat))])]))
-
-(def view (quo.theme/with-theme view-internal))