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

[#19037] feat: new design for manage nickname (#19085)

This commit is contained in:
Mohsen 2024-03-07 15:23:07 +03:00 committed by GitHub
parent 669a232ad9
commit 3145ecd6bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 156 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
(defn validation-name (defn validation-name
[s] [s]
(cond (cond
(or (= s nil) (= s "")) nil (string/blank? s) nil
(string/ends-with? s "-eth") (i18n/label :t/ending-not-allowed {:ending "-eth"}) (string/ends-with? s "-eth") (i18n/label :t/ending-not-allowed {:ending "-eth"})
(string/ends-with? s "_eth") (i18n/label :t/ending-not-allowed {:ending "_eth"}) (string/ends-with? s "_eth") (i18n/label :t/ending-not-allowed {:ending "_eth"})
(string/ends-with? s ".eth") (i18n/label :t/ending-not-allowed {:ending ".eth"}) (string/ends-with? s ".eth") (i18n/label :t/ending-not-allowed {:ending ".eth"})
@ -45,8 +45,17 @@
(defn validation-bio (defn validation-bio
[s] [s]
(cond (cond
(or (= s nil) (= s "")) nil (string/blank? s) nil
(has-emojis? s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)}) (has-emojis? s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
(has-special-characters? s) (i18n/label :t/are-not-allowed (has-special-characters? s) (i18n/label :t/are-not-allowed
{:check (i18n/label :t/special-characters)}) {:check (i18n/label :t/special-characters)})
(bio-too-long? s) (i18n/label :t/bio-is-too-long))) (bio-too-long? s) (i18n/label :t/bio-is-too-long)))
(defn validation-nickname
[s]
(cond
(string/blank? s) nil
(has-emojis? s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
(has-special-characters? s) (i18n/label :t/are-not-allowed
{:check (i18n/label :t/special-characters)})
(name-too-long? s) (i18n/label :t/nickname-is-too-long)))

79
src/status_im/contexts/profile/contact/actions/view.cljs
View File

@ -1,31 +1,58 @@
(ns status-im.contexts.profile.contact.actions.view (ns status-im.contexts.profile.contact.actions.view
(:require [quo.core :as quo] (:require [clojure.string :as string]
[quo.core :as quo]
[react-native.core :as rn]
[status-im.common.not-implemented :as not-implemented] [status-im.common.not-implemented :as not-implemented]
[utils.i18n :as i18n])) [status-im.contexts.profile.contact.add-nickname.view :as add-nickname]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn view (defn view
[] []
[quo/action-drawer (let [{:keys [nickname public-key]} (rf/sub [:contacts/current-contact])
[[{:icon :i/edit on-add-nickname (rn/use-callback #(rf/dispatch [:show-bottom-sheet
:label (i18n/label :t/add-nickname-title) {:content
:on-press not-implemented/alert (fn [] [add-nickname/view])}]))
:accessibility-label :add-nickname} on-remove-nickname (rn/use-callback
{:icon :i/qr-code (fn []
:label (i18n/label :t/show-qr) (rf/dispatch [:hide-bottom-sheet])
:on-press not-implemented/alert (rf/dispatch [:toasts/upsert
:accessibility-label :show-qr-code} {:id :remove-nickname
{:icon :i/share :type :positive
:label (i18n/label :t/share-profile) :text (i18n/label :t/nickname-removed)}])
:on-press not-implemented/alert (rf/dispatch [:contacts/update-nickname public-key ""]))
:accessibility-label :share-profile} [public-key])
{:icon :i/untrustworthy has-nickname? (rn/use-memo (fn [] (not (string/blank? nickname))) [nickname])]
:label (i18n/label :t/mark-untrustworthy) [quo/action-drawer
:on-press not-implemented/alert [[{:icon :i/edit
:accessibility-label :mark-untrustworthy :label (if has-nickname?
:add-divider? true (i18n/label :t/edit-nickname)
:danger? true} (i18n/label :t/add-nickname-title))
{:icon :i/block :on-press on-add-nickname
:label (i18n/label :t/block-user) :accessibility-label (if nickname :edit-nickname :add-nickname)}
:on-press not-implemented/alert {:icon :i/qr-code
:accessibility-label :block-user :label (i18n/label :t/show-qr)
:danger? true}]]]) :on-press not-implemented/alert
:accessibility-label :show-qr-code}
{:icon :i/share
:label (i18n/label :t/share-profile)
:on-press not-implemented/alert
:accessibility-label :share-profile}
(when has-nickname?
{:icon :i/delete
:label (i18n/label :t/remove-nickname)
:on-press on-remove-nickname
:add-divider? true
:accessibility-label :remove-nickname
:danger? true})
{:icon :i/untrustworthy
:label (i18n/label :t/mark-untrustworthy)
:on-press not-implemented/alert
:accessibility-label :mark-untrustworthy
:add-divider? (when-not has-nickname? true)
:danger? true}
{:icon :i/block
:label (i18n/label :t/block-user)
:on-press not-implemented/alert
:accessibility-label :block-user
:danger? true}]]]))

6
src/status_im/contexts/profile/contact/add_nickname/style.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns status-im.contexts.profile.contact.add-nickname.style)
(def input-wrapper
{:padding-vertical 8
:padding-horizontal 20
:gap 8})

81
src/status_im/contexts/profile/contact/add_nickname/view.cljs Normal file
View File

@ -0,0 +1,81 @@
(ns status-im.contexts.profile.contact.add-nickname.view
(:require [clojure.string :as string]
[quo.core :as quo]
[react-native.core :as rn]
[status-im.common.validation.profile :as profile-validator]
[status-im.constants :as constants]
[status-im.contexts.profile.contact.add-nickname.style :as style]
[status-im.contexts.profile.utils :as profile.utils]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn view
[]
(let [{:keys [public-key primary-name nickname customization-color]
:as profile} (rf/sub [:contacts/current-contact])
;; TODO(@mohsen): remove :blue, https://github.com/status-im/status-mobile/issues/18733
customization-color (or customization-color :blue)
full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile)
[unsaved-nickname set-unsaved-nickname] (rn/use-state nickname)
[error-msg set-error-msg] (rn/use-state nil)
validate-nickname (rn/use-callback
(debounce/debounce
(fn [name]
(set-error-msg
(profile-validator/validation-nickname name)))
300))
on-cancel (rn/use-callback #(rf/dispatch [:hide-bottom-sheet]))
on-nickname-change (rn/use-callback (fn [text]
(set-unsaved-nickname text)
(validate-nickname text)))
on-nickname-submit (rn/use-callback
(fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert
{:id :add-nickname
:type :positive
:text (i18n/label
(if (string/blank? nickname)
:t/nickname-added
:t/nickname-updated)
{:primary-name primary-name})}])
(rf/dispatch [:contacts/update-nickname public-key
(string/trim unsaved-nickname)]))
[public-key unsaved-nickname])]
[:<>
[quo/drawer-top
{:type :context-tag
:context-tag-type :default
:title (i18n/label :t/add-nickname-title)
:full-name full-name
:profile-picture profile-picture
:customization-color customization-color}]
[rn/view {:style style/input-wrapper}
[quo/input
{:type :text
:char-limit constants/profile-name-max-length
:max-length constants/profile-name-max-length
:auto-focus true
:default-value unsaved-nickname
:error? (not (string/blank? error-msg))
:label (i18n/label :t/nickname)
:on-change-text on-nickname-change}
:on-submit-editing on-nickname-submit]
[quo/info-message
{:icon :i/info
:size :default
:type (if-not (string/blank? error-msg) :error :default)}
(if-not (string/blank? error-msg)
error-msg
(i18n/label :t/nickname-visible-to-you))]]
[quo/bottom-actions
{:actions :two-actions
:button-one-label (i18n/label :t/add-nickname-title)
:button-one-props {:disabled? (or (string/blank? unsaved-nickname)
(not (string/blank? error-msg)))
:on-press on-nickname-submit}
:button-two-label (i18n/label :t/cancel)
:button-two-props {:type :grey
:on-press on-cancel}}]]))

2
src/status_im/contexts/profile/contact/view.cljs
View File

@ -21,7 +21,7 @@
{:navigate-back? true {:navigate-back? true
:height 148 :height 148
:on-scroll #(reanimated/set-shared-value scroll-y %) :on-scroll #(reanimated/set-shared-value scroll-y %)
;TODO remove colors/primary-50 when #18733 merged. ;; TODO(@mohsen): remove colors/primary-50, https://github.com/status-im/status-mobile/issues/18733
:cover-color (or customization-color colors/primary-50) :cover-color (or customization-color colors/primary-50)
:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:page-nav-props {:right-side [{:icon-name :i/options :page-nav-props {:right-side [{:icon-name :i/options

4
translations/en.json
View File

@ -1652,12 +1652,16 @@
"page-would-like-to-use-camera": "would like to use your camera", "page-would-like-to-use-camera": "would like to use your camera",
"page-camera-request-blocked": "camera requests blocked. To enable camera requests go to Settings", "page-camera-request-blocked": "camera requests blocked. To enable camera requests go to Settings",
"nickname": "Nickname", "nickname": "Nickname",
"nickname-is-too-long": "Nickname is too long",
"add-nickname": "Add a nickname (optional)", "add-nickname": "Add a nickname (optional)",
"edit-nickname": "Edit nickname", "edit-nickname": "Edit nickname",
"add-nickname-title": "Add nickname", "add-nickname-title": "Add nickname",
"nickname-visible-to-you": "Nickname will only be visible to you", "nickname-visible-to-you": "Nickname will only be visible to you",
"type-nickname": "Type nickname", "type-nickname": "Type nickname",
"remove-nickname": "Remove nickname", "remove-nickname": "Remove nickname",
"nickname-removed": "Nickname removed",
"nickname-added": "Nickname for {{primary-name}} added",
"nickname-updated": "Nickname for {{primary-name}} updated",
"set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}", "set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}",
"remove-nickname-toast": "You have removed {{secondary-name}}'s nickname", "remove-nickname-toast": "You have removed {{secondary-name}}'s nickname",
"nickname-description": "Nicknames help you identify others in Status.\nOnly you can see the nicknames you’ve added", "nickname-description": "Nicknames help you identify others in Status.\nOnly you can see the nicknames you’ve added",