reload table without refresh

README.md

@@ -9,7 +9,8 @@
 - [`axum`](https://github.com/tokio-rs/axum) is used as an http framework, build on top of [tokio](https://github.com/tokio-rs/tokio) and [hyper](https://github.com/hyperium/hyper)
 - [`sqlx`](https://github.com) is used for database queries
 - [`askama`](https://github.com/djc/askama) is used as a templating engine for the web interface
-    - [`tailwind`](https://github.com/tailwindlabs/tailwindcss) is used for styling
+  - [`tailwind`](https://github.com/tailwindlabs/tailwindcss) is used for styling
+- [`htmx`](https://htmx.org/) is used to provide a little reactivity on the frontend
 
 ## Development
 
@@ -19,7 +20,7 @@
 
 ### Docker
 
-A compose stack is provided to start go2, with both a supporting database container and a mock authentication service. 
+A compose stack is provided to start go2, with both a supporting database container and a mock authentication service.
 
 The stack uses host networking due to weirdness in communication between the user, go2, and the auth service. This means that stack **requires rootful docker running on Linux**, and will not work with rootless docker or on MacOS/Windows. Contributions of a workaround to this would be appreciated.
 

src/routes/app.rs

@@ -24,10 +24,7 @@ struct PanelTemplate {
     username: String,
 }
 
-async fn panel(
-    session: ReadableSession,
-    State(state): State<AppState>,
-) -> Result<impl IntoResponse> {
+async fn panel(session: ReadableSession, _: State<AppState>) -> Result<impl IntoResponse> {
     if session.get::<String>("username").is_none() {
         return Err(Redirect::to("/auth/login").into());
     }
@@ -41,6 +38,8 @@ async fn panel(
 struct TableTemplate {
     redirects: Vec<crate::types::Redirect>,
 }
+
+///this returns just the html for the table body. Used for lazy loading and reloading by HTMX.
 async fn table(
     session: ReadableSession,
     State(state): State<AppState>,
@@ -80,7 +79,10 @@ async fn handle_form(
                 "An error occursed while adding your go link to the database.",
             )
         })?;
-    Ok(Redirect::to("/app/panel"))
+
+    //return updated table for htmx to swap in
+    //TODO: only return new row, more
+    Ok(Redirect::to("/app/panel/table"))
 }
 
 pub fn app_routes() -> Router<AppState> {

templates/app.html

@@ -2,8 +2,9 @@
 <div class="text-gray-700">
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
     <form
-      action=""
-      method="POST"
+      hx-post=""
+      hx-target="#link-table"
+      hx-swap="outerHTML"
       class="form flex space-x-2 flex-wrap mt-2 items-center"
     >
       <h2 class="block font-bold py-2 px-4 mt-5 text-lg">Add new go link</h2>

templates/table.html

@@ -1,4 +1,4 @@
-<tbody class="divide-y divide-gray-200 bg-white">
+<tbody class="divide-y divide-gray-200 bg-white" id="link-table">
   {% for r in redirects %}
   <tr>
     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6"