From 08c132c8a6f9209fae2fc08dac7cffe29c01e097 Mon Sep 17 00:00:00 2001
From: janherich <jan.herich@gmail.com>
Date: Wed, 19 Sep 2018 11:19:14 +0200
Subject: [PATCH] Edit username on desktop

Signed-off-by: yenda <eric@status.im>
---
 .../desktop/main/tabs/profile/styles.cljs     | 12 ++++
 .../desktop/main/tabs/profile/views.cljs      | 56 ++++++++++++-------
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
index 2dcaab8ee3..5f03aaa413 100644
--- a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
+++ b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
@@ -31,6 +31,11 @@
    :align-items     :center
    :flex            1})
 
+(def profile-edit
+  {:margin-top         24
+   :padding-horizontal 24
+   :align-items        :flex-end})
+
 (def profile-photo
   {:border-radius 100
    :width         100
@@ -39,6 +44,13 @@
 (def profile-user-name
   {:font-size   18})
 
+(def profile-editing-user-name
+  (merge profile-user-name
+         {:height           20
+          :width            80
+          :background-color colors/gray-lighter
+          :align-items      :flex-end}))
+
 (def share-contact-code
   {:flex-direction    :row
    :justify-content   :space-between
diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
index 1152ad559a..e737b456b2 100644
--- a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
+++ b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
@@ -15,14 +15,22 @@
             [status-im.ui.screens.desktop.main.tabs.profile.styles :as styles]
             [status-im.ui.screens.profile.user.views :as profile]))
 
-(defn profile-badge [{:keys [name photo-path]}]
+(defn profile-badge [{:keys [name photo-path]} editing?]
   [react/view styles/profile-badge
    [react/image {:source {:uri photo-path}
                  :style  styles/profile-photo}]
-   [react/text {:style           styles/profile-user-name
-                :font           :medium
-                :number-of-lines 1}
-    name]])
+   (if editing?
+     [react/text-input {:default-value name
+                        :placeholder   ""
+                        :auto-focus    true
+                        :font          :medium
+                        :style         styles/profile-editing-user-name
+                        :on-change     #(re-frame/dispatch [:my-profile/update-name
+                                                            (.-text (.-nativeEvent %))])}]
+     [react/text {:style           styles/profile-user-name
+                  :font           :medium
+                  :number-of-lines 1}
+      name])])
 
 (views/defview copied-tooltip [opacity]
   (views/letsubs []
@@ -85,22 +93,30 @@
      [vector-icons/icon :icons/qr {:style {:tint-color colors/blue}}]]]])
 
 (views/defview profile [user]
-  (views/letsubs [current-view-id [:get :view-id]]
+  (views/letsubs [current-view-id [:get :view-id]
+                  editing?        [:get :my-profile/editing?]] ;; TODO janherich: refactor my-profile, unnecessary complicated structure in db (could be just `:staged-name`/`:editing?` fields in account map) and horrible way to access it woth `:get`/`:set` subs/events
     (let [adv-settings-open? (= current-view-id :advanced-settings)]
-      [react/view styles/profile-view
-       [profile-badge user]
-       [share-contact-code]
-       [react/touchable-highlight {:style  (styles/profile-row adv-settings-open?)
-                                   :on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])}
-        [react/view {:style styles/adv-settings}
-         [react/text {:style (styles/profile-row-text colors/black)
-                      :font  (if adv-settings-open? :medium :default)}
-          (i18n/label :t/advanced-settings)]
-         [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]]
-       [react/view {:style (styles/profile-row false)}
-        [react/touchable-highlight {:on-press #(re-frame/dispatch [:accounts.logout.ui/logout-confirmed])}
-         [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]]
-        [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])))
+      [react/view
+       [react/view {:style styles/profile-edit}
+        [react/touchable-highlight {:on-press #(re-frame/dispatch (if editing?
+                                                                    [:my-profile/save-profile]
+                                                                    [:my-profile/start-editing-profile]))}
+         [react/text {:style {:color colors/blue}}
+          (i18n/label (if editing? :t/done :t/edit))]]]
+       [react/view styles/profile-view
+        [profile-badge user editing?]
+        [share-contact-code]
+        [react/touchable-highlight {:style  (styles/profile-row adv-settings-open?)
+                                    :on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])}
+         [react/view {:style styles/adv-settings}
+          [react/text {:style (styles/profile-row-text colors/black)
+                       :font  (if adv-settings-open? :medium :default)}
+           (i18n/label :t/advanced-settings)]
+          [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]]
+        [react/view {:style (styles/profile-row false)}
+         [react/touchable-highlight {:on-press #(re-frame/dispatch [:accounts.logout.ui/logout-confirmed])}
+          [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]]
+         [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]]])))
 
 (views/defview profile-data []
   (views/letsubs