Skip to content

Commit 0e69be1

Browse files
mohsen-ghafourimohsen-ghafouri
committed
[#19037] feat: new design for manage nickname
1 parent f7498ef commit 0e69be1

File tree

5 files changed

+151
-26
lines changed

5 files changed

+151
-26
lines changed

‎src/status_im/common/validation/profile.cljs

+9
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,12 @@
5050
(has-special-characters? s) (i18n/label :t/are-not-allowed
5151
{:check (i18n/label :t/special-characters)})
5252
(bio-too-long? s) (i18n/label :t/bio-is-too-long)))
53+
54+
(defn validation-nickname
55+
[s]
56+
(cond
57+
(or (= s nil) (= s "")) nil
58+
(has-emojis? s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
59+
(has-special-characters? s) (i18n/label :t/are-not-allowed
60+
{:check (i18n/label :t/special-characters)})
61+
(name-too-long? s) (i18n/label :t/nickname-is-too-long)))

‎src/status_im/contexts/profile/contact/actions/view.cljs

+53-26
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,58 @@
11
(ns status-im.contexts.profile.contact.actions.view
2-
(:require [quo.core :as quo]
2+
(:require [clojure.string :as string]
3+
[quo.core :as quo]
4+
[react-native.core :as rn]
35
[status-im.common.not-implemented :as not-implemented]
4-
[utils.i18n :as i18n]))
6+
[status-im.contexts.profile.contact.add-nickname.view :as add-nickname]
7+
[utils.i18n :as i18n]
8+
[utils.re-frame :as rf]))
59

610
(defn view
711
[]
8-
[quo/action-drawer
9-
[[{:icon :i/edit
10-
:label (i18n/label :t/add-nickname-title)
11-
:on-press not-implemented/alert
12-
:accessibility-label :add-nickname}
13-
{:icon :i/qr-code
14-
:label (i18n/label :t/show-qr)
15-
:on-press not-implemented/alert
16-
:accessibility-label :show-qr-code}
17-
{:icon :i/share
18-
:label (i18n/label :t/share-profile)
19-
:on-press not-implemented/alert
20-
:accessibility-label :share-profile}
21-
{:icon :i/untrustworthy
22-
:label (i18n/label :t/mark-untrustworthy)
23-
:on-press not-implemented/alert
24-
:accessibility-label :mark-untrustworthy
25-
:add-divider? true
26-
:danger? true}
27-
{:icon :i/block
28-
:label (i18n/label :t/block-user)
29-
:on-press not-implemented/alert
30-
:accessibility-label :block-user
31-
:danger? true}]]])
12+
(let [{:keys [nickname public-key]} (rf/sub [:contacts/current-contact])
13+
on-add-nickname (rn/use-callback #(rf/dispatch [:show-bottom-sheet
14+
{:content
15+
(fn [] [add-nickname/view])}]))
16+
on-remove-nickname (rn/use-callback
17+
(fn []
18+
(rf/dispatch [:hide-bottom-sheet])
19+
(rf/dispatch [:toasts/upsert
20+
{:id :remove-nickname
21+
:type :positive
22+
:text (i18n/label :t/nickname-removed)}])
23+
(rf/dispatch [:contacts/update-nickname public-key ""]))
24+
[public-key])
25+
has-nickname? (rn/use-memo (fn [] (not (string/blank? nickname))) [nickname])]
26+
[quo/action-drawer
27+
[[{:icon :i/edit
28+
:label (if has-nickname?
29+
(i18n/label :t/edit-nickname)
30+
(i18n/label :t/add-nickname-title))
31+
:on-press on-add-nickname
32+
:accessibility-label (if nickname :edit-nickname :add-nickname)}
33+
{:icon :i/qr-code
34+
:label (i18n/label :t/show-qr)
35+
:on-press not-implemented/alert
36+
:accessibility-label :show-qr-code}
37+
{:icon :i/share
38+
:label (i18n/label :t/share-profile)
39+
:on-press not-implemented/alert
40+
:accessibility-label :share-profile}
41+
(when has-nickname?
42+
{:icon :i/delete
43+
:label (i18n/label :t/remove-nickname)
44+
:on-press on-remove-nickname
45+
:add-divider? true
46+
:accessibility-label :remove-nickname
47+
:danger? true})
48+
{:icon :i/untrustworthy
49+
:label (i18n/label :t/mark-untrustworthy)
50+
:on-press not-implemented/alert
51+
:accessibility-label :mark-untrustworthy
52+
:add-divider? (when (not has-nickname?) true)
53+
:danger? true}
54+
{:icon :i/block
55+
:label (i18n/label :t/block-user)
56+
:on-press not-implemented/alert
57+
:accessibility-label :block-user
58+
:danger? true}]]]))

‎src/status_im/contexts/profile/contact/add_nickname/style.cljs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
(ns status-im.contexts.profile.contact.add-nickname.style)
2+
3+
(def input-wrapper
4+
{:padding-vertical 8
5+
:padding-horizontal 20
6+
:gap 8})

‎src/status_im/contexts/profile/contact/add_nickname/view.cljs

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
(ns status-im.contexts.profile.contact.add-nickname.view
2+
(:require [clojure.string :as string]
3+
[quo.components.info.info-message :as info-message]
4+
[quo.core :as quo]
5+
[react-native.core :as rn]
6+
[status-im.common.validation.profile :as profile-validator]
7+
[status-im.constants :as constants]
8+
[status-im.contexts.profile.contact.add-nickname.style :as style]
9+
[status-im.contexts.profile.utils :as profile.utils]
10+
[utils.debounce :as debounce]
11+
[utils.i18n :as i18n]
12+
[utils.re-frame :as rf]))
13+
14+
(defn view
15+
[]
16+
(let [{:keys [public-key primary-name nickname customization-color]
17+
:as profile} (rf/sub [:contacts/current-contact])
18+
;; TODO: remove :blue when #18733 merged.
19+
customization-color (or customization-color :blue)
20+
full-name (profile.utils/displayed-name profile)
21+
profile-picture (profile.utils/photo profile)
22+
[unsaved-nickname set-unsaved-nickname] (rn/use-state nickname)
23+
[error-msg set-error-msg] (rn/use-state nil)
24+
validate-nickname (rn/use-callback
25+
(debounce/debounce
26+
(fn [name]
27+
(set-error-msg
28+
(profile-validator/validation-nickname name)))
29+
300))
30+
on-cancel (rn/use-callback #(rf/dispatch [:hide-bottom-sheet]))
31+
on-nickname-change (rn/use-callback (fn [text]
32+
(set-unsaved-nickname text)
33+
(validate-nickname text)))
34+
on-nickname-submit (rn/use-callback
35+
(fn []
36+
(rf/dispatch [:hide-bottom-sheet])
37+
(rf/dispatch [:toasts/upsert
38+
{:id :add-nickname
39+
:type :positive
40+
:text (i18n/label
41+
:t/nickname-added
42+
{:primary-name primary-name})}])
43+
(rf/dispatch [:contacts/update-nickname public-key
44+
(string/trim unsaved-nickname)]))
45+
[public-key unsaved-nickname])]
46+
[:<>
47+
[quo/drawer-top
48+
{:type :context-tag
49+
:context-tag-type :default
50+
:title (i18n/label :t/add-nickname-title)
51+
:full-name full-name
52+
:profile-picture profile-picture
53+
:customization-color customization-color}]
54+
[rn/view {:style style/input-wrapper}
55+
[quo/input
56+
{:type :text
57+
:char-limit constants/profile-name-max-length
58+
:max-length constants/profile-name-max-length
59+
:auto-focus true
60+
:default-value unsaved-nickname
61+
:error? (not (string/blank? error-msg))
62+
:label (i18n/label :t/nickname)
63+
:on-change-text on-nickname-change}
64+
:on-submit-editing on-nickname-submit]
65+
[info-message/info-message
66+
{:icon :i/info
67+
:size :default
68+
:type (if (not (string/blank? error-msg)) :error :default)}
69+
(if (not (string/blank? error-msg))
70+
error-msg
71+
(i18n/label :t/nickname-visible-to-you))]]
72+
[quo/bottom-actions
73+
{:actions :two-actions
74+
:button-one-label (i18n/label :t/add-nickname-title)
75+
:button-one-props {:disabled? (or (string/blank? unsaved-nickname)
76+
(not (string/blank? error-msg)))
77+
:on-press on-nickname-submit}
78+
:button-two-label (i18n/label :t/cancel)
79+
:button-two-props {:type :grey
80+
:on-press on-cancel}}]]))

‎translations/en.json

+3
Original file line numberDiff line numberDiff line change
@@ -1661,12 +1661,15 @@
16611661
"page-would-like-to-use-camera": "would like to use your camera",
16621662
"page-camera-request-blocked": "camera requests blocked. To enable camera requests go to Settings",
16631663
"nickname": "Nickname",
1664+
"nickname-is-too-long": "Nickname is too long",
16641665
"add-nickname": "Add a nickname (optional)",
16651666
"edit-nickname": "Edit nickname",
16661667
"add-nickname-title": "Add nickname",
16671668
"nickname-visible-to-you": "Nickname will only be visible to you",
16681669
"type-nickname": "Type nickname",
16691670
"remove-nickname": "Remove nickname",
1671+
"nickname-removed": "Nickname removed",
1672+
"nickname-added": "Nickname for {{primary-name}} added",
16701673
"set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}",
16711674
"remove-nickname-toast": "You have removed {{secondary-name}}'s nickname",
16721675
"nickname-description": "Nicknames help you identify others in Status.\nOnly you can see the nicknames you’ve added",

0 commit comments

Comments
 (0)