articles.rs

use {
    blast::{
        vdom::{el, VNode},
        Component, Context, FetchFuture,
    },
    blast_fetch::fetch,
    futures::Future,
    serde::Deserialize,
};

#[derive(Deserialize)]
struct ArticlesResponse {
    articles: Vec<Article>,
}

#[derive(Deserialize)]
struct Article {
    title: String,
    body: String,
}

pub struct ArticleList {
    articles: Option<Vec<Article>>,
}

impl Component for ArticleList {
    fn new() -> Self {
        Self { articles: None }
    }

    fn fetch(ctx: Context<Self>) -> FetchFuture {
        let future = fetch("http://conduit.productionready.io/api/articles").map(
            move |data: ArticlesResponse| {
                ctx.apply_fn(move |s| s.articles = Some(data.articles));
            },
        );

        Box::new(future)
    }

    fn render(&self) -> VNode {
        let articles = if let Some(ref articles) = self.articles {
            articles
                .iter()
                .map(|article| {
                    el("article")
                        .children(vec![
                            el("h3").child(&article.title).into(),
                            el("p").child(&article.body).into(),
                        ])
                        .into()
                })
                .collect()
        } else {
            vec![el("p").child("Loading articles...").into()]
        };

        el("section")
            .child(el("h2").child("Articles"))
            .child(el("p").children(vec!(
                "These articles have been pulled in from ".into(),
                el("a").attr("href", "http://realworld.io").child("realworld.io").into(),
                ".".into(),
            )))
            .children(articles)
            .into()
    }
}