fix(chat): Move scroll button handling in its own thing (#1530)

Satellite-im · Nov 27, 2023 · 4830b88 · 4830b88
1 parent 64ecec0
commit 4830b88
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 24 deletions.
diff --git a/ui/src/layouts/chats/presentation/messages/coroutines.rs b/ui/src/layouts/chats/presentation/messages/coroutines.rs
@@ -16,7 +16,7 @@ use warp::raygun::{PinState, ReactionState};
 
 use crate::{
     layouts::chats::{
-        data::{self, ChatBehavior, ChatData, JsMsg, ScrollBtn, DEFAULT_MESSAGES_TO_TAKE},
+        data::{self, ChatBehavior, ChatData, JsMsg, DEFAULT_MESSAGES_TO_TAKE},
         scripts::OBSERVER_SCRIPT,
     },
     utils::download::get_download_path,
@@ -28,10 +28,9 @@ pub fn hangle_msg_scroll(
     cx: &ScopeState,
     eval_provider: &crate::utils::EvalProvider,
     chat_data: &UseSharedState<ChatData>,
-    scroll_btn: &UseSharedState<ScrollBtn>,
 ) -> Coroutine<()> {
     let ch = use_coroutine(cx, |mut rx: UnboundedReceiver<()>| {
-        to_owned![eval_provider, chat_data, scroll_btn];
+        to_owned![eval_provider, chat_data];
         async move {
             let warp_cmd_tx = WARP_CMD_CH.tx.clone();
 
@@ -159,19 +158,6 @@ pub fn hangle_msg_scroll(
                                 Some(msg) => match msg {
                                     JsMsg::Add { msg_id, .. } => {
                                         chat_data.write_silent().add_message_to_view(conv_id, msg_id);
-                                        let chat_behavior = chat_data.read().get_chat_behavior(conv_id);
-                                        // a message can be added to the top of the view without removing a message from the bottom of the view.
-                                        // need to explicitly compare the bottom of messages.all and messages.displayed
-                                        if chat_data.read().get_bottom_of_view(conv_id).map(|pm|  pm.message_id) == chat_data.read().active_chat.messages.bottom(){
-                                            // have to check on_scroll_end in case the user scrolled up and switched chats.
-                                            if chat_behavior.on_scroll_end == data::ScrollBehavior::DoNothing && scroll_btn.read().get(conv_id) {
-                                                scroll_btn.write().clear(conv_id);
-                                                log::trace!("clearing scroll_btn");
-                                            }
-                                        } else if !scroll_btn.read().get(conv_id) {
-                                            scroll_btn.write().set(conv_id);
-                                            log::trace!("setting scroll_btn");
-                                        }
                                     },
                                     JsMsg::Remove { msg_id, .. } => {
                                         chat_data.write_silent().remove_message_from_view(conv_id, msg_id);

diff --git a/ui/src/layouts/chats/presentation/messages/effects.rs b/ui/src/layouts/chats/presentation/messages/effects.rs
@@ -1,6 +1,7 @@
 use crate::{
     layouts::chats::{
-        data::{ChatData, ScrollTo},
+        data::{ChatData, ScrollBtn, ScrollTo},
+        presentation::messages::{READ_SCROLL, SCROLL_BTN_THRESHOLD},
         scripts::{self, SETUP_CONTEXT_PARENT},
     },
     utils,
@@ -12,11 +13,12 @@ pub fn init_msg_scroll(
     cx: &ScopeState,
     chat_data: &UseSharedState<ChatData>,
     eval_provider: &utils::EvalProvider,
+    scroll_btn: &UseSharedState<ScrollBtn>,
     ch: Coroutine<()>,
 ) {
     let chat_key = chat_data.read().active_chat.key();
     use_effect(cx, &chat_key, |_chat_key| {
-        to_owned![eval_provider, ch, chat_data];
+        to_owned![eval_provider, ch, chat_data, scroll_btn];
         async move {
             // replicate behavior from before refactor
             if let Ok(eval) = eval_provider(SETUP_CONTEXT_PARENT) {
@@ -84,6 +86,22 @@ pub fn init_msg_scroll(
                     log::error!("eval failed: {:?}", e);
                 }
             }
+
+            if let Ok(val) = eval_provider(READ_SCROLL) {
+                if let Ok(result) = val.join().await {
+                    let scroll = result.as_i64().unwrap_or_default();
+                    let show = scroll < SCROLL_BTN_THRESHOLD;
+                    let update = show != scroll_btn.read().get(chat_id);
+                    // Only update if the value has changed
+                    if update {
+                        if show {
+                            scroll_btn.write().set(chat_id);
+                        } else {
+                            scroll_btn.write().clear(chat_id);
+                        }
+                    }
+                }
+            }
         }
     });
 }
diff --git a/ui/src/layouts/chats/presentation/messages/mod.rs b/ui/src/layouts/chats/presentation/messages/mod.rs
@@ -43,7 +43,10 @@ use warp::{
 
 use crate::{
     components::emoji_group::EmojiGroup,
-    layouts::chats::data::{self, ChatData, ScrollBtn},
+    layouts::chats::{
+        data::{self, ChatData, ScrollBtn},
+        scripts::READ_SCROLL,
+    },
     utils::format_timestamp::format_timestamp_timeago,
 };
 
@@ -69,6 +72,7 @@ pub enum MessagesCommand {
 }
 
 pub type DownloadTracker = HashMap<Uuid, HashSet<warp::constellation::file::File>>;
+const SCROLL_BTN_THRESHOLD: i64 = -1000;
 
 #[component(no_case_check)]
 pub fn get_messages(
@@ -83,8 +87,8 @@ pub fn get_messages(
     let pending_downloads = use_shared_state::<DownloadTracker>(cx)?;
 
     let eval = use_eval(cx);
-    let ch = coroutines::hangle_msg_scroll(cx, eval, chat_data, scroll_btn);
-    effects::init_msg_scroll(cx, chat_data, eval, ch);
+    let ch = coroutines::hangle_msg_scroll(cx, eval, chat_data);
+    effects::init_msg_scroll(cx, chat_data, eval, scroll_btn, ch);
 
     // used by child Elements via use_coroutine_handle
     let _ch = coroutines::handle_warp_commands(cx, state, pending_downloads);
@@ -121,13 +125,32 @@ pub fn get_messages(
             )
         };
 
+    let scroll_btn_handler = move || {
+        to_owned![eval, scroll_btn, active_chat_id];
+        async move {
+            if let Ok(val) = eval(READ_SCROLL) {
+                if let Ok(result) = val.join().await {
+                    let scroll = result.as_i64().unwrap_or_default();
+                    let show = scroll < SCROLL_BTN_THRESHOLD;
+                    let update = show != scroll_btn.read().get(active_chat_id);
+                    // Only update if the value has changed
+                    if update {
+                        if show {
+                            scroll_btn.write().set(active_chat_id);
+                        } else {
+                            scroll_btn.write().clear(active_chat_id);
+                        }
+                    }
+                }
+            }
+        }
+    };
+
     cx.render(rsx!(
         div {
             id: "messages",
             onscroll: move |_| {
-                // if !chat_data.read().active_chat.get_scrolled() {
-                //     chat_data.write().active_chat.set_scrolled();
-                // }
+                scroll_btn_handler()
             },
             // used by the intersection observer to terminate itself
             div {

diff --git a/ui/src/layouts/chats/scripts/mod.rs b/ui/src/layouts/chats/scripts/mod.rs
@@ -7,3 +7,4 @@ pub const SHOW_CONTEXT: &str = include_str!("./show_context.js");
 pub const SCROLL_TO_TOP: &str = include_str!("./scroll_to_top.js");
 pub const SCROLL_TO_BOTTOM: &str = include_str!("./scroll_to_bottom.js");
 pub const OBSERVER_SCRIPT: &str = include_str!("./observer_script.js");
+pub const READ_SCROLL: &str = include_str!("./read_scroll.js");
diff --git a/ui/src/layouts/chats/scripts/read_scroll.js b/ui/src/layouts/chats/scripts/read_scroll.js
@@ -0,0 +1 @@
+return document.getElementById("messages").scrollTop
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		return document.getElementById("messages").scrollTop