[15569] Select recent tab on messages home when double tapping messages icon (#15604)

src/status_im/events.cljs

@@ -59,7 +59,8 @@
     status-im2.contexts.shell.events
     status-im2.contexts.onboarding.events
     status-im.chat.models.gaps
-    [status-im2.navigation.events :as navigation]))
+    [status-im2.navigation.events :as navigation]
+    status-im2.contexts.chat.home.events))
 
 (re-frame/reg-fx
  :dismiss-keyboard

src/status_im2/contexts/chat/home/events.cljs

@@ -0,0 +1,8 @@
+(ns status-im2.contexts.chat.home.events
+  (:require
+    [utils.re-frame :as rf]))
+
+(rf/defn messages-home-select-tab-event
+  {:events [:messages-home/select-tab]}
+  [{:keys [db]} tab]
+  {:db (assoc db :messages-home/selected-tab tab)})

src/status_im2/contexts/chat/home/view.cljs

@@ -3,7 +3,6 @@
             [quo2.core :as quo]
             [re-frame.core :as re-frame]
             [react-native.core :as rn]
-            [reagent.core :as reagent]
             [status-im2.common.contact-list.view :as contact-list]
             [status-im2.common.home.view :as common.home]
             [status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
@@ -24,7 +23,7 @@
 
 (defn filter-items-by-tab
   [tab items]
-  (if (= tab :groups)
+  (if (= tab :tab/groups)
     (filter :group-chat items)
     (filter :chat-id items)))
 
@@ -92,42 +91,43 @@
 
 (defn get-tabs-data
   [dot?]
-  [{:id :recent :label (i18n/label :t/recent) :accessibility-label :tab-recent}
-   {:id :groups :label (i18n/label :t/groups) :accessibility-label :tab-groups}
-   {:id                  :contacts
+  [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :tab-recent}
+   {:id :tab/groups :label (i18n/label :t/groups) :accessibility-label :tab-groups}
+   {:id                  :tab/contacts
     :label               (i18n/label :t/contacts)
     :accessibility-label :tab-contacts
     :notification-dot?   dot?}])
 
 (defn home
   []
-  (let [selected-tab (reagent/atom :recent)]
-    (fn []
-      (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])]
-        [safe-area/consumer
-         (fn [{:keys [top]}]
-           [:<>
-            (if (= @selected-tab :contacts)
-              [contacts pending-contact-requests top]
-              [chats @selected-tab top])
-            [rn/view
-             {:style (style/blur-container top)}
-             [blur/view
-              {:blur-amount (if platform/ios? 20 10)
-               :blur-type   (if (colors/dark?) :dark (if platform/ios? :light :xlight))
-               :style       style/blur}]
-             [common.home/top-nav]
-             [common.home/title-column
-              {:label               (i18n/label :t/messages)
-               :handler             #(rf/dispatch [:show-bottom-sheet
-                                                   {:content home.sheet/new-chat-bottom-sheet}])
-               :accessibility-label :new-chat-button}]
-             [quo/discover-card
-              {:title       (i18n/label :t/invite-friends-to-status)
-               :description (i18n/label :t/share-invite-link)}]
-             [quo/tabs
-              {:style          style/tabs
-               :size           32
-               :on-change      #(reset! selected-tab %)
-               :default-active @selected-tab
-               :data           (get-tabs-data (pos? (count pending-contact-requests)))}]]])]))))
+  (fn []
+    (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
+          selected-tab             (or (rf/sub [:messages-home/selected-tab]) :tab/recent)]
+      [safe-area/consumer
+       (fn [{:keys [top]}]
+         [:<>
+          (if (= selected-tab :tab/contacts)
+            [contacts pending-contact-requests top]
+            [chats selected-tab top])
+          [rn/view
+           {:style (style/blur-container top)}
+           [blur/view
+            {:blur-amount (if platform/ios? 20 10)
+             :blur-type   (if (colors/dark?) :dark (if platform/ios? :light :xlight))
+             :style       style/blur}]
+           [common.home/top-nav]
+           [common.home/title-column
+            {:label               (i18n/label :t/messages)
+             :handler             #(rf/dispatch [:show-bottom-sheet
+                                                 {:content home.sheet/new-chat-bottom-sheet}])
+             :accessibility-label :new-chat-button}]
+           [quo/discover-card
+            {:title       (i18n/label :t/invite-friends-to-status)
+             :description (i18n/label :t/share-invite-link)}]
+           [quo/tabs
+            {:style          style/tabs
+             :size           32
+             :on-change      (fn [tab]
+                               (rf/dispatch [:messages-home/select-tab tab]))
+             :default-active selected-tab
+             :data           (get-tabs-data (pos? (count pending-contact-requests)))}]]])])))

src/status_im2/contexts/shell/bottom_tabs.cljs

@@ -6,7 +6,8 @@
             [status-im2.contexts.shell.style :as style]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]
-            [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]))
+            [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
+            [react-native.gesture :as gesture]))
 
 (defn blur-overlay-params
   [style]
@@ -32,13 +33,18 @@
   []
   [:f>
    (fn []
-     (let [notifications-data (rf/sub [:shell/bottom-tabs-notifications-data])
-           pass-through?      (rf/sub [:shell/shell-pass-through?])
-           shared-values      @animation/shared-values-atom
-           original-style     (style/bottom-tabs-container pass-through?)
-           animated-style     (reanimated/apply-animations-to-style
-                               {:height (:bottom-tabs-height shared-values)}
-                               original-style)]
+     (let [notifications-data          (rf/sub [:shell/bottom-tabs-notifications-data])
+           pass-through?               (rf/sub [:shell/shell-pass-through?])
+           shared-values               @animation/shared-values-atom
+           original-style              (style/bottom-tabs-container pass-through?)
+           animated-style              (reanimated/apply-animations-to-style
+                                        {:height (:bottom-tabs-height shared-values)}
+                                        original-style)
+           messages-double-tap-gesture (-> (gesture/gesture-tap)
+                                           (gesture/number-of-taps 2)
+                                           (gesture/on-start
+                                            (fn [_event]
+                                              (rf/dispatch [:messages-home/select-tab :tab/recent]))))]
        (animation/load-stack @animation/selected-stack-id)
        (reanimated/set-shared-value (:pass-through? shared-values) pass-through?)
        [reanimated/view {:style animated-style}
@@ -46,6 +52,7 @@
           [blur/view (blur-overlay-params style/bottom-tabs-blur-overlay)])
         [rn/view {:style (style/bottom-tabs)}
          [bottom-tab :i/communities :communities-stack shared-values notifications-data]
-         [bottom-tab :i/messages :chats-stack shared-values notifications-data]
+         [gesture/gesture-detector {:gesture messages-double-tap-gesture}
+          [bottom-tab :i/messages :chats-stack shared-values notifications-data]]
          [bottom-tab :i/wallet :wallet-stack shared-values notifications-data]
          [bottom-tab :i/browser :browser-stack shared-values notifications-data]]]))])

src/status_im2/subs/root.cljs

@@ -281,3 +281,6 @@
 (reg-root-key-sub :messenger/started? :messenger/started?)
 
 (reg-root-key-sub :information-box-states :information-box-states)
+
+; Messages home view -> tabs
+(reg-root-key-sub :messages-home/selected-tab :messages-home/selected-tab)