Use component-did-mount

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/ui/screens/profile/user/views.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.screens.profile.user.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [re-frame.core :as re-frame]
+            [reagent.core :as reagent]
             [status-im.i18n :as i18n]
             [status-im.ui.components.action-button.styles :as action-button.styles]
             [status-im.ui.components.colors :as colors]
@@ -34,14 +35,16 @@
                   :uppercase? true}
       (i18n/label :t/edit)]]]])
 
-(defn my-profile-edit-toolbar []
+(defn my-profile-edit-toolbar [on-show]
-  [toolbar/toolbar {}
+  (reagent/create-class
+   {:component-did-mount on-show
+    :reagent-render (fn [] [toolbar/toolbar {}
                             nil
                             [toolbar/content-title ""]
                             [toolbar/default-done {:handler             #(re-frame/dispatch [:my-profile/save-profile])
                                                    :icon                :icons/ok
                                                    :icon-opts           {:color colors/blue}
-                          :accessibility-label :done-button}]])
+                                                   :accessibility-label :done-button}]])}))
 
 (def profile-icon-options
   [{:label  (i18n/label :t/image-source-gallery)
@@ -126,20 +129,9 @@
       [react/view styles/my-profile-settings-logout-version
        [react/text @(re-frame/subscribe [:get-app-version])]]]]))
 
-(defview advanced [{:keys [network networks dev-mode?]}]
+(defview advanced-settings [{:keys [network networks dev-mode?]} on-show]
-  (letsubs [advanced? [:get :my-profile/advanced?]
+  (letsubs [{:keys [sharing-usage-data?]} [:get-current-account]]
-            {:keys [sharing-usage-data?]} [:get-current-account]]
+    {:component-did-mount on-show}
-    {:component-will-unmount #(re-frame/dispatch [:set :my-profile/advanced? false])}
-    [react/view
-     [react/touchable-highlight {:on-press #(re-frame/dispatch [:set :my-profile/advanced? (not advanced?)])
-                                 :style    styles/advanced-button}
-      [react/view {:style styles/advanced-button-container}
-       [react/view {:style styles/advanced-button-container-background}
-        [react/view {:style styles/advanced-button-row}
-         [react/text {:style styles/advanced-button-label}
-          (i18n/label :t/wallet-advanced)]
-         [icons/icon (if advanced? :icons/up :icons/down) {:color colors/blue}]]]]]
-     (when advanced?
     [react/view
      (when dev-mode?
        [profile.components/settings-item
@@ -171,27 +163,50 @@
      [profile.components/settings-switch-item
       {:label-kw  :t/dev-mode
        :value     dev-mode?
-          :action-fn #(re-frame/dispatch [:switch-dev-mode %])}]])]))
+       :action-fn #(re-frame/dispatch [:switch-dev-mode %])}]]))
+
+(defview advanced [params on-show]
+  (letsubs [advanced? [:get :my-profile/advanced?]]
+    {:component-will-unmount #(re-frame/dispatch [:set :my-profile/advanced? false])}
+    [react/view
+     [react/touchable-highlight {:on-press #(re-frame/dispatch [:set :my-profile/advanced? (not advanced?)])
+                                 :style    styles/advanced-button}
+      [react/view {:style styles/advanced-button-container}
+       [react/view {:style styles/advanced-button-container-background}
+        [react/view {:style styles/advanced-button-row}
+         [react/text {:style styles/advanced-button-label}
+          (i18n/label :t/wallet-advanced)]
+         [icons/icon (if advanced? :icons/up :icons/down) {:color colors/blue}]]]]]
+     (when advanced?
+       [advanced-settings params on-show])]))
 
 (defview my-profile []
   (letsubs [{:keys [public-key] :as current-account} [:get-current-account]
             editing?        [:get :my-profile/editing?]
             changed-account [:get :my-profile/profile]
             currency        [:wallet/currency]
-            scroll          (atom nil)]
+            scroll          (reagent/atom nil)]
-    (let [shown-account (merge current-account changed-account)]
+    (let [shown-account    (merge current-account changed-account)
+          ;; We scroll on the component once rendered. setTimeout is necessary,
+          ;; likely to allow the animation to finish.
+          on-show-edit     (fn []
+                             (js/setTimeout
+                              #(.scrollTo @scroll {:x 0 :y 0 :animated false})
+                              300))
+          on-show-advanced (fn []
+                             (js/setTimeout
+                              #(.scrollToEnd @scroll {:animated false})
+                              300))]
       [react/view profile.components.styles/profile
        (if editing?
-         [my-profile-edit-toolbar]
+         [my-profile-edit-toolbar on-show-edit]
          [my-profile-toolbar])
        [react/scroll-view {:ref                          #(reset! scroll %)
-                           :keyboard-should-persist-taps :handled
+                           :keyboard-should-persist-taps :handled}
-                           :on-content-size-change       #(when (and scroll @scroll)
-                                                            (.scrollToEnd @scroll))}
         [react/view profile.components.styles/profile-form
          [profile.components/profile-header shown-account editing? true profile-icon-options :my-profile/update-name]]
         [react/view action-button.styles/actions-list
          [share-contact-code current-account public-key]]
         [react/view styles/my-profile-info-container
          [my-profile-settings current-account currency]]
-        [advanced shown-account]]])))
+        [advanced shown-account on-show-advanced]]])))