remove messages screen global states (#17365)

This commit is contained in:
Parvesh Monu 2023-09-21 21:21:42 +05:30 committed by GitHub
parent db41eb303d
commit a99ae74da7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 36 deletions

View File

@ -8,7 +8,6 @@
[react-native.hooks :as hooks] [react-native.hooks :as hooks]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im.ui.screens.chat.group :as chat.group] [status-im.ui.screens.chat.group :as chat.group]
[status-im.ui.screens.chat.message.gap :as message.gap] [status-im.ui.screens.chat.message.gap :as message.gap]
[status-im2.constants :as constants] [status-im2.constants :as constants]
@ -28,11 +27,7 @@
(defonce ^:const scroll-animation-input-range [50 125]) (defonce ^:const scroll-animation-input-range [50 125])
(defonce ^:const min-message-height 32) (defonce ^:const min-message-height 32)
(defonce extra-keyboard-height (reagent/atom 0))
(defonce messages-list-ref (atom nil)) (defonce messages-list-ref (atom nil))
(defonce messages-view-height (reagent/atom 0))
(defonce messages-view-header-height (reagent/atom 0))
(defonce show-floating-scroll-down-button? (reagent/atom false))
(defn list-key-fn [{:keys [message-id value]}] (or message-id value)) (defn list-key-fn [{:keys [message-id value]}] (or message-id value))
(defn list-ref [ref] (reset! messages-list-ref ref)) (defn list-ref [ref] (reset! messages-list-ref ref))
@ -44,7 +39,7 @@
{:animated true}))) {:animated true})))
(defn on-scroll (defn on-scroll
[evt] [evt show-floating-scroll-down-button?]
(let [y (oops/oget evt "nativeEvent.contentOffset.y") (let [y (oops/oget evt "nativeEvent.contentOffset.y")
layout-height (oops/oget evt "nativeEvent.layoutMeasurement.height") layout-height (oops/oget evt "nativeEvent.layoutMeasurement.height")
threshold-height (* (/ layout-height 100) threshold-height (* (/ layout-height 100)
@ -115,7 +110,7 @@
:animated? animated?}) :animated? animated?})
(defn loading-view (defn loading-view
[chat-id] [chat-id messages-view-height messages-view-header-height]
(let [loading-messages? (rf/sub [:chats/loading-messages? chat-id]) (let [loading-messages? (rf/sub [:chats/loading-messages? chat-id])
all-loaded? (rf/sub [:chats/all-loaded? chat-id]) all-loaded? (rf/sub [:chats/all-loaded? chat-id])
messages (rf/sub [:chats/raw-chat-messages-stream chat-id]) messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
@ -194,7 +189,8 @@
chat-id]))}]}])) chat-id]))}]}]))
(defn f-list-footer (defn f-list-footer
[{:keys [chat scroll-y cover-bg-color on-layout theme]}] [{:keys [chat scroll-y cover-bg-color on-layout theme messages-view-height
messages-view-header-height]}]
(let [{:keys [chat-id chat-name emoji chat-type (let [{:keys [chat-id chat-name emoji chat-type
group-chat]} chat group-chat]} chat
all-loaded? (rf/sub [:chats/all-loaded? chat-id]) all-loaded? (rf/sub [:chats/all-loaded? chat-id])
@ -238,7 +234,7 @@
[quo/text {:style style/bio} [quo/text {:style style/bio}
bio]) bio])
[actions chat-id cover-bg-color]]]] [actions chat-id cover-bg-color]]]]
[loading-view chat-id]])) [loading-view chat-id messages-view-height messages-view-header-height]]))
(defn list-footer (defn list-footer
[props] [props]
@ -249,7 +245,7 @@
[rn/view [rn/view
[chat.group/group-chat-footer chat-id invitation-admin]]) [chat.group/group-chat-footer chat-id invitation-admin]])
(defn footer-on-layout (defn footer-on-layout
[e] [e messages-view-header-height]
(let [height (oops/oget e "nativeEvent.layout.height") (let [height (oops/oget e "nativeEvent.layout.height")
y (oops/oget e "nativeEvent.layout.y")] y (oops/oget e "nativeEvent.layout.y")]
(reset! messages-view-header-height (+ height y)))) (reset! messages-view-header-height (+ height y))))
@ -279,14 +275,17 @@
(reanimated/set-shared-value scroll-y (- content-size-y current-y)))) (reanimated/set-shared-value scroll-y (- content-size-y current-y))))
(defn f-messages-list-content (defn f-messages-list-content
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown?]}] [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme-value)
{window-height :height} (rn/get-window) {window-height :height} (rn/get-window)
{:keys [keyboard-height]} (hooks/use-keyboard) {:keys [keyboard-height]} (hooks/use-keyboard)
context (rf/sub [:chats/current-chat-message-list-view-context]) context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)]) messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
recording? (rf/sub [:chats/recording?]) recording? (rf/sub [:chats/recording?])
all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)])] 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]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[rn/flat-list [rn/flat-list
{:key-fn list-key-fn {:key-fn list-key-fn
@ -300,7 +299,11 @@
:chat chat :chat chat
:scroll-y scroll-y :scroll-y scroll-y
:cover-bg-color cover-bg-color :cover-bg-color cover-bg-color
:on-layout footer-on-layout}] :on-layout #(footer-on-layout
%
messages-view-header-height)
:messages-view-header-height messages-view-header-height
:messages-view-height messages-view-height}]
:data messages :data messages
:render-data {:theme theme :render-data {:theme theme
:context context :context context
@ -339,8 +342,7 @@
:scroll-event-throttle 16 :scroll-event-throttle 16
:on-scroll (fn [event] :on-scroll (fn [event]
(scroll-handler event scroll-y) (scroll-handler event scroll-y)
(when on-scroll (on-scroll event show-floating-scroll-down-button?))
(on-scroll event)))
:style (add-inverted-y-android :style (add-inverted-y-android
{:background-color (if all-loaded? {:background-color (if all-loaded?
(colors/theme-colors (colors/theme-colors

View File

@ -13,10 +13,8 @@
[status-im2.contexts.chat.messages.navigation.view :as messages.navigation] [status-im2.contexts.chat.messages.navigation.view :as messages.navigation]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defonce extra-keyboard-height (reagent/atom 0))
(defn f-chat (defn f-chat
[] [{:keys [extra-keyboard-height show-floating-scroll-down-button?] :as inner-state-atoms}]
(let [insets (safe-area/get-insets) (let [insets (safe-area/get-insets)
scroll-y (reanimated/use-shared-value 0) scroll-y (reanimated/use-shared-value 0)
content-height (reanimated/use-shared-value 0) content-height (reanimated/use-shared-value 0)
@ -68,7 +66,8 @@
:scroll-y scroll-y :scroll-y scroll-y
:content-height content-height :content-height content-height
:cover-bg-color :turquoise :cover-bg-color :turquoise
:keyboard-shown? keyboard-shown}] :keyboard-shown? keyboard-shown
:inner-state-atoms inner-state-atoms}]
[messages.navigation/navigation-view [messages.navigation/navigation-view
{:scroll-y scroll-y {:scroll-y scroll-y
@ -83,9 +82,14 @@
[:f> composer.view/composer [:f> composer.view/composer
{:insets insets {:insets insets
:scroll-to-bottom-fn list.view/scroll-to-bottom :scroll-to-bottom-fn list.view/scroll-to-bottom
:show-floating-scroll-down-button? list.view/show-floating-scroll-down-button?}] :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
[contact-requests.bottom-drawer/view chat-id contact-request-state group-chat])])) [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat])]))
(defn chat (defn chat
[] []
[:f> f-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)}]
[:f> f-chat inner-state-atoms]))