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

status-im · Mar 21, 2024 · ef503e4 · ef503e4
1 parent fd24a80
commit ef503e4
Show file tree

Hide file tree

Showing 26 changed files with 298 additions and 99 deletions.
diff --git a/src/legacy/status_im/data_store/chats.cljs b/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)

diff --git a/src/legacy/status_im/data_store/chats_test.cljs b/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

diff --git a/src/legacy/status_im/group_chats/core.cljs b/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]}]

diff --git a/src/legacy/status_im/ui/screens/screens.cljs b/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}}

diff --git a/src/quo/components/avatars/group_avatar/view.cljs b/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

diff --git a/src/quo/components/colors/color_picker/view.cljs b/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

diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs
@@ -156,17 +156,19 @@
 (defn get-js-deps
   [deps]
   (if deps
-    (let [prev-state (use-ref-atom {:value false :deps nil})
-          prev-deps  (:deps @prev-state)
-          prev-value (:value @prev-state)]
-      (if (and (not (nil? prev-deps)) (not= (count deps) (count prev-deps)))
-        (throw (js/Error. "Hooks can't have a different number of dependencies across re-renders"))
-        (if (not= deps prev-deps)
-          (let [new-value (not prev-value)]
-            (reset! prev-state {:value new-value
-                                :deps  deps})
-            #js [new-value])
-          #js [prev-value])))
+    (if (empty? deps)
+      #js [true]
+      (let [prev-state (use-ref-atom {:value false :deps nil})
+            prev-deps  (:deps @prev-state)
+            prev-value (:value @prev-state)]
+        (if (and (not (nil? prev-deps)) (not= (count deps) (count prev-deps)))
+          (throw (js/Error. "Hooks can't have a different number of dependencies across re-renders"))
+          (if (not= deps prev-deps)
+            (let [new-value (not prev-value)]
+              (reset! prev-state {:value new-value
+                                  :deps  deps})
+              #js [new-value])
+            #js [prev-value]))))
     js/undefined))
 
 (defn use-effect

diff --git a/src/status_im/common/floating_button_page/view.cljs b/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}}

diff --git a/src/status_im/common/standard_authentication/password_input/view.cljs b/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?])]))
-
diff --git a/src/status_im/common/validation/profile.cljs b/src/status_im/common/validation/profile.cljs
@@ -1,20 +1,18 @@
 (ns status-im.common.validation.profile
   (:require [clojure.string :as string]
             [status-im.constants :as constants]
+            utils.emojilib
             [utils.i18n :as i18n]))
 
 ;; NOTE - validation should match with Desktop
 ;; https://github.com/status-im/status-desktop/blob/2ba96803168461088346bf5030df750cb226df4c/ui/imports/utils/Constants.qml#L468
 (def min-length 5)
 
-(def emoji-regex
-  #"(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])")
-
 (def status-regex #"^[a-zA-Z0-9\-_ ]+$")
 
 (def common-names ["Ethereum" "Bitcoin"])
 
-(defn has-emojis? [s] (boolean (re-find emoji-regex s)))
+(defn has-emojis? [s] (boolean (re-find utils.emojilib/emoji-regex s)))
 
 (defn has-common-names? [s] (pos? (count (filter #(string/includes? s %) common-names))))
 

diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs
@@ -122,6 +122,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)
 

diff --git a/src/status_im/contexts/chat/events.cljs b/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]
@@ -78,17 +79,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))
@@ -109,7 +103,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)
 

diff --git a/src/status_im/contexts/chat/group_create/events.cljs b/src/status_im/contexts/chat/group_create/events.cljs
@@ -0,0 +1,34 @@
+(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-success
+ (fn [{:keys [db]} [{:keys [chat-id name color image]}]]
+   (let [new-chat {:name name :color color :image image}]
+     {:db (update-in db [:chats chat-id] #(merge % new-chat))})))
+
+(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 [:group-chat/edit-success
+                                                 (data-store.chats/<-rpc-js %)])}]}))
diff --git a/src/status_im/contexts/chat/group_create/style.cljs b/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})