React applications can pass data to servers by embedding it in a URL path as path parameters part of a URL. For instance the last two integers — 2 and 4 — at the end of the following URL can be parsed by a corresponding matching route on the server, add the two integers, and respond with the result of 6: /lab5/add/2/4. The following route declarations can parse path parameters a and b encoded in paths /lab5/add/:a/:b and /lab5/subtract/:a/:b. In PathParameters.js, implement the routes below and import it in Lab5/index.js. On your own create routes /lab5/multiply/:a/:b and /lab5/divide/:a/:b that calculate the arithmetic multiplication and division.

Retrieve path parameters as strings from req.params, parse them as integers, then send the result as a string. Do not send a bare integer: browsers and some HTTP clients treat a numeric body as a status code, so res.send(6) can look like a 6 status instead of the text six. Convert with .toString().

export default function PathParameters(app) {
  const add = (req, res) => {
    const { a, b } = req.params;
    const sum = parseInt(a) + parseInt(b);
    res.send(sum.toString());
  };
  const subtract = (req, res) => {
    const { a, b } = req.params;
    res.send((parseInt(a) - parseInt(b)).toString());
  };
  app.get("/lab5/add/:a/:b", add);
  app.get("/lab5/subtract/:a/:b", subtract);
}

Note when you import, make sure to include the extension .js. Pass a reference of app to the PathParameters function. Confirm that http://localhost:4000/lab5/add/6/4 responds with 10 and http://localhost:4000/lab5/subtract/6/4 responds with 2. Also confirm the routes you implemented on your own.

import PathParameters from "./PathParameters.js";
export default function Lab5(app) {
  app.get("/lab5/welcome", (req, res) => {
    res.send("Welcome to Lab 5");
  });
  PathParameters(app);
}

Meanwhile, in the React Web application, let us create a React component to test the new routes from our Web application. Web applications that interact with server applications are often referred to as client applications since they are the client in an application built using a client/server architecture. Create the component below that declares state variables a and b, encodes the values in hyperlinks, and when you click them, the server responds with the addition or subtraction of the parameters. Note that the name of the component is arbitrary. The fact that it is called the same as the routes in the server is a coincidence. It also helps us keep track of which UI components on the client are related to the server resources. On your own, create links that invoke the multiply and divide routes you implemented earlier. Import the new component in your Lab 5 component and confirm that clicking the links generates the expected response. Use Tailwind inputs and colored buttons — the PDF used Bootstrap FormControl and btn-primary; the live sample uses rounded borders and bg-blue-600.

const HTTP_SERVER = httpServer();
const [a, setA] = useState("34");
const [b, setB] = useState("23");
<a id="wd-path-parameter-add"
  href={`${HTTP_SERVER}/lab5/add/${a}/${b}`}>
  Add {a} + {b}
</a>

React applications can also send data to servers by encoding it as a query string after the question mark character (?) at the end of a URL. A query string consists of a list of name value pairs separated by the ampersand character (&) as shown below: /lab5/calculator?operation=add&a=2&b=4. In Lab5/QueryParameters.js, in your server application, create a route that can parse an operation and its parameters a and b. If the operation is add the route responds with the addition of the parameters. If the operation is subtract, the route responds with the subtraction of the parameters. On your own, also handle operations multiply and divide. Import QueryParameters.js in Lab5/index.js and pass it a reference of app. Read the values from req.query — they arrive as strings, the same as path parameters — and send the result as a string so the browser does not treat it as a status code.

export default function QueryParameters(app) {
  const calculator = (req, res) => {
    const { a, b, operation } = req.query;
    let result = 0;
    switch (operation) {
      case "add":
        result = parseInt(a) + parseInt(b);
        break;
      case "subtract":
        result = parseInt(a) - parseInt(b);
        break;
      default:
        result = "Invalid operation";
    }
    res.send(result.toString());
  };
  app.get("/lab5/calculator", calculator);
}

In a new component QueryParameters.tsx, in your React Web application, create hyperlinks to test the new route. You will need a constant initialized to the environment variable through httpServer(). Confirm the following hyperlinks work as expected: add with 34 and 23 should respond 57; subtract should respond 11. Create additional links to test multiply and divide, using IDs starting with wd-query-parameter-.

<a id="wd-query-parameter-add"
  href={`${HTTP_SERVER}/lab5/calculator?operation=add&a=${a}&b=${b}`}>
  Add {a} + {b}
</a>

On your own, remember to implement multiply and divide requests on the client and server that demonstrate multiplying and dividing numbers encoded in the request's path. Now implement the same operations again, multiply and divide on the server and client, but multiplying and dividing parameters encoded in the query string. Both pairs of links should appear in the LiveDemos above once you finish — path IDs start with wd-path-parameter-, query IDs with wd-query-parameter-.

In your React project, create a WorkingWithObjects component to test the new route as shown below. Import it in Lab 5 and confirm that http://localhost:4000/lab5/assignment responds with the assignment object. The Get Assignment hyperlink navigates the browser to that URL so you can see the raw JSON — later sections will fetch the same object without leaving the page.

<h4>Retrieving Objects</h4>
<a id="wd-retrieve-assignments"
  className="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
  href={`${HTTP_SERVER}/lab5/assignment`}>
  Get Assignment
</a>

We can retrieve individual properties in an object such as the title shown below. Add a getAssignmentTitle handler that responds with only assignment.title, mapped to /lab5/assignment/title. Confirm that http://localhost:4000/lab5/assignment/title retrieves the assignment's title. In WorkingWithObjects, add a link that retrieves the title as shown below. Confirm that clicking the link retrieves the assignment's title as a JSON string.

const getAssignmentTitle = (req, res) => {
  res.json(assignment.title);
};
app.get("/lab5/assignment/title", getAssignmentTitle);
app.get("/lab5/assignment", getAssignment);

<h4>Retrieving Properties</h4>
<a id="wd-retrieve-assignment-title"
  href={`${HTTP_SERVER}/lab5/assignment/title`}>
  Get Title
</a>

We can also use routes to modify objects or individual properties as shown below. The route retrieves the new title from the path and updates the assignment object's title property. Changes to objects in the server persist as long as the server is running; rebooting the server resets the object state to the constants at the top of the file.

const setAssignmentTitle = (req, res) => {
  const { newTitle } = req.params;
  assignment.title = newTitle;
  res.json(assignment);
};
app.get("/lab5/assignment/title/:newTitle", setAssignmentTitle);

In the WorkingWithObjects component in your React project, create an assignment state variable to test editing the assignment object on the server. Create an input field where we can type the new assignment title, and a link that invokes the route that updates the title. Eventually we will fetch this initial data from the server and populate the form with the remote data so we can modify it here in the UI; for now the seed matches the server object so the first click is a no-op until you type. Confirm that you can change the assignment's title: type a new string, click Update Title, then click Get Assignment and see the new title in the JSON.

const [assignment, setAssignment] = useState({
  id: 1, title: "NodeJS Assignment",
  description: "Create a NodeJS server with ExpressJS",
  due: "2021-10-10", completed: false, score: 0,
});
const ASSIGNMENT_API_URL = `${HTTP_SERVER}/lab5/assignment`;
<a id="wd-update-assignment-title"
  href={`${ASSIGNMENT_API_URL}/title/${assignment.title}`}>
  Update Title
</a>
<input id="wd-assignment-title" value={assignment.title}
  onChange={(e) => setAssignment({ ...assignment, title: e.target.value })} />

Now, on your own, create a module object with string properties id, name, description, and course. Feel free to use values of your choice. Create a route that responds with the module object, mapped to /lab5/module. In the UI, create a link labeled Get Module that retrieves the module object from the server. Confirm that clicking the link retrieves the module. Create another route mapped to /lab5/module/name that retrieves the name of the module created earlier. In the UI, create a hyperlink labeled Get Module Name that retrieves the name of the module object. Confirm that clicking the link retrieves the module's name.

On your own, in WorkingWithObjects.tsx, create a module state variable to test editing the module object on the server. Create an input field where we can type the new module name, and a link that invokes the route that updates the name. Confirm that you can change the module's name. Create routes and a corresponding UI that can modify the score and completed properties of the assignment object. In the React application, create an input field of type number where you can type the new score and an input field of type checkbox where you can select the completed property. Create a link that updates the score and another link that updates the completed property. For the module, create routes and UI to edit the module's description.

Let us first create the array data structure containing several todo objects. The most common integration between a client and server application is for a client application to retrieve all the instances of some collection. To illustrate this, create a route that retrieves the array of todo objects as shown below. Import the new route to Lab5/index.js. Point the browser to http://localhost:4000/lab5/todos and confirm the server responds with the array of todos.

let todos = [
  { id: 1, title: "Task 1", completed: false },
  { id: 2, title: "Task 2", completed: true },
  { id: 3, title: "Task 3", completed: false },
  { id: 4, title: "Task 4", completed: true },
];
export default function WorkingWithArrays(app) {
  const getTodos = (req, res) => {
    res.json(todos);
  };
  app.get("/lab5/todos", getTodos);
}

In a new React component, create a hyperlink to test retrieving all todo objects in the array from the client. Add the new component to the Lab 5 component and confirm that clicking the link retrieves the array.

const API = `${HTTP_SERVER}/lab5/todos`;
<a id="wd-retrieve-todos" href={API}>Get Todos</a>

Another common operation is to retrieve a particular item from an array by its primary key, e.g., its ID property. The convention is to encode the ID of the item of interest as a path parameter. Note that we could have chosen to encode the ID as a query parameter instead, but it is best practice to encode identifiers in the path instead. The example below parses the ID as a path parameter, finds the corresponding item, and responds with the item. Add a hyperlink to the React component to test retrieving an item from the array by its primary key. Confirm that you can type the ID in the UI and clicking the hyperlink retrieves the corresponding item.

const getTodoById = (req, res) => {
  const { id } = req.params;
  const todo = todos.find((t) => t.id === parseInt(id));
  res.json(todo);
};
app.get("/lab5/todos", getTodos);
app.get("/lab5/todos/:id", getTodoById);

const [todo, setTodo] = useState({ id: "1" });
<a id="wd-retrieve-todo-by-id" href={`${API}/${todo.id}`}>
  Get Todo by ID
</a>
<input id="wd-todo-id" value={todo.id}
  onChange={(e) => setTodo({ ...todo, id: e.target.value })} />

The convention for retrieving a particular item from a collection is to encode the item's ID as a path parameter, e.g., /todos/123. Another convention is that if the primary key is not provided, then the interpretation is that we want the entire collection of items, e.g., /todos. We can also want to retrieve items by some other criteria other than the item's ID such as the item's title or completed properties. The best practice in this case is to use query strings instead of path parameters when filtering items by properties other than the primary key, e.g., /todos?completed=true. The example below refactors /lab5/todos to handle the case when we want to filter the array by the completed query parameter. Add a hyperlink to the React component to test retrieving all completed todos.

const getTodos = (req, res) => {
  const { completed } = req.query;
  if (completed !== undefined) {
    const completedBool = completed === "true";
    res.json(todos.filter((t) => t.completed === completedBool));
    return;
  }
  res.json(todos);
};

<a id="wd-retrieve-completed-todos" href={`${API}?completed=true`}>
  Get Completed Todos
</a>

The examples we have seen so far have illustrated various read operations in our exploration of possible CRUD operations. Let us now take a look at the create operation. The example below demonstrates a route that creates a new item in the array and responds with the array now containing the new item. Note that it is implemented before the /lab5/todos/:id route, otherwise the :id path parameter would interpret the word create in /lab5/todos/create as an ID, which would certainly create an error trying to parse it as an integer. Also note that the new todo creates default values including a unique identifier field id based on a timestamp. Eventually primary keys will be handled by a database later in the course. Finally note that the response consists of the entire todos array, which is convenient for us for now, but a more common implementation would be to respond with only newTodo.

const createNewTodo = (req, res) => {
  const newTodo = {
    id: new Date().getTime(),
    title: "New Task",
    completed: false,
  };
  todos.push(newTodo);
  res.json(todos);
};
app.get("/lab5/todos/create", createNewTodo);
app.get("/lab5/todos/:id", getTodoById);

Add a Create Todo hyperlink to the WorkingWithArrays component to test the new route. Confirm that clicking the link creates the new item in the array — Get Todos afterwards should include New Task.

<a id="wd-create-todo" href={`${API}/create`}>Create Todo</a>

Next let us consider the delete operation in the CRUD family of operations. The convention is to encode the ID of the item to delete as a path parameter as shown below. We search for the item in the set of items and remove it. Typically we would respond with a status of success or failure, but for now we are responding with all the todos. To test the new route, create a link that encodes the todo's ID in a hyperlink to delete the corresponding item. We will use the todo state variable created earlier to type the ID of the item we want to remove. Confirm that you can type the ID of an item, click the hyperlink, and that the corresponding item is removed from the array.

const removeTodo = (req, res) => {
  const { id } = req.params;
  const todoIndex = todos.findIndex((t) => t.id === parseInt(id));
  todos.splice(todoIndex, 1);
  res.json(todos);
};
app.get("/lab5/todos/:id/delete", removeTodo);

<a id="wd-remove-todo" href={`${API}/${todo.id}/delete`}>
  Remove Todo with ID = {todo.id}
</a>

Finally let us consider the update operation in the CRUD family of operations. The convention is to encode the ID of the item to update as a path parameter as shown below. We search for the item in the set of items and update it. Typically we would respond with a status of success or failure, but for now we are responding with all the todos. Group the callback functions together towards the top of the routing file and the route declarations grouped towards the bottom of the file. To test the new route, add an input field to edit the title property and a link that encodes both the ID of the item and the new value of the title property as shown below.

const updateTodoTitle = (req, res) => {
  const { id, title } = req.params;
  const todo = todos.find((t) => t.id === parseInt(id));
  todo.title = title;
  res.json(todos);
};
app.get("/lab5/todos/:id/title/:title", updateTodoTitle);

<a href={`${API}/${todo.id}/title/${todo.title}`} id="wd-update-todo-title">
  Update Todo
</a>
<input value={todo.id} onChange={(e) => setTodo({ ...todo, id: e.target.value })} />
<input value={todo.title} onChange={(e) => setTodo({ ...todo, title: e.target.value })} />

Using the exercises so far as examples, implement routes and corresponding UI that allows editing completed and description properties of todo items identified by their ID. Create the routes below in the Node.js HTTP server project. In the WorkingWithArrays component, add a text input field to edit the description and a checkbox input field to edit the completed property. Create a link that updates the description of the todo item whose id is encoded in the URL and another link that updates the completed property of the todo item whose id is encoded in the URL.

• completed — /lab5/todos/:id/completed/:completed — responds with todos — test link Complete Todo ID = 1
• description — /lab5/todos/:id/description/:description — responds with todos — test link Describe Todo ID = 1

JavaScript Web applications, such as React applications, can communicate with server applications using a technology called AJAX or Asynchronous JavaScript and XML. Using AJAX, JavaScript applications can send and retrieve HTTP requests and responses asynchronously from client JavaScript applications to a remote HTTP server. Although XML was the original data format in AJAX, JSON has overtaken as the dominant data format in modern Web applications, but the AJAX label still applies nevertheless. Axios is a popular JavaScript library that React user interface applications can use to communicate with servers using AJAX. Install the library at the root of the React Web application project as shown below.

npm install axios

Let us use the same server routes implemented in earlier exercises, but instead of clicking on hyperlinks in the React client, we will use axios to programmatically invoke the URLs, giving us a chance to capture and handle the responses from the server and render the response in the user interface. The code below illustrates how to use the axios library to send an asynchronous request to the server and then capture the response in the user interface, without navigating to the URL, away from the current window. The fetchWelcomeOnClick function is tagged as async since it uses axios.get() to asynchronously send a request to the server, and returns the response from the server. Create the component below and import it in the Lab 5 component. Open the Web Dev Tools and confirm that clicking the Fetch Welcome button causes a CORS error the first time — that is expected until the next subsection.

import axios from "axios";
const HTTP_SERVER = httpServer();
const [welcomeOnClick, setWelcomeOnClick] = useState("");
const fetchWelcomeOnClick = async () => {
  const response = await axios.get(`${HTTP_SERVER}/lab5/welcome`);
  setWelcomeOnClick(response.data);
};
<button type="button" onClick={fetchWelcomeOnClick}>Fetch Welcome</button>
<p>Response from server: <b>{welcomeOnClick}</b></p>

Servers and browsers limit JavaScript programs to only be able to communicate with the servers from where they are downloaded. Since our React application is running locally from localhost:3000, then they would only be able to communicate back to a server running on localhost:3000, but our server is running on localhost:4000, so when our JavaScript components try to communicate with localhost:4000, the browser considers a different origin as a security risk, stops the communication, and throws a CORS exception. This course's Next.js UI is port 3000. The mismatch with Express on 4000 is the same problem any two-origin setup has.

CORS stands for Cross-Origin Resource Sharing, which governs the policies and mechanisms of how various resources can be shared across different domains or origins. Browsers enforce CORS policies by first checking with the server if they are okay with receiving requests from different domains. If the server responds affirmatively, then browsers let the requests go through, otherwise they will consider the attempt as a violation of CORS security policy, abort the request, and throw the exception. We can configure the CORS security policies by installing the cors Node.js library as shown below.

npm install cors

In index.js, import the cors library and configure it as shown below to allow all requests from any origin. We will narrow down this policy in a later section when sessions and cookies arrive. Make sure cors is used right after creating the app express instance and before the routes. Restart the server and refresh the React application. Confirm that the user interface is able to retrieve the Welcome to Lab 5 message from the server without errors.

import cors from "cors";
const app = express();
app.use(cors());
Lab5(app);

The current HttpClient implementation makes a request to the server from the component itself using the axios library. In addition to retrieving (or reading) data from the server, there will be other CRUD operations to create, update, and delete needed to interact with the server. Instead of implementing these in a React component, it is better to implement these in a reusable client library that can be shared across several user interface components. Move the axios.get() in HttpClient to a separate file called app/labs/lab5/client.ts as shown below.

import axios from "axios";
import { httpServer } from "@/app/lib/httpServer";
const HTTP_SERVER = httpServer();
export const fetchWelcomeMessage = async () => {
  const response = await axios.get(`${HTTP_SERVER}/lab5/welcome`);
  return response.data;
};

Now refactor HttpClient to use the client as shown below. Confirm that clicking on Fetch Welcome still works. Screens share one library so when the welcome URL or the helper changes, you edit one file.

import * as client from "../client";
const fetchWelcomeOnClick = async () => {
  const message = await client.fetchWelcomeMessage();
  setWelcomeOnClick(message);
};

The previous exercise fetched data from the server when the user requested it. Often times we need to retrieve data from the server when you first navigate to a screen or a component is first loaded and displayed. Use React's useEffect hook function as shown below to invoke fetchWelcomeOnLoad when a component or screen first loads. Now, when the HttpClient loads, the useEffect invokes fetchWelcomeOnLoad which retrieves the message from the server and sets the new welcomeOnLoad state variable. Confirm that if you refresh the screen, the welcome message appears without having to click on the Fetch Welcome button.

const [welcomeOnLoad, setWelcomeOnLoad] = useState("");
const fetchWelcomeOnLoad = async () => {
  const welcome = await client.fetchWelcomeMessage();
  setWelcomeOnLoad(welcome);
};
useEffect(() => {
  fetchWelcomeOnLoad();
}, []);

Let us now revisit the APIs that worked with the assignment object in WorkingWithObjects and create an asynchronous version. Let us add client functions to client.ts to fetch the assignment object from the server and update its title as shown below.

const ASSIGNMENT_API = `${HTTP_SERVER}/lab5/assignment`;
export const fetchAssignment = async () => {
  const response = await axios.get(ASSIGNMENT_API);
  return response.data;
};
export const updateTitle = async (title: string) => {
  const response = await axios.get(`${ASSIGNMENT_API}/title/${title}`);
  return response.data;
};

Then, in a new WorkingWithObjectsAsynchronously component, create a UI that fetches the assignment on load and then allows you to edit its title. Import the component in Lab 5 and confirm that the assignment is displayed on load. The form fields bind to local state so you can type; the pre shows the JSON snapshot so you can see every property the server sent. Now add a button to update the assignment's title. Change the assignment's title, click Update Title, refresh the screen, and confirm that the title has changed — the new title is still on the server.

const [assignment, setAssignment] = useState({});
const fetchAssignment = async () => {
  setAssignment(await client.fetchAssignment());
};
const updateTitle = async () => {
  setAssignment(await client.updateTitle(assignment.title));
};
useEffect(() => { fetchAssignment(); }, []);

{}

Now let us do the same thing to the arrays. Let us use axios so that we can manipulate remote arrays on the server from the user interface and update a user interface to reflect the changes in the remote array. We will implement several client functions in client.ts that use axios to communicate with the server and we will use them from a new component that will render the remote array in the user interface. The exercise below fetches the todos from the server and populates a todos state variable which we can then render as a list of todos when the component loads. Confirm that the todos render when the component first loads. Strike through completed titles so the list reads like a checklist. The finished LiveDemo for this component waits until §5.2.6.4, after POST, DELETE, PUT, and error handling are on the same screen.

const TODOS_API = `${HTTP_SERVER}/lab5/todos`;
export const fetchTodos = async () => {
  const response = await axios.get(TODOS_API);
  return response.data;
};

const [todos, setTodos] = useState([]);
const fetchTodos = async () => {
  setTodos(await client.fetchTodos());
};
useEffect(() => { fetchTodos(); }, []);
{todos.map((todo) => (
  <li key={todo.id}>
    <input type="checkbox" defaultChecked={todo.completed} />
    <span className={todo.completed ? "line-through" : ""}>{todo.title}</span>
  </li>
))}

In client.ts, add a removeTodo client function that sends a delete request to the server. The server will respond with an array with the surviving todos. In the WorkingWithArraysAsynchronously component, add remove buttons to each of the todos that invoke a new removeTodo function that uses the client to send an asynchronous delete request to the server and updates the todos state variable with the surviving todos. Use a trashcan icon to represent the remove button. Confirm that clicking on the new remove buttons actually removes the corresponding todo.

export const removeTodo = async (todo: { id: number }) => {
  const response = await axios.get(`${TODOS_API}/${todo.id}/delete`);
  return response.data;
};

const removeTodo = async (todo) => {
  setTodos(await client.removeTodo(todo));
};
<FaTrash onClick={() => removeTodo(todo)} id="wd-remove-todo"
  className="cursor-pointer text-red-600" />

A previous exercise implemented a server route to create new todo items. In the React project client.ts implement a createNewTodo client function that requests creating a new todo item from the server as shown below. In the WorkingWithArraysAsynchronously component, add a + button icon to invoke the createNewTodo client function and update the todos state variable with the todos from the server. Confirm that clicking the + button icon actually creates a new todo.

export const createNewTodo = async () => {
  const response = await axios.get(`${TODOS_API}/create`);
  return response.data;
};

const createNewTodo = async () => {
  setTodos(await client.createNewTodo());
};
<FaPlusCircle onClick={createNewTodo} id="wd-create-todo"
  className="cursor-pointer text-green-600" />

To illustrate using the HTTP POST method, let us re-implement the route that creates new todos as shown below. The HTTP POST method takes the role of the verb meaning create. Add the new app.post implementation. Do not remove the old GET version so we do not break the other lab exercises. Note how the new implementation grabs the posted JSON data from req.body and uses it to define newTodo. Also note that this version does not respond with the entire todos array and instead only responds with the newly created todo object instance. This is more reasonable since arrays can potentially be large and it would be expensive to transfer such large data structures over a network, especially if the client UI already has most of this data already displayed.

const postNewTodo = (req, res) => {
  const newTodo = { ...req.body, id: new Date().getTime() };
  todos.push(newTodo);
  res.json(newTodo);
};
app.get("/lab5/todos/create", createNewTodo);
app.post("/lab5/todos", postNewTodo);

Back in the user interface, add a new postNewTodo client function in client.ts that posts new todo objects to the server. Note the second argument in the axios.post() method containing the new todo object instance sent to the server. The response this time contains the todo instance added to the todos array in the server instead of all the todos on the server. In the WorkingWithArraysAsynchronously component, create a new + button icon to invoke the new postNewTodo client function to send a new todo object to the server containing a default title and completed properties. Append the new todo object created on the server to the local todos state variable to update the user interface with the new todo. Color the new + button icon a different color so it is distinguishable from the createNewTodo button. Confirm that you can add new items to the array when you click on the new + button icon.

export const postNewTodo = async (todo: { title: string; completed: boolean }) => {
  const response = await axios.post(TODOS_API, todo);
  return response.data;
};

const postNewTodo = async () => {
  const newTodo = await client.postNewTodo({
    title: "New Posted Todo",
    completed: false,
  });
  setTodos([...todos, newTodo]);
};
<FaPlusCircle onClick={postNewTodo} id="wd-post-todo"
  className="cursor-pointer text-blue-600" />

Now that we have axios we can implement a better version of the remove operation. The current removeTodo implementation uses the HTTP GET method to request the server to remove data. The HTTP DELETE method is specifically suited for removing data from remote servers. In the server project, implement a better version of the delete operation as shown below. The new implementation uses the HTTP DELETE method declared in app.delete() which is distinct from app.get() for which we do not need the trailing /delete at the end of the URL. Removing the element from the array is the same either way. Although we could again respond with the entire array of surviving todos, it is better to just respond with a success status and let the user interface update its state variable. This reduces unnecessary data communication between the client and server.

const deleteTodo = (req, res) => {
  const { id } = req.params;
  const todoIndex = todos.findIndex((t) => t.id === parseInt(id));
  todos.splice(todoIndex, 1);
  res.sendStatus(200);
};
app.delete("/lab5/todos/:id", deleteTodo);
app.get("/lab5/todos/:id/delete", removeTodo);

In the React project create a new client function called deleteTodo. Note how it is implemented using axios.delete instead of axios.get so that it matches the server's app.delete as well as the URL format without the trailing /delete. In the user interface component, add another delete button to try this new deleteTodo client function, but use a different icon, say an X so as to not confuse it with the trash. Note that the new implementation ignores the response from the server and instead filters the removed todo from the local state variable. This is fine for now, but the operation is too optimistic assuming the server successfully deleted the item from the array and updating the user interface without confirmation. Later we will deal with errors from the server to make sure the local state variable in the user interface is in synch with the remote array on the server.

export const deleteTodo = async (todo: { id: number }) => {
  const response = await axios.delete(`${TODOS_API}/${todo.id}`);
  return response.data;
};

const deleteTodo = async (todo) => {
  await client.deleteTodo(todo);
  setTodos(todos.filter((t) => t.id !== todo.id));
};
<TiDelete onClick={() => deleteTodo(todo)} id="wd-delete-todo"
  className="cursor-pointer text-2xl text-red-600" />

Use HTTP PUT to reimplement the route that updates an item in an array as shown below. The route replaces the todo item whose ID matches the id path parameter with a combination of the original todo object and properties in the req.body. This overrides any properties in the original todo object with matching properties in the request body. Note that this new implementation does not respond with the todos array, but instead responds with a simple OK status code of 200. This is more reasonable since there is no need to respond with an entire array since the user interface already has the array cached in the browser and it can just update the item in the todos state variable.

const updateTodo = (req, res) => {
  const { id } = req.params;
  todos = todos.map((t) => {
    if (t.id === parseInt(id)) {
      return { ...t, ...req.body };
    }
    return t;
  });
  res.sendStatus(200);
};
app.put("/lab5/todos/:id", updateTodo);

Back in the user interface, in client.ts add a new updateTodo function that puts updates to the server. Note the second argument in the axios.put() method containing the updated todo object instance sent to the server. The response contains a status. In the WorkingWithArraysAsynchronously component, add an input field that shows up when you click a new pencil icon by setting the todo's editing property to true. Pressing the Enter key sets the todo's editing property to false, and shows the updated title again. Add an onChange attribute to the completed checkbox so that it updates the corresponding property of the todo object. Confirm you can edit the title and completed properties of the todos, and that the changes persist after refreshing the page.

export const updateTodo = async (todo: { id: number }) => {
  const response = await axios.put(`${TODOS_API}/${todo.id}`, todo);
  return response.data;
};

const editTodo = (todo) => {
  setTodos(todos.map((t) => (t.id === todo.id ? { ...todo, editing: true } : t)));
};
const updateTodo = async (todo) => {
  await client.updateTodo(todo);
  setTodos(todos.map((t) => (t.id === todo.id ? todo : t)));
};
<FaPencilAlt onClick={() => editTodo(todo)} className="cursor-pointer text-blue-600" />
<input type="checkbox" checked={todo.completed}
  onChange={(e) => updateTodo({ ...todo, completed: e.target.checked })} />

The exercises so far have been very optimistic when interacting with the server, but it is good practice to handle edge cases and the unforeseen. In this section we are going to add error handling to some of the routes and user interface. For instance, the exercise below throws exceptions if the items being deleted or updated do not actually exist. Errors are reported by the server as status codes, where 404 is the infamous NOT FOUND error. Additionally a JSON object can be sent back as part of the response that can be used by user interfaces to better inform the user of what went wrong.

const deleteTodo = (req, res) => {
  const { id } = req.params;
  const todoIndex = todos.findIndex((t) => t.id === parseInt(id));
  if (todoIndex === -1) {
    res.status(404).json({ message: `Unable to delete Todo with ID ${id}` });
    return;
  }
  todos.splice(todoIndex, 1);
  res.sendStatus(200);
};
const updateTodo = (req, res) => {
  const { id } = req.params;
  const todoIndex = todos.findIndex((t) => t.id === parseInt(id));
  if (todoIndex === -1) {
    res.status(404).json({ message: `Unable to update Todo with ID ${id}` });
    return;
  }
  todos = todos.map((t) => (t.id === parseInt(id) ? { ...t, ...req.body } : t));
  res.sendStatus(200);
};

In the user interface we can catch the errors by wrapping the request in a try/catch clause as shown below. If the request fails with an HTTP error response, then the body of the try block is aborted and the body of the catch clause executes instead. The exercise below declares an errorMessage state variable that we populate with the error from the server if an error occurs. The error is rendered as a red alert box using Tailwind — the PDF used Bootstrap alert-danger; the live sample uses bg-red-100 and text-red-800. To test, remove an item using the http://localhost:4000/lab5/todos/:id/delete GET route and then try to update or delete the same item using the user interface. Confirm you get an error if you try to delete or update a todo that does not exist.

const [errorMessage, setErrorMessage] = useState(null);
const deleteTodo = async (todo) => {
  try {
    await client.deleteTodo(todo);
    setTodos(todos.filter((t) => t.id !== todo.id));
  } catch (error) {
    setErrorMessage(error.response.data.message);
  }
};
{errorMessage && (
  <p id="wd-todo-error-message" className="rounded bg-red-100 px-3 py-2 text-red-800">
    {errorMessage}
  </p>
)}

DAOs provide an interface between an application and low-level database access, offering a high-level API to the rest of the application while abstracting the details and idiosyncrasies of using a particular database vendor. Similarly, routes create an interface between the HTTP network layer and the JavaScript object and function layer by transforming a stream of bits from a network connection request into a set of objects, maps, and function event handlers that are part of the client/server architecture in a multi-tiered application.

The Node.js server uses routes to integrate with the user interface and implements DAOs to communicate with the Database. The server functions between these two layers, which is why it is often called the middle tier in a multi-tiered application. The following routes expose the database operations through a RESTful API, and the implementation of each function will be covered in the following sections. This chapter uses the Database component implemented in Kambaz/Database/index.js. Later chapters will refactor this by using an actual database.

import UsersDao from "./dao.js";
export default function UserRoutes(app, db) {
  const dao = UsersDao(db);
  const signup = (req, res) => { };
  const signin = (req, res) => { };
  const signout = (req, res) => { };
  const profile = (req, res) => { };
  app.post("/api/users/signup", signup);
  app.post("/api/users/signin", signin);
  app.post("/api/users/signout", signout);
  app.post("/api/users/profile", profile);
}

Import and configure the routes in index.js and pass a reference to the database to each of the route modules. Work after CORS, session, and express.json() are configured — §5.4.3.1 fills those in.

import express from "express";
import db from "./Kambaz/Database/index.js";
import UserRoutes from "./Kambaz/Users/routes.js";
const app = express();
UserRoutes(app, db);
app.listen(process.env.PORT || 4000);

Routes implement RESTful Web APIs that clients can use to integrate with server functionality. The signin route extracts properties username and password from the request's body and passes them to the findUserByCredentials function implemented by the DAO. The resulting user is stored in a server variable currentUser to remember the logged in user — §5.4.3 moves that value into the session so more than one browser can be signed in. The user is then sent to the client in the response. Later sections will add error handling in case the user is not found in the database.

const signin = (req, res) => {
  const { username, password } = req.body;
  currentUser = dao.findUserByCredentials(username, password);
  res.json(currentUser);
};
app.post("/api/users/signin", signin);

In the React user interface, under app/(kambaz)/account, implement the client shown below to integrate with the user routes implemented in the server. The client function signin posts a credentials object containing the username and password expected by the server. If the credentials are found, the response should contain the logged in user. Use httpServer() so the same helper from Lab 5 points at localhost or Render.

import axios from "axios";
import { httpServer } from "@/app/lib/httpServer";

const axiosWithCredentials = axios.create({ withCredentials: true });
const USERS_API = `${httpServer()}/api/users`;

export const signin = async (credentials: { username: string; password: string }) => {
  const response = await axiosWithCredentials.post(`${USERS_API}/signin`, credentials);
  return response.data;
};

Implement a Sign in screen users can use to authenticate with the application. The component declares a state variable credentials to edit the username and password. Clicking the Sign in button posts the credentials to the server using the client.signin function. When the server responds successfully, the currently logged in user is stored with setCurrentUser from AccountContext and you navigate to the Profile screen implemented in a later section. The PDF called dispatch(setCurrentUser(user)); this book's account state is Context, not a Redux slice.

const { setCurrentUser } = useAccountContext();
const signin = async () => {
  const user = await client.signin(credentials);
  if (!user) return;
  setCurrentUser(user);
  router.push("/dashboard");
};

The DAO implements functions createUser and findUserByUsername. The createUser DAO function accepts a user object from the user interface and then inserts the user into the Database. The findUserByUsername accepts a username from the user interface and finds the user with the matching username. Those two functions implement the sign up operation for users to sign up to the application.

The signup route expects a user object with at least the properties username and password. The DAO's findUserByUsername is called to check if a user with that username already exists. If such a user is found a 400 error status is returned along with an error message for display in the user interface. If the username is not already taken the user is inserted into the database and stored as the current user. The response includes the newly created user. The signup route is mapped to the /api/users/signup path.

const signup = (req, res) => {
  const user = dao.findUserByUsername(req.body.username);
  if (user) {
    res.status(400).json({ message: "Username already in use" });
    return;
  }
  currentUser = dao.createUser(req.body);
  res.json(currentUser);
};
app.post("/api/users/signup", signup);

Meanwhile in the React user interface, implement a signup client that posts the new user to the Web API as shown below. If not already done so, implement a Sign up screen component that users can use to type their username and password, and post the credentials to the server for signing up. If the sign up is successful, store the user with setCurrentUser and navigate to the Profile screen. In the Sign in screen, create a Link to navigate to the Sign up screen. Confirm that you can sign up with a new username and password. Confirm it navigates to profile and shows the new user.

export const signup = async (user: { username: string; password: string }) => {
  const response = await axiosWithCredentials.post(`${USERS_API}/signup`, user);
  return response.data;
};

const { setCurrentUser } = useAccountContext();
const signup = async () => {
  const current = await client.signup(user);
  setCurrentUser(current);
  router.push("/account/profile");
};

In the User's DAO, implement updateUser to update a single document by first identifying it by its primary key, and then updating the matching fields in the user parameter. In the User's routes, make the DAO function available as a RESTful Web API. Map a route that accepts a user's primary key as a path parameter, passes the ID and request body to the DAO function, and responds with the updated user so the client can refresh Context.

const updateUser = (req, res) => {
  const userId = req.params.userId;
  const userUpdates = req.body;
  dao.updateUser(userId, userUpdates);
  currentUser = dao.findUserById(userId);
  res.json(currentUser);
};
app.put("/api/users/:userId", updateUser);

In the React client application, add client function updateUser to send user updates to the server to be saved. In the Profile screen implement the updateProfile event handler to update the profile on the server and then setCurrentUser with the response. Add an Update button that invokes the new handler. Confirm that the profile changed by logging out and then logging back in.

export const updateUser = async (user: { _id: string }) => {
  const response = await axiosWithCredentials.put(`${USERS_API}/${user._id}`, user);
  return response.data;
};

When a successful sign in occurs, the account information is stored in a server variable called currentUser. The variable retains the signed-in user information as long as the server is running. The Sign in screen copies that user from the server into AccountContext and then navigates to the Profile screen. If the browser reloads, the Context state is cleared and the user appears logged out. To address this, the browser must check whether someone is already logged in on the server and, if so, update the copy in Context. Create a route on the server to provide access to currentUser as shown below.

const profile = (req, res) => {
  res.json(currentUser);
};
app.post("/api/users/profile", profile);

Then in the React Web app, implement a function to retrieve the account information from that server route. Create a Session-style fetch that runs when Kambaz first loads — call client.profile(), then setCurrentUser from AccountContext. The PDF wrapped the app in a Redux Session component that dispatched setCurrentUser; this book already wraps Kambaz with AccountProvider in app/(kambaz)/layout.tsx. You can fetch the profile from a small client component under that provider, or from Profile itself on mount. Confirm that it works by signing in, and then from the Profile screen, reload the browser. Make sure the user information still renders correctly once sessions are configured in §5.4.3.

export const profile = async () => {
  const response = await axiosWithCredentials.post(`${USERS_API}/profile`);
  return response.data;
};

Implement a route for users to sign out that resets the currentUser to null on the server. In the React user interface, add a client function that can post to the signout route. In the Profile screen refactor the signout function to invoke the signout client function, clear Context with setCurrentUser(null), and then navigate to the Sign in screen. Confirm that you can sign out and navigate to the Sign in screen.

const signout = (req, res) => {
  currentUser = null;
  res.sendStatus(200);
};
app.post("/api/users/signout", signout);

export const signout = async () => {
  const response = await axiosWithCredentials.post(`${USERS_API}/signout`);
  return response.data;
};

First, it is necessary to narrow down who is allowed to authenticate. Configure CORS to support cookies and restrict network access to come only from the React application. Install express-session and dotenv to maintain application sessions and read configurations from environment variables on the server.

npm install express-session
npm install dotenv

In a new .env file at the root of the Node project, declare the following environment variables. Do not commit that file — §5.5.1 already listed it in .gitignore.

SERVER_ENV=development
CLIENT_URL=http://localhost:3000
SERVER_URL=http://localhost:4000
SESSION_SECRET=super secret session phrase

In index.js, import the dotenv library to determine whether the application is running in the development environment, and configure the session as shown below. Make sure to configure sessions after configuring cors and before express.json() and the routes. In production set proxy, sameSite: "none", and secure cookies so the Vercel origin can send credentials to Render. The following configuration has been tested on Google Chrome and Apple Safari.

import "dotenv/config";
import session from "express-session";
const app = express();
app.use(cors({
  credentials: true,
  origin: process.env.CLIENT_URL || "http://localhost:3000",
}));
const sessionOptions = {
  secret: process.env.SESSION_SECRET || "kambaz",
  resave: false,
  saveUninitialized: false,
};
if (process.env.SERVER_ENV !== "development") {
  sessionOptions.proxy = true;
  sessionOptions.cookie = {
    sameSite: "none",
    secure: true,
    domain: process.env.SERVER_URL,
  };
}
app.use(session(sessionOptions));
app.use(express.json());

Store req.session.currentUser on signin and signup instead of a module-level variable. The signup route retrieves the username from the request body. If a user with that username already exists, an error is returned. Otherwise, create the new user and store it in the session's currentUser property to remember that this new user is now the currently logged-in user. An existing user can identify themselves by providing credentials. The signin route looks up the user by their credentials, stores it in the session, and responds with the user if they exist; otherwise it responds with a 401. If a user has already signed in, the current user can be retrieved from the session by using the profile route; if there is no current user, return 401. Users can be signed out by destroying the session. If a user updates their profile, then the session must be kept in synch.

const signin = (req, res) => {
  const { username, password } = req.body;
  const currentUser = dao.findUserByCredentials(username, password);
  if (currentUser) {
    req.session["currentUser"] = currentUser;
    res.json(currentUser);
  } else {
    res.status(401).json({ message: "Unable to login. Try again later." });
  }
};
const profile = (req, res) => {
  const currentUser = req.session["currentUser"];
  if (!currentUser) {
    res.sendStatus(401);
    return;
  }
  res.json(currentUser);
};
const signout = (req, res) => {
  req.session.destroy();
  res.sendStatus(200);
};

By default axios does not support cookies. To configure axios to include cookies in requests, use axios.create() to create an instance of the library that includes cookies for credentials as shown below. Then replace all occurrences of the axios library used for account and enrolled-course calls with this new version axiosWithCredentials.

import axios from "axios";
const axiosWithCredentials = axios.create({ withCredentials: true });
export const signin = async (credentials: { username: string; password: string }) => {
  const response = await axiosWithCredentials.post(`${USERS_API}/signin`, credentials);
  return response.data;
};
export const profile = async () => {
  const response = await axiosWithCredentials.post(`${USERS_API}/profile`);
  return response.data;
};

Every signed-in request — profile, signout, update user, and later /api/users/current/courses — must use that instance, or the session cookie never leaves the browser and Express will treat you as anonymous.

Now that the Database has been moved to the server, it must be made available to the React client application through a Web API. The exercises below make the courses accessible at http://localhost:4000/api/courses for the React user interface to integrate. First implement a DAO to retrieve all courses from the Database, then a route that uses that DAO.

import { v4 as uuidv4 } from "uuid";
export default function CoursesDao(db) {
  function findAllCourses() {
    return db.courses;
  }
  function findCoursesForEnrolledUser(userId) {
    const { courses, enrollments } = db;
    return courses.filter((course) =>
      enrollments.some(
        (enrollment) =>
          enrollment.user === userId && enrollment.course === course._id,
      ),
    );
  }
  return { findAllCourses, findCoursesForEnrolledUser };
}

import CoursesDao from "./dao.js";
export default function CourseRoutes(app, db) {
  const dao = CoursesDao(db);
  const findAllCourses = (req, res) => {
    res.json(dao.findAllCourses());
  };
  const findCoursesForEnrolledUser = (req, res) => {
    let { userId } = req.params;
    if (userId === "current") {
      const currentUser = req.session["currentUser"];
      if (!currentUser) {
        res.sendStatus(401);
        return;
      }
      userId = currentUser._id;
    }
    res.json(dao.findCoursesForEnrolledUser(userId));
  };
  app.get("/api/courses", findAllCourses);
  app.get("/api/users/:userId/courses", findCoursesForEnrolledUser);
}

In index.js import the new routes and pass a reference to the express module. Make sure to work AFTER the cors, session, and json use statements. Point your browser to http://localhost:4000/api/courses and confirm the server responds with an array of courses. Since the Dashboard displays courses a user is enrolled in, implement findCoursesForEnrolledUser as shown above. When userId === "current" the route reads the session and returns enrolled courses only — 401 if nobody is signed in.

Back in the user interface, create app/(kambaz)/courses/client.ts that implements all the course-related communication between the user interface and the server. Start with fetchAllCourses, then findMyCourses that retrieves the current user's courses using cookies. In the Dashboard use useEffect to fetch the courses from the server on component load. Use the currentUser from AccountContext as a dependency so that if a different user logs in, the courses will be reloaded from the server. Remove Database references from the user interface since we do not need them anymore. Also initialize the courses state variable as empty since we will not have the JSON file anymore. Also remove the filtering of courses by enrollments since the server is already doing that. Restart the server and user interface to confirm that the Dashboard renders the courses the current user is enrolled in. Sign in as different users and confirm only the courses the user is enrolled in display.

import axios from "axios";
import { httpServer } from "@/app/lib/httpServer";
const axiosWithCredentials = axios.create({ withCredentials: true });
const COURSES_API = `${httpServer()}/api/courses`;
const USERS_API = `${httpServer()}/api/users`;
export const fetchAllCourses = async () => {
  const { data } = await axios.get(COURSES_API);
  return data;
};
export const findMyCourses = async () => {
  const { data } = await axiosWithCredentials.get(`${USERS_API}/current/courses`);
  return data;
};

Implement a route that creates a new course and adds it to the Database. The new course is passed in the HTTP body from the client and is appended to the end of the courses array. The new course is given a new unique identifier and sent back to the client in the response. When a course is created, it needs to be associated with the creator. In Kambaz/Enrollments/dao.js, implement enrollUserInCourse to enroll, or associate, a user to a course. Creating a course posts to /api/users/current/courses and enrolls the current user.

function createCourse(course) {
  const newCourse = { ...course, _id: uuidv4() };
  db.courses = [...db.courses, newCourse];
  return newCourse;
}

function enrollUserInCourse(userId, courseId) {
  const { enrollments } = db;
  enrollments.push({ _id: uuidv4(), user: userId, course: courseId });
}

const createCourse = (req, res) => {
  const currentUser = req.session["currentUser"];
  const newCourse = dao.createCourse(req.body);
  enrollmentsDao.enrollUserInCourse(currentUser._id, newCourse._id);
  res.json(newCourse);
};
app.post("/api/users/current/courses", createCourse);

In the course client, add a createCourse function that posts a new course to the server and returns the brand new course. In the Dashboard, add an onAddCourse event handler that posts the new course and then reloads the list. Refactor the Add button to use that handler. Confirm that creating a new course updates the user interface with the added course.

export const createCourse = async (course: unknown) => {
  const { data } = await axiosWithCredentials.post(
    `${USERS_API}/current/courses`,
    course,
  );
  return data;
};

Implement a route that removes a course and all enrollments associated with the course. First implement a deleteCourse DAO function that filters the course by its ID and then filters out all enrollments by the course's ID. In the Course's routes, implement a delete route that parses the course's ID from the URL. Remember to group callback functions at the top and the route declarations at the bottom.

function deleteCourse(courseId) {
  const { courses, enrollments } = db;
  db.courses = courses.filter((course) => course._id !== courseId);
  db.enrollments = enrollments.filter((enrollment) => enrollment.course !== courseId);
}

In the course client, add a deleteCourse function that deletes an existing course from the server. In the Dashboard, implement onDeleteCourse to use the client and then drop that course from local state. Reimplement the Delete button to use the new handler. Confirm clicking Delete actually removes the course from the Dashboard.

export const deleteCourse = async (courseId: string) => {
  const { data } = await axios.delete(`${COURSES_API}/${courseId}`);
  return data;
};

In the Course's DAO, implement updateCourse to update a course in the Database. First look up the course by its ID and then apply the updates to the course. In the Course's routes, implement a PUT route that parses the id of the course as a path parameter and uses the updateCourse DAO function to update the corresponding course with the updates in the HTTP request body.

function updateCourse(courseId, courseUpdates) {
  const { courses } = db;
  const course = courses.find((course) => course._id === courseId);
  Object.assign(course, courseUpdates);
  return course;
}

In the course client, add an updateCourse function that PUTs an existing course. In the Dashboard, implement onUpdateCourse so that it uses the client and then swaps the old corresponding course with the new version in state. Refactor the Update button so that it uses the new handler. Confirm that clicking Update actually updates the course in the Dashboard. Fetch on load and after Add / Update / Delete so the list stays aligned with Express.

export const updateCourse = async (course: { _id: string }) => {
  const { data } = await axios.put(`${COURSES_API}/${course._id}`, course);
  return data;
};

Create a DAO for the Modules to implement module data access from the Database. Start by implementing findModulesForCourse to retrieve a course's modules by its ID. Create a new routes file for the Module with a route to retrieve the modules for a course by its ID encoded in the path. Parse the course ID from the path and then use the module's DAO. In index.js, import the new route file and pass it a reference to the app and db.

export default function ModulesDao(db) {
  function findModulesForCourse(courseId) {
    const { modules } = db;
    return modules.filter((module) => module.course === courseId);
  }
  return { findModulesForCourse };
}

import ModulesDao from "./dao.js";
export default function ModuleRoutes(app, db) {
  const dao = ModulesDao(db);
  const findModulesForCourse = (req, res) => {
    const { courseId } = req.params;
    res.json(dao.findModulesForCourse(courseId));
  };
  app.get("/api/courses/:courseId/modules", findModulesForCourse);
}

In the courses client, create findModulesForCourse to integrate the user interface with the server. In the Modules component, using a useEffect, invoke that client function and store the modules from the server. Remove the filter since modules are already filtered on the server. Confirm that navigating to a course populates the corresponding modules.

export const findModulesForCourse = async (courseId: string) => {
  const response = await axios.get(`${COURSES_API}/${courseId}/modules`);
  return response.data;
};

To create a new module in the Database, implement createModule in the Module's DAO. The function accepts the new module as a parameter, sets its primary key, and then appends the new module to the Database's module array. In the Module's routes, implement a POST Web API. Parse the course's ID from the path and the new module from the request's body. Set the new module's course property to the course's ID so that the module knows what course it belongs to. Respond with the new module.

function createModule(module) {
  const newModule = { ...module, _id: uuidv4() };
  db.modules = [...db.modules, newModule];
  return newModule;
}

const createModuleForCourse = (req, res) => {
  const { courseId } = req.params;
  const module = { ...req.body, course: courseId };
  const newModule = dao.createModule(module);
  res.json(newModule);
};
app.post("/api/courses/:courseId/modules", createModuleForCourse);

In the user interface, implement a createModuleForCourse client function that posts new modules to the server. Encode the course's ID in the URL so the server knows what course the module belongs to. In the Modules screen, implement an onCreateModuleForCourse event handler that uses that client and then appends the created module to state. Update ModulesControls so Add uses the new handler. Confirm that new modules are created for the current course.

export const createModuleForCourse = async (courseId: string, module: unknown) => {
  const response = await axios.post(`${COURSES_API}/${courseId}/modules`, module);
  return response.data;
};

In the Modules DAO, implement deleteModule to remove a module from the Database by its ID. In the Modules router file, implement a route that handles an HTTP DELETE to remove a module by its ID. Parse the module's ID from the path and use the DAO. In the courses client, implement deleteModule: pass it the ID of the module to be removed, encode it in a URL, and send it as an HTTP DELETE to the server.

function deleteModule(moduleId) {
  const { modules } = db;
  db.modules = modules.filter((module) => module._id !== moduleId);
}

const deleteModule = (req, res) => {
  const { moduleId } = req.params;
  dao.deleteModule(moduleId);
  res.sendStatus(200);
};
app.delete("/api/modules/:moduleId", deleteModule);

In the Modules screen, implement onRemoveModule to remove the module from the server and then filter it from state. In ModuleControlButtons, update the delete attribute to use the new handler. Confirm that clicking the trashcan of a module removes it. Refresh the screen to make sure that the module is permanently deleted while Express is running.

export const deleteModule = async (moduleId: string) => {
  const response = await axios.delete(`${MODULES_API}/${moduleId}`);
  return response.data;
};

In the Module's DAO, implement updateModule to update a module in the Database by its ID. First look up the module by its ID and then apply the updates. In the Module's routes file, implement an HTTP PUT request handler that parses the ID of the module from the URL and the module updates from the HTTP request body. In the client, encode the ID of the module in a URL and send the module updates in the body of an HTTP PUT. In the Modules screen, implement onUpdateModule. In the onKeyDown event handler, invoke that save when the user presses Enter. Confirm that updating the module in the user interface actually modifies the module on the server. Refresh the screen to make sure that the module has been modified.

function updateModule(moduleId, moduleUpdates) {
  const { modules } = db;
  const module = modules.find((module) => module._id === moduleId);
  Object.assign(module, moduleUpdates);
  return module;
}

export const updateModule = async (module: { _id: string }) => {
  const { data } = await axios.put(`${MODULES_API}/${module._id}`, module);
  return data;
};