From b7ea8eac26af64ef0d9a5c4220abac6228e243cd Mon Sep 17 00:00:00 2001 From: Tyr Chen Date: Sun, 9 Jun 2024 15:49:22 -0700 Subject: [PATCH] feature: work on layout and story list --- hackernews/htmls/comment.html | 14 +++++++ hackernews/htmls/index.html | 55 +++++++++++++++++++++++++++ hackernews/htmls/main.html | 18 +++++++++ hackernews/htmls/send.html | 12 ++++++ hackernews/htmls/story_item.html | 7 ++++ hackernews/src/lib.rs | 3 ++ hackernews/src/main.rs | 61 +----------------------------- hackernews/src/ui/mod.rs | 48 +++++++++++++++++++++++ hackernews/src/ui/story_comment.rs | 22 +++++++++++ hackernews/src/ui/story_item.rs | 20 ++++++++++ test.rest | 4 +- 11 files changed, 202 insertions(+), 62 deletions(-) create mode 100644 hackernews/htmls/comment.html create mode 100644 hackernews/htmls/index.html create mode 100644 hackernews/htmls/main.html create mode 100644 hackernews/htmls/send.html create mode 100644 hackernews/htmls/story_item.html create mode 100644 hackernews/src/ui/mod.rs create mode 100644 hackernews/src/ui/story_comment.rs create mode 100644 hackernews/src/ui/story_item.rs diff --git a/hackernews/htmls/comment.html b/hackernews/htmls/comment.html new file mode 100644 index 0000000..f0de054 --- /dev/null +++ b/hackernews/htmls/comment.html @@ -0,0 +1,14 @@ +
  • +
    +

    Hi Akhil,

    +

    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.

    +
    +

    Thanks & Regards,

    +

    Alexandar

    +
    +
    +
    • diff --git a/hackernews/htmls/index.html b/hackernews/htmls/index.html new file mode 100644 index 0000000..212e7e8 --- /dev/null +++ b/hackernews/htmls/index.html @@ -0,0 +1,55 @@ + + + + + + + Document + + + +
    +
    + +
    +
    +
    +

    We need UI/UX designer

    +
    +

    Hi Akhil,

    +

    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.

    +
    +

    Thanks & Regards,

    +

    Alexandar

    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    + + + diff --git a/hackernews/htmls/main.html b/hackernews/htmls/main.html new file mode 100644 index 0000000..a110fe5 --- /dev/null +++ b/hackernews/htmls/main.html @@ -0,0 +1,18 @@ + +
    +
    +
      + +
    +
    +
    +
    +
      + +
    + +
    + + +
    +
    diff --git a/hackernews/htmls/send.html b/hackernews/htmls/send.html new file mode 100644 index 0000000..5c69940 --- /dev/null +++ b/hackernews/htmls/send.html @@ -0,0 +1,12 @@ +
    + +
    + + +
    +
    diff --git a/hackernews/htmls/story_item.html b/hackernews/htmls/story_item.html new file mode 100644 index 0000000..cdcf7d1 --- /dev/null +++ b/hackernews/htmls/story_item.html @@ -0,0 +1,7 @@ +
  • + +

    {title}

    +

    +     +
    {points} points by {user} {time} | {} comments
    +
    • diff --git a/hackernews/src/lib.rs b/hackernews/src/lib.rs index fc97cfc..e0e1e25 100644 --- 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 index 8ec1508..2c43922 100644 --- 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 }, -} - fn main() { // Init logger dioxus_logger::init(Level::INFO).expect("failed to init logger"); launch(App); } - -fn App() -> Element { - rsx! { - Router:: {} - } -} - -#[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) -> 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 new file mode 100644 index 0000000..7807375 --- /dev/null +++ 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 new file mode 100644 index 0000000..fc37aaa --- /dev/null +++ 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 new file mode 100644 index 0000000..c3b3775 --- /dev/null +++ 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 index 4c52db0..658a913 100644 --- 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