From 94818906247e607491f1c41f3f719d8e488eb242 Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Mon, 24 Jun 2024 20:08:23 -0300 Subject: [PATCH] fix(profile)_: Truncate profile name in settings screen (#20483) After migrating from v1 to v2, some user names may be too long to fit in some devices in the "Settings > Edit Profile > Name" setting. The solution was to truncate in the UI the name to the max valid length in v2, which is 20 characters. Other small improvements: - Don't use entire Clojure maps as the :key in React. This is known to be slow because it's expensive for Clojure to generally transform a data structure into its string representation. - Don't find the last item of a list using last and an equality between two maps. This will force each iteration to call last, which in turn will iterate over the entire list of items (we can think of the Clojure lazy seq as a linked list). Instead, we now cache the index outside the loop and do a number comparison. - Don't pass entire props to style functions when not needed because destructuring has a cost. I wouldn't personally worry about this 99% of the time, but when there's only argument like in this PR where we were passing a single blur? argument, it's preferable to not use a map. --- .../settings/category/settings/view.cljs | 25 +++++++++++-------- .../components/settings/category/style.cljs | 6 ++--- .../settings/settings_item/view.cljs | 3 ++- .../contexts/profile/edit/list_items.cljs | 3 ++- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/quo/components/settings/category/settings/view.cljs b/src/quo/components/settings/category/settings/view.cljs index f5a8198b3c..566b1147ee 100644 --- a/src/quo/components/settings/category/settings/view.cljs +++ b/src/quo/components/settings/category/settings/view.cljs @@ -7,20 +7,23 @@ [react-native.core :as rn])) (defn settings-category - [{:keys [label data container-style] :as props}] - (let [theme (quo.theme/use-theme) - settings-item (filter identity data)] + [{:keys [label data blur? container-style]}] + (let [theme (quo.theme/use-theme) + settings-items (remove nil? data) + last-index (dec (count settings-items))] [rn/view {:style (merge (style/container label) container-style)} (when label [text/text {:weight :medium :size :paragraph-2 - :style (style/label props theme)} + :style (style/label blur? theme)} label]) - [rn/view {:style (style/settings-items props theme)} - (for [item settings-item] - ^{:key item} - [:<> - [settings-item/view item] - (when-not (= item (last settings-item)) - [rn/view {:style (style/settings-separator props theme)}])])]])) + [rn/view {:style (style/settings-items blur? theme)} + (map-indexed + (fn [index item] + ^{:key (str label (:title item))} + [:<> + [settings-item/view item] + (when-not (= last-index index) + [rn/view {:style (style/settings-separator blur? theme)}])]) + settings-items)]])) diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index ade6924d91..ee59a5f51b 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -11,7 +11,7 @@ :padding-bottom 8}) (defn settings-items - [{:keys [blur?]} theme] + [blur? theme] {:border-radius 16 :background-color (if blur? colors/white-opa-5 @@ -22,7 +22,7 @@ (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (defn label - [{:keys [blur?]} theme] + [blur? theme] {:margin-bottom 12 :color (if blur? colors/white-opa-40 @@ -32,7 +32,7 @@ {:margin-top 12}) (defn settings-separator - [{:keys [blur?]} theme] + [blur? theme] {:height 1 :background-color (if blur? colors/white-opa-5 diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 964342d48b..4f800748ba 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -116,7 +116,8 @@ [rn/view {:style (style/left-container (:image props))} [text/text {:weight :medium - :style {:color (when blur? colors/white)}} title] + :style {:color (when blur? colors/white)}} + title] [description-component props] [tag-component props]]] [rn/view {:style (style/sub-container (:alignment action-props))} diff --git a/src/status_im/contexts/profile/edit/list_items.cljs b/src/status_im/contexts/profile/edit/list_items.cljs index 8bc15bb0a2..ace8f43ce7 100644 --- a/src/status_im/contexts/profile/edit/list_items.cljs +++ b/src/status_im/contexts/profile/edit/list_items.cljs @@ -3,6 +3,7 @@ [quo.foundations.colors :as colors] [status-im.common.not-implemented :as not-implemented] [status-im.config :as config] + [status-im.constants :as constants] [status-im.contexts.profile.edit.style :as style] [status-im.contexts.profile.utils :as profile.utils] [utils.i18n :as i18n] @@ -19,7 +20,7 @@ :on-press #(rf/dispatch [:open-modal :edit-name]) :blur? true :label :text - :label-props full-name + :label-props (utils/truncate-str full-name constants/profile-name-max-length) :action :arrow :container-style style/item-container} {:title (i18n/label :t/bio)