Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): create and list posts #227

Merged
merged 1 commit into from
Sep 22, 2024
Merged

feat(web): create and list posts #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions crates/client/src/modules/post/posts/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
)]
Expand Down
61 changes: 43 additions & 18 deletions crates/web/src/components/feed/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
}
}
9 changes: 5 additions & 4 deletions crates/web/src/components/feed/post.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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">
Expand Down
26 changes: 23 additions & 3 deletions crates/web/src/components/publisher/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down
Loading