Include a 'My Profile' button in the Start New Chat dialogue

Signed-off-by: Brian Sztamfater <brian@status.im>

src/status_im/ui/screens/add_new/new_chat/views.cljs

@@ -20,7 +20,10 @@
             [status-im.ethereum.ens :as ens]
             [quo.platform :as platform]
             [status-im.transport.filters.core :as filters]
-            [status-im.utils.identicon :as identicon])
+            [status-im.utils.identicon :as identicon]
+            [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
+            [status-im.ui.components.animation :as animation]
+            [status-im.ui.screens.chat.photos :as photos])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- render-row [row]
@@ -85,89 +88,151 @@
         is-ens? (ens/valid-eth-name-prefix? username)]
     (or is-chat-key? is-ens?)))
 
+(defn translate-anim [translate-y-value translate-y-anim-value]
+  (animation/start
+   (animation/timing translate-y-anim-value {:toValue         translate-y-value
+                                             :duration        200
+                                             :useNativeDriver true})))
 (views/defview new-chat []
   (views/letsubs [contacts      [:contacts/active]
                   {:keys [state ens-name public-key error]} [:contacts/new-identity]
-                  search-value (reagent/atom "")]
+                  search-value (reagent/atom "")
-    [react/view {:style {:flex 1}}
+                  account @(re-frame/subscribe [:multiaccount])
-     [topbar/topbar
+                  on-share #(re-frame/dispatch [:show-popover
-      {:title  (i18n/label :t/new-chat)
+                                                {:view     :share-chat-key
-       :modal? true
+                                                 :address  (account :public-key)
-       :right-accessories
+                                                 :ens-name (account :preferred-name)}])
-       [{:icon                :qr
+                  my-profile-button-anim-y (animation/create-value 0)
-         :accessibility-label :scan-contact-code-button
+                  keyboard-show-listener (atom nil)
-         :on-press            #(re-frame/dispatch [::qr-scanner/scan-code
+                  keyboard-hide-listener (atom nil)
-                                                   {:title   (i18n/label :t/new-chat)
+                  on-keyboard-show (fn []
-                                                    :handler :contact/qr-code-scanned}])}]}]
+                                     ;; 42 is the bottom position so we translate it by 32 pts to leave 10 as margin
-     [react/view {:flex-direction :row
+                                     (translate-anim 32 my-profile-button-anim-y))
-                  :padding        16}
+                  on-keyboard-hide (fn []
-      [react/view {:flex          1}
+                                     (translate-anim 0 my-profile-button-anim-y))
-       [quo/text-input
+                  keyboard-show-event (if platform/android? "keyboardDidShow" "keyboardWillShow")
-        {:on-change-text
+                  keyboard-hide-event (if platform/android? "keyboardDidHide" "keyboardWillHide")]
-         #(do
+    {:component-did-mount
-            (reset! search-value %)
+     (fn [_]
-            (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
+       (reset! keyboard-show-listener (.addListener react/keyboard keyboard-show-event on-keyboard-show))
-            (debounce/debounce-and-dispatch [:new-chat/set-new-identity %] 600))
+       (reset! keyboard-hide-listener (.addListener react/keyboard keyboard-hide-event on-keyboard-hide)))
-         :on-submit-editing
+     :component-will-unmount
-         #(when (= state :valid)
+     (fn []
-            (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted false nil] 3000))
+       (some-> ^js @keyboard-show-listener .remove)
-         :placeholder         (i18n/label :t/enter-contact-code)
+       (some-> ^js @keyboard-hide-listener .remove))}
-         :show-cancel         false
+    [kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
-         :accessibility-label :enter-contact-code-input
+     [react/view {:style {:flex 1}}
-         :auto-capitalize     :none
+      [topbar/topbar
-         :return-key-type     :go
+       {:title  (i18n/label :t/new-chat)
-         :monospace           true}]]]
+        :modal? true
-     [react/view (if (and
+        :right-accessories
-                      (= (count contacts) 0)
+        [{:icon                :qr
-                      (= @search-value ""))
+          :accessibility-label :scan-contact-code-button
-                   {:flex 1}
+          :on-press            #(re-frame/dispatch [::qr-scanner/scan-code
-                   {:justify-content :flex-end})
+                                                    {:title   (i18n/label :t/new-chat)
-      (if (and
+                                                     :handler :contact/qr-code-scanned}])}]}]
-           (= (count contacts) 0)
+      [react/view {:flex-direction :row
-           (= @search-value ""))
+                   :padding 16}
-        [react/view {:flex 1
+       [react/view {:flex 1}
-                     :align-items :center
+        [quo/text-input
-                     :padding-horizontal 58
+         {:on-change-text
-                     :padding-top 160}
+          #(do
-         [quo/text {:size  :base
+             (reset! search-value %)
-                    :align :center
+             (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
-                    :color :secondary}
+             (debounce/debounce-and-dispatch [:new-chat/set-new-identity %] 600))
-          (i18n/label :t/you-dont-have-contacts-invite-friends)]
+          :on-submit-editing
-         [invite/button]]
+          #(when (= state :valid)
-        [list/flat-list {:data                      (filter-contacts @search-value contacts)
+             (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted false nil] 3000))
-                         :key-fn                    :address
+          :placeholder         (i18n/label :t/enter-contact-code)
-                         :render-fn                 render-row
+          :show-cancel         false
-                         :enableEmptySections       true
+          :accessibility-label :enter-contact-code-input
-                         :keyboardShouldPersistTaps :always}])]
+          :auto-capitalize     :none
-     (when-not (= @search-value "")
+          :return-key-type     :go
-       [react/view
+          :monospace           true
-        [quo/text {:style {:margin-horizontal 16
+          :auto-correct        false}]]]
-                           :margin-vertical 14}
+      [react/scroll-view {:style {:flex 1}
-                   :size  :base
+                          :keyboard-dismiss-mode :on-drag
-                   :align :left
+                          :keyboard-should-persist-taps :handled}
-                   :color :secondary}
+       [react/view (when (and
-         (i18n/label :t/non-contacts)]
+                          (= (count contacts) 0)
-        (when (and (= state :searching)
+                          (= @search-value ""))
-                   (is-valid-username? @search-value))
+                     {:flex 1})
-          [rn/activity-indicator {:color colors/gray
+        (if (and
-                                  :size  (if platform/android? :large :small)}])
+             (= (count contacts) 0)
-        (if (= state :valid)
+             (= @search-value ""))
-          [quo/list-item
+          [react/view {:flex 1
-           (merge
+                       :align-items :center
-            {:title    (or ens-name (gfycat/generate-gfy public-key))
+                       :padding-horizontal 58
-             :subtitle (if ens-name (gfycat/generate-gfy public-key) (utils/get-shortened-address public-key))
+                       :padding-top 160}
-             :icon     [chat-icon/contact-icon-contacts-tab
+           [quo/text {:size  :base
-                        (identicon/identicon public-key)]
+                      :align :center
-             :on-press #(re-frame/dispatch [:chat.ui/start-chat public-key])}
+                      :color :secondary}
-            (when ens-name {:subtitle-secondary public-key}))]
+            (i18n/label :t/you-dont-have-contacts-invite-friends)]
-          [quo/text {:style {:margin-horizontal 16}
+           [invite/button]]
+          [list/flat-list {:data      (filter-contacts @search-value contacts)
+                           :key-fn    :address
+                           :render-fn render-row}])]
+       (when-not (= @search-value "")
+         [react/view
+          [quo/text {:style {:margin-horizontal 16
+                             :margin-vertical 14}
                      :size  :base
-                     :align :center
+                     :align :left
                      :color :secondary}
-           (if (is-valid-username? @search-value)
+           (i18n/label :t/non-contacts)]
-             (when (= state :error)
+          (when (and (= state :searching)
-               (get-validation-label error))
+                     (is-valid-username? @search-value))
-             (i18n/label :t/invalid-username-or-key))])])]))
+            [rn/activity-indicator {:color colors/gray
+                                    :size  (if platform/android? :large :small)}])
+          (if (= state :valid)
+            [quo/list-item
+             (merge
+              {:title    (or ens-name (gfycat/generate-gfy public-key))
+               :subtitle (if ens-name (gfycat/generate-gfy public-key) (utils/get-shortened-address public-key))
+               :icon     [chat-icon/contact-icon-contacts-tab
+                          (identicon/identicon public-key)]
+               :on-press #(re-frame/dispatch [:chat.ui/start-chat public-key])}
+              (when ens-name {:subtitle-secondary public-key}))]
+            [quo/text {:style {:margin-horizontal 16}
+                       :size  :base
+                       :align :center
+                       :color :secondary}
+             (if (is-valid-username? @search-value)
+               (when (= state :error)
+                 (get-validation-label error))
+               (i18n/label :t/invalid-username-or-key))])])]
+      (when-not (and
+                 (= (count contacts) 0)
+                 (= @search-value ""))
+        [react/animated-view {:style {:height 36
+                                      :width 124
+                                      :position :absolute
+                                      :bottom 42
+                                      :transform [{:translateY my-profile-button-anim-y}]
+                                      :align-self :center}}
+         [react/touchable-opacity {:style {:padding-horizontal 2
+                                           :height 36
+                                           :width 124
+                                           :background-color colors/blue
+                                           :border-radius 18
+                                           :elevation 4
+                                           :shadow-offset {:width 0 :height 4}
+                                           :shadow-color "rgba(0, 34, 51, 0.16)"
+                                           :shadow-radius 4
+                                           :shadow-opacity 1}
+                                   :on-press on-share}
+          [react/view {:style {:flex 1
+                               :flex-direction :row
+                               :align-items :center}}
+           [photos/photo
+            (multiaccounts/displayed-photo account)
+            {:size 32
+             :accessibility-label :current-account-photo}]
+           [quo/text {:size  :base
+                      :weight :medium
+                      :color :inverse
+                      :style {:margin-left 6}}
+            (i18n/label :t/my-profile)]]]])]]))
 
 (defn- nickname-input [entered-nickname]
   [quo/text-input

translations/en.json

@@ -1515,5 +1515,6 @@
     "not-found": "Not found",
     "activity": "Activity",
     "reject-and-delete": "Reject and delete",
-    "accept-and-add": "Accept and add"
+    "accept-and-add": "Accept and add",
+    "my-profile": "My profile"
 }