update

Author: marc2332

dog-app/Cargo.toml

@@ -9,15 +9,12 @@ homepage = "https://dioxuslabs.com"
 documentation = "https://dioxuslabs.com"
 keywords = ["dom", "ui", "gui", "react", "wasm"]
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
 [dependencies]
-dioxus = { version = "0.3" }
-dioxus-desktop = { version = "0.3" }
+dioxus = "0.3"
+dioxus-desktop = "0.3"
 reqwest = { version = "0.11.8", features = ["json"] }
 serde = { version = "1.0.132", features = ["derive"] }
 
-
 [package.metadata.bundle]
 name = "Dog Search Engine"
 identifier = "com.jon.dogsearch"

dog-app/src/main.rs

@@ -9,18 +9,20 @@ mod models;
 fn main() {
     dioxus_desktop::launch_cfg(
         app,
-        Config::default().with_window(WindowBuilder::new().with_maximized(true).with_title("Dog App")),
+        Config::default().with_window(
+            WindowBuilder::new()
+                .with_maximized(true)
+                .with_title("Dog App"),
+        ),
     )
 }
 
 fn app(cx: Scope) -> Element {
     let selected_breed = use_state::<Option<String>>(cx, || None);
     let search_input = use_state(cx, String::new);
 
-    // when the component loads, we want to fetch the dog list
-    let fut = use_future!(cx, |()| async move {
-        list_all_breeds().await
-    });
+    // Fetch the dog list when the component mounts
+    let fut = use_future!(cx, |()| async move { list_all_breeds().await });
 
     render!(
         link {
@@ -41,8 +43,7 @@ fn app(cx: Scope) -> Element {
                 }
             }
             div { class: "px-2 flex",
-                div {
-                    class: "grow w-full",
+                div { class: "grow w-full h-full",
                     if let Some(Ok(breeds)) = fut.value() {
                         let current_search = search_input.get();
                         rsx!{
@@ -56,7 +57,7 @@ fn app(cx: Scope) -> Element {
                                             }
                                         })
                                     };
-    
+
                                     Some(rsx! {
                                         Card {
                                             key: "{breed}",
@@ -77,7 +78,7 @@ fn app(cx: Scope) -> Element {
                 if let Some(selected_breed) = selected_breed.get() {
                     rsx!(
                         div {
-                            class: "grow-[1]",
+                            class: "w-1/2",
                             img {
                                 src: "{selected_breed}"
                             }
@@ -96,17 +97,13 @@ fn Card<'a>(cx: Scope, title: String, list: Vec<String>, onclick: EventHandler<'
         div {
             onclick: |_| onclick.call(()),
             class: "my-2 bg-gray-100 w-full rounded-sm p-2",
-            h3 {
-                class: "text-2xl",
-                "{title}"
-            }
-            ul {
-                class: "list-disc ml-8",
+            h3 { class: "text-2xl", "{title}" }
+            ul { class: "list-disc ml-8",
                 {list.iter().map(|item| rsx!( li {
                     key: "{item}",
                     "{item}"
                 }))}
             }
         }
     )
-}
+}

dog-app/src/models.rs

@@ -1,24 +1,16 @@
-// List all breeds
-// Random image
-// By breed
-// By sub-breed
-// Browse breed list
-
 #![allow(non_snake_case)]
-use std::collections::HashMap;
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 
 #[derive(Serialize, Deserialize)]
 pub struct AllBreeds {
     pub message: HashMap<String, Vec<String>>,
     pub status: String,
 }
 
-
 pub async fn list_all_breeds() -> reqwest::Result<AllBreeds> {
     reqwest::get("https://dog.ceo/api/breeds/list/all")
-        .await
-        ?
+        .await?
         .json::<AllBreeds>()
         .await
 }
@@ -29,13 +21,9 @@ pub struct RandomImageByBreed {
     pub status: String,
 }
 
-
 pub async fn random_image_by_breed(breed: &str) -> reqwest::Result<RandomImageByBreed> {
     reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
-    .await
-    ?
-    .json::<RandomImageByBreed>()
-    .await
+        .await?
+        .json::<RandomImageByBreed>()
+        .await
 }
-
-