Refactors challenge create with a provider

apis/src/app.rs

@@ -27,8 +27,8 @@ use crate::{
     providers::{
         challenges::provide_challenges, chat::provide_chat, game_state::provide_game_state,
         games::provide_games, navigation_controller::provide_navigation_controller,
-        online_users::provide_users, provide_alerts, provide_auth, provide_color_scheme,
-        provide_config, provide_notifications, provide_ping, provide_sounds,
+        online_users::provide_users, provide_alerts, provide_auth, provide_challenge_params,
+        provide_color_scheme, provide_config, provide_notifications, provide_ping, provide_sounds,
         refocus::provide_refocus, timer::provide_timer, tournament_ready::provide_tournament_ready,
         tournaments::provide_tournaments, user_search::provide_user_search,
         websocket::provide_websocket,
@@ -54,6 +54,7 @@ pub fn App() -> impl IntoView {
     let url = "/ws/";
     provide_websocket(url);
     provide_auth();
+    provide_challenge_params();
     provide_alerts();
     provide_refocus();
     provide_chat();

apis/src/components/atoms/create_challenge_button.rs

@@ -33,6 +33,7 @@ pub fn CreateChallengeButton(
     view! {
         <button
             title=color_choice().to_string()
+            formmethod="dialog"
             class=format!(
                 "m-1 h-[4.5rem] w-16 bg-odd-light dark:bg-gray-700 my-1 p-1 transform transition-transform duration-300 active:scale-95 hover:shadow-xl dark:hover:shadow dark:hover:shadow-gray-500 drop-shadow-lg dark:shadow-gray-600 rounded",
             )

apis/src/components/atoms/direct_challenge_button.rs

@@ -8,15 +8,8 @@ use leptos_icons::*;
 #[component]
 pub fn DirectChallengeButton(user: StoredValue<UserResponse>) -> impl IntoView {
     let auth_context = expect_context::<AuthContext>();
-    let open = create_rw_signal(false);
-    let dialog_el = create_node_ref::<Dialog>();
-    let close_modal = Callback::new(move |()| {
-        dialog_el
-            .get_untracked()
-            .expect("dialog to have been created")
-            .close();
-    });
-
+    let open = RwSignal::new(false);
+    let dialog_el = NodeRef::<Dialog>::new();
     let logged_in_and_not_user = move || {
         if let Some(Ok(Some(current_user))) = (auth_context.user)() {
             current_user.id != user().uid
@@ -27,7 +20,7 @@ pub fn DirectChallengeButton(user: StoredValue<UserResponse>) -> impl IntoView {
 
     view! {
         <Modal open=open dialog_el=dialog_el>
-            <ChallengeCreate close=close_modal opponent=user().username/>
+            <ChallengeCreate open opponent=user().username/>
         </Modal>
         <Show when=logged_in_and_not_user>
             <button

apis/src/components/atoms/input_slider.rs

@@ -12,9 +12,9 @@ pub fn InputSlider(
     let min = Signal::derive(move || min() as f64);
     let max = Signal::derive(move || max() as f64);
     let step: f64 = step as f64;
-    let default_value = vec![signal_to_update.get_untracked() as f64];
+    let default_value = MaybeProp::derive(move || vec![signal_to_update() as f64].into());
     let on_value_change = Callback::from(move |val: Vec<f64>| {
-        signal_to_update.set(val[0] as i32);
+        signal_to_update.update(|v| *v = val[0] as i32);
     });
     view! {
         <SliderRoot

apis/src/components/molecules/modal.rs

@@ -3,7 +3,7 @@ use wasm_bindgen::JsCast;
 
 #[component]
 pub fn Modal(
-    #[prop(into)] open: Signal<bool>,
+    open: RwSignal<bool>,
     children: Children,
     dialog_el: NodeRef<Dialog>,
 ) -> impl IntoView {
@@ -21,6 +21,7 @@ pub fn Modal(
                 .expect("Event target")
                 .unchecked_into::<web_sys::HtmlDialogElement>()
                 .close();
+            open.set(false);
         }
     };
 
@@ -40,14 +41,14 @@ pub fn Modal(
         <dialog
             ref=dialog_el
             open=open.get_untracked()
-            class="shadow-xl drop-shadow-xl rounded-lg backdrop:backdrop-blur bg-stone-300 dark:bg-gray-600 dark:border-gray-500 border "
+            class="rounded-lg border shadow-xl drop-shadow-xl backdrop:backdrop-blur bg-stone-300 dark:bg-gray-600 dark:border-gray-500"
             // clicking on ::backdrop should dismiss modal
             on:click=on_click
         >
             <header class="flex justify-end">
                 <form class="m-2" method="dialog">
                     <button
-                        class="hover:bg-ladybug-red duration-300 active:scale-95 rounded-full w-5 h-5 flex items-center justify-center"
+                        class="flex justify-center items-center w-5 h-5 rounded-full duration-300 hover:bg-ladybug-red active:scale-95"
                         aria-label="Close"
                     >
                         x

apis/src/components/organisms/quickplay.rs

@@ -73,18 +73,12 @@ pub fn GridButton(time_control: QuickPlayTimeControl) -> impl IntoView {
 }
 #[component]
 pub fn QuickPlay() -> impl IntoView {
-    let open = create_rw_signal(false);
-    let dialog_el = create_node_ref::<Dialog>();
-    let close_modal = Callback::new(move |()| {
-        dialog_el
-            .get_untracked()
-            .expect("dialog to have been created")
-            .close();
-    });
+    let open = RwSignal::new(false);
+    let dialog_el = NodeRef::<Dialog>::new();
     view! {
         <div class="flex flex-col items-center m-2 grow">
-            <Modal open=open dialog_el=dialog_el>
-                <ChallengeCreate close=close_modal/>
+            <Modal open dialog_el=dialog_el>
+                <ChallengeCreate open/>
             </Modal>
             <span class="flex justify-center mb-4 text-xl font-bold">Quick Play</span>
             <div class="grid grid-cols-2 gap-2 place-items-center w-full sm:gap-4 sm:grid-cols-3">

apis/src/components/organisms/time_select.rs

@@ -6,6 +6,7 @@ use leptix_primitives::components::radio_group::{RadioGroupItem, RadioGroupRoot}
 use leptos::*;
 use leptos_icons::*;
 use shared_types::{CorrespondenceMode, GameSpeed, TimeMode};
+use std::str::FromStr;
 
 #[component]
 pub fn TimeSelect(
@@ -15,7 +16,6 @@ pub fn TimeSelect(
     allowed_values: Vec<TimeMode>,
 ) -> impl IntoView {
     let time_mode = move || time_signals.time_mode.get();
-    let corresp_selected = RwSignal::new("dpm".to_string());
     let gamespeed_icon = move || {
         let speed = match time_mode() {
             TimeMode::Untimed => GameSpeed::Untimed,
@@ -40,7 +40,10 @@ pub fn TimeSelect(
             <RadioGroupRoot
                 required=true
                 attr:class="flex flex-row gap-2 justify-center"
-                default_value="Real Time"
+                default_value=MaybeProp::derive(move || Some(
+                    time_signals.time_mode.get().to_string(),
+                ))
+
                 on_value_change
             >
                 <Show when=move || allow_realtime>
@@ -97,21 +100,21 @@ pub fn TimeSelect(
                 <RadioGroupRoot
                     required=true
                     attr:class="flex flex-row gap-2 p-2"
-                    default_value="dpm"
-                    on_value_change=move |v| {
-                        if v == "dpm" {
-                            time_signals.corr_mode.set(CorrespondenceMode::DaysPerMove)
-                        } else if v == "tte" {
-                            time_signals.corr_mode.set(CorrespondenceMode::TotalTimeEach)
+                    default_value=MaybeProp::derive(move || Some(
+                        time_signals.corr_mode.get().to_string(),
+                    ))
+
+                    on_value_change=move |v: String| {
+                        if let Ok(new_value) = CorrespondenceMode::from_str(&v) {
+                            time_signals.corr_mode.update(|v| *v = new_value)
                         }
-                        corresp_selected.set(v);
                     }
                 >
 
-                    <RadioGroupItem value="dpm" attr:class=radio_style>
-                        "Per move"
+                    <RadioGroupItem value="Days per move" attr:class=radio_style>
+                        "Days per move"
                     </RadioGroupItem>
-                    <RadioGroupItem value="tte" attr:class=radio_style>
+                    <RadioGroupItem value="Total time each" attr:class=radio_style>
                         "Total time each"
                     </RadioGroupItem>
                 </RadioGroupRoot>