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

[#18313] feat: implement change profile picture (#18440)

This commit is contained in:
Mohsen 2024-02-01 19:45:58 +03:30 committed by GitHub
parent df76881c90
commit 675897c9ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 182 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo/components/drawers/action_drawers/style.cljs
View File

@ -3,9 +3,11 @@
[quo.foundations.colors :as colors]))
(defn divider
[theme]
[theme blur?]
{:border-top-width 1
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
:border-top-color (if blur?
colors/white-opa-5
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:margin-top 8
:margin-bottom 7
:align-items :center

6
src/quo/components/drawers/action_drawers/view.cljs
View File

@ -14,9 +14,9 @@
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn- divider
[theme]
[theme blur?]
[rn/view
{:style (style/divider theme)
{:style (style/divider theme blur?)
:accessible true
:accessibility-label :divider}])
@ -45,7 +45,7 @@
blur?]}]
[:<>
(when add-divider?
[divider theme])
[divider theme blur?])
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container {:sub-label sub-label

16
src/status_im/contexts/onboarding/select_photo/method_menu/view.cljs → src/status_im/common/profile_picture_picker/view.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.contexts.onboarding.select-photo.method-menu.view
(ns status-im.common.profile-picture-picker.view
(:require
["react-native-image-crop-picker" :default image-picker]
[quo.core :as quo]
@ -59,7 +59,7 @@
crop-opts))
(defn view
[update-profile-pic-callback]
[{:keys [update-profile-pic-callback has-picture?]}]
[quo/action-drawer
[[{:icon :i/camera
:accessibility-label :take-photo-button
@ -86,5 +86,15 @@
:on-allowed (fn [] (pick-pic update-profile-pic-callback))
:on-denied (fn []
(log/info
"user has denied permissions to select picture"))}))}]]])
"user has denied permissions to select picture"))}))}
(when has-picture?
{:accessibility-label :remove-profile-picture
:add-divider? true
:danger? true
:blur? true
:icon :i/delete
:label (i18n/label :t/profile-pic-remove)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(update-profile-pic-callback nil))})]]])

6
src/status_im/contexts/onboarding/create_profile/view.cljs
View File

@ -10,10 +10,10 @@
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im.common.profile-picture-picker.view :as profile-picture-picker]
[status-im.common.validation.profile :as profile-validator]
[status-im.constants :as c]
[status-im.contexts.onboarding.create-profile.style :as style]
[status-im.contexts.onboarding.select-photo.method-menu.view :as method-menu]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.responsiveness :as responsiveness]))
@ -144,7 +144,9 @@
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[method-menu/view on-change-profile-pic])
[profile-picture-picker/view
{:update-profile-pic-callback on-change-profile-pic
:has-picture? false}])
:shell? true}]))
:image-picker-props {:profile-picture @profile-pic
:full-name (if (seq @full-name)

52
src/status_im/contexts/profile/edit/header/events.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns status-im.contexts.profile.edit.header.events
(:require [clojure.string :as string]
[status-im.common.profile-picture-picker.view :as profile-picture-picker]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(rf/reg-event-fx :profile/update-local-picture
(fn [{:keys [db]} [images]]
{:db (if images
(assoc-in db [:profile/profile :images] images)
(update db :profile/profile dissoc :images))}))
(rf/reg-event-fx :profile/edit-profile-picture-success
(fn [_ [images]]
{:fx [[:dispatch [:profile/update-local-picture (reverse images)]]
[:dispatch
[:toasts/upsert
{:type :positive
:theme :dark
:text (i18n/label :t/profile-picture-added)}]]]}))
(defn edit-profile-picture
[{:keys [db]} [picture crop-width crop-height]]
(let [key-uid (get-in db [:profile/profile :key-uid])
crop-width (or crop-width profile-picture-picker/crop-size)
crop-height (or crop-height profile-picture-picker/crop-size)
path (string/replace-first picture #"file://" "")]
{:fx [[:json-rpc/call
[{:method "multiaccounts_storeIdentityImage"
:params [key-uid path 0 0 crop-width crop-height]
:on-success [:profile/edit-profile-picture-success]}]]]}))
(rf/reg-event-fx :profile/edit-picture edit-profile-picture)
(rf/reg-event-fx :profile/delete-profile-picture-success
(fn [_]
{:fx [[:dispatch [:profile/update-local-picture nil]]
[:dispatch
[:toasts/upsert
{:type :positive
:theme :dark
:text (i18n/label :t/profile-picture-removed)}]]]}))
(defn delete-profile-picture
[{:keys [db]}]
(let [key-uid (get-in db [:profile/profile :key-uid])]
{:fx [[:json-rpc/call
[{:method "multiaccounts_deleteIdentityImage"
:params [key-uid]
:on-success [:profile/delete-profile-picture-success]}]]]}))
(rf/reg-event-fx :profile/delete-picture delete-profile-picture)

27
src/status_im/contexts/profile/edit/header/events_test.cljs Normal file
View File

@ -0,0 +1,27 @@
(ns status-im.contexts.profile.edit.header.events-test
(:require [cljs.test :refer [deftest is]]
matcher-combinators.test
[status-im.common.profile-picture-picker.view :as profile-picture-picker]
[status-im.contexts.profile.edit.header.events :as sut]))
(deftest edit-picture-test
(let [picture "new-picture"
key-uid "key-uid"
cofx {:db {:profile/profile {:key-uid key-uid}}}
expected {:fx [[:json-rpc/call
[{:method "multiaccounts_storeIdentityImage"
:params [key-uid picture 0 0 profile-picture-picker/crop-size
profile-picture-picker/crop-size]
:on-success [:profile/edit-profile-picture-success]}]]]}]
(is (match? expected
(sut/edit-profile-picture cofx [picture])))))
(deftest delete-picture-test
(let [key-uid "key-uid"
cofx {:db {:profile/profile {:key-uid key-uid}}}
expected {:fx [[:json-rpc/call
[{:method "multiaccounts_deleteIdentityImage"
:params [key-uid]
:on-success [:profile/delete-profile-picture-success]}]]]}]
(is (match? expected
(sut/delete-profile-picture cofx)))))

35
src/status_im/contexts/profile/edit/header/view.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.contexts.profile.edit.header.view
(:require [quo.core :as quo]
[react-native.core :as rn]
[status-im.common.not-implemented :as not-implemented]
[status-im.common.profile-picture-picker.view :as profile-picture-picker]
[status-im.contexts.profile.edit.style :as style]
[status-im.contexts.profile.utils :as profile.utils]
[utils.i18n :as i18n]
@ -9,22 +9,37 @@
(defn view
[]
(let [profile (rf/sub [:profile/profile-with-image])
full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile)]
(let [profile (rf/sub [:profile/profile-with-image])
customization-color (rf/sub [:profile/customization-color])
full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile)
has-picture? (rf/sub [:profile/has-picture])
on-change-profile-pic (fn [picture]
(if picture
(rf/dispatch [:profile/edit-picture picture])
(rf/dispatch [:profile/delete-picture])))]
[rn/view
{:key :edit-profile
:style style/screen-container}
[quo/text-combinations {:title (i18n/label :t/edit-profile)}]
[rn/view style/avatar-wrapper
[quo/user-avatar
{:full-name full-name
:profile-picture profile-picture
:status-indicator? false
:ring? true
:size :big}]
{:full-name full-name
:profile-picture profile-picture
:customization-color customization-color
:status-indicator? false
:ring? true
:size :big}]
[quo/button
{:on-press not-implemented/alert
{: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-button
:icon-only? true
:type :grey

16
src/status_im/contexts/profile/edit/name/events.cljs
View File

@ -2,17 +2,21 @@
(:require [utils.i18n :as i18n]
[utils.re-frame :as rf]))
(rf/reg-event-fx :profile/edit-profile-name-success
(fn [_]
{:fx [[:dispatch [:navigate-back]]
[:dispatch
[:toasts/upsert
{:type :positive
:theme :dark
:text (i18n/label :t/name-updated)}]]]}))
(defn edit-profile-name
[{:keys [db]} [name]]
{:db (assoc-in db [:profile/profile :display-name] name)
:fx [[:json-rpc/call
[{:method "wakuext_setDisplayName"
:params [name]
:on-success (fn []
(rf/dispatch [:navigate-back])
(rf/dispatch [:toasts/upsert
{:type :positive
:theme :dark
:text (i18n/label :t/name-updated)}]))}]]]})
:on-success [:profile/edit-profile-name-success]}]]]})
(rf/reg-event-fx :profile/edit-name edit-profile-name)

2
src/status_im/contexts/profile/edit/name/events_test.cljs
View File

@ -10,6 +10,6 @@
:fx [[:json-rpc/call
[{:method "wakuext_setDisplayName"
:params [name]
:on-success fn?}]]]}]
:on-success [:profile/edit-profile-name-success]}]]]}]
(is (match? expected
(sut/edit-profile-name cofx [new-name])))))

1
src/status_im/contexts/profile/events.cljs
View File

@ -3,6 +3,7 @@
[legacy.status-im.data-store.settings :as data-store.settings]
[native-module.core :as native-module]
[re-frame.core :as re-frame]
[status-im.contexts.profile.edit.header.events]
[status-im.contexts.profile.edit.name.events]
[status-im.contexts.profile.login.events :as profile.login]
[status-im.contexts.profile.rpc :as profile.rpc]

38
src/status_im/integration_test/profile_test.cljs
View File

@ -2,6 +2,8 @@
(:require
[cljs.test :refer [deftest is]]
[day8.re-frame.test :as rf-test]
[legacy.status-im.multiaccounts.logout.core :as logout]
[legacy.status-im.utils.test :as utils.test]
[status-im.contexts.profile.utils :as profile.utils]
[test-helpers.integration :as h]
[utils.re-frame :as rf]))
@ -19,4 +21,38 @@
[:toasts/upsert]
(let [profile (rf/sub [:profile/profile])
display-name (profile.utils/displayed-name profile)]
(is (= new-name display-name))))))))))
(is (= new-name display-name)))
(h/logout)
(rf-test/wait-for [::logout/logout-method]))))))))
(deftest edit-profile-picture-test
(h/log-headline :edit-profile-picture-test)
(let [mock-image "resources/images/mock2/monkey.png"
absolute-path (.resolve utils.test/path mock-image)]
(rf-test/run-test-async
(h/with-app-initialized
(h/with-account
(rf/dispatch [:profile/edit-picture absolute-path 80 80])
(rf-test/wait-for
[:profile/update-local-picture]
(rf-test/wait-for
[:toasts/upsert]
(let [profile (rf/sub [:profile/profile])]
(is (not (nil? (:images profile)))))
(h/logout)
(rf-test/wait-for [::logout/logout-method]))))))))
(deftest delete-profile-picture-test
(h/log-headline :delete-profile-picture-test)
(rf-test/run-test-async
(h/with-app-initialized
(h/with-account
(rf/dispatch [:profile/delete-picture])
(rf-test/wait-for
[:profile/update-local-picture]
(rf-test/wait-for
[:toasts/upsert]
(let [profile (rf/sub [:profile/profile])]
(is (nil? (:image profile))))
(h/logout)
(rf-test/wait-for [::logout/logout-method])))))))

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im",
"repo": "status-go",
"version": "v0.172.10",
"commit-sha1": "69948a7024df8c4537fc4986b39aded22e89179b",
"src-sha256": "0xg32k3f4yy7gwqzh60qdgrgi2zvm8s1w7sisqmcn5vw90jya70w"
"version": "v0.172.11",
"commit-sha1": "9879b1ea7701c40d9f9cdbe67251242452b8d2e3",
"src-sha256": "147yx2dgjdalxpryq558qlmdl2aaa1vfpdyblzdyj3gd5291yck3"
}

2
translations/en.json
View File

@ -1183,6 +1183,8 @@
"profile-details": "Profile details",
"profile-name": "Profile name",
"profile-name-is-too-long": "Profile name is too long",
"profile-picture-added": "Profile picture added",
"profile-picture-removed": "Profile picture removed",
"public-chat": "Public chat",
"public-chats": "Public chats",
"public-group-status": "Public",