feat: playing with htmx

Cargo.lock

@@ -78,6 +78,7 @@ checksum = "edca88bc138befd0323b20752846e6587272d3b03b0343c8ea28a6f819e6e71f"
 dependencies = [
  "async-trait",
  "axum-core",
+ "axum-macros",
  "bytes",
  "futures-util",
  "http",
@@ -125,6 +126,17 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "axum-macros"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57d123550fa8d071b7255cb0cc04dc302baa6c8c4a79f55701552684d8399bce"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.74"

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-axum = "0.7.9"
+axum = { version = "0.7.9", features = ["macros"] }
 chrono = "0.4.39"
 r2d2 = "0.8.10"
 r2d2_sqlite = "0.25.0"

src/main.rs

@@ -49,11 +49,9 @@ fn run_migrations(pool: &DbPool) -> rusqlite::Result<()> {
     // If the migration version query fails, we assume it's because the table isn't there yet so we
     // try to run the first migration
     let mut next_version = conn
-        .query_row(
-            "select version from migration_version order by updated_at desc limit 1",
-            (),
-            |row| row.get::<_, usize>(0).map(|n| n + 1),
-        )
+        .query_row("select max(version) from migration_version", (), |row| {
+            row.get::<_, usize>(0).map(|n| n + 1)
+        })
         .unwrap_or(0);
 
     while next_version < MIGRATIONS.len() {
@@ -80,8 +78,11 @@ fn run_migrations(pool: &DbPool) -> rusqlite::Result<()> {
 fn load_templates() -> Tera {
     let mut tera = Tera::default();
 
-    tera.add_raw_templates(vec![("index.html", include_str!("templates/index.html"))])
-        .unwrap();
+    tera.add_raw_templates(vec![
+        ("index.html", include_str!("templates/index.html")),
+        ("plant_li.html", include_str!("templates/plant_li.html")),
+    ])
+    .unwrap();
 
     tera
 }

src/migrations/001_plants.sql

@@ -2,5 +2,5 @@ create table plants (
     id integer primary key,
     name text not null,
     species text not null,
-    description text
+    description text not null
 );

src/server/mod.rs

@@ -1,6 +1,11 @@
-use axum::{extract::State, response::Html, routing::get, Router};
+use axum::{
+    extract::State,
+    response::Html,
+    routing::{get, post},
+    Form, Router,
+};
 use r2d2_sqlite::rusqlite::{self, Row};
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use tera::Context;
 
 #[derive(Serialize)]
@@ -8,7 +13,7 @@ struct Plant {
     id: i32,
     name: String,
     species: String,
-    description: Option<String>,
+    description: String,
 }
 
 impl TryFrom<&Row<'_>> for Plant {
@@ -25,7 +30,10 @@ impl TryFrom<&Row<'_>> for Plant {
 }
 
 pub fn app(ctx: crate::Context) -> axum::Router {
-    Router::new().route("/", get(get_index)).with_state(ctx)
+    Router::new()
+        .route("/", get(get_index))
+        .route("/plants", post(post_plants))
+        .with_state(ctx)
 }
 
 async fn get_index(State(ctx): State<crate::Context>) -> Html<String> {
@@ -48,3 +56,38 @@ async fn get_index(State(ctx): State<crate::Context>) -> Html<String> {
     context.insert("plants", &plants);
     Html(ctx.tera.render("index.html", &context).unwrap())
 }
+
+#[derive(Deserialize)]
+struct NewPlant {
+    name: String,
+    species: String,
+    description: String,
+}
+
+async fn post_plants(
+    State(ctx): State<crate::Context>,
+    Form(plant): Form<NewPlant>,
+) -> Html<String> {
+    let plant = tokio::task::spawn_blocking(move || {
+        let conn = ctx.pool.get().unwrap();
+
+        let mut stmt = conn
+            .prepare(
+                "insert into plants (name, species, description) values ($1, $2, $3) returning *",
+            )
+            .unwrap();
+        let plant = stmt
+            .query_row((&plant.name, &plant.species, &plant.description), |row| {
+                Plant::try_from(row)
+            })
+            .unwrap();
+
+        plant
+    })
+    .await
+    .unwrap();
+
+    let mut context = Context::new();
+    context.insert("plant", &plant);
+    Html(ctx.tera.render("plant_li.html", &context).unwrap())
+}

src/templates/index.html

@@ -1,11 +1,23 @@
 <html>
+    <head>
+        <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+    </head>
     <body>
         <h1>Calathea</h1>
         <h2>Plants</h2>
-        <ul>
+        <ul id="plants">
             {% for plant in plants %}
             <li>{{ plant.name }} ({{ plant.species }})</li>
             {% endfor %}
         </ul>
+        <form hx-post="/plants" hx-target="#plants" hx-swap="beforeend">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name"></br>
+            <label for="species">Species:</label>
+            <input type="text" id="species" name="species"></br>
+            <label for="description">Description:</label>
+            <textarea id="description" name="description" rows=4></textarea></br>
+            <input type="submit">
+        </form>
     </body>
 </html>

src/templates/plant_li.html

@@ -0,0 +1 @@
+<li>{{ plant.name }} ({{ plant.species }})</li>

src/templates/plants_ul.html

@@ -0,0 +1,5 @@
+<ul id="plants">
+    {% for plant in plants %}
+    <li>{{ plant.name }} ({{ plant.species }})</li>
+    {% endfor %}
+</ul>