Add interactions for the dioxus-desktop example

examples/dioxus-desktop/src/main.rs

@@ -1,4 +1,5 @@
 #![allow(non_snake_case)]
+#![feature(let_chains)]
 
 mod controller;
 mod router;

examples/dioxus-desktop/src/router/mod.rs

@@ -1,27 +1,17 @@
 use crate::view::{
-    dataset::{Dataset, DatasetList, DatasetView},
-    home::Home,
     layout::Wrapper,
+    overview::Overview,
     stargazer::StargazerList,
 };
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
-use zino::prelude::*;
 
 #[derive(Clone, PartialEq, Eq, Routable)]
 #[rustfmt::skip]
 pub enum Route {
     #[layout(Wrapper)]
         #[route("/")]
-        Home {},
-        #[nest("/dataset")]
-            #[layout(Dataset)]
-                #[route("/list")]
-                DatasetList {},
-                #[route("/:id/view")]
-                DatasetView { id: Uuid },
-            #[end_layout]
-        #[end_nest]
+        Overview {},
         #[route("/stargazers")]
         StargazerList {},
     #[end_layout]
@@ -31,15 +21,18 @@ pub enum Route {
 
 impl Default for Route {
     fn default() -> Self {
-        Self::Home {}
+        Self::Overview {}
     }
 }
 
 #[inline_props]
 fn PageNotFound(cx: Scope, segments: Vec<String>) -> Element {
     let path = segments.join("/");
     render! {
-        h1 { "Page not found" }
-        p { "The page `{path}` you requested doesn't exist." }
+        div {
+            class: "notification is-danger is-light",
+            h3 { "Page not found" }
+            p { "The page `{path}` you requested doesn't exist." }
+        }
     }
 }

examples/dioxus-desktop/src/service/stargazer.rs

@@ -2,13 +2,22 @@ use crate::App;
 use serde_json::json;
 use zino::prelude::*;
 
-pub async fn list_stargazers(per_page: u8, page: u32) -> Result<Vec<Map>, Error> {
+pub async fn list_stargazers(per_page: u8, page: usize) -> Result<Vec<Map>, Error> {
     let resource = "https://api.github.com/repos/photino/zino/stargazers";
     let options = json!({
         "query": {
             "per_page": per_page,
             "page": page,
         },
+        "headers": {
+            "accept": "application/vnd.github.star+json",
+        }
     });
-    App::fetch_json(resource, options.into_map_opt().as_ref()).await
+    let mut data: Vec<Map> = App::fetch_json(resource, options.as_object()).await?;
+    for d in data.iter_mut() {
+        if let Some(user) = d.remove("user") && let Some(mut user) = user.into_map_opt() {
+            d.append(&mut user);
+        }
+    }
+    Ok(data)
 }

examples/dioxus-desktop/src/view/layout.rs

@@ -7,45 +7,44 @@ use dioxus_free_icons::{
 use dioxus_router::prelude::*;
 
 pub fn Wrapper(cx: Scope) -> Element {
+    let nav_item_classes = use_state(cx, || ["is-active", ""]);
     render! {
         nav {
             class: "navbar is-link",
-            div {
-                class: "navbar-brand",
-                Link {
-                    class: "navbar-item",
-                    to: Route::Home {},
-                    "DataCube"
-                }
-            }
             div {
                 class: "navbar-menu is-active",
                 div {
                     class: "navbar-start",
                     Link {
-                        class: "navbar-item",
-                        to: Route::StargazerList {},
+                        class: "navbar-item {nav_item_classes[0]}",
+                        to: Route::Overview {},
+                        onclick: move |_| {
+                            nav_item_classes.set(["is-active", ""]);
+                        },
                         Icon {
                             width: 16,
                             height: 16,
-                            icon: BsStars,
+                            icon: BsDiagram3Fill,
                         }
                         span {
                             class: "ml-1",
-                            "Stargazers"
+                            "Overview"
                         }
                     }
                     Link {
-                        class: "navbar-item",
-                        to: Route::DatasetList {},
+                        class: "navbar-item {nav_item_classes[1]}",
+                        to: Route::StargazerList {},
+                        onclick: move |_| {
+                            nav_item_classes.set(["", "is-active"]);
+                        },
                         Icon {
                             width: 16,
                             height: 16,
-                            icon: BsTable,
+                            icon: BsStars,
                         }
                         span {
                             class: "ml-1",
-                            "Datasets"
+                            "Stargazers"
                         }
                     }
                 }
@@ -73,7 +72,7 @@ pub fn Wrapper(cx: Scope) -> Element {
                             icon: FaRust,
                         }
                         span {
-                            margin_left: "0.25em",
+                            class: "ml-1",
                             "crates.io"
                         }
                     }

examples/dioxus-desktop/src/view/mod.rs

@@ -1,4 +1,3 @@
-pub(crate) mod dataset;
-pub(crate) mod home;
 pub(crate) mod layout;
+pub(crate) mod overview;
 pub(crate) mod stargazer;

examples/dioxus-desktop/src/view/overview.rs

@@ -0,0 +1,124 @@
+use dioxus::prelude::*;
+
+pub fn Overview(cx: Scope) -> Element {
+    let data = [
+        ("zino", "Application integrations."),
+        ("zino-core", "Core types and traits."),
+        ("zino-derive", "Derived traits."),
+        ("zino-model", "Domain models."),
+    ];
+    render! {
+        div {
+            class: "columns is-6",
+            div {
+                class: "column",
+                div {
+                    class: "card",
+                    header {
+                        class: "card-header",
+                        div {
+                            class: "card-header-title",
+                            "GitHub issues"
+                        }
+                    }
+                    div {
+                        class: "card-content",
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/issues/photino/zino",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/issues/photino/zino/bug",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/issues/photino/zino/enhancement",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/issues/photino/zino/dependencies",
+                        }
+                    }
+                }
+            }
+            div {
+                class: "column",
+                div {
+                    class: "card",
+                    header {
+                        class: "card-header",
+                        div {
+                            class: "card-header-title",
+                            "GitHub commits"
+                        }
+                    }
+                    div {
+                        class: "card-content",
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/commit-activity/t/photino/zino",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/commit-activity/y/photino/zino",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/commit-activity/m/photino/zino",
+                        }
+                        img {
+                            class: "mr-2",
+                            src: "https://img.shields.io/github/commit-activity/w/photino/zino",
+                        }
+                    }
+                }
+            }
+        }
+        div {
+            class: "columns is-6",
+            for d in data {
+                div {
+                    class: "column",
+                    div {
+                        class: "card",
+                        header {
+                            class: "card-header",
+                            div {
+                                class: "card-header-title",
+                                span {
+                                    class: "tag is-warning is-light mr-1",
+                                    "{d.0}"
+                                }
+                                span { "{d.1}" }
+                            }
+                        }
+                        div {
+                            class: "card-content",
+                            img {
+                                class: "mr-2",
+                                src: "https://img.shields.io/crates/v/{d.0}",
+                            }
+                            img {
+                                class: "mr-2",
+                                src: "https://shields.io/docsrs/{d.0}",
+                            }
+                            img {
+                                class: "mr-2",
+                                src: "https://img.shields.io/crates/l/{d.0}",
+                            }
+                            img {
+                                class: "mr-2",
+                                src: "https://img.shields.io/crates/d/{d.0}"
+                            }
+                            img {
+                                class: "mr-2",
+                                src: "https://img.shields.io/crates/dr/{d.0}"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}