status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
flexsurfer 2024-03-22 14:10:51 +01:00 committed by GitHub
parent 38fcb0c1a0
commit 6f07e8022e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 298 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/legacy/status_im/data_store/chats.cljs
View File

@ -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)

4
src/legacy/status_im/data_store/chats_test.cljs
View File

@ -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

10
src/legacy/status_im/group_chats/core.cljs
View File

@ -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]}]

5
src/legacy/status_im/ui/screens/screens.cljs
View File

@ -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}}

2
src/quo/components/avatars/group_avatar/view.cljs
View File

@ -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

5
src/quo/components/colors/color_picker/view.cljs
View File

@ -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

4
src/react_native/core.cljs
View File

@ -156,6 +156,8 @@
(defn get-js-deps
[deps]
(if deps
(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)]
@ -166,7 +168,7 @@
(reset! prev-state {:value new-value
:deps deps})
#js [new-value])
#js [prev-value])))
#js [prev-value]))))
js/undefined))
(defn use-effect

3
src/status_im/common/floating_button_page/view.cljs
View File

@ -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}}

1
src/status_im/common/standard_authentication/password_input/view.cljs
View File

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

6
src/status_im/common/validation/profile.cljs
View File

@ -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))))

1
src/status_im/constants.cljs
View File

@ -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)

15
src/status_im/contexts/chat/events.cljs
View File

@ -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)

34
src/status_im/contexts/chat/group_create/events.cljs Normal file
View File

@ -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 %)])}]}))

22
src/status_im/contexts/chat/group_create/style.cljs Normal file
View File

@ -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})

132
src/status_im/contexts/chat/group_create/view.cljs Normal file
View File

@ -0,0 +1,132 @@
(ns status-im.contexts.chat.group-create.view
(:require [clojure.string :as string]
[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.emojilib
[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)
default-value (rn/use-memo
(fn []
(let [contact-string (string/join ", "
(map
profile.utils/displayed-name
contacts))]
(subs contact-string
0
(min (count contact-string)
constants/max-group-chat-name-length))))
[])
[group-name set-group-name] (rn/use-state default-value)
[error-message
set-error-message] (rn/use-state nil)
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]))
on-change-text (rn/use-callback
(fn [text]
(if (boolean (re-find utils.emojilib/emoji-regex text))
(set-error-message (i18n/label :t/are-not-allowed
{:check (i18n/label
:t/emojis)}))
(set-error-message nil))
(set-group-name text)))]
[floating-button-page/view
{:customization-color group-color
:gradient-cover? true
:header-container-style {:margin-top 8}
: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? (boolean (or group-name-empty? error-message))
:on-press create-group-on-press}
(i18n/label :t/create-group-chat)]}
[:<>
[avatar {:customization-color group-color}]
[quo/title-input
{:on-change-text on-change-text
:default-value default-value
:container-style {:padding-horizontal 20 :padding-top 12 :padding-bottom (if error-message 0 16)}
:placeholder (i18n/label :t/name-your-group)
:max-length constants/max-group-chat-name-length}]
(when error-message
[quo/info-message
{:type :error
:icon :i/info
:size :default
:style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
error-message])
[quo/divider-line]
[rn/view
{:style {:padding-vertical 7}}
[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-top 15
:padding-bottom 9
: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)}])]]]))

6
src/status_im/contexts/chat/group_details/view.cljs
View File

@ -135,7 +135,7 @@
{: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 []
@ -143,14 +143,14 @@
(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)

2
src/status_im/contexts/chat/home/new_chat/view.cljs
View File

@ -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))]])]))

12
src/status_im/contexts/preview/quo/preview.cljs
View File

@ -8,6 +8,7 @@
[quo.theme :as quo.theme]
[re-frame.core :as rf]
[react-native.blur :as blur]
[react-native.clipboard :as clipboard]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
@ -340,6 +341,7 @@
{:style (style/panel-basic)
:shows-vertical-scroll-indicator false
:content-container-style (when full-screen? {:flex 1})}
[:<>
[rn/pressable
{:style (when full-screen? {:flex 1})
:on-press rn/dismiss-keyboard!}
@ -362,7 +364,15 @@
blur-view-props)}]
children)]
(into [rn/view {:style (merge style/component-container component-container-style)}]
children))]]]))
children))]
(when state
(let [decr-state (if descriptor (select-keys @state (mapv :key (flatten descriptor))) @state)
state-str (with-out-str (cljs.pprint/pprint decr-state))]
[rn/view {:style {:margin 50}}
[quo/text {:style {:margin-bottom 10}} "State map (click on map to copy)"]
[rn/pressable
{:on-press #(clipboard/set-string state-str)}
[quo/text state-str]]]))]]]))
(defn preview-container
[& args]

5
src/status_im/contexts/wallet/create_account/view.cljs
View File

@ -16,7 +16,7 @@
[status-im.contexts.wallet.sheets.account-origin.view :as account-origin]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]
[utils.responsiveness :as responsiveness]
[utils.security.core :as security]
[utils.string]))
@ -143,7 +143,8 @@
{:default-selected @account-color
:on-change #(reset! account-color %)
:container-style {:padding-vertical 12
:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]
:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width
window-width)}}]]
[quo/divider-line]
[quo/category
{:list-type :settings

6
src/status_im/navigation/screens.cljs
View File

@ -5,6 +5,7 @@
[status-im.common.emoji-picker.view :as emoji-picker]
[status-im.common.lightbox.view :as lightbox]
[status-im.config :as config]
[status-im.contexts.chat.group-create.view :as group-create]
[status-im.contexts.chat.group-details.view :as group-details]
[status-im.contexts.chat.home.add-new-contact.scan.scan-profile-qr-page :as scan-profile-qr-page]
[status-im.contexts.chat.home.add-new-contact.views :as add-new-contact]
@ -116,6 +117,11 @@
:options {:sheet? true}
:component group-details/add-manage-members}
{:name :group-create
:options {:sheet? true
:skip-background? true}
:component group-create/view}
{:name :community-requests-to-join
:options {:sheet? true}
:component join-menu/view}

5
src/status_im/navigation/view.cljs
View File

@ -66,7 +66,8 @@
screens)
(keyword "screen" screen-key))
{:keys [component options]} (or qualified-screen-details screen-details)
{:keys [insets sheet? theme]} options
{:keys [insets sheet? theme
skip-background?]} options
user-theme (theme/get-theme)
alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
background-color (or (get-in options [:layout :backgroundColor])
@ -80,7 +81,7 @@
:alert-banners-top-margin alert-banners-top-margin))}
[inactive]
(if sheet?
[bottom-sheet-screen/view {:content component}]
[bottom-sheet-screen/view {:content component :skip-background? skip-background?}]
[component])]
(when js/goog.DEBUG
[:<>

3
src/utils/emojilib.cljs
View File

@ -3,6 +3,9 @@
[goog.object :as object]
utils.string))
(def emoji-regex
#"(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])")
(def lib (.-lib emojis))
(defn get-char

2
test/appium/views/chat_view.py
View File

@ -834,7 +834,7 @@ class ChatView(BaseView):
self.edit_group_chat_name_button = Button(self.driver, accessibility_id="edit-button")
self.edit_group_chat_name_edit_box = EditBox(self.driver, accessibility_id="new-chat-name")
self.done_button = Button(self.driver, accessibility_id="done")
self.create_button = Button(self.driver, accessibility_id="create-group-chat-button")
self.create_group_chat_button = Button(self.driver, accessibility_id="Create group chat")
## Group invites
self.group_invite_button = Button(self.driver, accessibility_id="invite-chat-button")
self.group_invite_link_text = Text(self.driver,

4
test/appium/views/home_view.py
View File

@ -442,8 +442,8 @@ class HomeView(BaseView):
"User with the name '%s' is not in contacts list so can't create a group chat" % user_name)
check_box.click_until_presence_of_element(chat.get_username_checkbox(user_name, state_on=True))
self.setup_chat_button.click()
chat.chat_name_editbox.send_keys(group_chat_name)
chat.create_button.click()
self.get_sign_in_view().profile_title_input.send_keys(group_chat_name)
chat.create_group_chat_button.click()
self.driver.info("## Group chat %s is created successfully!" % group_chat_name, device=False)
return chat

8
test/appium/views/sign_in_view.py
View File

@ -187,7 +187,7 @@ class SignInView(BaseView):
# New onboarding
self.generate_keys_button = Button(self.driver, translation_id="lets-go")
self.profile_your_name_edit_box = EditBox(self.driver, accessibility_id="profile-title-input")
self.profile_title_input = EditBox(self.driver, accessibility_id="profile-title-input")
self.profile_continue_button = Button(self.driver, accessibility_id="submit-create-profile-button")
self.profile_password_edit_box = EditBox(self.driver, translation_id="password-creation-placeholder-1")
self.profile_repeat_password_edit_box = EditBox(self.driver, translation_id="password-creation-placeholder-2")
@ -213,7 +213,7 @@ class SignInView(BaseView):
self.profile_confirm_password_button.click()
def set_profile(self, username: str, set_image=False):
self.profile_your_name_edit_box.send_keys(username)
self.profile_title_input.send_keys(username)
self.profile_continue_button.click_until_presence_of_element(self.profile_password_edit_box)
if set_image:
pass
@ -231,7 +231,7 @@ class SignInView(BaseView):
self.show_profiles_button.click()
self.plus_profiles_button.click()
self.create_new_profile_button.click()
self.generate_keys_button.click_until_presence_of_element(self.profile_your_name_edit_box)
self.generate_keys_button.click_until_presence_of_element(self.profile_title_input)
self.set_profile(username)
self.set_password(password)
if self.enable_biometric_maybe_later_button.is_element_displayed(10):
@ -270,7 +270,7 @@ class SignInView(BaseView):
self.create_new_profile_button.click()
self.use_recovery_phrase_button.click()
self.passphrase_edit_box.send_keys(passphrase)
self.continue_button.click_until_presence_of_element(self.profile_your_name_edit_box)
self.continue_button.click_until_presence_of_element(self.profile_title_input)
self.set_profile(username, set_image)
self.set_password(password)
if self.enable_biometric_maybe_later_button.is_element_displayed(10):

2
translations/en.json
View File

@ -312,6 +312,7 @@
"create-a-pin": "Create a 6-digit passcode",
"create-a-puk": "Create a 12-digit PUK",
"create-group-chat": "Create group chat",
"name-your-group": "Name your group",
"create-multiaccount": "Generate keys",
"create-new-key": "Get new keys",
"create-pin": "Create 6-digit passcode",
@ -2411,6 +2412,7 @@
"no-other-accounts": "No other accounts",
"here-is-a-cat-in-a-box-instead": "Here’s a cat in a box instead",
"accounts-count": "{{count}} accounts",
"n-m-people": "{{n}}/{{m}} people",
"enter-eth": "Enter any ETH address or ENS name.",
"eth-or-ens": "ETH address or ENS name.",
"type-pairing-code": "Type or paste pairing code",