feature: work on layout and story list

tyr-rust-bootcamp · Jun 9, 2024 · b7ea8ea · b7ea8ea
1 parent bea0741
commit b7ea8ea
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 62 deletions.
diff --git a/hackernews/htmls/comment.html b/hackernews/htmls/comment.html
@@ -0,0 +1,14 @@
+<li>
+  <article class="mt-8 leading-7 tracking-wider text-gray-500">
+    <p>Hi Akhil,</p>
+    <p>Design and develop enterprise-facing UI and consumer-facing UI as well as
+      REST API
+      backends.Work with
+      Product Managers and User Experience designers to create an appealing user experience for desktop web and
+      mobile web.</p>
+    <footer class="mt-12">
+      <p>Thanks & Regards,</p>
+      <p>Alexandar</p>
+    </footer>
+  </article>
+</li>
diff --git a/hackernews/htmls/index.html b/hackernews/htmls/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <title>Document</title>
+</head>
+<body>
+
+<main class="flex w-full h-full shadow-lg rounded-3xl">
+  <section class="flex flex-col w-4/12 h-full pt-3 overflow-y-scroll bg-gray-50">
+    <ul class="mt-6">
+      <li class="px-3 py-5 transition border-b hover:bg-indigo-100">
+        <a href="#" class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">{title}</h3>
+          <p class="text-gray-400 text-md"></p>
+        </a>
+        <div class="italic text-gray-400 text-md">	{points} points by {user} {time} | <a href="#">{} comments</a></div>
+      </li>
+    </ul>
+  </section>
+  <section class="flex flex-col w-8/12 px-4 bg-white rounded-r-3xl">
+    <section>
+      <h1 class="text-2xl font-bold">We need UI/UX designer</h1>
+      <article class="mt-8 leading-7 tracking-wider text-gray-500">
+        <p>Hi Akhil,</p>
+        <p>Design and develop enterprise-facing UI and consumer-facing UI as well as
+          REST API
+          backends.Work with
+          Product Managers and User Experience designers to create an appealing user experience for desktop web and
+          mobile web.</p>
+        <footer class="mt-12">
+          <p>Thanks & Regards,</p>
+          <p>Alexandar</p>
+        </footer>
+      </article>
+    </section>
+    <section class="mt-6 mb-3 border rounded-xl bg-gray-50">
+      <textarea class="w-full p-2 bg-gray-50 rounded-xl" placeholder="Type your reply here..." rows="3"></textarea>
+      <div class="flex items-center justify-between p-2">
+        <button class="w-6 h-6 text-gray-400">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+          </svg>
+        </button>
+        <button class="px-6 py-2 text-white bg-purple-600 rounded-xl">Reply</button>
+      </div>
+    </section>
+  </section>
+</main>
+
+</body>
+</html>
diff --git a/hackernews/htmls/main.html b/hackernews/htmls/main.html
@@ -0,0 +1,18 @@
+
+<main class="flex w-full h-full shadow-lg rounded-3xl">
+  <section class="flex flex-col w-4/12 h-full pt-3 overflow-y-scroll bg-gray-50">
+    <ul class="mt-6">
+      <!-- story item component with for loop -->
+    </ul>
+  </section>
+  <section class="flex flex-col w-8/12 px-4 bg-white rounded-r-3xl">
+    <section>
+      <ul>
+        <!-- comment component with for loop -->
+      </ul>
+
+    </section>
+
+    <!-- send component -->
+  </section>
+</main>
diff --git a/hackernews/htmls/send.html b/hackernews/htmls/send.html
@@ -0,0 +1,12 @@
+<section class="mt-6 mb-3 border rounded-xl bg-gray-50">
+  <textarea class="w-full p-2 bg-gray-50 rounded-xl" placeholder="Type your reply here..." rows="3"></textarea>
+  <div class="flex items-center justify-between p-2">
+    <button class="w-6 h-6 text-gray-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+      </svg>
+    </button>
+    <button class="px-6 py-2 text-white bg-purple-600 rounded-xl">Reply</button>
+  </div>
+</section>
diff --git a/hackernews/htmls/story_item.html b/hackernews/htmls/story_item.html
@@ -0,0 +1,7 @@
+<li class="px-3 py-5 transition border-b hover:bg-indigo-100">
+  <a href="#" class="flex items-center justify-between">
+    <h3 class="text-lg font-semibold">{title}</h3>
+    <p class="text-gray-400 text-md"></p>
+  </a>
+  <div class="italic text-gray-400 text-md">	{points} points by {user} {time} | <a href="#">{} comments</a></div>
+</li>
diff --git a/hackernews/src/lib.rs b/hackernews/src/lib.rs
@@ -1,8 +1,11 @@
 pub(crate) mod api;
+mod ui;
 
 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
 
+pub use ui::App;
+
 #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 pub struct StoryItem {
     pub id: i64,

diff --git a/hackernews/src/main.rs b/hackernews/src/main.rs
@@ -1,68 +1,9 @@
-#![allow(non_snake_case)]
-
 use dioxus::prelude::*;
+use hackernews::App;
 use tracing::Level;
 
-#[derive(Clone, Routable, Debug, PartialEq)]
-enum Route {
-    #[route("/")]
-    Home {},
-    #[route("/blog/:id")]
-    Blog { id: i32 },
-    #[route("/:..route")]
-    NotFound { route: Vec<String> },
-}
-
 fn main() {
     // Init logger
     dioxus_logger::init(Level::INFO).expect("failed to init logger");
     launch(App);
 }
-
-fn App() -> Element {
-    rsx! {
-        Router::<Route> {}
-    }
-}
-
-#[component]
-fn Blog(id: i32) -> Element {
-    rsx! {
-        Link { to: Route::Home {}, "Go to counter" }
-        div { class: "flex flex-col items-center justify-center h-screen",
-            h1 { class: "text-3xl p-4", "Blog post {id}" }
-        }
-    }
-}
-
-#[component]
-fn NotFound(route: Vec<String>) -> Element {
-    let path = route.join("/");
-    rsx! {
-        div { class: "flex flex-col items-center justify-center h-screen",
-            h1 { class: "text-3xl p-4", "Not Found: The page `/{path}` you requested is missing" }
-        }
-    }
-}
-
-#[component]
-fn Home() -> Element {
-    let mut count = use_signal(|| 0);
-
-    rsx! {
-        Link { to: Route::Blog { id: count() }, "Go to blog" }
-        div { class: "flex flex-col items-center justify-center h-screen",
-            h1 { class: "text-3xl p-4", "High-Five counter: {count}" }
-            button {
-                class: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800",
-                onclick: move |_| count += 1,
-                "Up high!"
-            }
-            button {
-                class: "focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
-                onclick: move |_| count -= 1,
-                "Down low!"
-            }
-        }
-    }
-}
diff --git a/hackernews/src/ui/mod.rs b/hackernews/src/ui/mod.rs
@@ -0,0 +1,48 @@
+#![allow(non_snake_case)]
+
+mod story_comment;
+mod story_item;
+
+use crate::api::get_top_stories;
+use dioxus::prelude::*;
+use story_item::StoryItem;
+
+pub fn App() -> Element {
+    rsx! {
+      main { class: "flex w-full h-full shadow-lg rounded-3xl",
+        section { class: "flex flex-col w-4/12 h-full pt-3 overflow-y-scroll bg-gray-50",
+          Stories {}
+        }
+        section { class: "flex flex-col w-8/12 px-4 bg-white rounded-r-3xl",
+          section {
+            ul {}
+          }
+        }
+      }
+    }
+}
+
+#[component]
+fn Stories() -> Element {
+    let stories = use_resource(move || get_top_stories(20));
+    match &*stories.read_unchecked() {
+        Some(Ok(stories)) => rsx! {
+          ul {
+            for story in stories {
+              StoryItem { story: story.clone() }
+            }
+          }
+        },
+        Some(Err(err)) => rsx! {
+          div { class: "mt-6 text-red-500",
+            p { "Failed to fetch stories" }
+            p { "{err}" }
+          }
+        },
+        None => rsx! {
+          div { class: "mt-6",
+            p { "Loading stories..." }
+          }
+        },
+    }
+}
diff --git a/hackernews/src/ui/story_comment.rs b/hackernews/src/ui/story_comment.rs
@@ -0,0 +1,22 @@
+#![allow(non_snake_case)]
+
+use crate::StoryItem;
+use dioxus::prelude::*;
+
+#[component]
+pub fn StoryComment(data: StoryItem) -> Element {
+    rsx! {
+      li {
+        article { class: "mt-8 leading-7 tracking-wider text-gray-500",
+          p { "Hi Akhil," }
+          p {
+            "Design and develop enterprise-facing UI and consumer-facing UI as well as\n      REST API\n      backends.Work with\n      Product Managers and User Experience designers to create an appealing user experience for desktop web and\n      mobile web."
+          }
+          footer { class: "mt-12",
+            p { "Thanks & Regards," }
+            p { "Alexandar" }
+          }
+        }
+      }
+    }
+}
diff --git a/hackernews/src/ui/story_item.rs b/hackernews/src/ui/story_item.rs
@@ -0,0 +1,20 @@
+#![allow(non_snake_case)]
+
+use crate::StoryItem;
+use dioxus::prelude::*;
+
+#[component]
+pub fn StoryItem(story: StoryItem) -> Element {
+    rsx! {
+      li { class: "px-3 py-5 transition border-b hover:bg-indigo-100",
+        a { href: "#", class: "flex items-center justify-between",
+          h3 { class: "text-lg font-semibold", "{story.title}" }
+          p { class: "text-gray-400 text-md" }
+        }
+        div { class: "italic text-gray-400 text-md",
+          span { "{story.score} points by {story.by} {story.time} | " }
+          a { href: "#", "{story.kids.len()} comments" }
+        }
+      }
+    }
+}
diff --git a/test.rest b/test.rest
@@ -10,12 +10,12 @@ GET https://hacker-news.firebaseio.com/v0/item/{{id}}.json
 
 ### GET comments
 
-@comment_id = 40627270
+@comment_id = 40627486
 
 GET https://hacker-news.firebaseio.com/v0/item/{{comment_id}}.json
 
 ### GET user
 
-@user_id = flafla2
+@user_id = CaptainOfCoit
 
 GET https://hacker-news.firebaseio.com/v0/user/{{user_id}}.json