🚧 Use of the use_long_press to open a future room configuration menu

src/ui/components/conversations.rs

@@ -1,12 +1,18 @@
+use std::{rc::Rc, time::Duration};
+
 use base64::{engine::general_purpose, Engine as _};
 use dioxus::prelude::*;
-use tracing::{debug, trace, warn};
+use tracing::{debug, warn};
 
 use super::{button::Button, icons::SearchIcon, text_input::TextInput};
 use crate::{
     domain::model::{common::PresenceState as DomainPresenceState, room::RoomId, space::SpaceId},
     ui::{
-        components::icons::{ChatsIcon, LogoIcon, RoomsIcon, SpacesIcon},
+        components::{
+            button::{JoinButton, RejectButton},
+            icons::{ChatsIcon, LogoIcon, RoomsIcon, SpacesIcon},
+        },
+        hooks::use_long_press,
         ACCOUNT, STORE,
     },
 };
@@ -167,13 +173,16 @@ pub fn Account() -> Element {
 }
 
 #[component]
-pub fn ConversationAvatar(room_id: RoomId, on_clicked: EventHandler<RoomId>) -> Element {
+pub fn ConversationAvatar(
+    room_id: RoomId,
+    on_selected: EventHandler<RoomId>,
+    on_pressed: EventHandler<RoomId>,
+) -> Element {
+    let long_press_duration = Duration::from_millis(500);
+
     let rooms = STORE.read().rooms();
-    let toto = rooms.get(&room_id).unwrap();
-
-    let room = toto.signal();
-
-    let room_id = room.id();
+    let room = rooms.get(&room_id).unwrap().signal();
+    let room_id = Rc::new(room_id);
     let room_name = room.name();
 
     let selected_room_id = use_context::<Signal<Option<RoomId>>>();
@@ -193,7 +202,7 @@ pub fn ConversationAvatar(room_id: RoomId, on_clicked: EventHandler<RoomId>) ->
     };
 
     let is_selected = match selected_room_id.read().as_ref() {
-        Some(selected_room_id) => *selected_room_id == room_id,
+        Some(selected_room_id) => *selected_room_id == *room_id,
         None => false,
     };
 
@@ -232,14 +241,24 @@ pub fn ConversationAvatar(room_id: RoomId, on_clicked: EventHandler<RoomId>) ->
     ];
     let classes_str = classes.join(" ");
 
+    let on_press = {
+        let room_id = room_id.clone();
+        move || {
+            on_selected.call(room_id.as_ref().clone());
+        }
+    };
+
+    let on_long_press = move || {
+        on_pressed.call(room_id.as_ref().clone());
+    };
+
+    let long_press_hook = use_long_press(long_press_duration, on_press, on_long_press);
+
     rsx! {
         div {
             class: "{classes_str}",
 
-            onclick: move |evt| {
-                on_clicked.call(room_id.clone());
-                evt.stop_propagation();
-            },
+            ..long_press_hook.handlers,
 
             {avatar}
             {invited_badge}
@@ -248,7 +267,10 @@ pub fn ConversationAvatar(room_id: RoomId, on_clicked: EventHandler<RoomId>) ->
 }
 
 #[component]
-pub fn ConversationsCarousel(on_selected_conversation: EventHandler<RoomId>) -> Element {
+pub fn ConversationsCarousel(
+    on_selected_conversation: EventHandler<RoomId>,
+    on_pressed_conversation: EventHandler<RoomId>,
+) -> Element {
     let mut ordered_rooms = use_signal(Vec::<RoomId>::new);
 
     use_effect(move || {
@@ -267,7 +289,8 @@ pub fn ConversationsCarousel(on_selected_conversation: EventHandler<RoomId>) ->
         rsx! {
             ConversationAvatar {
                 room_id: room.clone(),
-                on_clicked: on_selected_conversation,
+                on_selected: on_selected_conversation,
+                on_pressed: on_pressed_conversation,
             }
         }
     });
@@ -286,7 +309,7 @@ pub fn ConversationsCarousel(on_selected_conversation: EventHandler<RoomId>) ->
 
 // If id is None, the Space will handle all the Conversation which have no parent (Space).
 #[component]
-pub fn Space(id: Option<SpaceId>) -> Element {
+pub fn Space(id: Option<SpaceId>, on_pressed_conversation: EventHandler<RoomId>) -> Element {
     let mut selected_room_id = use_context_provider(|| Signal::new(None::<RoomId>));
     let mut displayed_rooms = use_context_provider(|| Signal::new(Vec::<RoomId>::new()));
 
@@ -362,44 +385,42 @@ pub fn Space(id: Option<SpaceId>) -> Element {
             },
             ConversationsCarousel {
                 on_selected_conversation,
+                on_pressed_conversation,
             },
             div {
                 class: ClassName::SPACE_CONVERSATION_NAME,
                 p {
                     {selected_room_name},
                 }
-            }
+            },
         }
     }
 }
 
-pub fn Spaces() -> Element {
+#[component]
+pub fn Spaces(on_pressed_conversation: EventHandler<RoomId>) -> Element {
     let spaces = STORE.read().spaces();
     let space_ids = spaces.keys().clone().last();
 
     let rendered_spaces = space_ids.map(|id| {
         rsx! {
-            Space { id: id.clone() }
+            Space { id: id.clone(), on_pressed_conversation }
         }
     });
 
     rsx! {
-        style { {STYLE_SHEET} },
-
         div {
             class: ClassName::SPACES,
 
             {rendered_spaces},
 
-            Space {},
+            Space { on_pressed_conversation },
         }
     }
 }
 
 pub fn Search() -> Element {
     rsx! {
-        style { {STYLE_SHEET} },
-
         div {
             class: ClassName::SEARCH,
 

src/ui/components/login.rs

@@ -619,7 +619,6 @@ pub fn Login() -> Element {
         });
 
     if *spinner_animated.read() && SESSION.read().is_logged {
-        debug!("Stop spinner");
         spinner_animated.set(false);
     }