update L9 script

Author: mjzac

README.md

@@ -117,10 +117,10 @@ This work is licensed under a
 3. [Deleting a to-do with help of form](./html-forms/delete-todo/README.md)
 
 ### CSRF token
-4. [What is Cross Site Request Forgery (CSRF) and why should we care?](./html-forms/why-csrf/README.md)
-5. [Use csurf package in express.js application](./html-forms/use-csurf/README.md)
-6. [What are APIs](./html-forms/what-are-apis/README.md)
-7. [Send JSON or HTML response based on request headers](./html-forms/html-or-json-response/README.md)
+4. [What are APIs](./html-forms/what-are-apis/README.md)
+5. [Send JSON or HTML response based on request headers](./html-forms/html-or-json-response/README.md)
+6. [What is Cross Site Request Forgery (CSRF) and why should we care?](./html-forms/why-csrf/README.md)
+7. [Use csurf package in express.js application](./html-forms/use-csurf/README.md)
 8. [Milestone](./html-forms/milestone/README.md)
 
 ## L10. User Authentication and final wrap-up

backend-dev-with-express/add-tests/README.md

@@ -1,13 +1,13 @@
 ## Text
 
-In this lesson, we will look into how to test the routes that we have created for our Todo web application. First, we need to install a npm package `supertest` to help us with the testing. We will install it as a development dependency.
+In this lesson, we will learn, how to test the web endpoints of our application. But before doing that, make sure you have configured the pre-commit hook to run tests and lint-staged using husky.
+
+To run the tests, we use jest. Along with jest, we will also install another npm package called `supertest`. We will use `supertest` to send request to our express.js routes.
 
 ```sh
-npm install -D supertest
+npm install -D jest supertest
 ```
 
-We will use `supertest` to send request to our express.js routes.
-
 Next, we will edit the test scripts in `package.json` to drop and create the database before running the tests. We will use the `db:drop` command available with `sequelize-cli` to destroy the test database. Then we create a clean slate by using the `db:create` command.
 
 ```json

html-forms/add-new-todo/README.md

@@ -7,35 +7,41 @@ Edit the `app.js` with following contents.
 First, we need to import the database models.
 
 ```js
-const db = require("../models/index");
+const { Todo } = require("../models");
 ```
 
 Next, we can add the endpoint to display todo list in the browser.
 
 ```js
-app.get("/todos", async function (req, res, next) {
-  const overdue = await db.Todo.overdue();
-  const dueToday = await db.Todo.dueToday();
-  const dueLater = await db.Todo.dueLater();
+app.get("/", async function (request, response) {
+  const overdue = await Todo.overdue();
+  const dueToday = await Todo.dueToday();
+  const dueLater = await Todo.dueLater();
   res.render("index", { overdue, dueToday, dueLater });
 });
 ```
 
-To create a new todo, web browser should send a `POST` request. The required parameters like `title` and `dueDate` are sent as body of the `POST` request. To create such a handler we need to declare it using `router.post`. Express.js would parse the body of the request and make them available at `req.body`. And we would be able to extract `title` and `dueDate` from `req.body`.
+To create a new todo, web browser should send a `POST` request. The required parameters like `title` and `dueDate` are sent as body of the `POST` request. To create such a handler we need to declare it using `app.post`. Express.js would parse the body of the request and make them available at `request.body`. And we would be able to extract `title` and `dueDate` from `request.body`.
 
 ```js
-app.post("/todos", async function (req, res, next) {
-  await db.Todo.addTask({
-    title: req.body.title,
-    dueDate: new Date(req.body.dueDate),
-  });
-  res.redirect("/todos");
+app.post("/todos", async (request, response) => {
+  console.log("Creating a todo", request.body);
+  try {
+    await Todo.addTodo({
+      title: request.body.title,
+      dueDate: request.body.dueDate,
+    });
+    return response.redirect("/");
+  } catch (error) {
+    console.log(error);
+    return response.status(422).json(error);
+  }
 });
 ```
 
 Now we have the backend functioning. We will now adapt this functionality to the frontend.
 
-Let's edit the `todos.ejs` file to make sure the new todo item form has an `action` and `method` attribute.
+Let's edit the `index.ejs` file to make sure the new todo item form has an `action` and `method` attribute.
 
 ```html
 <form action="/todos" method="POST">...</form>
@@ -48,27 +54,26 @@ Next, we need to make sure the todo text is sent to server using the key `title`
 ```html
 <form action="/todos" method="POST">
   <div class="flex gap-2 py-4">
-    <div class="flex-auto w-64">
+    <div class="flex-auto">
       <input
         type="text"
-        class="border border-gray-300 text-gray-900 text-sm rounded w-full p-2"
         placeholder="What's next?"
         name="title"
-        autofocus
+        class="border border-gray-300 rounded text-gray-900 w-full p-2 text-sm"
         required
       />
     </div>
-    <div class="flex-auto w-32">
+    <div class="flex-auto">
       <input
         type="date"
         name="dueDate"
-        class="border border-gray-300 text-gray-900 text-sm rounded w-full p-2 leading-4	"
+        class="border border-gray-300 rounded text-gray-900 w-full p-2 text-sm leading-4	"
       />
     </div>
     <div class="flex-none">
       <button
         type="submit"
-        class="text-white bg-green-600 hover:bg-green-700 font-medium rounded text-sm px-5 py-2 mr-2 mb-2"
+        class="bg-green-600	text-white px-5 py-1.5 rounded font-medium mr-2 mb-2"
       >
         Add
       </button>

html-forms/delete-todo/README.md

@@ -2,79 +2,81 @@
 
 In this lesson, we will add capability to delete to-do item.
 
-First, let's edit the `todos.js` file in `router` folder to add this capability. To delete an entry in database, we use `delete` request. So let's add such a route.
+We will first add capability to remove an item to our model. Edit the `models/todo.js` to have a `remove` method.
 
 ```js
-app.delete('/todos/:id', async function (req, res, next) {
-  await db.Todo.removeTask(req.params.id);
-  res.json({ success: true })
-});
+static async remove(id) {
+      return this.destroy({
+        where: {
+          id,
+        },
+      });
+    }
 ```
 
-Here, the `id` of the todo item which is to be deleted is passed in the url. We just need to invoke the `removeTask` method which we have already implemented earlier.
-
-To add this capability to the front end, let's open the `todos.ejs` file in the `views` folder. Now, we need to add capability to delete the to-do when clicked on the trash icon.
+Next, let's edit the `app.js` file to add this capability. To delete an entry in database, we use `delete` request. So let's add such a route.
 
-We will wrap the `<a>` tags in its own `form`. Then invoke `deleteTodo` when clicked on it. Here we also pass the id to `deleteTodo` to identify which item was invoked.
-
-```html
-<form>
-  <a class="hidden trash-icon" href="#!" onclick="deleteTodo(<%= dueToday[i].id %>)">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-        stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round"
-          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-      </svg>
-  </a>
-</form>
+```js
+app.delete("/todos/:id", async (request, response) => {
+  try {
+    await Todo.remove(request.params.id);
+    return response.json({ success: true });
+  } catch (error) {
+    return response.status(422).json(error);
+  }
+});
 ```
 
-We will do the same for `dueLater` items also
+Here, the `id` of the todo item which is to be deleted is passed in the url. We just need to invoke the `remove` method which we have already implemented earlier.
 
-```html
-<form>
-  <a class="hidden trash-icon" href="#!" onclick="deleteTodo(<%= dueLater[i].id %>)">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-        stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round"
-          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-      </svg>
-  </a>
-</form>
-```
+To add this capability to the front end, let's open the `todos.ejs` file in the `views` folder. Now, we need to add capability to delete the to-do when clicked on the trash icon.
 
-Next, we have to update the `overdue` items.
+We will add `onClick` handler to invoke a `deleteTodo` function when clicked on it. Here we also pass the id to `deleteTodo` to identify which item was invoked.
 
 ```html
-<form>
-  <a class="hidden trash-icon" href="#!" onclick="deleteTodo(<%= overdue[i].id %>)">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-        stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round"
-          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-      </svg>
-  </a>
-</form>
+<a
+  href="#"
+  class="hidden trash-icon ml-2"
+  onclick="deleteTodo(<%= data[i].id %>)"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-4 h-4"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+</a>
 ```
 
 Now, we have to implement the actual JavaScript function `deleteTodo` which actually sends the delete request to the server.
 
 ```js
 function deleteTodo(id) {
-      fetch(`/todos/${id}`, {
-        method: 'delete',
-        headers: { 'Content-Type': 'application/json' },
-      }).then((res) => {
-        window.location.reload();
-      }).catch(err => console.error(err))
-    }
+  fetch(`/todos/${id}`, {
+    method: "delete",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => {
+      window.location.reload();
+    })
+    .catch((err) => console.error(err));
+}
 ```
 
 Here, We have used the built in `fetch` to do the network request of type `delete`.
 
 Now, let's run the express server.
 
 ```sh
-DEBUG=todo-manager:* npm start
+npm start
 ```
-Open the browser and visit `http://localhost:3000/todos` to view our to-do application. Now we should be able to click on thrash icon of the todo items and delete it.
+
+Open the browser and visit `http://localhost:3000/` to view our to-do application. Now we should be able to click on thrash icon of the todo items and delete it.

html-forms/html-or-json-response/README.md

@@ -25,20 +25,21 @@ Accept: application/json
 Let's modify the listing of Todos to return html when visited using browser and return a `JSON` response when it is invoked using Postman.
 
 ```js
-app.get("/todos", async function (req, res, next) {
-  const overdue = await db.Todo.overdue();
-  const dueToday = await db.Todo.dueToday();
-  const dueLater = await db.Todo.dueLater();
-  if (req.accepts("html")) {
-    res.render("index", {
+app.get("/", async (request, response) => {
+  const overdue = await Todo.overdue();
+  const dueToday = await Todo.dueToday();
+  const dueLater = await Todo.dueLater();
+  const completed = await Todo.completed();
+  if (request.accepts("html")) {
+    response.render("index", {
       title: "Todo application",
       overdue,
       dueToday,
       dueLater,
-      csrfToken: req.csrfToken(),
+      completed,
     });
   } else {
-    res.json({
+    response.json({
       overdue,
       dueToday,
       dueLater,
@@ -47,15 +48,15 @@ app.get("/todos", async function (req, res, next) {
 });
 ```
 
-Here, we check whether the client accepts `html` response using `req.accept()`. If the client can accept html response, we render the html page. If it doesn't then we send back a `JSON` reponse.
+Here, we check whether the client accepts `html` response using `request.accept()`. If the client can accept html response, we render the html page. If it doesn't then we send back a `JSON` reponse.
 
 Let's save the file and start the app.
 
 ```sh
-DEBUG=todo-manager:* npm start
+npm start
 ```
 
-If we visit `http://localhost:3000/todos`, we can see the todo list being rendered as HTML. Next, send a request from API client like _Postman_, but also add a HTTP header with key `Accept` and value `application/json` to the same url. You will get a json reponse similar to this:
+If we visit `http://localhost:3000/`, we can see the todo list being rendered as HTML. Next, send a request from API client like _Postman_, but also add a HTTP header with key `Accept` and value `application/json` to the same url. You will get a json reponse similar to this:
 
 ```json
 {