33.Displaying list of tasks

In this chapter we will send the list of tasks in JSON format from the backend so that the frontend could display all those tasks.

Features

These are the basic requirements of this feature:

A dashboard which is also the home page of our application.
An unordered list of all tasks which will be displayed on the application home page.

Technical design

To implement this feature we need to introduce the following changes:

On the backend

Add an index action in the TasksController which will respond with a JSON of all tasks.

On the frontend

Add an API for fetching the list of tasks from the backend.
Dashboard component will call the API to fetch the tasks list and pass this list as a prop to the reusable Table component which we had already created.
Add a route in the App component to render the Dashboard.

Preparing to display list of tasks

First, let's create a file that contains the APIs for listing tasks. To do so, run the following command:

In tasks.js, paste the following content.

Displaying list of tasks

Now let's try to display list of tasks from the database. We will create a Dashboard component which will render the Table component. To do so, run the following command:

Inside index.jsx, paste the following contents:

Now, we have created a Dashboard which will call the fetchTasks API and store the list of tasks fetched from the database in its state. It will pass down the lists of tasks to the Table component which will render a list of all tasks from our database.

Finally, let's create a React route to render our Dashboard component.

To do so, add the following lines to App.jsx:

Next let's update our NavBar component so that on clicking the Todos navitem, we get redirected to /dashboard:

Update the index action of TasksController, to send JSON response with the tasks:

Now visit URL http://localhost:3000/dashboard so that you can see all the tasks in the browser.

Now let's commit these changes:

Previous Next