Don't load chat view until chat is fetched (#19988)

This commit is contained in:
Parvesh Monu 2024-05-17 19:31:29 +05:30 committed by GitHub
parent cfe9d6e539
commit 4c84dd4a1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 106 additions and 75 deletions

View File

@ -114,20 +114,20 @@
(defn list-footer-avatar (defn list-footer-avatar
[{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color
emoji chat-type chat-name last-message]}] emoji chat-type chat-name empty-chat?]}]
(let [scale (reanimated/interpolate (let [scale (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[1 0.4] [1 0.4]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
top (reanimated/interpolate top (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[-44 -12] [-44 -12]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
left (reanimated/interpolate left (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[16 -8] [16 -8]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
community-channel? (= chat-type constants/community-chat-type)] community-channel? (= chat-type constants/community-chat-type)]
@ -155,15 +155,15 @@
:size :big}])])) :size :big}])]))
(defn chat-display-name (defn chat-display-name
[{:keys [distance-from-list-top display-name contact theme last-message]}] [{:keys [distance-from-list-top display-name contact theme empty-chat?]}]
(let [top (reanimated/interpolate (let [top (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[0 -35] [0 -35]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
left (reanimated/interpolate left (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[0 40] [0 40]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)]
[reanimated/view [reanimated/view
@ -212,11 +212,11 @@
muted?)))}]}])) muted?)))}]}]))
(defn bio-and-actions (defn bio-and-actions
[{:keys [distance-from-list-top bio chat-id customization-color last-message description]}] [{:keys [distance-from-list-top bio chat-id customization-color empty-chat? description]}]
(let [has-bio (seq (or bio description)) (let [has-bio (seq (or bio description))
top (reanimated/interpolate top (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
[(if has-bio 8 16) (if has-bio -28 -20)] [(if has-bio 8 16) (if has-bio -28 -20)]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)]
[reanimated/view [reanimated/view
@ -227,43 +227,43 @@
(defn footer-component (defn footer-component
[{:keys [chat distance-from-list-top customization-color]}] [{:keys [chat distance-from-list-top customization-color]}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
{:keys [chat-id chat-name emoji chat-type {:keys [chat-id chat-name emoji chat-type
group-chat color description group-chat color description
last-message]} chat empty-chat?]} chat
display-name (cond display-name (cond
(= chat-type constants/one-to-one-chat-type) (= chat-type constants/one-to-one-chat-type)
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
(= chat-type constants/community-chat-type) (= chat-type constants/community-chat-type)
(str "# " chat-name) (str "# " chat-name)
:else (str emoji chat-name)) :else (str emoji chat-name))
{:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id])
online? (rf/sub [:visibility-status-updates/online? chat-id]) online? (rf/sub [:visibility-status-updates/online? chat-id])
contact (when-not group-chat contact (when-not group-chat
(rf/sub [:contacts/contact-by-address chat-id])) (rf/sub [:contacts/contact-by-address chat-id]))
photo-path (if group-chat photo-path (if group-chat
(rf/sub [:chats/group-chat-image chat-id]) (rf/sub [:chats/group-chat-image chat-id])
(rf/sub [:chats/photo-path chat-id])) (rf/sub [:chats/photo-path chat-id]))
top-margin (+ (safe-area/get-top) top-margin (+ (safe-area/get-top)
messages.constants/top-bar-height messages.constants/top-bar-height
messages.constants/header-container-top-margin messages.constants/header-container-top-margin
32) 32)
background-color (colors/theme-colors background-color (colors/theme-colors
(colors/resolve-color customization-color theme 20) (colors/resolve-color customization-color theme 20)
(colors/resolve-color customization-color theme 40) (colors/resolve-color customization-color theme 40)
theme) theme)
bottom (reanimated/interpolate bottom (reanimated/interpolate
distance-from-list-top distance-from-list-top
[0 messages.constants/header-container-top-margin] [0 messages.constants/header-container-top-margin]
[32 -4] [32 -4]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
background-opacity (reanimated/interpolate background-opacity (reanimated/interpolate
distance-from-list-top distance-from-list-top
[messages.constants/header-container-top-margin [messages.constants/header-container-top-margin
(+ messages.constants/header-animation-distance (+ messages.constants/header-animation-distance
messages.constants/header-container-top-margin)] messages.constants/header-container-top-margin)]
[1 0] [1 0]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)]
[:<> [:<>
[reanimated/view [reanimated/view
{:style (style/background-container background-color background-opacity top-margin)}] {:style (style/background-container background-color background-opacity top-margin)}]
@ -281,21 +281,21 @@
:emoji emoji :emoji emoji
:chat-type chat-type :chat-type chat-type
:chat-name chat-name :chat-name chat-name
:last-message last-message}] :empty-chat? empty-chat?}]
[chat-display-name [chat-display-name
{:distance-from-list-top distance-from-list-top {:distance-from-list-top distance-from-list-top
:display-name display-name :display-name display-name
:theme theme :theme theme
:contact contact :contact contact
:group-chat group-chat :group-chat group-chat
:last-message last-message}] :empty-chat? empty-chat?}]
[bio-and-actions [bio-and-actions
{:distance-from-list-top distance-from-list-top {:distance-from-list-top distance-from-list-top
:bio bio :bio bio
:chat-id chat-id :chat-id chat-id
:customization-color customization-color :customization-color customization-color
:description description :description description
:last-message last-message}]]]])) :empty-chat? empty-chat?}]]]]))
(defn list-footer (defn list-footer
[props] [props]

View File

@ -13,13 +13,15 @@
(defn- chat-screen (defn- chat-screen
[{:keys [insets] :as props}] [{:keys [insets] :as props}]
(let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])] (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
[rn/keyboard-avoiding-view chat-exist? (rf/sub [:chats/current-chat-exist?])]
{:style style/keyboard-avoiding-container (when chat-exist?
:keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))} [rn/keyboard-avoiding-view
[list.view/messages-list-content props] {:style style/keyboard-avoiding-container
[messages.navigation/view props] :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))}
[composer.view/composer props]])) [list.view/messages-list-content props]
[messages.navigation/view props]
[composer.view/composer props]])))
(defn lazy-chat-screen (defn lazy-chat-screen
[chat-screen-layout-calculations-complete?] [chat-screen-layout-calculations-complete?]

View File

@ -6,6 +6,7 @@
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[status-im.contexts.chat.messenger.placeholder.style :as style] [status-im.contexts.chat.messenger.placeholder.style :as style]
[utils.re-frame :as rf]
[utils.worklets.chat.messenger.placeholder :as worklets])) [utils.worklets.chat.messenger.placeholder :as worklets]))
(defn- loading-skeleton (defn- loading-skeleton
@ -17,9 +18,14 @@
(defn view (defn view
[chat-screen-layout-calculations-complete?] [chat-screen-layout-calculations-complete?]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
top (safe-area/get-top) top (safe-area/get-top)
opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?) chat-exist? (rf/sub [:chats/current-chat-exist?])
z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)] opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?)
z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)]
[reanimated/view {:style (style/container top opacity z-index theme)} [reanimated/view {:style (style/container top opacity z-index theme)}
(when-not chat-exist?
[quo/page-nav
{:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])}])
[loading-skeleton]])) [loading-skeleton]]))

View File

@ -169,23 +169,31 @@
:chats/current-chat-chat-view :chats/current-chat-chat-view
:<- [:chats/current-chat] :<- [:chats/current-chat]
(fn [current-chat] (fn [current-chat]
(select-keys current-chat (assoc
[:chat-id (select-keys current-chat
:able-to-send-message? [:chat-id
:group-chat :able-to-send-message?
:admins :group-chat
:invitation-admin :admins
:public? :invitation-admin
:chat-type :public?
:color :chat-type
:contact-request-state :color
:chat-name :contact-request-state
:synced-to :chat-name
:synced-from :synced-to
:community-id :synced-from
:emoji :community-id
:description :emoji
:last-message]))) :description])
:empty-chat?
(not (:last-message current-chat)))))
(re-frame/reg-sub
:chats/current-chat-exist?
:<- [:chats/current-chat-chat-view]
(fn [current-chat]
(boolean (:chat-id current-chat))))
(re-frame/reg-sub (re-frame/reg-sub
:chats/current-chat-color :chats/current-chat-color

View File

@ -192,3 +192,18 @@
chats) chats)
(let [result (rf/sub [sub-name chat-id])] (let [result (rf/sub [sub-name chat-id])]
(= image-data result))))) (= image-data result)))))
(h/deftest-sub :chats/current-chat-exist?
[sub-name]
(testing "current chat without chat-id"
(let [chats {chat-id (dissoc one-to-one-chat :chat-id)}]
(swap! rf-db/app-db assoc
:chats chats
:current-chat-id chat-id)
(is (false? (rf/sub [sub-name])))))
(testing "current chat with chat-id"
(let [chats {chat-id one-to-one-chat}]
(swap! rf-db/app-db assoc
:chats chats
:current-chat-id chat-id)
(is (true? (rf/sub [sub-name]))))))