diff --git a/src/status_im/common/home/actions/view.cljs b/src/status_im/common/home/actions/view.cljs index a52b128fae..61e6e03dba 100644 --- a/src/status_im/common/home/actions/view.cljs +++ b/src/status_im/common/home/actions/view.cljs @@ -232,12 +232,11 @@ :sub-label nil :chevron? false}))) -;; TODO(OmarBasem): Requires design input. (defn edit-name-image-entry - [] + [chat-id] (entry {:icon :i/edit :label (i18n/label :t/edit-name-and-image) - :on-press #(js/alert "TODO: to be implemented, requires design input") + :on-press #(rf/dispatch [:open-modal :screen/group-update chat-id]) :danger? false :accessibility-label :edit-name-and-image :sub-label nil @@ -359,7 +358,7 @@ (rf/dispatch [:chats-list/load-chat chat-id]) (rf/dispatch [:pin-message/load-pin-messages chat-id]) (rf/dispatch [:hide-bottom-sheet]) - (rf/dispatch [:navigate-to :group-details chat-id])) + (rf/dispatch [:navigate-to :screen/group-details chat-id])) :danger? false :accessibility-label :group-details :sub-label nil @@ -369,18 +368,17 @@ [chat-id admin?] (entry {:icon :i/add-user :label (i18n/label (if admin? :t/manage-members :t/add-members)) - :on-press #(rf/dispatch [:open-modal :group-add-manage-members chat-id]) + :on-press #(rf/dispatch [:open-modal :screen/group-add-manage-members chat-id]) :danger? false :accessibility-label :manage-members :sub-label nil :chevron? false})) -;; TODO(OmarBasem): to be implemented. (defn edit-group-entry - [] + [chat-id] (entry {:icon :i/edit :label (i18n/label :t/edit-name-and-image) - :on-press #(js/alert "TODO: to be implemented") + :on-press #(rf/dispatch [:open-modal :screen/group-update chat-id]) :danger? false :accessibility-label :edit-group :sub-label nil @@ -426,8 +424,7 @@ (when inside-chat? (add-manage-members-entry chat-id admin?)) (when (and admin? inside-chat?) - (when config/show-not-implemented-features? - (edit-group-entry))) + (edit-group-entry chat-id)) (when (and admin? inside-chat?) (when config/show-not-implemented-features? (group-privacy-entry)))])) @@ -488,13 +485,12 @@ (chat-actions chat inside-chat? nil))) (defn group-details-actions - [{:keys [admins] :as group}] + [{:keys [chat-id admins] :as group}] (let [current-pub-key (rf/sub [:multiaccount/public-key]) admin? (get admins current-pub-key)] [quo/action-drawer [(when admin? - [(when config/show-not-implemented-features? - (edit-name-image-entry))]) + [(edit-name-image-entry chat-id)]) [(when config/show-not-implemented-features? (notifications-entry admin?))] (destructive-actions group false)]])) diff --git a/src/status_im/contexts/chat/events.cljs b/src/status_im/contexts/chat/events.cljs index e1637d1d95..8021a551b7 100644 --- a/src/status_im/contexts/chat/events.cljs +++ b/src/status_im/contexts/chat/events.cljs @@ -9,7 +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.group.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] diff --git a/src/status_im/contexts/chat/group_create/view.cljs b/src/status_im/contexts/chat/group/common/group_edit.cljs similarity index 69% rename from src/status_im/contexts/chat/group_create/view.cljs rename to src/status_im/contexts/chat/group/common/group_edit.cljs index cc83210d5a..21cba68009 100644 --- a/src/status_im/contexts/chat/group_create/view.cljs +++ b/src/status_im/contexts/chat/group/common/group_edit.cljs @@ -1,13 +1,11 @@ -(ns status-im.contexts.chat.group-create.view - (:require [clojure.string :as string] - [quo.core :as quo] - [quo.foundations.colors :as colors] +(ns status-im.contexts.chat.group.common.group-edit + (:require [quo.core :as quo] [quo.theme] [react-native.core :as rn] [status-im.common.avatar-picture-picker.view :as avatar-picture-picker] [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.chat.group.common.style :as style] [status-im.contexts.profile.utils :as profile.utils] [utils.debounce :as debounce] utils.emojilib @@ -41,35 +39,28 @@ :i/camera]])) (defn view - [] + [{:keys [default-group-name default-group-color default-group-image contacts + submit-button-label submit-event back-button-icon chat-id close on-success editing-group?]}] (let [theme (quo.theme/use-theme) {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) + [group-name set-group-name] (rn/use-state default-group-name) [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)) - [group-image set-group-image] (rn/use-state nil) - create-group-on-press (rn/use-callback #(debounce/throttle-and-dispatch - [:group-chat/create group-name group-color - group-image] + [group-color set-group-color] (rn/use-state default-group-color) + [group-image set-group-image] (rn/use-state default-group-image) + on-submit (rn/use-callback #(debounce/throttle-and-dispatch + [submit-event + {:group-name group-name + :group-color group-color + :group-image (when (not= group-image + default-group-image) + group-image) + :chat-id chat-id + :on-success on-success}] 300) [group-name group-color group-image]) - 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)) @@ -77,7 +68,13 @@ {:check (i18n/label :t/emojis)})) (set-error-message nil)) - (set-group-name text)))] + (set-group-name text))) + disabled? (or group-name-empty? + error-message + (and editing-group? + (= group-name default-group-name) + (= group-color default-group-color) + (= group-image default-group-image)))] [floating-button-page/view {:customization-color group-color :gradient-cover? true @@ -85,13 +82,13 @@ :header [quo/page-nav {:background :photo :type :no-title - :icon-name :i/arrow-left - :on-press back-on-press}] + :icon-name back-button-icon + :on-press close}] :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)]} + :disabled? disabled? + :on-press on-submit} + submit-button-label]} [:<> [avatar {:customization-color group-color @@ -99,7 +96,7 @@ :set-group-image set-group-image}] [quo/title-input {:on-change-text on-change-text - :default-value default-value + :default-value default-group-name :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}] @@ -126,9 +123,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})] + (i18n/label :t/n-m-people {:n contacts-count :m constants/max-group-chat-participants})] [rn/view {:style style/tags} - (for [contact (conj contacts profile)] + (for [contact contacts] ^{:key contact} [quo/context-tag {:container-style style/tag diff --git a/src/status_im/contexts/chat/group_create/style.cljs b/src/status_im/contexts/chat/group/common/style.cljs similarity index 92% rename from src/status_im/contexts/chat/group_create/style.cljs rename to src/status_im/contexts/chat/group/common/style.cljs index 4fcf949756..5f5a5a75bc 100644 --- a/src/status_im/contexts/chat/group_create/style.cljs +++ b/src/status_im/contexts/chat/group/common/style.cljs @@ -1,4 +1,4 @@ -(ns status-im.contexts.chat.group-create.style +(ns status-im.contexts.chat.group.common.style (:require [quo.foundations.colors :as colors])) (def avatar {:width 88 :margin-top 12 :margin-left 20}) diff --git a/src/status_im/contexts/chat/group/create/view.cljs b/src/status_im/contexts/chat/group/create/view.cljs new file mode 100644 index 0000000000..0e2768ee23 --- /dev/null +++ b/src/status_im/contexts/chat/group/create/view.cljs @@ -0,0 +1,27 @@ +(ns status-im.contexts.chat.group.create.view + (:require + [clojure.string :as string] + [quo.foundations.colors :as colors] + [status-im.constants :as constants] + [status-im.contexts.chat.group.common.group-edit :as group-edit] + [status-im.contexts.profile.utils :as profile.utils] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn view + [{:keys [close]}] + (let [contacts (rf/sub [:selected-group-contacts]) + contact-string (string/join ", " (map profile.utils/displayed-name contacts)) + default-group-name (subs contact-string + 0 + (min (count contact-string) constants/max-group-chat-name-length)) + profile (rf/sub [:profile/profile-with-image]) + contacts (conj contacts profile)] + [group-edit/view + {:default-group-name default-group-name + :default-group-color (rand-nth colors/account-colors) + :contacts contacts + :submit-button-label (i18n/label :t/create-group-chat) + :submit-event :group-chat/create + :back-button-icon :i/arrow-left + :close close}])) diff --git a/src/status_im/contexts/chat/group_details/style.cljs b/src/status_im/contexts/chat/group/details/style.cljs similarity index 95% rename from src/status_im/contexts/chat/group_details/style.cljs rename to src/status_im/contexts/chat/group/details/style.cljs index d288993b00..ba73286682 100644 --- a/src/status_im/contexts/chat/group_details/style.cljs +++ b/src/status_im/contexts/chat/group/details/style.cljs @@ -1,4 +1,4 @@ -(ns status-im.contexts.chat.group-details.style +(ns status-im.contexts.chat.group.details.style (:require [quo.foundations.colors :as colors])) diff --git a/src/status_im/contexts/chat/group_details/view.cljs b/src/status_im/contexts/chat/group/details/view.cljs similarity index 96% rename from src/status_im/contexts/chat/group_details/view.cljs rename to src/status_im/contexts/chat/group/details/view.cljs index b341f7014a..ea19289a16 100644 --- a/src/status_im/contexts/chat/group_details/view.cljs +++ b/src/status_im/contexts/chat/group/details/view.cljs @@ -1,4 +1,4 @@ -(ns status-im.contexts.chat.group-details.view +(ns status-im.contexts.chat.group.details.view (:require [quo.core :as quo] [quo.foundations.colors :as colors] @@ -11,7 +11,7 @@ [status-im.common.contact-list.view :as contact-list] [status-im.common.home.actions.view :as actions] [status-im.constants :as constants] - [status-im.contexts.chat.group-details.style :as style] + [status-im.contexts.chat.group.details.style :as style] [status-im.feature-flags :as ff] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -54,7 +54,7 @@ (let [theme (quo.theme/use-theme) selected-participants (rf/sub [:group-chat/selected-participants]) deselected-members (rf/sub [:group-chat/deselected-members]) - chat-id (rf/sub [:get-screen-params :group-add-manage-members]) + chat-id (rf/sub [:get-screen-params :screen/group-add-manage-members]) {:keys [admins] :as group} (rf/sub [:chats/chat-by-id chat-id]) current-pk (rf/sub [:multiaccount/public-key]) admin? (get admins current-pk)] @@ -123,9 +123,9 @@ [_] [rn/view {:style {:height 8}}]) -(defn group-details +(defn view [] - (let [chat-id (rf/sub [:get-screen-params :group-details]) + (let [chat-id (rf/sub [:get-screen-params :screen/group-details]) {:keys [admins chat-id chat-name color muted contacts image] :as group} (rf/sub [:chats/chat-by-id chat-id]) members (rf/sub [:contacts/group-members-sections chat-id]) @@ -176,7 +176,8 @@ :icon :i/add-user :label (i18n/label (if admin? :t/manage-members :t/add-members)) :counter-value (count contacts) - :on-press #(rf/dispatch [:open-modal :group-add-manage-members + :on-press #(rf/dispatch [:open-modal + :screen/group-add-manage-members chat-id])}]}] [rn/section-list {:key-fn :title diff --git a/src/status_im/contexts/chat/group_create/events.cljs b/src/status_im/contexts/chat/group/events.cljs similarity index 58% rename from src/status_im/contexts/chat/group_create/events.cljs rename to src/status_im/contexts/chat/group/events.cljs index 6dff6f4c68..f1858afeb9 100644 --- a/src/status_im/contexts/chat/group_create/events.cljs +++ b/src/status_im/contexts/chat/group/events.cljs @@ -1,12 +1,12 @@ -(ns status-im.contexts.chat.group-create.events +(ns status-im.contexts.chat.group.events (:require [clojure.string :as string] - [legacy.status-im.data-store.chats :as data-store.chats] [oops.core :as oops] [re-frame.core :as rf] - [status-im.common.avatar-picture-picker.view :as avatar-picture-picker])) + [status-im.common.avatar-picture-picker.view :as avatar-picture-picker] + [taoensso.timbre :as log])) (rf/reg-event-fx :group-chat/create - (fn [{:keys [db]} [group-name color image]] + (fn [{:keys [db]} [{:keys [group-name group-color group-image]}]] (let [selected-contacts (:group/selected-contacts db)] {:json-rpc/call [{:method "wakuext_createGroupChatWithMembers" :params [nil group-name (into [] selected-contacts)] @@ -17,25 +17,23 @@ (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))}))) + {:chat-id chat-id + :group-name group-name + :group-color group-color + :group-image group-image}])))}]}))) (rf/reg-event-fx :group-chat/edit - (fn [_ [{:keys [chat-id group-name color image]}]] + (fn [_ [{:keys [chat-id group-name group-color group-image on-success]}]] {:json-rpc/call [{:method "chat_editChat" - :params ["" chat-id group-name (name color) - {:imagePath (when image (string/replace-first image #"file://" "")) + :params ["" chat-id group-name (name group-color) + {:imagePath (when group-image + (string/replace-first group-image #"file://" "")) :x 0 :y 0 :width avatar-picture-picker/crop-size :height avatar-picture-picker/crop-size}] :js-response true - :on-success #(rf/dispatch [:group-chat/edit-success - (data-store.chats/<-rpc-js %)])}]})) + :on-error #(log/error "failed to edit group" {:error %}) + :on-success (fn [response] + (rf/dispatch [:chat-updated response true]) + (when on-success (on-success)))}]})) diff --git a/src/status_im/contexts/chat/group/update/view.cljs b/src/status_im/contexts/chat/group/update/view.cljs new file mode 100644 index 0000000000..4384657f51 --- /dev/null +++ b/src/status_im/contexts/chat/group/update/view.cljs @@ -0,0 +1,23 @@ +(ns status-im.contexts.chat.group.update.view + (:require + [status-im.contexts.chat.group.common.group-edit :as group-edit] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn view + [{:keys [close]}] + (let [chat-id (rf/sub [:get-screen-params :screen/group-update]) + {:keys [chat-name color image]} (rf/sub [:chats/chat-by-id chat-id]) + contacts (rf/sub [:contacts/contacts-by-chat chat-id])] + [group-edit/view + {:default-group-name chat-name + :default-group-color color + :default-group-image image + :contacts contacts + :submit-button-label (i18n/label :t/update-group-chat) + :submit-event :group-chat/edit + :back-button-icon :i/close + :chat-id chat-id + :close close + :on-success close + :editing-group? true}])) diff --git a/src/status_im/contexts/chat/home/new_chat/view.cljs b/src/status_im/contexts/chat/home/new_chat/view.cljs index 8de42fbb39..fee18bf6ed 100644 --- a/src/status_im/contexts/chat/home/new_chat/view.cljs +++ b/src/status_im/contexts/chat/home/new_chat/view.cljs @@ -149,7 +149,7 @@ :on-press (fn [] (if one-contact-selected? (rf/dispatch [:chat.ui/start-chat public-key]) - (rf/dispatch [:open-modal :group-create])))} + (rf/dispatch [:open-modal :screen/group-create])))} (if one-contact-selected? (i18n/label :t/chat-with {:selected-user primary-name}) (i18n/label :t/setup-group-chat))]])])) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index ee8f2f3593..c0ec631fb7 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -7,8 +7,9 @@ [status-im.common.lightbox.view :as lightbox] [status-im.common.pdf-viewer.view :as pdf-viewer] [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.group.create.view :as group.create] + [status-im.contexts.chat.group.details.view :as group.details] + [status-im.contexts.chat.group.update.view :as group.update] [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] [status-im.contexts.chat.home.new-chat.view :as new-chat] @@ -171,17 +172,22 @@ :options {:sheet? true} :component new-chat/view} - {:name :group-add-manage-members + {:name :screen/group-add-manage-members :options {:sheet? true} - :component group-details/add-manage-members} + :component group.details/add-manage-members} - {:name :group-create + {:name :screen/group-create :options {:sheet? true :skip-background? true} - :component group-create/view} + :component group.create/view} - {:name :group-details - :component group-details/group-details} + {:name :screen/group-update + :options {:sheet? true + :skip-background? true} + :component group.update/view} + + {:name :screen/group-details + :component group.details/view} {:name :community-requests-to-join :options {:sheet? true} diff --git a/translations/en.json b/translations/en.json index 997c97bd22..d77ad3f856 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2646,6 +2646,7 @@ "untrustworthy": "Untrustworthy", "update": "Update", "update-account-name": "Update account name", + "update-group-chat": "Update group chat", "update-nickname-title": "Update nickname", "update-to-listen-audio": "Update to latest version to listen to an audio message here!", "update-to-see-image": "Update to latest version to see a nice image here!",