Fixes for tiny problems

Author: marcusoftnet

_posts/2025-01-15-htmx-todo-tutorial-II.md

@@ -115,7 +115,7 @@ Let's create a `HTTP POST` route handler like this, just to see that we got some
 // Auth Routes
 app.post("/auth/login", async (req, res) => {
   const { credential } = req.body;
-  console.log({req.body});
+  console.log(req.body);
 });
 ```
 
@@ -204,10 +204,10 @@ Now we configure our Express application to use the session:
 //  at the top - import the functions
 import { sessionConfig, sessionTimeoutMiddleware } from "./middleware/session.js";
 
-// At the end of the middleware section - configure the sesions
+// At the end of the middleware section - configure the sessions
 // Configure sessions
-app.use(appSession.config);
-app.use(appSession.sessionTimeout);
+app.use(sessionConfig);
+app.use(sessionTimeoutMiddleware);
 ```
 
 We have configured our session handling.
@@ -348,6 +348,12 @@ app.get("/auth/logout", (req, res) => {
 
 We simply destroy the session and return a re-rendered home page.
 
+## WHY DO I HAVE TO LOGIN IN AND OUT ALL THE TIME!?
+
+When we restart the server in development mode, `npm run dev` we are also, through our session configuration killing the session. Hence we have to log in every time that happens.
+
+You can get around this by storing the session in a persistent store, but I have just left that here.
+
 ## First HTMx attributes
 
 And we also got to use our first HTMx attributes; `hx-get` and `hx-target`. Let me give a short introduction, but dive deeper in the next post.

_posts/2025-01-16-htmx-todo-tutorial-III.md

@@ -38,12 +38,14 @@ service cloud.firestore {
 
 ### Configuration application
 
-We will use the firebase SDK to access Firestore, so install it with `npm i firestore`.
+We will use the firebase SDK to access Firestore, so install it with `npm i firebase`.
 
 Then create a firebase app, by configuring it like this (I've put this in `lib/firebase/config.js`):
 
 ```javascript
 import { initializeApp } from "firebase/app";
+import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
 
 const firebaseConfig = {
   apiKey: process.env.FIREBASE_APIKEY,
@@ -54,7 +56,10 @@ const firebaseConfig = {
   appId: process.env.FIREBASE_APPID,
 };
 
-export default const app = initializeApp(firebaseConfig);
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
+export const auth = getAuth(app);
 ```
 
 Yes. Let's play it safe and put all those keys in the `.env` file.
@@ -215,7 +220,7 @@ First let's create the todo-routes in a separate file (`routes/todo.js`), and cr
 import express from "express";
 const router = express.Router();
 
-router.get("/new", (req, res) => res.render("/todo/new.ejs"));
+router.get("/new", (req, res) => res.render("todo/new.ejs"));
 
 export default router;
 ```
@@ -239,7 +244,7 @@ Then create the form in `views/todo/new.ejs`:
 
 We'll soon add in the HTMx attributes.
 
-Let's clean up the `main.ejs` and make the main section look like this:
+Let's clean up the `main.ejs`, make it a `<main>`-section, take out the hard-coded data and make the main section look like this:
 
 ```html
 <main class="todo-container">
@@ -252,6 +257,8 @@ Let's clean up the `main.ejs` and make the main section look like this:
 </main>
 ```
 
+Yes - that's all we need. Later our todo-data will be injected into the `todo-list` using HTMX.
+
 Notice the `hx-trigger="load"` that will issue a `HTTP GET` towards `/todo/new` when the div is loaded. That will then lazily load the list.
 
 Also notice the `<div id="todo-list">` which will be the place where the todo list is generated.
@@ -278,7 +285,7 @@ Let's set up the form and button to issue the requests in the proper way :
 ```
 
 * With the help `hx-post`, `hx-target` and `hx-swap` we have told HTMx to post the form (it will automatically pick up all inputs in the form), and add the result to `#todo-list`
-* HTMx has a [rich event system](https://htmx.org/attributes/hx-on/) that we can hook into. Here we are getting called after the request and reset the form.
+* HTMx has a [rich event system](https://htmx.org/attributes/hx-on/) that we can hook into, using various `hx-on`-attributes.  Here we using `hx-on::after-request` to get called after the request and reset the form. Yes, using some JavaScript, although we are using HTMx (the framework that promise that you shouldn't write any JavaScript ... sue me).
 
 Let's now build the backend that stores the todo in firestore and return a snippet of html to insert in `#todo-list`
 
@@ -307,15 +314,15 @@ And the `todo/todo-list-item.ejs` can look like this:
 </div>
 ```
 
-(I made some styling changes here)
+(I made some styling changes here, that you can steal from the [finished style-sheet](https://github.com/marcusoftnet/htmx-todo-tutorial/blob/main/public/style.css))
 
 Perfect we can now create new todo items. AND they get prepended to the list. However, if you reload the page the list is gone.
 
 ### Lazy load the list of todos
 
 That's because we are using HTMx capabilities to dynamically update the list, on the client. However, we have never loaded the list of items from the start (or when the page is reloaded).
 
-But we have everything we know to do that. Let's lazily load the list. Here's the backend in `routes/todo.js`:
+But we have everything we need to do that, in place (just about). Let's lazily load the list. Here's the backend in `routes/todo.js`:
 
 ```javascript
 import { addTodo, getAllTodos } from "../lib/firebase/todoService.js";
@@ -371,7 +378,7 @@ Restart the application and log in and you can now see the different routes bein
 
 ### Toggle completion
 
-Toggle completion will be implemented with a `HTTP PUT` and then I'll just replace the entire `#todo-item`.
+Toggle completion will be implemented with a `HTTP PUT` and then I'll just replace the entire `#todo-item`. Update the `todo-list-item.ejs` to look like this:
 
 ```html
 <div class="todo-item">
@@ -399,6 +406,8 @@ router.put("/:id/toggle", async (req, res) => {
 });
 ```
 
+(Don't forget to import `toggleTodoCompleted` and `getTodo` from the `todoService.js`)
+
 The `:id` construct is a way for Express to parse the querystring into `req.params.id`.
 
 ### Delete Todo items
@@ -414,7 +423,7 @@ router.delete("/:id", async (req, res) => {
 });
 ```
 
-The correct way, according to REST principles, to respond to `HTTP DEL` is through `No Content` (status code 200 or 204). I've always wonder about that, but now it makes sense. Let's replace this element itself with the empty response, in effect deleting the the element.
+The correct way, according to REST principles, to respond to `HTTP DEL` is through `No Content` (status code 200 or 204, but I ran into problems returning 204). I've always wonder about that, but now it makes sense. Let's replace this element itself with the empty response, in effect deleting the the element.
 
 In the template I also show off the `hx-confirm` that will pop-up a confirmation box.
 
@@ -467,6 +476,8 @@ Here's the cleaned up code:
 
 Nice! We're getting close to done. Let's make a Edit-feature too.
 
+(Again - I added some styling here to better see that the icons are clickable - get your [styles here](https://github.com/marcusoftnet/htmx-todo-tutorial/blob/main/public/style.css))
+
 ### Edit todo item
 
 This is a bit trickier - we need a form to edit the item, and then a way to update the item using a `HTTP PUT`.
@@ -487,9 +498,31 @@ router.put("/:id", async (req, res) => {
 });
 ```
 
-Displaying the edit form is a little bit interesting. We're going to change
+First we update the `todo-list-item.ejs` to include a way to call the `/todo/<id>/edit` route and display the `edit.ejs´ form:
 
-And the `edit.ejs` file looks different enough from the `new.ejs` to warren a separate file, but it's quite similar:
+```html
+<div class="todo-item" hx-target="closest .todo-item" hx-swap="outerHTML">
+  <span class="todo-title"><%= todo.title %></span>
+  <span class="todo-field"><%= todo.duedate %></span>
+  <span class="todo-field todo-action" hx-put="/todo/<%= todo.id %>/toggle"
+    ><%= todo.completed ? "✅" : "⏳" %></span
+  >
+  <span
+    class="todo-field todo-action"
+    hx-get="/todo/<%= todo.id %>/edit"
+    hx-swap="innerHTML"
+    >...</span
+  >
+  <span
+    class="todo-field todo-action"
+    hx-confirm="Delete?! Sure about that?"
+    hx-delete="/todo/<%= todo.id %>"
+    >❌</span
+  >
+</div>
+```
+
+The `edit.ejs` file looks different enough from the `new.ejs` to call for a separate file, but it's quite similar:
 
 ```html
 <form id="new-todo-form">
@@ -504,6 +537,10 @@ And the `edit.ejs` file looks different enough from the `new.ejs` to warren a se
 </form>
 ```
 
+Here we are making `HTTP PUT` request using `hx-put="/todo/<%= todo.id %>"` and update the information about the item. I did not include the Completion here, as there's a separate function for that.
+
+I had a problem here when I used the `id` attribute of the HTML elements. When sending a HTML form back (using in our case `hx-put`) we need to use the `name`-attributes on `<input>` elements. `id` are for using the JavaScript DOM.
+
 ## Summary
 
 That's it for this post. We have built a fully-fledge (albeit missing some error handling and validation, I'm happy to admit) todo application, storing the information in a collection per logged in user.

_posts/2025-01-17-htmx-todo-tutorial-IV.md

@@ -142,10 +142,9 @@ Let's take the `router.delete("/:id")` as an example. Add the `HX-Trigger` heade
 ```javascript
 router.delete("/:id", async (req, res) => {
   await deleteTodo(req.params.id);
-  res
-    .status(204) // no content
-    .header("HX-Trigger", '{"ITEM_UPDATED": `The ${id} item was DELETED`}')
-    .send();
+
+  res.setHeader("HX-Trigger", '{"ITEM_UPDATED": `The ${id} item was DELETED`}');
+  res.send();
 });
 ```
 
@@ -194,6 +193,11 @@ There's only one problem, it's not showing up. That's because our `counter.ejs`
 And then, only for the `/` route I can pass `addSwapOOB:true`:
 
 ```javascript
+router.get("/", async (req, res) => {
+  const todos = await getAllTodos();
+  const counters = getCounters(todos);
+  res.render("todo/list.ejs", { todos, counters, addSwapOOB: true });
+});
 ```
 
 I'm not too happy but it will help to show the different approaches.
@@ -216,7 +220,7 @@ router.put("/:id/toggle", async (req, res) => {
 });
 ```
 
-And now the counters are updated through the events that gets triggered
+And now the counters are updated through the events that gets triggered. See the [end result here](https://github.com/marcusoftnet/htmx-todo-tutorial/blob/main/routes/todo.js).
 
 ## Summary
 
@@ -238,4 +242,4 @@ I learned a lot by writing this series and I hope you found it useful too.
 
 I think HTMx is a breath of fresh air for web developers that, like me, have got lost in SPA frameworks and JSON-to-HTML parsing. It brings the pure ideas of the web back to the forefront while still allows me to write websites that only rerenders the part of the application that has changed.
 
-[The code is found here in the state that I left it in at the end of this post.](https://github.com/marcusoftnet/htmx-todo-tutorial/tree/406bda133d83410d85c52286f66a4f0124b19e6e)
+[The code is found here in the state that I left it in at the end of this post.](https://github.com/marcusoftnet/htmx-todo-tutorial/tree/406bda133d83410d85c52286f66a4f0124b19e6e). I then did some additional refactorings and the [`main` branch contains these improvements.](https://github.com/marcusoftnet/htmx-todo-tutorial)