⬆️ Update the components to take the dioxus 0.5 rework into account

src/components/modal.rs

@@ -14,7 +14,7 @@ use style::{COLOR_CRITICAL_100, COLOR_SUCCESS_100, COLOR_WARNING_100};
 
 turf::style_sheet!("src/components/modal.scss");
 
-#[derive(Clone, Eq, PartialEq, Hash)]
+#[derive(Clone, Copy, Eq, PartialEq, Hash)]
 pub enum Severity {
     Ok,
     Warning,
@@ -39,14 +39,14 @@ struct DicebearConfig<'a> {
     lips: Vec<u32>,
 }
 
-#[derive(Props)]
-pub struct ModalProps<'a> {
+#[derive(Props, Clone, PartialEq)]
+pub struct ModalProps {
     pub severity: Severity,
     #[props(optional)]
-    pub title: Option<&'a str>,
-    pub children: Element<'a>,
+    pub title: Option<String>,
+    pub children: Element,
     #[props(optional)]
-    pub on_confirm: Option<EventHandler<'a, MouseEvent>>,
+    pub on_confirm: Option<EventHandler<MouseEvent>>,
 }
 
 fn dicebear_variants() -> &'static HashMap<Severity, DicebearConfig<'static>> {
@@ -96,10 +96,10 @@ fn render_dicebear_variants(values: &[u32]) -> String {
         .join(",")
 }
 
-async fn generate_random_figure(url: &String, severity: Severity) -> Option<String> {
+async fn generate_random_figure(url: &str, severity: &Severity) -> Option<String> {
     let mut res: Option<String> = None;
 
-    let config = match dicebear_variants().get(&severity) {
+    let config = match dicebear_variants().get(severity) {
         Some(config) => config,
         None => {
             error!("No dicebear configuration found for \"{severity}\"");
@@ -144,17 +144,14 @@ async fn generate_random_figure(url: &String, severity: Severity) -> Option<Stri
 }
 
 #[component]
-pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
+pub fn Modal(props: ModalProps) -> Element {
     // TODO: Use configuration file
-    let url = "dicebear.tools.adrien.run".to_string();
+    let url = "dicebear.tools.adrien.run";
 
-    let severity = cx.props.severity.clone();
+    let random_figure_future =
+        use_resource(move || async move { generate_random_figure(url, &props.severity).await });
 
-    let random_figure_future = use_future(cx, &url, |url| async move {
-        generate_random_figure(&url, severity).await
-    });
-
-    let figure = match random_figure_future.value() {
+    let figure = match &*random_figure_future.read_unchecked() {
         Some(Some(svg)) => Some(rsx! {
             div {
                 class: ClassName::MODAL_CONTENT_ICON_PLACEHOLDER,
@@ -163,7 +160,7 @@ pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
         }),
         Some(None) => {
             warn!("No profile image set or generated, display the placeholder");
-            let path = match cx.props.severity {
+            let path = match &props.severity {
                 Severity::Ok => "./images/modal-default-ok-icon.svg",
                 Severity::Warning => "./images/modal-default-warning-icon.svg",
                 Severity::Critical => "./images/modal-default-critical-icon.svg",
@@ -180,7 +177,7 @@ pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
         None => None,
     };
 
-    let button_class = match cx.props.severity {
+    let button_class = match &props.severity {
         Severity::Ok => SuccessButton,
         Severity::Warning => WarningButton,
         Severity::Critical => ErrorButton,
@@ -188,8 +185,8 @@ pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
 
     figure.as_ref()?;
 
-    cx.render(rsx! {
-        style { STYLE_SHEET },
+    rsx! {
+        style { {STYLE_SHEET} },
 
         div {
             class: ClassName::MODAL,
@@ -204,20 +201,19 @@ pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
 
                 div {
                     class: ClassName::MODAL_CONTENT_TITLE,
-                    cx.props.title,
+                    {props.title},
                 },
 
                 div {
                     class: ClassName::MODAL_CONTENT_MSG,
-
-                    &cx.props.children,
+                    {props.children},
                 },
 
                 div {
                     class: ClassName::MODAL_CONTENT_BUTTONS,
                     button_class {
                         onclick: move |evt| {
-                            if let Some(cb) = &cx.props.on_confirm {
+                            if let Some(cb) = &props.on_confirm {
                                 cb.call(evt);
                             }
                         },
@@ -225,5 +221,5 @@ pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
                 },
             },
         },
-    })
+    }
 }