finish todo_app_sqlite_axum

This commit is contained in:
Greg Johnston 2024-04-19 20:15:04 -04:00
parent 52da0e43ac
commit 0c9167fd30
3 changed files with 31 additions and 8 deletions

View file

@ -58,12 +58,12 @@ async fn main() {
use leptos::prelude::*; use leptos::prelude::*;
view! { view! {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
//<AutoReload options=app_state.leptos_options.clone() /> // <AutoReload options=app_state.leptos_options.clone() />
<HydrationScripts options=leptos_options.clone()/> <HydrationScripts options=leptos_options.clone()/>
<link rel="stylesheet" id="leptos" href="/pkg/benwis_leptos.css"/> <link rel="stylesheet" id="leptos" href="/pkg/benwis_leptos.css"/>
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

View file

@ -1,9 +1,11 @@
use crate::error_template::ErrorTemplate; use crate::error_template::ErrorTemplate;
use leptos::context::use_context; use leptos::context::use_context;
use leptos::server::{Resource, ServerAction}; use leptos::reactive_graph::effect::Effect;
use leptos::server::{Resource, ServerAction, ServerMultiAction};
use leptos::tachys::either::Either; use leptos::tachys::either::Either;
use leptos::{ use leptos::{
component, server, suspend, view, ActionForm, ErrorBoundary, IntoView, component, server, suspend, view, ActionForm, ErrorBoundary, IntoView,
MultiActionForm,
}; };
use leptos::{prelude::*, Suspense, Transition}; use leptos::{prelude::*, Suspense, Transition};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
@ -106,19 +108,27 @@ pub fn TodoApp() -> impl IntoView {
#[component] #[component]
pub fn Todos() -> impl IntoView { pub fn Todos() -> impl IntoView {
let add_todo = create_server_multi_action::<AddTodo>(); let add_todo = ServerMultiAction::<AddTodo>::new();
let delete_todo = ServerAction::<DeleteTodo>::new();
let submissions = add_todo.submissions(); let submissions = add_todo.submissions();
let delete_todo = ServerAction::<DeleteTodo>::new(); let delete_todo = ServerAction::<DeleteTodo>::new();
//let submissions = add_todo.submissions();
// list of todos is loaded from the server in reaction to changes // list of todos is loaded from the server in reaction to changes
let todos = Resource::new_serde( let todos = Resource::new_serde(
move || (delete_todo.version().get()), //(add_todo.version().get(), delete_todo.version().get()), move || {
(
delete_todo.version().get(),
add_todo.version().get(),
delete_todo.version().get(),
)
},
move |_| get_todos(), move |_| get_todos(),
); );
view! { view! {
<MultiActionForm action=add_todo>
<label>"Add a Todo" <input type="text" name="title"/></label>
<input type="submit" value="Add"/>
</MultiActionForm>
<div> <div>
<Transition fallback=move || view! { <p>"Loading..."</p> }> <Transition fallback=move || view! { <p>"Loading..."</p> }>
<ErrorBoundary fallback=|errors| view! { <ErrorTemplate errors/> }> <ErrorBoundary fallback=|errors| view! { <ErrorTemplate errors/> }>
@ -152,8 +162,21 @@ pub fn Todos() -> impl IntoView {
} }
.wait() .wait()
}} }}
{move || {
submissions
.get()
.into_iter()
.filter(|submission| submission.pending().get())
.map(|submission| {
view! {
<li class="pending">
{move || submission.input().get().map(|data| data.title)}
</li>
}
})
.collect::<Vec<_>>()
}}
// {pending_todos}
</ul> </ul>
</ErrorBoundary> </ErrorBoundary>
</Transition> </Transition>