feat: fetch and render posts

crates/client/src/modules/post/posts/mod.rs

@@ -3,15 +3,14 @@ use graphql_client::reqwest::post_graphql;
 use graphql_client::GraphQLQuery;
 use posts::{PostsPostsEdges, PostsPostsPageInfo, Variables};
 use pxid::Pxid;
-use serde::Serialize;
 
 use crate::{DateTime, GRAPHQL_PATH};
 
 use super::PostClient;
 
 #[derive(GraphQLQuery)]
 #[graphql(
-    response_derives = "Clone,Debug,Deserialize,Serializable",
+    response_derives = "Clone,Debug,Eq,PartialEq",
     schema_path = "schema.json",
     query_path = "src/modules/post/posts/Posts.gql"
 )]

crates/web/src/components/feed/mod.rs

@@ -1,36 +1,58 @@
 mod post;
 
-use leptos::{component, create_resource, view, IntoView};
+use leptos::{
+    component, create_effect, create_signal, spawn_local, view, For, IntoView, SignalGet, SignalSet,
+};
+
+use townhall_client::post::posts::posts::PostsPostsEdges;
 use townhall_client::Client;
 
 use self::post::Post;
 
+#[derive(Clone, Debug, PartialEq, Eq)]
+enum FeedPosts {
+    Loading,
+    Ready(Vec<PostsPostsEdges>),
+    Error(String),
+}
+
 #[component]
 pub fn Feed() -> impl IntoView {
-    let posts = create_resource(
-        || (),
-        |_| async move {
-            let client = Client::new("http://localhost:8080");
+    let (posts_getter, posts_setter) = create_signal(FeedPosts::Loading);
 
-            let posts = client
+    create_effect(move |_| {
+        spawn_local(async move {
+            match Client::new("http://localhost:8080")
                 .unwrap()
                 .post
-                .posts(None, None, Some(10), None)
+                .posts(None, None, Some(20), None)
                 .await
-                .unwrap();
-
-            posts
-        },
-    );
+            {
+                Ok(posts) => posts_setter.set(FeedPosts::Ready(posts.edges.to_owned())),
+                Err(err) => posts_setter.set(FeedPosts::Error(err.to_string())),
+            };
+        });
+    });
 
     view! {
         <div id="feed">
-            <ul class="space-y-4">
-                <Post />
-                <Post />
-                <Post />
-                <Post />
-            </ul>
+            {
+                move || match posts_getter.get() {
+                    FeedPosts::Loading => view! { <p>Loading...</p> }.into_view(),
+                    FeedPosts::Ready(posts) => view! {
+                        <ul class="space-y-4">
+                            <For
+                                each=move || posts.clone()
+                                key=|p| p.node.id
+                                children=move |_: PostsPostsEdges| {
+                                    view! { <Post /> }
+                                }
+                            />
+                        </ul>
+                    }.into_view(),
+                    FeedPosts::Error(err) => view! { <p>{err}</p> }.into_view(),
+                }
+            }
         </div>
     }
 }