feat(web): create and list posts

TownHallHQ · Sep 22, 2024 · 62814c0 · 62814c0
1 parent ebb8359
commit 62814c0
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 27 deletions.
diff --git a/crates/client/src/modules/post/posts/mod.rs b/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"
 )]

diff --git a/crates/web/src/components/feed/mod.rs b/crates/web/src/components/feed/mod.rs
@@ -1,36 +1,61 @@
 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://127.0.0.1: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 {
+                                    node,
+                                    ..
+                                }| {
+                                    view! { <Post post=node /> }
+                                }
+                            />
+                        </ul>
+                    }.into_view(),
+                    FeedPosts::Error(err) => view! { <p>{err}</p> }.into_view(),
+                }
+            }
         </div>
     }
 }
diff --git a/crates/web/src/components/feed/post.rs b/crates/web/src/components/feed/post.rs
@@ -1,7 +1,9 @@
 use leptos::{component, view, IntoView};
 
+use townhall_client::post::posts::posts::PostsPostsEdgesNode;
+
 #[component]
-pub fn Post() -> impl IntoView {
+pub fn Post(post: PostsPostsEdgesNode) -> impl IntoView {
     view! {
                 <li class="feed-post bg-white rounded-md p-4">
                     <div>
@@ -10,15 +12,14 @@ pub fn Post() -> impl IntoView {
                                 <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=3164&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A beautiful image" />
                             </figure>
                             <div class="flex flex-col ml-2">
-                                <strong>John Doe</strong>
+                                <strong>{post.author.username}</strong>
                                 <time class="text-sm text-gray-400">2 hours ago</time>
                             </div>
                         </article>
                     </div>
                     <div class="pt-6">
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec
-                            fermentum nunc. Nullam nec fermentum nunc. Nullam nec fermentum nunc.
+                            {post.title}
                         </p>
                     </div>
                     <div class="flex justify-between items-center pt-6">

diff --git a/crates/web/src/components/publisher/mod.rs b/crates/web/src/components/publisher/mod.rs
@@ -1,10 +1,26 @@
-use leptos::{component, create_rw_signal, view, IntoView};
+use leptos::{component, create_action, create_rw_signal, view, IntoView, SignalGet};
+use townhall_client::{post::post_create::post_create::PostCreateInput, Client};
 
 use crate::components::text_field::TextField;
 
 #[component]
 pub fn Publisher() -> impl IntoView {
     let text_content = create_rw_signal(String::default());
+    let send_post_action = create_action(|content: &String| {
+        let content = content.to_owned();
+
+        async move {
+            Client::new("http://127.0.0.1:8080")
+                .unwrap()
+                .post
+                .post_create(PostCreateInput {
+                    title: content,
+                    content: None,
+                    parent_id: None,
+                })
+                .await
+        }
+    });
 
     view! {
         <div id="publisher" class="bg-white rounded-md p-4 flex items-start gap-4">
@@ -14,12 +30,16 @@ pub fn Publisher() -> impl IntoView {
                 </figure>
             </div>
             <div id="publisher-form" class="flex flex-col items-start justify-start w-full">
-                <form class="flex flex-col justify-start w-full">
+                <form class="flex flex-col justify-start w-full" on:submit=move |ev| {
+                            ev.prevent_default();
+                            let content = text_content.get();
+                            send_post_action.dispatch(content);
+                        }>
                     <div class="w-full h-12">
                         <TextField class="w-full" name="content" value=text_content />
                     </div>
                     <div class="flex justify-end items-center">
-                        <button>Post</button>
+                        <button type="submit">Post</button>
                     </div>
                 </form>
             </div>