From ad286631dc96912bbfb788f37b00ad0911d1693f Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Tue, 7 Nov 2023 14:54:47 +0530 Subject: [PATCH] test --- .../contexts/chat/composer/utils.cljs | 24 ++-- .../contexts/chat/composer/view.cljs | 59 ++++++---- .../contexts/chat/messages/list/view.cljs | 43 ++++---- .../chat/messages/navigation/style.cljs | 6 +- .../chat/messages/navigation/view.cljs | 44 +++++++- .../contexts/chat/messages/view.cljs | 104 +++++------------- .../contexts/shell/jump_to/animation.cljs | 16 +-- .../components/floating_screens/view.cljs | 5 +- .../contexts/shell/jump_to/events.cljs | 12 +- 9 files changed, 147 insertions(+), 166 deletions(-) diff --git a/src/status_im2/contexts/chat/composer/utils.cljs b/src/status_im2/contexts/chat/composer/utils.cljs index 6e5090cd793..f091e054b71 100644 --- a/src/status_im2/contexts/chat/composer/utils.cljs +++ b/src/status_im2/contexts/chat/composer/utils.cljs @@ -180,21 +180,15 @@ (defn init-subs [] - (let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])] - (merge - {:chat-screen-loaded? chat-screen-loaded? - :link-previews? false} - (when chat-screen-loaded? - (let [chat-input (rf/sub [:chats/current-chat-input])] - {:images (seq (rf/sub [:chats/sending-image])) - :link-previews? (rf/sub [:chats/link-previews?]) - :audio (rf/sub [:chats/sending-audio]) - :reply (rf/sub [:chats/reply-message]) - :edit (rf/sub [:chats/edit-message]) - :input-with-mentions (rf/sub [:chat/input-with-mentions]) - :input-text (:input-text chat-input) - :input-content-height (:input-content-height chat-input) - :chat-screen-loaded? chat-screen-loaded?}))))) + (let [chat-input (rf/sub [:chats/current-chat-input])] + {:images (seq (rf/sub [:chats/sending-image])) + :link-previews? (rf/sub [:chats/link-previews?]) + :audio (rf/sub [:chats/sending-audio]) + :reply (rf/sub [:chats/reply-message]) + :edit (rf/sub [:chats/edit-message]) + :input-with-mentions (rf/sub [:chat/input-with-mentions]) + :input-text (:input-text chat-input) + :input-content-height (:input-content-height chat-input)})) (defn init-animations [{:keys [input-text images link-previews? reply audio]} diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index 9058053e349..f1917a19e7e 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -23,7 +23,9 @@ [status-im2.contexts.chat.composer.style :as style] [status-im2.contexts.chat.composer.sub-view :as sub-view] [status-im2.contexts.chat.composer.utils :as utils] - [utils.i18n :as i18n])) + [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as contact-requests.bottom-drawer] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn sheet-component [{:keys [insets @@ -34,8 +36,7 @@ opacity background-y theme]} props state] - (let [{:keys [chat-screen-loaded?] - :as subscriptions} (utils/init-subs) + (let [subscriptions (utils/init-subs) content-height (reagent/atom (or (:input-content-height ; Actual text height subscriptions) constants/input-height)) @@ -80,12 +81,11 @@ (effects/link-previews props state animations subscriptions) (effects/use-images props state animations subscriptions) [:<> - (when chat-screen-loaded? - [mentions/view props state animations max-height cursor-pos - (:images subscriptions) - (:link-previews? subscriptions) - (:reply subscriptions) - (:edit subscriptions)]) + [mentions/view props state animations max-height cursor-pos + (:images subscriptions) + (:link-previews? subscriptions) + (:reply subscriptions) + (:edit subscriptions)] [rn/view {:style style/composer-sheet-and-jump-to-container} [sub-view/shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?] @@ -96,10 +96,9 @@ {:style (style/sheet-container insets state animations theme) :on-layout #(handler/layout % state blur-height)} [sub-view/bar] - (when chat-screen-loaded? - [:<> - [reply/view state] - [edit/view state]]) + [:<> + [reply/view state] + [edit/view state]] [reanimated/touchable-opacity {:active-opacity 1 :on-press (fn [] @@ -138,15 +137,14 @@ :theme theme}) :max-length constants/max-text-size :accessibility-label :chat-message-input}]]] - (when chat-screen-loaded? - [:<> - [gradients/view props state animations show-bottom-gradient?] - [link-preview/view] - [images/images-list]]) + [:<> + [gradients/view props state animations show-bottom-gradient?] + [link-preview/view] + [images/images-list]] [:f> actions/view props state animations window-height insets scroll-to-bottom-fn subscriptions]]]]])) -(defn composer +(defn f-composer [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}] (let [window-height (:height (rn/get-window)) theme (quo.theme/use-theme-value) @@ -172,3 +170,26 @@ :focused? (:focused? state) :theme theme}] [:f> sheet-component extra-params props state]])) + +(defn composer-placeholder [] + [rn/view {:style {:width 100 :height 100 :background-color :red}}]) + +(defn composer + [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}] + (if (rf/sub [:shell/chat-screen-loaded?]) + (let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?]) + {:keys [chat-id + contact-request-state + group-chat + able-to-send-message? + chat-type] + :as chat} (rf/sub [:chats/current-chat-chat-view])] + (when (seq chat) + (if able-to-send-message? + [:f> f-composer + {:insets insets + :scroll-to-bottom-fn scroll-to-bottom-fn + :show-floating-scroll-down-button? show-floating-scroll-down-button?}] + [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))) + [composer-placeholder])) + diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 5311f563dbd..4cbc0d90402 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -297,25 +297,30 @@ (reanimated/set-shared-value scroll-y scroll-distance))) (defn f-messages-list-content - [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms - big-name-visible? animate-topbar-opacity? composer-active? - on-end-reached? animate-topbar-name?]}] - (rn/use-effect (fn [] - (if (and (not @on-end-reached?) - (< topbar-visible-scroll-y-value (reanimated/get-shared-value scroll-y))) - (reset! animate-topbar-opacity? true) - (reset! animate-topbar-opacity? false))) - [composer-active? @on-end-reached? @animate-topbar-opacity?]) - (let [theme (quo.theme/use-theme-value) - {window-height :height} (rn/get-window) - {:keys [keyboard-height]} (hooks/use-keyboard) - context (rf/sub [:chats/current-chat-message-list-view-context]) - messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)]) - recording? (rf/sub [:chats/recording?]) - all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)]) + [{:keys [insets scroll-y content-height cover-bg-color inner-state-atoms composer-active?]}] + (let [theme (quo.theme/use-theme-value) + chat (rf/sub [:chats/current-chat-chat-view]) + {composer-active? :focused?} (rf/sub [:chats/current-chat-input]) + {:keys [keyboard-shown]} (hooks/use-keyboard) + {window-height :height} (rn/get-window) + {:keys [keyboard-height]} (hooks/use-keyboard) + context (rf/sub [:chats/current-chat-message-list-view-context]) + messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)]) + recording? (rf/sub [:chats/recording?]) + all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)]) {:keys [show-floating-scroll-down-button? messages-view-height - messages-view-header-height]} inner-state-atoms] + messages-view-header-height + big-name-visible? + animate-topbar-opacity? + on-end-reached? + animate-topbar-name?]} inner-state-atoms] + (rn/use-effect (fn [] + (if (and (not @on-end-reached?) + (< topbar-visible-scroll-y-value (reanimated/get-shared-value scroll-y))) + (reset! animate-topbar-opacity? true) + (reset! animate-topbar-opacity? false))) + [composer-active? @on-end-reached? @animate-topbar-opacity?]) [rn/view {:style {:flex 1}} [rnio/flat-list {:root-margin root-margin-for-big-name-visibility-detector @@ -340,7 +345,7 @@ :data messages :render-data {:theme theme :context context - :keyboard-shown? keyboard-shown? + :keyboard-shown? keyboard-shown :insets insets} :render-fn render-fn :on-viewable-items-changed on-viewable-items-changed @@ -372,7 +377,7 @@ (reanimated/set-shared-value scroll-y (- y window-height - (- (when keyboard-shown? + (- (when keyboard-shown keyboard-height)))) (reanimated/set-shared-value content-height y)))) :on-end-reached #(list-on-end-reached scroll-y on-end-reached?) diff --git a/src/status_im2/contexts/chat/messages/navigation/style.cljs b/src/status_im2/contexts/chat/messages/navigation/style.cljs index c5a3e269197..002df70eb0b 100644 --- a/src/status_im2/contexts/chat/messages/navigation/style.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/style.cljs @@ -42,14 +42,12 @@ {:opacity animation}) blur-view)) -(defn navigation-view - [loaded?] +(def navigation-view {:z-index 1 :top 0 :right 0 :left 0 - :position :absolute - :opacity (if loaded? 1 0)}) + :position :absolute}) (def header-container {:position :absolute diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index e1354d00269..e540e33d059 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -10,6 +10,7 @@ [react-native.reanimated :as reanimated] [status-im2.common.home.actions.view :as actions] [status-im2.config :as config] + [status-im2.constants :as constants] [status-im2.contexts.chat.messages.list.view :refer [topbar-invisible-scroll-y-value]] [status-im2.contexts.chat.messages.navigation.style :as style] [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner] @@ -23,10 +24,34 @@ (defonce ^:const minimum-scroll-y-topbar-overlaying-avatar-composer-active 85) (defn f-view - [{:keys [theme scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path - back-icon animate-topbar-name? composer-active? big-name-visible? animate-topbar-opacity? - on-end-reached?]}] - (let [{:keys [group-chat chat-id]} chat + [{:keys [theme scroll-y inner-state-atoms]}] + (let [{:keys [chat-id + contact-request-state + group-chat + able-to-send-message? + chat-type + chat-name + emoji] + :as chat} (rf/sub [:chats/current-chat-chat-view]) + {:keys [animate-topbar-name? big-name-visible? + animate-topbar-opacity? + on-end-reached?]} inner-state-atoms + content-height (reanimated/use-shared-value 0) + all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)]) + {composer-active? :focused?} (rf/sub [:chats/current-chat-input]) + display-name (cond + (= chat-type constants/one-to-one-chat-type) + (first (rf/sub + [:contacts/contact-two-names-by-identity + chat-id])) + (= chat-type constants/community-chat-type) + (str (when emoji (str emoji " ")) "# " chat-name) + :else (str emoji chat-name)) + online? (rf/sub [:visibility-status-updates/online? chat-id]) + photo-path (rf/sub [:chats/photo-path chat-id]) + back-icon (if (= chat-type constants/one-to-one-chat-type) + :i/close + :i/arrow-left) opacity-animation (reanimated/use-shared-value 0) banner-opacity-animation (reanimated/interpolate scroll-y @@ -97,7 +122,7 @@ (reanimated/animate translate-animation title-opacity-interpolation-start)))) [@animate-topbar-name? @big-name-visible? @animate-topbar-opacity? composer-active? @on-end-reached?]) - [rn/view {:style (style/navigation-view chat-screen-loaded?)} + [rn/view {:style style/navigation-view} [reanimated/view {:style (style/animated-background-view all-loaded? opacity-animation nil)}] @@ -109,6 +134,7 @@ :blur-radius (if platform/ios? 20 10) :style {:flex 1}}]] + ;; Extract header view content in different function and use in placeholder [rn/view {:style style/header-container} [quo/button {:icon-only? true @@ -165,8 +191,14 @@ :all-loaded? all-loaded? :top-offset style/navigation-bar-height}]])) +(defn navigation-placeholder [] + [rn/view {:style {:width 100 :height 100 :background-color :red :position :absolute :top 0}}]) + (defn- internal-navigation-view [params] - [:f> f-view params]) + (let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])] + (if chat-screen-loaded? + [:f> f-view params] + [navigation-placeholder]))) (def navigation-view (quo.theme/with-theme internal-navigation-view)) diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index b6c29ea0dff..cd1dfaed4f6 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -1,51 +1,28 @@ (ns status-im2.contexts.chat.messages.view (:require [react-native.core :as rn] - [react-native.hooks :as hooks] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [status-im2.constants :as constants] [status-im2.contexts.chat.composer.view :as composer.view] - [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as contact-requests.bottom-drawer] [status-im2.contexts.chat.messages.list.style :as style] [status-im2.contexts.chat.messages.list.view :as list.view] - [status-im2.contexts.chat.messages.navigation.view :as messages.navigation] - [utils.re-frame :as rf])) + [status-im2.contexts.chat.messages.navigation.view :as messages.navigation])) (defn f-chat - [{:keys [show-floating-scroll-down-button? animate-topbar-name? - big-name-visible? animate-topbar-opacity? on-end-reached?] - :as inner-state-atoms}] - (let [insets (safe-area/get-insets) - scroll-y (reanimated/use-shared-value 0) - content-height (reanimated/use-shared-value 0) - {:keys [keyboard-shown]} (hooks/use-keyboard) - {:keys [chat-id - contact-request-state - group-chat - able-to-send-message? - chat-type - chat-name - emoji] - :as chat} (rf/sub [:chats/current-chat-chat-view]) - chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?]) - all-loaded? (when chat-screen-loaded? - (rf/sub [:chats/all-loaded? (:chat-id chat)])) - display-name (cond - (= chat-type constants/one-to-one-chat-type) - (first (rf/sub - [:contacts/contact-two-names-by-identity - chat-id])) - (= chat-type constants/community-chat-type) - (str (when emoji (str emoji " ")) "# " chat-name) - :else (str emoji chat-name)) - online? (rf/sub [:visibility-status-updates/online? chat-id]) - photo-path (rf/sub [:chats/photo-path chat-id]) - back-icon (if (= chat-type constants/one-to-one-chat-type) - :i/close - :i/arrow-left) - {:keys [focused?]} (rf/sub [:chats/current-chat-input])] + [] + (let [insets (safe-area/get-insets) + show-floating-scroll-down-button? (reagent/atom false) + inner-state-atoms + {:extra-keyboard-height (reagent/atom 0) + :show-floating-scroll-down-button? show-floating-scroll-down-button? + :messages-view-height (reagent/atom 0) + :messages-view-header-height (reagent/atom 0) + :animate-topbar-name? (reagent/atom false) + :big-name-visible? (reagent/atom :initial-render) + :animate-topbar-opacity? (reagent/atom false) + :on-end-reached? (reagent/atom false)} + scroll-y (reanimated/use-shared-value 0)] ;; Note - Don't pass `behavior :height` to keyboard avoiding view,. It breaks composer - ;; https://github.com/status-im/status-mobile/issues/16595 [rn/keyboard-avoiding-view @@ -53,51 +30,20 @@ :keyboard-vertical-offset (- (:bottom insets))} [list.view/message-list-content-view - {:chat chat - :insets insets - :scroll-y scroll-y - :content-height content-height - :cover-bg-color :turquoise - :keyboard-shown? keyboard-shown - :inner-state-atoms inner-state-atoms - :animate-topbar-name? animate-topbar-name? - :big-name-visible? big-name-visible? - :animate-topbar-opacity? animate-topbar-opacity? - :composer-active? focused? - :on-end-reached? on-end-reached?}] + {:insets insets + :scroll-y scroll-y + :cover-bg-color :turquoise + :inner-state-atoms inner-state-atoms}] [messages.navigation/navigation-view - {:scroll-y scroll-y - :animate-topbar-name? animate-topbar-name? - :back-icon back-icon - :chat chat - :chat-screen-loaded? chat-screen-loaded? - :all-loaded? all-loaded? - :display-name display-name - :online? online? - :photo-path photo-path - :big-name-visible? big-name-visible? - :animate-topbar-opacity? animate-topbar-opacity? - :composer-active? focused? - :on-end-reached? on-end-reached?}] + {:scroll-y scroll-y + :inner-state-atoms inner-state-atoms}] - (when (seq chat) - (if able-to-send-message? - [:f> composer.view/composer - {:insets insets - :scroll-to-bottom-fn list.view/scroll-to-bottom - :show-floating-scroll-down-button? show-floating-scroll-down-button?}] - [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))])) + [composer.view/composer + {:insets insets + :scroll-to-bottom-fn list.view/scroll-to-bottom + :show-floating-scroll-down-button? show-floating-scroll-down-button?}]])) (defn chat [] - (let [inner-state-atoms - {:extra-keyboard-height (reagent/atom 0) - :show-floating-scroll-down-button? (reagent/atom false) - :messages-view-height (reagent/atom 0) - :messages-view-header-height (reagent/atom 0) - :animate-topbar-name? (reagent/atom false) - :big-name-visible? (reagent/atom :initial-render) - :animate-topbar-opacity? (reagent/atom false) - :on-end-reached? (reagent/atom false)}] - [:f> f-chat inner-state-atoms])) + [:f> f-chat]) diff --git a/src/status_im2/contexts/shell/jump_to/animation.cljs b/src/status_im2/contexts/shell/jump_to/animation.cljs index 641dd8bd4e8..25edc4687af 100644 --- a/src/status_im2/contexts/shell/jump_to/animation.cljs +++ b/src/status_im2/contexts/shell/jump_to/animation.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.shell.jump-to.animation (:require - [react-native.platform :as platform] [react-native.reanimated :as reanimated] [status-im2.contexts.shell.jump-to.constants :as shell.constants] [status-im2.contexts.shell.jump-to.state :as state] @@ -47,11 +46,6 @@ ;;;; Floating Screen -;; Dispatch Delay - Animation time for the opening of a screen is 200 ms, -;; But starting and completion of animation sometimes takes a little extra time, -;; according to the performance of the device. And if before the animation is -;; complete we start other tasks like rendering messages or opening of the home screen -;; in the background then the animation breaks. So we are adding a small delay for that dispatch. (defn animate-floating-screen [screen-id {:keys [id animation community-id hidden-screen?]}] (when (not= animation (get @state/floating-screens-state screen-id)) @@ -66,13 +60,7 @@ shell.constants/close-screen-without-animation} animation) 0 - shell.constants/shell-animation-time) - dispatch-delay (cond - (not floating-screen-open?) 0 - js/goog.DEBUG 100 - platform/android? 75 - :else 50) - dispatch-time (+ animation-time dispatch-delay)] + shell.constants/shell-animation-time)] (js/setTimeout (fn [floating-screen-open?] (if floating-screen-open? @@ -81,7 +69,7 @@ id community-id hidden-screen?]) ;; Events realted to closing of a screen (rf/dispatch [:shell/floating-screen-closed screen-id]))) - dispatch-time + animation-time floating-screen-open?)))) (defn set-floating-screen-position diff --git a/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs b/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs index dd380262ffa..9790c01276a 100644 --- a/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs @@ -33,12 +33,9 @@ [rn/view {:style (style/screen-container (utils/dimensions)) :accessibility-label (str screen-id "-floating-screen") - :accessible true - :key id} + :accessible true} [(get screens-map screen-id) id]]])) -;; Currently chat screen and events both depends on current-chat-id, once we remove -;; use of current-chat-id from view then we can keep last chat loaded, for fast navigation (defn lazy-screen [screen-id] (let [screen-param (rf/sub [:shell/floating-screen screen-id])] diff --git a/src/status_im2/contexts/shell/jump_to/events.cljs b/src/status_im2/contexts/shell/jump_to/events.cljs index 1b7f8567108..d5ef26244ed 100644 --- a/src/status_im2/contexts/shell/jump_to/events.cljs +++ b/src/status_im2/contexts/shell/jump_to/events.cljs @@ -254,9 +254,9 @@ (rf/defn floating-screen-closed {:events [:shell/floating-screen-closed]} [{:keys [db]} screen-id] - (merge - {:db (-> (update db :shell/floating-screens dissoc screen-id) - (update :shell/loaded-screens dissoc screen-id)) - :dispatch-n (cond-> [[:set-view-id :shell-stack]] - (= screen-id shell.constants/chat-screen) - (conj [:chat/close]))})) + {:db (cond-> (update db :shell/loaded-screens dissoc screen-id) + (= screen-id shell.constants/discover-communities-screen) + (update :shell/floating-screen dissoc screen-id)) + :dispatch-n (cond-> [[:set-view-id :shell-stack]] + (= screen-id shell.constants/chat-screen) + (conj [:chat/close]))})