Displaying list of tasks

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:

1touch app/javascript/src/apis/tasks.js

Inside tasks.js, paste the following

1import axios from "axios";
2
3const list = () => axios.get("/tasks");
4
5const tasksApi = {
6  list,
7};
8
9export default tasksApi;

First, create a ListTasks component. This component will be the parent component which displays the list of tasks. We can make use of our reusable components like Table over here. Run the following command:

1touch app/javascript/src/components/Tasks/ListTasks.jsx

Inside ListTasks.jsx paste the following content:

1import React from "react";
2import Table from "./Table";
3
4const ListTasks = ({ data }) => {
5  return <Table data={data} />;
6};
7
8export default ListTasks;

Displaying list of tasks

Now let's try to display list of tasks from the database. To display a list of tasks, we will first create a Dashboard component. To do so, run the following command

1mkdir -p app/javascript/src/components/Dashboard/
2touch app/javascript/src/components/Dashboard/index.jsx

At BigBinary we prefer to use ramda library(over lodash) for most of the javascript operations since it's a well maintained, functional and lightweight library with out-of-the-box methods to do many operations without us having to reinvent it. In general when checking whether a variable is null/empty etc, use isNil/isEmpty from ramda.

Install ramda first:

1yarn add ramda

Inside index.jsx, paste the following contents

1import React, { useState, useEffect } from "react";
2import { isNil, isEmpty, either } from "ramda";
3
4import Container from "components/Container";
5import ListTasks from "components/Tasks/ListTasks";
6import PageLoader from "components/PageLoader";
7import tasksApi from "apis/tasks";
8
9const Dashboard = ({ history }) => {
10  const [tasks, setTasks] = useState([]);
11  const [loading, setLoading] = useState(true);
12
13  const fetchTasks = async () => {
14    try {
15      const response = await tasksApi.list();
16      setTasks(response.data.tasks);
17      setLoading(false);
18    } catch (error) {
19      logger.error(error);
20      setLoading(false);
21    }
22  };
23
24  useEffect(() => {
25    fetchTasks();
26  }, []);
27
28  if (loading) {
29    return (
30      <div className="w-screen h-screen">
31        <PageLoader />
32      </div>
33    );
34  }
35
36  if (!either(isNil, isEmpty)(tasks)) {
37    return (
38      <Container>
39        <ListTasks data={tasks} />
40      </Container>
41    );
42  }
43
44  return (
45    <Container>
46      <h1 className="text-xl leading-5 text-center">
47        You have no tasks assigned 😔
48      </h1>
49    </Container>
50  );
51};
52
53export default Dashboard;

Now, we have created a Dashboard and ListTasks component that is rendered inside the dashboard. Finally, let's create a React route to render our Dashboard component. To do so, add the following lines to App.jsx:

1import React from "react";
2import Dashboard from "components/Dashboard";
3
4import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
5const App = () => {
6  return (
7    <Router>
8      <Switch>
9        // <--- rest of the code if any ----->
10        <Route exact path="/dashboard" component={Dashboard} />
11      </Switch>
12    </Router>
13  );
14};
15
16export default App;

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

1git add -A
2git commit -m "Added ability to display list of tasks"

San Jose, USA

Pune, India

Displaying list of tasks

Preparing to display list of tasks

Displaying list of tasks